|
|
@@ -1,290 +1,491 @@
|
|
|
-<template>
|
|
|
- <div class="tabDiv">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="16">
|
|
|
- <!-- 时间，切换 -->
|
|
|
- <div class="filter-container">
|
|
|
- <span>
|
|
|
- <span>{{$t("runCenter.searchForm.shuoming")}}：</span>
|
|
|
- <el-radio-group v-model="cuurentDate" size="small">
|
|
|
- <el-radio-button label="week">{{$t("runCenter.common.week")}}</el-radio-button>
|
|
|
- <el-radio-button label="day">{{$t("runCenter.common.day")}}</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <!-- 主要内容 -->
|
|
|
- <el-table
|
|
|
- :key="tableKey"
|
|
|
- ref="table"
|
|
|
- v-loading="loading"
|
|
|
- :data="tableData.records"
|
|
|
- border
|
|
|
- fit
|
|
|
- row-key="id"
|
|
|
- class="noPaddingTable"
|
|
|
- style="width: 100%;"
|
|
|
- >
|
|
|
- <el-table-column :label='$t("runCenter.table.oderTask.baseInfo")' align="center" width="275px" fixed>
|
|
|
- <el-table-column :label='$t("common.serialNo")' width="55px" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div>
|
|
|
- {{scope.$index+(queryParams.current - 1) * queryParams.size + 1}}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name" :label='$t("runCenter.table.resourceView.name2")' :show-overflow-tooltip="true" width="100px"></el-table-column>
|
|
|
- <el-table-column prop="status" :label='$t("runCenter.table.resourceView.status")' align="center" width="120px">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <span v-if="row.status == 1">可用</span>
|
|
|
- <span v-if="row.status != 1">不可用</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column v-for="item in titleData" :key="item.id" :label="item.text" align="center">
|
|
|
- <el-table-column v-for="day in item.children" :key="day.id" :label="day.text" align="center" class-name="dateColumns">
|
|
|
- <el-table-column :prop="day.weekObj.field" :key="day.weekObj.id" :label='day.weekObj.text' width="30" class-name="dateColumns" align="center">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <div class="bgDivCell">
|
|
|
- <span class="taskSpan" v-for="o in Math.ceil(Math.random()*10)" :key="o"></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table-column>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <!-- 【分页】组件 -->
|
|
|
- <pagination
|
|
|
- v-show="tableData.total > 0"
|
|
|
- :limit.sync="queryParams.size"
|
|
|
- :page.sync="queryParams.current"
|
|
|
- :total="Number(tableData.total)"
|
|
|
- @pagination="fetch"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <!-- 【生产资源任务-统计图表】 -->
|
|
|
- <sched-resource-echarts ref="echarts"></sched-resource-echarts>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-
|
|
|
-<script>
|
|
|
-// 【分页】组件
|
|
|
-import Pagination from "@/components/Pagination"
|
|
|
-// 【生产资源任务-统计图表】组件
|
|
|
-import SchedResourceEcharts from "./SchedResourceEcharts"
|
|
|
-// 【仓库类型管理】-API
|
|
|
-import warehouseTypeMgrApi from "@/api/modelingCenter/warehouseTypeMgr"
|
|
|
-// 列表查询的共通参数
|
|
|
-import { initQueryParams } from '@/utils/commons'
|
|
|
-export default {
|
|
|
- name: 'PprogTask',
|
|
|
- components: { Pagination, SchedResourceEcharts },
|
|
|
- props: {
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- titleData: [], // table的动态表头数据
|
|
|
- qiyongStatus: [], //状态
|
|
|
- loading: false,
|
|
|
- tableKey: 0,
|
|
|
- cuurentDate: 'week',
|
|
|
- queryParams: initQueryParams({}),
|
|
|
- tableData: {
|
|
|
- total: 0
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
|
|
|
- /*created() {
|
|
|
- // 加载表头数据
|
|
|
- this.creatTestData()
|
|
|
- // 加载列表数据
|
|
|
- this.fetch()
|
|
|
- },*/
|
|
|
- // 每次进入，都加载
|
|
|
- activated(){
|
|
|
- // 加载表头数据
|
|
|
- this.creatTestData()
|
|
|
- // 加载列表数据
|
|
|
- this.fetch()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 生产表头数据-函数
|
|
|
- creatTestData(){
|
|
|
- /*this.titleData = [
|
|
|
- {id: '100', text: '2020-10',
|
|
|
- children: [
|
|
|
- {id: '10001' text: '1', weekObj: {id: '100001', field: 'week', text: '日'}},
|
|
|
- {id: '10002', text: '2', weekObj: {id: '100002', field: 'week2', text: '一'}},
|
|
|
- {id: '10003', text: '3', weekObj: {id: '100003', field: 'week3', text: '二'}},
|
|
|
- {id: '10004', text: '4', weekObj: {id: '100004', field: 'week4', text: '三'}},
|
|
|
- {id: '10005', text: '5', weekObj: {id: '100005', field: 'week5', text: '四'}},
|
|
|
- {id: '10006', text: '6', weekObj: {id: '100006', field: 'week6', text: '五'}},
|
|
|
- {id: '10007', text: '7', weekObj: {id: '100007', field: 'week7', text: '六'}},
|
|
|
- {id: '10008', text: '8', weekObj: {id: '100008', field: 'week8', text: '一'}},
|
|
|
- {id: '10009', text: '9', weekObj: {id: '100009', field: 'week9', text: '二'}},
|
|
|
- {id: '100010', text: '10', weekObj: {id: '1000010', field: 'week10', text: '三'}},
|
|
|
- {id: '100011', text: '11', weekObj: {id: '1000011', field: 'week11', text: '四'}},
|
|
|
- {id: '100012', text: '12', weekObj: {id: '1000012', field: 'week12', text: '五'}}
|
|
|
- ]
|
|
|
- },
|
|
|
- {id: '102', text: '2020-11',
|
|
|
- children: [
|
|
|
- {id: '10201' text: '1', weekObj: {id: '102001', field: 'week', text: '日'}},
|
|
|
- {id: '10202', text: '2', weekObj: {id: '102002', field: 'week2', text: '一'}},
|
|
|
- {id: '10203', text: '3', weekObj: {id: '102003', field: 'week3', text: '二'}},
|
|
|
- {id: '10204', text: '4', weekObj: {id: '102004', field: 'week4', text: '三'}},
|
|
|
- {id: '10205', text: '5', weekObj: {id: '102005', field: 'week5', text: '四'}},
|
|
|
- {id: '10206', text: '6', weekObj: {id: '102006', field: 'week6', text: '五'}},
|
|
|
- {id: '10207', text: '7', weekObj: {id: '102007', field: 'week7', text: '六'}},
|
|
|
- {id: '10208', text: '8', weekObj: {id: '102008', field: 'week8', text: '一'}},
|
|
|
- {id: '10209', text: '9', weekObj: {id: '102009', field: 'week9', text: '二'}},
|
|
|
- {id: '102010', text: '10', weekObj: {id: '1020010', field: 'week10', text: '三'}},
|
|
|
- {id: '102011', text: '11', weekObj: {id: '1020011', field: 'week11', text: '四'}},
|
|
|
- {id: '102012', text: '12', weekObj: {id: '1020012', field: 'week12', text: '五'}}
|
|
|
- ]
|
|
|
- },
|
|
|
- {id: '103', text: '2020-12',
|
|
|
- children: [
|
|
|
- {id: '10301' text: '1', weekObj: {id: '103001', field: 'week', text: '日'}},
|
|
|
- {id: '10302', text: '2', weekObj: {id: '103002', field: 'week2', text: '一'}},
|
|
|
- {id: '10303', text: '3', weekObj: {id: '103003', field: 'week3', text: '二'}},
|
|
|
- {id: '10304', text: '4', weekObj: {id: '103004', field: 'week4', text: '三'}},
|
|
|
- {id: '10305', text: '5', weekObj: {id: '103005', field: 'week5', text: '四'}},
|
|
|
- {id: '10306', text: '6', weekObj: {id: '103006', field: 'week6', text: '五'}},
|
|
|
- {id: '10307', text: '7', weekObj: {id: '103007', field: 'week7', text: '六'}},
|
|
|
- {id: '10308', text: '8', weekObj: {id: '103008', field: 'week8', text: '一'}},
|
|
|
- {id: '10309', text: '9', weekObj: {id: '103009', field: 'week9', text: '二'}},
|
|
|
- {id: '103010', text: '10', weekObj: {id: '1030010', field: 'week10', text: '三'}},
|
|
|
- {id: '103011', text: '11', weekObj: {id: '1030011', field: 'week11', text: '四'}},
|
|
|
- {id: '103012', text: '12', weekObj: {id: '1030012', field: 'week12', text: '五'}}
|
|
|
- ]
|
|
|
- },
|
|
|
- ],*/
|
|
|
- // 生产30条数据
|
|
|
- let list = []
|
|
|
- for(let i = 0; i < 3; i++){
|
|
|
- list.push({
|
|
|
- id: '100' + i,
|
|
|
- text: "2020-1" + i,
|
|
|
- children: []
|
|
|
- })
|
|
|
- for(let j = 1; j < 25; j++){
|
|
|
- let week = ""
|
|
|
- if(j == 1 || j%7 == 0){
|
|
|
- week = "日"
|
|
|
- }
|
|
|
- if(j == 2 || j%7 == 1){
|
|
|
- week = "一"
|
|
|
- }
|
|
|
- if(j == 3 || j%7 == 2){
|
|
|
- week = "二"
|
|
|
- }
|
|
|
- if(j == 4 || j%7 == 3){
|
|
|
- week = "三"
|
|
|
- }
|
|
|
- if(j == 5 || j%7 == 4){
|
|
|
- week = "四"
|
|
|
- }
|
|
|
- if(j == 6 || j%7 == 5){
|
|
|
- week = "五"
|
|
|
- }
|
|
|
- if(j == 7 || j%7 == 6){
|
|
|
- week = "六"
|
|
|
- }
|
|
|
- list[i].children.push({
|
|
|
- id: '1000'+ j,
|
|
|
- text: ''+ j,
|
|
|
- weekObj: {
|
|
|
- id: '10000'+ j,
|
|
|
- field: 'week'+ j,
|
|
|
- text: week
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- // 赋值
|
|
|
- this.titleData = list
|
|
|
- console.log("表头数据：", this.titleData)
|
|
|
- },
|
|
|
- setTenant (val) {
|
|
|
- if(val){
|
|
|
- this.tenant = { ...val }
|
|
|
- }
|
|
|
- },
|
|
|
- // 当点击的时候，再加载，统计数据Echarts
|
|
|
- setEcharts(){
|
|
|
- // 初始化统计数据
|
|
|
- this.$refs.echarts.echartsInit()
|
|
|
- },
|
|
|
- fetch (params = {}) {
|
|
|
- this.loading = true
|
|
|
- if (this.queryParams.timeRange) {
|
|
|
- this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
|
|
|
- this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
|
|
|
- }
|
|
|
-
|
|
|
- this.queryParams.current = params.current ? params.current : this.queryParams.current
|
|
|
- this.queryParams.size = params.size ? params.size : this.queryParams.size
|
|
|
- warehouseTypeMgrApi.page(this.queryParams).then(response => {
|
|
|
- const res = response.data
|
|
|
- if (res.isSuccess) {
|
|
|
- this.tableData = res.data
|
|
|
- }
|
|
|
- // eslint-disable-next-line no-return-assign
|
|
|
- }).finally(() => this.loading = false)
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
- .el-table.noPaddingTable th, .el-table.noPaddingTable td{
|
|
|
- padding: 5px 0;
|
|
|
- }
|
|
|
- .el-table.noPaddingTable td.dateColumns{
|
|
|
- vertical-align: bottom;
|
|
|
- }
|
|
|
- .el-table .dateColumns .cell{
|
|
|
- padding: 0 3px;
|
|
|
- }
|
|
|
- .el-table--border td.dateColumns{
|
|
|
- border-right: 2px dotted #AAAAAA;
|
|
|
- }
|
|
|
-</style>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .tabDiv{
|
|
|
- margin: 10px;
|
|
|
- }
|
|
|
- .bgDivCell{
|
|
|
- width: 41px;
|
|
|
- max-height: 100px;
|
|
|
- overflow-y: scroll;
|
|
|
- }
|
|
|
- /*.srollDiv{
|
|
|
- width: 40px;
|
|
|
- height: 100%;
|
|
|
- overflow-y: scroll;
|
|
|
- }*/
|
|
|
- .taskSpan{
|
|
|
- display: block;
|
|
|
- background: #13ae58;
|
|
|
- width: 100%;
|
|
|
- height: 10px;
|
|
|
- margin: 2px 0;
|
|
|
- -moz-border-radius: 5px;
|
|
|
- -webkit-border-radius: 5px;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <div class="tabDiv">
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <!-- 时间，切换 -->
|
|
|
+ <div class="filter-container">
|
|
|
+ <span>
|
|
|
+ <span>{{$t("runCenter.searchForm.shuoming")}}：</span>
|
|
|
+ <el-radio-group v-model="cuurentDate" size="small">
|
|
|
+ <el-radio-button label="week">{{$t("runCenter.common.week")}}</el-radio-button>
|
|
|
+ <el-radio-button label="day">{{$t("runCenter.common.day")}}</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <!-- 主要内容 -->
|
|
|
+ <el-table
|
|
|
+ :key="tableKey"
|
|
|
+ ref="table"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableData.data"
|
|
|
+ fit
|
|
|
+ class="noPaddingTable"
|
|
|
+ style="width: 100%;"
|
|
|
+ >
|
|
|
+ <el-table-column label="基础信息" align="center" width="310px" fixed>
|
|
|
+ <!-- 序号 -->
|
|
|
+ <el-table-column :label='$t("common.serialNo")' width="50px" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{scope.$index+(queryParams.current - 1) * queryParams.size + 1}}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 编号 -->
|
|
|
+ <el-table-column prop="code" label='编号' :show-overflow-tooltip="true" width="100px"></el-table-column>
|
|
|
+ <!-- 生产资源名称 -->
|
|
|
+ <el-table-column prop="name" label='生产资源名称' :show-overflow-tooltip="true" width="160px"></el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in tableData.titleList"
|
|
|
+ class-name="timeJD"
|
|
|
+ :key="item.id"
|
|
|
+ :prop="item.field"
|
|
|
+ :label='item.text'
|
|
|
+ align="center"
|
|
|
+ width="120px"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div v-for="obj in jsuanTime(row, item.text)">
|
|
|
+ <!-- 背景色条（10个）-->
|
|
|
+ <div class="timeDom">
|
|
|
+ <template v-for="child in obj.child">
|
|
|
+ <div v-if="child.isFull" class="timeItem tiActive"></div>
|
|
|
+ <div v-else class="timeItem"></div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- 备注文字 -->
|
|
|
+ <el-tooltip class="item" :content="obj.bomDesc +' / '+ obj.procedureNo +' / '+ obj.planTime" effect="dark" placement="top-start">
|
|
|
+ <div class="timeItemDesc" :style="{left: obj.leftNums+'%'}">
|
|
|
+ <div>{{ obj.bomDesc ? obj.bomDesc : '' }}</div>
|
|
|
+ <div>{{ obj.procedureNo ? obj.procedureNo : '' }}</div>
|
|
|
+ <div>{{ obj.planTime ? obj.planTime : '' }}</div>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <!-- 中间虚线 -->
|
|
|
+ <div class="dashedDom"></div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 【分页】组件 -->
|
|
|
+ <pagination
|
|
|
+ v-show="tableData.count > 0"
|
|
|
+ :limit.sync="queryParams.size"
|
|
|
+ :page.sync="queryParams.current"
|
|
|
+ :total="Number(tableData.count)"
|
|
|
+ @pagination="fetch"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+// 【分页】组件
|
|
|
+import Pagination from "@/components/Pagination"
|
|
|
+// 【仓库类型管理】-API
|
|
|
+import warehouseTypeMgrApi from "@/api/modelingCenter/warehouseTypeMgr"
|
|
|
+// 【计划管理】-API
|
|
|
+import planMgrApi from "@/api/runManageCenter/planMgr"
|
|
|
+// 列表查询的共通参数
|
|
|
+import { initQueryParams } from '@/utils/commons'
|
|
|
+export default {
|
|
|
+ name: 'PprogTask',
|
|
|
+ components: { Pagination },
|
|
|
+ props: {
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ titleData: [], // table的动态表头数据
|
|
|
+ qiyongStatus: [], //状态
|
|
|
+ loading: false,
|
|
|
+ tableKey: 0,
|
|
|
+ cuurentDate: 'week',
|
|
|
+ queryParams: initQueryParams({}),
|
|
|
+ timeDomList: [], // 填充背景的时间数组
|
|
|
+ tableData: {
|
|
|
+ count: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
|
|
|
+ created() {
|
|
|
+ // 初始化，填充数据
|
|
|
+ this.initTimeDom();
|
|
|
+ },
|
|
|
+ // 每次进入，都加载
|
|
|
+ activated(){
|
|
|
+ // 初始化数据
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化数据
|
|
|
+ initData() {
|
|
|
+ // 加载列表数据
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化，填充数据
|
|
|
+ initTimeDom() {
|
|
|
+ for(let i = 0; i < 15; i++) {
|
|
|
+ this.timeDomList.push({
|
|
|
+ id: "WS"+ Math.random(), // 随机数据
|
|
|
+ isFull: false // 是否填充颜色，默认不填充
|
|
|
+ //planTime: '', // 计划时间
|
|
|
+ //procedureNo: '', // 工序编码
|
|
|
+ //bomDesc: '', // 零件的名称
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 生产表头数据-函数
|
|
|
+ creatTestData(){
|
|
|
+ /*this.titleData = [
|
|
|
+ {id: '100', text: '2020-10',
|
|
|
+ children: [
|
|
|
+ {id: '10001' text: '1', weekObj: {id: '100001', field: 'week', text: '日'}},
|
|
|
+ {id: '10002', text: '2', weekObj: {id: '100002', field: 'week2', text: '一'}},
|
|
|
+ {id: '10003', text: '3', weekObj: {id: '100003', field: 'week3', text: '二'}},
|
|
|
+ {id: '10004', text: '4', weekObj: {id: '100004', field: 'week4', text: '三'}},
|
|
|
+ {id: '10005', text: '5', weekObj: {id: '100005', field: 'week5', text: '四'}},
|
|
|
+ {id: '10006', text: '6', weekObj: {id: '100006', field: 'week6', text: '五'}},
|
|
|
+ {id: '10007', text: '7', weekObj: {id: '100007', field: 'week7', text: '六'}},
|
|
|
+ {id: '10008', text: '8', weekObj: {id: '100008', field: 'week8', text: '一'}},
|
|
|
+ {id: '10009', text: '9', weekObj: {id: '100009', field: 'week9', text: '二'}},
|
|
|
+ {id: '100010', text: '10', weekObj: {id: '1000010', field: 'week10', text: '三'}},
|
|
|
+ {id: '100011', text: '11', weekObj: {id: '1000011', field: 'week11', text: '四'}},
|
|
|
+ {id: '100012', text: '12', weekObj: {id: '1000012', field: 'week12', text: '五'}}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {id: '102', text: '2020-11',
|
|
|
+ children: [
|
|
|
+ {id: '10201' text: '1', weekObj: {id: '102001', field: 'week', text: '日'}},
|
|
|
+ {id: '10202', text: '2', weekObj: {id: '102002', field: 'week2', text: '一'}},
|
|
|
+ {id: '10203', text: '3', weekObj: {id: '102003', field: 'week3', text: '二'}},
|
|
|
+ {id: '10204', text: '4', weekObj: {id: '102004', field: 'week4', text: '三'}},
|
|
|
+ {id: '10205', text: '5', weekObj: {id: '102005', field: 'week5', text: '四'}},
|
|
|
+ {id: '10206', text: '6', weekObj: {id: '102006', field: 'week6', text: '五'}},
|
|
|
+ {id: '10207', text: '7', weekObj: {id: '102007', field: 'week7', text: '六'}},
|
|
|
+ {id: '10208', text: '8', weekObj: {id: '102008', field: 'week8', text: '一'}},
|
|
|
+ {id: '10209', text: '9', weekObj: {id: '102009', field: 'week9', text: '二'}},
|
|
|
+ {id: '102010', text: '10', weekObj: {id: '1020010', field: 'week10', text: '三'}},
|
|
|
+ {id: '102011', text: '11', weekObj: {id: '1020011', field: 'week11', text: '四'}},
|
|
|
+ {id: '102012', text: '12', weekObj: {id: '1020012', field: 'week12', text: '五'}}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {id: '103', text: '2020-12',
|
|
|
+ children: [
|
|
|
+ {id: '10301' text: '1', weekObj: {id: '103001', field: 'week', text: '日'}},
|
|
|
+ {id: '10302', text: '2', weekObj: {id: '103002', field: 'week2', text: '一'}},
|
|
|
+ {id: '10303', text: '3', weekObj: {id: '103003', field: 'week3', text: '二'}},
|
|
|
+ {id: '10304', text: '4', weekObj: {id: '103004', field: 'week4', text: '三'}},
|
|
|
+ {id: '10305', text: '5', weekObj: {id: '103005', field: 'week5', text: '四'}},
|
|
|
+ {id: '10306', text: '6', weekObj: {id: '103006', field: 'week6', text: '五'}},
|
|
|
+ {id: '10307', text: '7', weekObj: {id: '103007', field: 'week7', text: '六'}},
|
|
|
+ {id: '10308', text: '8', weekObj: {id: '103008', field: 'week8', text: '一'}},
|
|
|
+ {id: '10309', text: '9', weekObj: {id: '103009', field: 'week9', text: '二'}},
|
|
|
+ {id: '103010', text: '10', weekObj: {id: '1030010', field: 'week10', text: '三'}},
|
|
|
+ {id: '103011', text: '11', weekObj: {id: '1030011', field: 'week11', text: '四'}},
|
|
|
+ {id: '103012', text: '12', weekObj: {id: '1030012', field: 'week12', text: '五'}}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ],*/
|
|
|
+ // 生产30条数据
|
|
|
+ let list = []
|
|
|
+ for(let i = 0; i < 3; i++){
|
|
|
+ list.push({
|
|
|
+ id: '100' + i,
|
|
|
+ text: "2020-1" + i,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ for(let j = 1; j < 25; j++){
|
|
|
+ let week = ""
|
|
|
+ if(j == 1 || j%7 == 0){
|
|
|
+ week = "日"
|
|
|
+ }
|
|
|
+ if(j == 2 || j%7 == 1){
|
|
|
+ week = "一"
|
|
|
+ }
|
|
|
+ if(j == 3 || j%7 == 2){
|
|
|
+ week = "二"
|
|
|
+ }
|
|
|
+ if(j == 4 || j%7 == 3){
|
|
|
+ week = "三"
|
|
|
+ }
|
|
|
+ if(j == 5 || j%7 == 4){
|
|
|
+ week = "四"
|
|
|
+ }
|
|
|
+ if(j == 6 || j%7 == 5){
|
|
|
+ week = "五"
|
|
|
+ }
|
|
|
+ if(j == 7 || j%7 == 6){
|
|
|
+ week = "六"
|
|
|
+ }
|
|
|
+ list[i].children.push({
|
|
|
+ id: '1000'+ j,
|
|
|
+ text: ''+ j,
|
|
|
+ weekObj: {
|
|
|
+ id: '10000'+ j,
|
|
|
+ field: 'week'+ j,
|
|
|
+ text: week
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 赋值
|
|
|
+ this.titleData = list
|
|
|
+ console.log("表头数据：", this.titleData)
|
|
|
+ },
|
|
|
+
|
|
|
+ setTenant (val) {
|
|
|
+ if(val){
|
|
|
+ this.tenant = { ...val }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * [核心算法]-根据时间，技术模块
|
|
|
+ * row：数据
|
|
|
+ * time：时间节点
|
|
|
+ * */
|
|
|
+ jsuanTime(row, time) {
|
|
|
+ // 当前的时间
|
|
|
+ // console.log("[核心算法]的数据feildTime： ",time);
|
|
|
+ let arr = [{
|
|
|
+ planTime: '', // 计划时间
|
|
|
+ procedureNo: '', // 工序编码
|
|
|
+ bomDesc: '', // 零件的名称
|
|
|
+ leftNums: 6.66, // 文字偏移量
|
|
|
+ child: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ arr[0].child = JSON.parse(JSON.stringify(this.timeDomList));
|
|
|
+ // let arr = JSON.parse(JSON.stringify(this.timeDomList));
|
|
|
+ // 计算。该cell。是否需要，填充背景
|
|
|
+ if(row.children && row.children.length > 0) {
|
|
|
+ // 时间去。年月日部分"yyyy-MM-dd"
|
|
|
+ let ymd = row.children[0].expectStartTime.substr(0,10);
|
|
|
+ // cell的区间节点
|
|
|
+ let filedTime = this.getHourSecend(ymd, time);
|
|
|
+ row.children.map(item => {
|
|
|
+ // 背景模块，开始时间
|
|
|
+ let expectStartTime = this.getHourSecend(ymd, item.expectStartTime.substr(11,5));
|
|
|
+ // 背景模块，截止时间
|
|
|
+ let expectEndTime = this.getHourSecend(ymd, item.expectEndTime.substr(11,5));
|
|
|
+ let flag = this.intervalInclusion([filedTime, filedTime + 30], [expectStartTime, expectEndTime]);
|
|
|
+ // cell【包含-startEnd】在时间段中
|
|
|
+ if(flag == '1') {
|
|
|
+ // 文字偏移量
|
|
|
+ let leftNums = 0;
|
|
|
+ // console.log("时间点：",[filedTime, filedTime + 30], [expectStartTime, expectEndTime], flag, item);
|
|
|
+ arr[0].child.forEach((obj, index) => {
|
|
|
+ let modal = filedTime + (index+1)*2;
|
|
|
+ // 小模块，【被包含】在起止时间区间
|
|
|
+ if( modal <= expectEndTime && modal >= expectStartTime){
|
|
|
+ obj.isFull = true;
|
|
|
+ // 计算第一次值
|
|
|
+ if(!leftNums){
|
|
|
+ leftNums = index+1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ arr[0].planTime = item.planTime;
|
|
|
+ arr[0].procedureNo = item.procedureNo;
|
|
|
+ arr[0].bomDesc = item.bomDesc;
|
|
|
+ arr[0].leftNums = leftNums*6.66;
|
|
|
+ }
|
|
|
+ // interval【有交集】终止点，在cell中，
|
|
|
+ if(flag == '2') {
|
|
|
+ arr[0].child.forEach((obj, index) => {
|
|
|
+ let modal = filedTime + (index+1)*2;
|
|
|
+ // 小模块，【有交集】终止点，在cell中，
|
|
|
+ if( modal <= expectEndTime){
|
|
|
+ obj.isFull = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // interval【有交集】起始点，在cell中
|
|
|
+ if(flag == '3') {
|
|
|
+ // 文字偏移量
|
|
|
+ let leftNums = 0;
|
|
|
+ arr[0].child.forEach((obj, index) => {
|
|
|
+ let modal = filedTime + (index+1)*2;
|
|
|
+ // 小模块，【有交集】起始点，在cell中
|
|
|
+ if( modal >= expectStartTime){
|
|
|
+ obj.isFull = true;
|
|
|
+ // 计算第一次值
|
|
|
+ if(!leftNums){
|
|
|
+ leftNums = index+1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ arr[0].planTime = item.planTime;
|
|
|
+ arr[0].procedureNo = item.procedureNo;
|
|
|
+ arr[0].bomDesc = item.bomDesc;
|
|
|
+ arr[0].leftNums = leftNums*6.66;
|
|
|
+ }
|
|
|
+
|
|
|
+ // cell【完全包含】，比cell大的多
|
|
|
+ if(flag == '4') {
|
|
|
+ arr[0].child.forEach((obj, index) => {
|
|
|
+ obj.isFull = true;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // console.log("[核心算法]的数据feildTime： ",objList);
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 比较2个区间数据，是否包含
|
|
|
+ * @param {Array} cell：需要检查的区间
|
|
|
+ * @param {Array} startEnd：根区间。（startEnd是否包含于cell）
|
|
|
+ * */
|
|
|
+ intervalInclusion(cell, startEnd){
|
|
|
+ // cell【包含-startEnd】,第二个参数，肯定是大于第一个参数的（固定）。
|
|
|
+ if (startEnd[0] >= cell[0] && startEnd[0] < cell[1] && startEnd[1] >cell[0] && startEnd[1] <=cell[1]) {
|
|
|
+ return "1";
|
|
|
+ } else {
|
|
|
+ // cell【有交集】终止点，在cell中，
|
|
|
+ if(startEnd[1] > cell[0] && startEnd[1] <= cell[1] && startEnd[0] < cell[0]) {
|
|
|
+ return "2";
|
|
|
+ } else if( startEnd[0] >= cell[0] && startEnd[0] < cell[1] && startEnd[1] > cell[1]){
|
|
|
+ // cell【有交集】起始点，在cell中
|
|
|
+ return "3";
|
|
|
+ } else if(cell[0] > startEnd[0] && cell[1] < startEnd[1]){
|
|
|
+ // cell【完全包含】，比cell大的多
|
|
|
+ return "4";
|
|
|
+ } else {
|
|
|
+ // cell【无关联】
|
|
|
+ return "0";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取当前时间的。小时和分钟
|
|
|
+ getHourSecend(ymd, time) {
|
|
|
+ let d = new Date(ymd+" "+time);
|
|
|
+ // 把日期，统一转化成分钟数
|
|
|
+ let seconds = d.getHours()*60 + d.getMinutes();
|
|
|
+ return seconds;
|
|
|
+ },
|
|
|
+
|
|
|
+ fetch (params = {}) {
|
|
|
+ this.loading = true
|
|
|
+ if (this.queryParams.timeRange) {
|
|
|
+ this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
|
|
|
+ this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.queryParams.current = params.current ? params.current : this.queryParams.current
|
|
|
+ this.queryParams.size = params.size ? params.size : this.queryParams.size
|
|
|
+ // 根据订单的id，查询数据
|
|
|
+ this.queryParams.planId = '1501604859084800000';
|
|
|
+ planMgrApi.scheduleTaskByResource(this.queryParams).then(response => {
|
|
|
+ const res = response.data
|
|
|
+ if (res.isSuccess) {
|
|
|
+ this.tableData = res.data;
|
|
|
+ }
|
|
|
+ // eslint-disable-next-line no-return-assign
|
|
|
+ }).finally(() => this.loading = false)
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ /*计算时间的css-start*/
|
|
|
+ .el-table .timeJD .cell {
|
|
|
+ padding-top: 5px;
|
|
|
+ padding-left: 0;
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+ .el-table--border .timeJD.el-table__cell {
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+ /*计算时间的css-end*/
|
|
|
+ .el-table.noPaddingTable th, .el-table.noPaddingTable td{
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+ .el-table.noPaddingTable td.dateColumns{
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+ .el-table .dateColumns .cell{
|
|
|
+ padding: 0 3px;
|
|
|
+ }
|
|
|
+ .el-table--border td.dateColumns{
|
|
|
+ border-right: 2px dotted #AAAAAA;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ /*计算时间的css-start*/
|
|
|
+ .timeDom {
|
|
|
+ width: 100%;
|
|
|
+ .timeItem {
|
|
|
+ display: inline-block;
|
|
|
+ width: -moz-calc(100%/15);
|
|
|
+ width: -webkit-calc(100%/15);
|
|
|
+ width: calc(100%/15);
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+ .tiActive{
|
|
|
+ background: #3CC787;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .timeItemDesc {
|
|
|
+ position: absolute;
|
|
|
+ top: 18px;
|
|
|
+ left: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ min-width: 120px;
|
|
|
+ color: white;
|
|
|
+ z-index: 999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .dashedDom {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ height: 88px;
|
|
|
+ border-right: 1px dashed #1890ff;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ /*计算时间的css-end*/
|
|
|
+ .tabDiv{
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+ .bgDivCell{
|
|
|
+ width: 41px;
|
|
|
+ max-height: 100px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ /*.srollDiv{
|
|
|
+ width: 40px;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }*/
|
|
|
+ .taskSpan{
|
|
|
+ display: block;
|
|
|
+ background: #13ae58;
|
|
|
+ width: 100%;
|
|
|
+ height: 10px;
|
|
|
+ margin: 2px 0;
|
|
|
+ -moz-border-radius: 5px;
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
</style>
|
王克恕