mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

merge

Browse Source
This commit is contained in:
helloDy
2023-11-15 14:37:52 +08:00
parent 952490f0d4 51d6ce5dbb
commit aef062b4c9
138 changed files with 9991 additions and 945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

976
src/views/OperationalOverview/AGVBoard.vue Normal file
View File

@@ -0,0 +1,976 @@
<!--
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2023-11-14 10:46:52
* @Description:
-->
<template>
<div id="container" ref="container" class="visual-container" :style="styles">
<el-row class="container-title" :style="{
height: 88 + 'px',
lineHeight: 88 + 'px',
fontSize: 31 + 'px'
}">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
许昌安彩AGV原片周转看板
<!-- <el-button
type="text"
class="title-button"
:style="{ right: 33 + 'px', top: 37 + 'px' }"
@click="changeFullScreen"
>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
</el-button> -->
</el-row>
<el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'">
<base-table1 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
:table-data="qualityYearList" />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 为外部添加一个容器并显式地设置一个高度: -->
<!-- <div style="height: 300px;"> -->
<div style="width:100%; overflow: hidden scroll;">
<!-- <el-row style="margin-bottom: 1em">
<p class="now-team-title">加工工单进度</p>
</el-row> -->
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
{{ op.name }}
</p>
<p v-else class="now-secondary-title">{{ op.name }}</p>
</el-row>
<!-- <el-row>
<el-progress :percentage="100" class="custom-progress-bar" />
<p class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
成都碲化镉5000一期订单
</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">成都碲化镉二订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">长利订单1000</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">国际工程20号订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
</el-row> -->
</div>
<!-- </div> -->
</base-container>
</el-col>
</el-row>
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :height="256" :title="'库存管理'" :title-icon="'5_5'" :back="'energy'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<el-row :gutter="9 * beilv">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
<base-table :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
:table-data="inventoryList" />
</el-col>
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-table3
:page="2"
:limit="5"
:beilv="1"
:table-config="qualityTableProps2"
:table-data="qualityList2"
/>
</el-col> -->
</el-row>
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :height="318 + 338 + 16" :title="'库位信息'" :title-icon="'5_4'" :back="'energy'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<base-table2 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="locationTableProps"
:table-data="locationList" />
</base-container>
</el-col>
</el-row>
<!-- end -->
<!-- <el-col :span="16">
<el-row>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
<base-container :beilv="1" :height="672">
<base-video :video-height="624" :beilv="1" />
</base-container>
</el-col>
</el-row>
</el-col>
-->
</el-row>
</div>
</template>
<script>
import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable'
import baseTable from './components/baseTable'
import baseTable2 from './components/baseTable'
// import TopRadioGroup from './components/topRadioGroup'
// import pieChart1 from './components/PieChart'
// import pieChart2 from './components/PieChart'
// import pieChart3 from './components/PieChart'
// import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
// import BaseVideo from './components/baseVideo.vue'
// import alarmLevel from './components/alarmLevel'
// import axios from '@/utils/request'
// import doubleYChart from './components/doubleYChart '
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
// import LinearBarChart from './components/linearBarChart'
const qualityTableProps1 = [
{
prop: 'name',
label: '产线名称'
},
{
prop: 'createTime',
label: '发生时间'
},
{
prop: 'code',
label: '质量编码'
},
{
prop: 'content',
label: '质量内容'
}
]
const qualityTableProps2 = [
{
prop: 'name',
label: '工序名称'
},
{
prop: 'createTime',
label: '发生时间'
},
{
prop: 'code',
label: '质量编码'
},
{
prop: 'content',
label: '质量内容'
}
]
const cxNameList = ['周一', '周二', '周三', '周四', '周五']
const cxDataList = [
{
topColor: '#9DD5FF',
bottomColor: '#1295FF',
name: '电耗能',
data: [100, 150, 121, 97, 140]
},
{
topColor: '#FF8BC3',
bottomColor: '#EB46A1',
name: '水耗能',
data: [110, 110, 151, 77, 110]
},
{
topColor: '#85F6E9',
bottomColor: '#2EC6B4',
name: '天然气',
data: [110, 120, 171, 287, 40]
},
{
topColor: '#9496FF',
bottomColor: '#6567FF',
name: '焦炉煤气',
data: [140, 157, 122, 27, 240]
},
{
topColor: '#F68E8A',
bottomColor: '#E95552',
name: '余热发电',
data: [170, 180, 127, 17, 340]
},
{
topColor: '#FFE873',
bottomColor: '#E7AE2A',
name: '二氧化硫',
data: [140, 160, 121, 57, 170]
}
]
const qualityList1 = [
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
{ name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' }
]
const qualityList2 = [
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
{ name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' },
{ name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' },
{ name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' },
{ name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' }
]
const legendData1 = [
{
name: '设备1',
icon: 'circle',
value: 196
},
{
name: '设备2',
icon: 'circle',
value: 147
},
{
name: '设备3',
icon: 'circle',
value: 24
},
{
name: '设备4',
icon: 'circle',
value: 85
},
{
name: '设备5',
icon: 'circle',
value: 8
},
{
name: '设备6',
icon: 'circle',
value: 112
},
{
name: '设备7',
icon: 'circle',
value: 146
},
{
name: '设备8',
icon: 'circle',
value: 27
},
{
name: '设备9',
icon: 'circle',
value: 2
},
{
name: '设备10',
icon: 'circle',
value: 90
}
]
const legendData2 = [
{
name: '磨边',
icon: 'circle',
value: 196
},
{
name: '清洗',
icon: 'circle',
value: 135
},
{
name: '固化',
icon: 'circle',
value: 144
},
{
name: '镀膜',
icon: 'circle',
value: 97
},
{
name: '激光打孔',
icon: 'circle',
value: 12
},
{
name: '丝网印刷',
icon: 'circle',
value: 10
},
{
name: '钢化炉',
icon: 'circle',
value: 3
}
]
const legendData3 = [
{
name: '钢一线',
icon: 'circle',
value: 196
},
{
name: '钢二线',
icon: 'circle',
value: 133
},
{
name: '钢三线',
icon: 'circle',
value: 24
},
{
name: '钢四线',
icon: 'circle',
value: 77
},
{
name: '钢五线',
icon: 'circle',
value: 77
}
]
const locationTableProps = [
{
prop: 'eqName',
label: '库位名称'
},
{
prop: 'eqCode',
label: '存放物件名称'
},
{
prop: 'productCode',
label: '编码'
},
{
prop: 'level',
label: '存放位置',
// subcomponent: alarmLevel,
align: 'center'
},
{
prop: 'unit',
label: '单位',
// subcomponent: alarmLevel,
align: 'center'
},
{
prop: 'product',
label: '数量'
},
{
prop: 'time',
label: '入库时间'
}
]
const locationList = [
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
{
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
},
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
{
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
},
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
{
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
},
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
{
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
},
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
{
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
}
]
const inventoryTableProps = [
{
prop: 'eqName',
label: '物件名称'
},
{
prop: 'eqCode',
label: '存放区域'
},
{
prop: 'productCode',
label: '编码'
},
{
prop: 'level',
label: '规格',
// subcomponent: alarmLevel,
align: 'center'
},
{
prop: 'unit',
label: '单位',
// subcomponent: alarmLevel,
align: 'center'
},
{
prop: 'product',
label: '数量'
},
{
prop: 'time',
label: '入库时间'
}
]
const inventoryList = [
{ eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
{ eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
{
eqName: ' 包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日' },
{
eqName: ' 螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日' },
{
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日' },
{ eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
{ eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
{
eqName: ' 包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日'
},
{
eqName: ' 螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日'
},
{
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
}
]
const qualityYearTableProps = [
{
prop: 'eqName',
label: '作业号'
},
{
prop: 'eqCode',
label: '执行叉车'
},
{
prop: 'level',
label: '库位',
// subcomponent: alarmLevel,
align: 'center'
},
{
prop: 'product',
label: '成品规格'
},
{
prop: 'productCode',
label: '成品编码'
},
{
prop: 'time',
label: '时间'
}
]
const qualityYearList = [
{ eqName: 'RQ20230910', eqCode: '1-01', level: '成品库D-D区-14', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月10日' },
{ eqName: 'RQ20230911', eqCode: '1-02', level: '成品库A-A区-1', product: ' 3.2-1033*2089', productCode: 'CP563232323', time: '2023年9月11日' },
{ eqName: 'RQ20230912', eqCode: '2-01', level: '成品库D-D区-1', product: ' 1.2-1033*2089', productCode: 'CP5651696321', time: '2023年9月12日' },
{ eqName: 'RQ20230913', eqCode: '1-03', level: '成品库A-B区-1', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月13日' },
{ eqName: 'RQ20230914', eqCode: '2-02', level: '成品库D-D区-2', product: ' 3.2-1033*2089', productCode: 'CP565169322', time: '2023年9月14日' },
{ eqName: 'RQ20230915', eqCode: '1-01', level: '成品库B-A区-4', product: ' 1.2-1033*2089', productCode: 'CP56516962323', time: '2023年9月15日' },
{ eqName: 'RQ20230916', eqCode: '1-03', level: '成品库A-A区-2', product: ' 2.2-1033*2089', productCode: 'CP5651694343', time: '2023年9月16日' },
{ eqName: 'RQ20230917', eqCode: '1-02', level: '成品库C-D区-12', product: '4.2-1033*2089', productCode: 'CP5651692323', time: '2023年9月17日' },
{ eqName: 'RQ20230918', eqCode: '2-01', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696232', time: '2023年9月18日' },
{ eqName: 'RQ20230919', eqCode: '2-02', level: '成品库C-D区-9', product: ' 1.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月19日' },
{ eqName: 'RQ20230920', eqCode: '2-03', level: '成品库D-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
{ eqName: 'RQ20230920', eqCode: '2-04', level: '成品库D-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
{ eqName: 'RQ20230920', eqCode: '2-05', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
{ eqName: 'RQ20230920', eqCode: '3-03', level: '成品库B-D区-4', product: ' 3.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
{ eqName: 'RQ20230920', eqCode: '1-03', level: '成品库C-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' }
]
const qualityMonthTableProps = [
{
prop: 'lineName',
label: '产线名'
},
{
prop: 'process',
label: '工序'
},
{
prop: 'eqName',
label: '设备名'
},
{
prop: 'eqCode',
label: '设备编码'
},
{
prop: 'long',
label: '总运行时长(h)'
},
// {
// prop: 'createTime',
// label: '保养时间'
// },
{
prop: 'status',
label: '设备状态'
}
// {
// prop: 'nextCreateTime',
// label: '下次保养时间'
// }
// {
// prop: 'nextLong',
// label: '距离保养时间(天)',
// // subcomponent: nextDay,
// align: 'center'
// }
]
const qualityMonthList = [
{
lineName: '钢一线',
process: '41',
eqName: '设备1',
eqCode: '2312312',
long: '255',
// createTime: '2021-02-25 12:00:01',
status: '报警'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 365
},
{
lineName: '钢二线',
process: '41',
eqName: '设备2',
eqCode: '43434',
long: '255',
// createTime: '2021-11-25 12:00:01',
status: '正常'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 4
},
{
lineName: '钢三线',
process: '41',
eqName: '设备3',
eqCode: '23213212',
long: '255',
// createTime: '2021-10-25 12:00:01',
status: '故障停机'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 24
},
{
lineName: '钢四线',
process: '41',
eqName: '设备4',
eqCode: '23213',
long: '255',
// createTime: '2021-02-25 12:00:01',
status: '故障停机'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: -36
},
{
lineName: '钢五线',
process: '41',
eqName: '设备5',
eqCode: '23121312',
long: '255',
// createTime: '2021-06-25 12:00:01',
status: '待机'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
}
]
// let resizeFun = null
export default {
name: 'ProductionMonitoringCockpit',
components: {
baseContainer,
baseTable1,
baseTable,
baseTable2
// TopRadioGroup,
// doubleYChart
// LinearBarChart
// pieChart1,
// pieChart2
// pieChart3
// BaseVideo
},
data() {
return {
beilv: 1,
beilv2: 1,
clientWidth:0,
value: 100,
qualityYearTableProps,
cxNameList,
inventoryTableProps,
inventoryList,
locationList,
locationTableProps,
cxDataList,
qualityYearList,
isFullScreen: false,
orderProcessList: [
{
name: '作业号RQ232323',
outRate: '0.8'
},
{
name: '作业号RQ2232232',
outRate: '0.7'
},
{
name: '作业号RQ2232232',
outRate: '1'
},
{
name: '作业号RQ2545444',
outRate: '0.6'
},
{
name: '作业号RQ232322',
outRate: '0.5'
},
{
name: '作业号RQ20230911',
outRate: '0.4'
}
],
qualityTableProps1,
qualityMonthList,
qualityMonthTableProps,
modelMonth: '',
qualityList1,
qualityTableProps2,
qualityList2,
dateType: '0',
legendData1,
legendData2,
legendData3
}
},
computed: {
// ...mapGetters(['sidebar']),
styles() {
const v = Math.floor(this.value * this.beilv2 * 100) / 10000
return {
transform: `scale(${v})`,
transformOrigin: 'top left'
}
}
},
watch: {
clientWidth(val) {
if (!this.timer) {
this.clientWidth = val
this.beilv2 = this.clientWidth / 1920
this.timer = true
let _this = this
setTimeout(function () {
_this.timer = false
}, 500)
}
// 这里可以添加修改时的方法
this.windowWidth(val);
}
},
created() {
// this.fetchList('exception-alarm')
// this.fetchList('inAndOutOfEachLine')
// this.fetchList('order-process')
// this.fetchList('line-chart-data')
this.init()
this.windowWidth(document.documentElement.clientWidth)
},
mounted() {
const _this = this;
window.onresize = () => {
return (() => {
_this.clientWidth = `${document.documentElement.clientWidth}`
this.beilv2 = _this.clientWidth / 1920
})()
}
// this.beilv2 = window.innerWidth / 1920
// addEventListener('resize', resizeFun = () => {
// this.beilv2 = window.innerWidth / 1920
// })
// erd.listenTo(document, (element) => {
// console.log(element.offsetWidth)
// this.beilv2 = element.offsetWidth / 1920
// // var width = element.offsetWidth;
// // var height = element.offsetHeight;
// });
},
// beforeDestroy() {
// //离开页面删除检测器和所有侦听器
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
// removeEventListener('resize', resizeFun)
// },
methods: {
windowWidth(value) {
this.clientWidth = value
},
// fetchList(type) {
// switch (type) {
// case 'order-process':
// return axios({
// url: '/analysis/factory-monitor/order',
// method: 'post'
// }).then(res => {
// if (res.data) {
// console.log(res)
// this.orderProcessList = res.data
// // this.orderProcessList = [
// // { id: 1, name: '订单1', outRate: 0.5 },
// // { id: 2, name: '订单2', outRate: 0.54 },
// // { id: 3, name: '订单3', outRate: 0.45 },
// // { id: 4, name: '订单4', outRate: 0.65 },
// // { id: 5, name: '订单5', outRate: 0.35 },
// // { id: 6, name: '订单6', outRate: 0.15 },
// // { id: 7, name: '订单7', outRate: 0.5 },
// // { id: 8, name: '订单8', outRate: 0.5 }
// // ]
// } else {
// this.orderProcessList.splice(0)
// }
// })
// }
// },
change() {
this.isFullScreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
},
changeFullScreen() {
console.log(this.beilv);
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle(this.$refs.container)
}
}
}
</script>
<style lang="scss" scoped>
.visual-container {
width: 1920px;
height: 1080px;
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
background-size: cover;
// opacity: .8;
.container-title {
width: 100%;
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
background-size: 100% 100%;
color: #00fff0;
text-align: center;
.title-button {
color: #00fff0;
font-size: 20px;
position: absolute;
}
}
.container-main {
padding: 10px;
}
}
.now-team-title {
margin: 0;
margin-top: -1em;
font-size: 1.2em;
line-height: 2em;
color: #fff;
}
.main-title {
text-align: center;
}
.now-secondary-title {
margin: 0;
font-size: 1em;
line-height: 2em;
color: #fff;
}
.now-team-content {
font-size: 3em;
line-height: 1em;
color: #52fff1;
text-align: center;
}
::v-deep .el-progress-bar__inner {
background-color: unset;
background-image: linear-gradient(to right, #4573fe, #47f8dc);
}
.visual-select {
position: absolute;
right: 1em;
top: 2em;
}
// .container-main {
// padding: 5px;
// }
</style>
<style lang="scss">
.visual-container {
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background: #1b2b3d;
}
::-webkit-scrollbar-corner {
background: #1b2b3d;
}
::-webkit-scrollbar-track {
width: 6px;
background: #1b2b3d;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background: rgba($color: #5bc4be, $alpha: 0.7);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
transition: background-color 0.3s;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba($color: #5bc4be, $alpha: 1);
}
}
.el-input {
min-height: 10px;
}
.el-input__inner {
background-color: rgba($color: #31878c, $alpha: 0.29);
border: rgba($color: #31878c, $alpha: 0.29);
color: aliceblue;
}
.el-divider--vertical {
height: 174px;
width: 1px;
border: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.15);
margin-left: 3em;
}
</style>
<style scoped>
.flex-col {
flex-direction: column;
}
.flex-1 {
flex: 1 1;
}
.h-full {
height: calc(100vh - 150px);
}
/* .container-main {
min-height: calc(100vh - 10em);
} */
</style>

1131
src/views/OperationalOverview/coldBoard.vue Normal file
View File

File diff suppressed because it is too large Load Diff

127
src/views/OperationalOverview/components/BarChart.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<div>
<div :id="id" :class="className" :style="{ height: height, width:width}" />
</div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'OverviewLine'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '300px'
},
showLegend: {
type: Boolean,
default: false
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#123341', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#666a74' // 坐标值得具体的颜色
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
axisLine: {
lineStyle: {
type: 'solid',
color: '#123341', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#666a74' // 坐标值得具体的颜色
}
},
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
})
}
}
}
</script>

253
src/views/OperationalOverview/components/LineChart.vue Normal file
View File

@@ -0,0 +1,253 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zwq
* @LastEditTime: 2022-01-24 13:27:41
* @Description:
-->
<template>
<div>
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
<div :id="id" :class="className" :style="{ paddingTop: '1.25em', height: height + 'px', width:width}" />
</div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'OverviewLine'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '300px'
},
legendPosition: {
type: String,
default: 'center'
},
showLegend: {
type: Boolean,
default: false
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '1%',
right: '1%',
bottom: '0',
containLabel: true
},
legend: {
itemHeight: 10,
itemWidth: 10,
x: this.legendPosition, // 可设定图例在左、右、居中
y: 'top', // 可设定图例在上、下、居中
show: this.showLegend,
data: this.legendData,
top: 28,
right: '1%',
textStyle: {
fontSize: 12,
color: '#ced1d5'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: { show: false }, // 去除网格线
axisLine: {
lineStyle: {
type: 'solid',
color: '#123341', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#666a74' // 坐标值得具体的颜色
}
},
data: ['1', '5', '15', '20', '25', '30']
},
yAxis: {
type: 'value',
splitLine: { show: false }, // 去除网格线
axisLine: {
lineStyle: {
type: 'solid',
color: '#123341', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#666a74' // 坐标值得具体的颜色
}
}
},
series: [
{
name: this.showLegend ? this.legendData[0].name : '',
type: 'line',
itemStyle: {
normal: {
color: '#3574a8',
lineStyle: {
color: '#3574a8'
}
}
},
data: [120, 32, 101, 134, 90, 230, 210]
},
{
name: this.showLegend ? this.legendData[1].name : '',
type: 'line',
itemStyle: {
normal: {
color: '#9f3476',
lineStyle: {
color: '#9f3476'
}
}
},
data: [270, 182, 191, 234, 290, 230, 210]
},
{
name: this.showLegend ? this.legendData[2].name : '',
type: 'line',
itemStyle: {
normal: {
color: '#30959d',
lineStyle: {
color: '#30959d'
}
}
},
data: [160, 32, 301, 154, 190, 330, 210]
},
{
name: this.showLegend ? this.legendData[3].name : '',
type: 'line',
itemStyle: {
normal: {
color: '#5255be',
lineStyle: {
color: '#5255be'
}
}
},
data: [150, 132, 21, 234, 190, 130, 320]
},
{
name: this.showLegend ? this.legendData[4].name : '',
type: 'line',
itemStyle: {
normal: {
color: '#8b4449',
lineStyle: {
color: '#8b4449'
}
}
},
data: [210, 332, 201, 34, 290, 230, 320]
},
{
name: this.showLegend ? this.legendData[5].name : '',
type: 'line',
itemStyle: {
normal: {
color: '#a29848',
lineStyle: {
color: '#a29848'
}
}
},
data: [20, 62, 101, 34, 190, 30, 120]
},
{
name: this.showLegend && this.legendData[6] ? this.legendData[6].name : '',
type: 'line',
itemStyle: {
normal: {
color: '#a29848',
lineStyle: {
color: '#a29848'
}
}
},
data: [20, 62, 101, 34, 190, 30, 120]
},
{
name: this.showLegend && this.legendData[7] ? this.legendData[7].name : '',
type: 'line',
itemStyle: {
normal: {
color: '#a29848',
lineStyle: {
color: '#a29848'
}
}
},
data: [20, 62, 101, 34, 190, 30, 120]
}
]
})
}
}
}
</script>
<style scoped>
.chart{
margin-top: -3em
}
</style>

0
src/views/OperationalOverview/components/LineRadioGroup.vue Normal file
View File

221
src/views/OperationalOverview/components/PieChart.vue Normal file
View File

@@ -0,0 +1,221 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zwq
* @LastEditTime: 2022-01-24 09:12:18
* @Description:
-->
<template>
<div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'DefaultPieChart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '300px'
},
showCenterTitle: {
type: Boolean,
default: false
},
showLegend: {
type: Boolean,
default: false
},
legendConfig: {
type: Object,
default: function() {
return {}
}
},
seriesConfig: {
type: Object,
default: function() {
return {}
}
},
seriesData: {
type: Array,
default: () => []
},
barColor: {
type: Array,
default: () => [
'#5fe1d2',
'#ffb2b0',
'#8e90ff',
'#f058aa',
'#8652da',
'#87fb84',
'#61b9ff',
'#fdf6a6',
'#ffc465',
'#98d9ff'
]
}
},
data() {
const lData = this.seriesData
return {
chart: null,
defaultConfig: {
// 默认的legend配置
legend: {
orient: 'vertical',
left: '75%',
bottom: 0,
itemHeight: 10,
itemWidth: 10,
formatter: function(name) {
let pieLegendVale = {}
lData.filter((item, index) => {
if (item.name === name) {
pieLegendVale = item
}
})
const arr = ['{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
return arr.join(' ')
},
textStyle: {
rich: {
a: {
align: 'center',
fontSize: 10,
color: '#f988bf',
lineHeight: 16
},
b: {
// verticalAlign: 'top',
align: 'center',
fontSize: 10,
color: '#dddfe1'
}
}
}
},
// 默认的series配置
series: {
center: ['35%', '50%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
}
}
}
}
},
computed: {
computedHeight: function() {
if (/[0-9]+%$/.test(this.height)) {
// 如果是百分比
return this.height
}
return this.height * this.beilv + 'px'
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
title: this.showCenterTitle
? {
text: '总共',
subtext: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
top: '32%',
left: '49%',
textAlign: 'center',
itemGap: 5,
textStyle: {
color: '#c0c0c0',
fontSize: 16,
fontWeight: 'lighter',
lineHeight: 15
},
subtextStyle: {
color: '#fff',
fontSize: 24,
lineHeight: 20
}
}
: {},
tooltip: {
trigger: 'item'
},
grid: {
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
containLabel: true
},
legend: {
// 默认配置
...this.defaultConfig.legend,
// 外部传入配置
...this.legendConfig
},
color: this.barColor,
series: [
{
name: 'default name',
type: 'pie',
// 默认series配置
...this.defaultConfig.series,
// 外部传入配置
...this.seriesConfig,
data: this.seriesData
}
]
})
}
}
}
</script>
<style scoped>
/* .chart >>> div:first-child{
background-color: red;
height: 100% !important;
} */
</style>

158
src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/BarChart.vue Normal file
View File

@@ -0,0 +1,158 @@
<!--
* @Author: zhp
* @Date: 2022-01-23 16:50:39
* @LastEditTime: 2022-01-25 15:43:52
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" :class="className" :style="{ height: height, width:width}" />
</div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from '../mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'OverviewLine'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '300px'
},
showLegend: {
type: Boolean,
default: false
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: '10%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
itemHeight: 10,
x: 'right', // 可设定图例在左、右、居中
y: 'top', // 可设定图例在上、下、居中
itemWidth: 10,
show: this.showLegend,
data: this.legendData,
right: '1%',
textStyle: {
fontSize: 12,
color: '#ced1d5'
}
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#123341', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#666a74' // 坐标值得具体的颜色
}
},
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
},
yAxis: {
type: 'value',
scale: true,
max: 12,
min: 0,
splitNumber: 5,
splitLine: {
lineStyle: {
color: '#213259'
}
},
boundaryGap: [0.2, 0.2],
axisLabel: {
formatter: '{value} h',
textStyle: {
color: 'white'
}
}
},
series: [
{
name: this.legendData[0].name,
type: 'bar',
data: this.legendData[0].data,
markLine: {
data: [{ type: 'average', name: 'Avg' }]
},
barWidth: '10%',
itemStyle: this.legendData[0].itemStyle
},
{
name: this.legendData[1].name,
type: 'bar',
data: this.legendData[1].data,
barWidth: '10%',
itemStyle: this.legendData[1].itemStyle
}
]
})
}
}
}
</script>

158
src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/BarChartOne.vue Normal file
View File

@@ -0,0 +1,158 @@
<!--
* @Author: zhp
* @Date: 2022-01-23 16:50:39
* @LastEditTime: 2022-01-25 15:44:26
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" :class="className" :style="{ height: height, width:width}" />
</div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from '../mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'OverviewLine'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '300px'
},
showLegend: {
type: Boolean,
default: false
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: '10%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
itemHeight: 10,
x: 'right', // 可设定图例在左、右、居中
y: 'top', // 可设定图例在上、下、居中
itemWidth: 10,
show: this.showLegend,
data: this.legendData,
right: '1%',
textStyle: {
fontSize: 12,
color: '#ced1d5'
}
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#123341', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#666a74' // 坐标值得具体的颜色
}
},
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
},
yAxis: {
type: 'value',
scale: true,
max: 12,
min: 0,
splitNumber: 5,
splitLine: {
lineStyle: {
color: '#213259'
}
},
boundaryGap: [0.2, 0.2],
axisLabel: {
formatter: '{value} h',
textStyle: {
color: 'white'
}
}
},
series: [
{
name: this.legendData[0].name,
type: 'bar',
data: this.legendData[0].data,
markLine: {
data: [{ type: 'average', name: 'Avg' }]
},
barWidth: '10%',
itemStyle: this.legendData[0].itemStyle
},
{
name: this.legendData[1].name,
type: 'bar',
data: this.legendData[1].data,
barWidth: '10%',
itemStyle: this.legendData[1].itemStyle
}
]
})
}
}
}
</script>

144
src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/baseContainer/index.vue Normal file
View File

@@ -0,0 +1,144 @@
<!--
* @Author: gtz
* @Date: 2022-01-19 15:58:17
* @LastEditors: zhp
* @LastEditTime: 2022-01-24 09:01:07
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->
<template>
<div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px'}">
<div class="line" />
<div class="line line-vertical" />
<div class="line line-right" />
<div class="line line-right-vertical" />
<div class="line line-bottom" />
<div class="line line-bottom-vertical" />
<div class="line line-bottom-right" />
<div class="line line-bottom-right-vertical" />
<div class="bar-item">
<div v-if="title" class="bar-title">
<span>
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
{{ title }}
</span>
</div>
<div class="bar-content">
<slot />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BaseContainer',
props: {
title: {
type: String,
default: ''
},
titleIcon: {
type: String,
default: ''
},
height: {
type: Number,
default: 200
},
baseSize: {
type: Number,
default: 12
},
beilv: {
type: Number,
default: 1
}
},
data() {
return {
curIndex: 0
}
},
mounted() {
},
methods: {
changeTab(num) {
this.curIndex = num
this.$emit('tabSelect', num)
}
}
}
</script>
<style lang="scss">
.base-container {
color: #fff;
width: 100%;
background-color: rgba($color: #061027, $alpha: 0.15);
position: relative;
padding: .5em;
border: 2px solid;
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
.line {
position: absolute;
border-top: 4px solid #52FFF1;
width: 2em;
top: -.25em;
left: -.25em;
&-vertical {
top: calc(-5em / 12);
left: calc(-1em / 12);
transform: rotate(90deg);
transform-origin: left;
}
&-right {
top: -.25em;
right: -.25em;
left: inherit;
}
&-right-vertical {
top: calc(-5em / 12);
right: calc(-1em / 12);
left: inherit;
transform: rotate(-90deg);
transform-origin: right;
}
&-bottom {
top: inherit;
left: -.25em;
bottom: -.25em;
}
&-bottom-vertical {
top: inherit;
left: calc(-1em / 12);
bottom: calc(-5em / 12);
transform: rotate(-90deg);
transform-origin: left;
}
&-bottom-right {
top: inherit;
left: inherit;
right: -.25em;
bottom: -.25em;
}
&-bottom-right-vertical {
top: inherit;
left: inherit;
right: calc(-1em / 12);
bottom: calc(-5em / 12);
transform: rotate(90deg);
transform-origin: right;
}
}
.bar-title {
width: 100%;
color: #52FFF1;
font-size: 1.5em;
padding: .1em;
}
.bar-content{
padding: 1em;
}
}
</style>

170
src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/baseTable.vue Normal file
View File

@@ -0,0 +1,170 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zhp
* @LastEditTime: 2023-11-13 16:41:13
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionAndOperationCenterCockpit\baseTable.vue
* @Description:
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 + 'px',padding: 0}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column
v-for="item in renderTableHeadList"
:key="item.prop"
:show-overflow-tooltip="showOverflow"
v-bind="item"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
</div>
</template>
<script>
import { isObject, isString } from 'lodash'
export default {
name: 'BaseTable',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
props: {
tableData: {
type: Array,
required: true,
validator: val => val.filter(item => !isObject(item)).length === 0
},
tableConfig: {
type: Array,
required: true,
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
},
isLoading: {
type: Boolean,
required: false
},
page: {
type: Number,
required: false,
default: 1
},
limit: {
type: Number,
required: false,
default: 5
},
beilv: {
type: Number,
default: 1
},
showOverflow: {
type: Boolean,
default: true
}
},
data() {
return {
tableConfigBak: [],
selectedBox: new Array(20).fill(true)
}
},
computed: {
renderData() {
if (this.tableData && !this.tableData[0]._pageIndex) {
this.tableData.forEach((item, index) => {
item._pageIndex = (this.page - 1) * this.limit + index + 1
})
}
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
},
renderTableHeadList() {
return this.tableConfig.filter((item, index) => {
return this.selectedBox[index]
})
}
},
beforeMount() {
this.selectedBox = new Array(20).fill(true)
},
// mounted() {
// this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
// return {
// ...item,
// selected: true
// }
// })
// },
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
color: '#fff',
height: 26 * this.beilv + 'px',
padding: 0
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
color: '#fff',
height: 26 * this.beilv + 'px',
padding: 0
}
}
}
}
}
</script>
<style lang="scss">
@import "~@/styles/index.scss";
.visual-base-table-container {
.el-table {
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
}
// .setting {
// text-align: right;
// padding: 15px;
// .setting-box {
// width: 100px;
// }
// i {
// color: #aaa;
// @extend .pointer;
// }
// }
</style>

31
src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/colorDiv.vue Normal file
View File

@@ -0,0 +1,31 @@
<!--
* @Author: zhp
* @Date: 2022-01-23 21:02:57
* @LastEditTime: 2022-01-23 21:08:21
* @LastEditors: zhp
* @Description:
-->
<template>
<div
style=" width: 1em;
height: 1em;
border-radius: 50%;
margin:auto"
:style="{background:injectData.colour}"
/>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({})
}
},
methods: {
emitClick() {
}
}
}
</script>

60
src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/topGroup.vue Normal file
View File

@@ -0,0 +1,60 @@
<!--
* @Author: zhp
* @Date: 2022-01-22 18:05:45
* @LastEditTime: 2022-01-23 10:50:29
* @LastEditors: zhp
* @Description:
-->
<template>
<div style="width:100%,text-align:center">
<div style="text-align:center">
<el-radio-group v-model="dateType" size="mini">
<el-radio-button v-for="item in labelList" :key="item.index" :label="item.index">
{{ item.label }}
</el-radio-button>
</el-radio-group>
</div>
</div>
</template>
<script>
export default {
name: 'TopGroup',
props: {
dateType: {
type: String,
default: '0'
},
labelList: {
type: Array,
required: true
}
},
data() {
return {}
},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped>
::v-deep .el-radio-button__inner {
width: 100%;
border: none;
background: #133648;
margin-bottom: 1em;
margin-top: -0.5em;
color: white;
line-height: 14px;
outline: none;
box-shadow: none;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #3eb0ae;
border: none;
color: white;
outline: none;
box-shadow: none;
}
</style>

83
src/views/OperationalOverview/components/ProductionLineMonitoringCockpit/nowTeam.vue Normal file
View File

@@ -0,0 +1,83 @@
<!--
* @Author: gtz
* @Date: 2022-01-20 14:12:10
* @LastEditors: zhp
* @LastEditTime: 2022-01-25 16:57:00
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionLineMonitoringCockpit\nowTeam.vue
-->
<template>
<div class="now-team">
<el-row style="margin-bottom: 3em">
<p class="now-team-title">- 开始时间 -</p>
<p class="now-team-content blue">2021.1.26 13:30:21</p>
</el-row>
<el-row style="margin-bottom: 1em">
<el-col :span="8">
<p class="now-team-title">- 班组名称 -</p>
<p style="font-size:2em" class="now-team-content blue">中班执行一组</p>
</el-col>
<el-col :span="8">
<p class="now-team-title">- 原片投入(片) -</p>
<p class="now-team-content blue">122</p>
</el-col>
<el-col :span="8">
<p class="now-team-title">- 投入面积(㎡) -</p>
<p class="now-team-content blue">12000</p>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<p class="now-team-title">- 产品规格 -</p>
<p class="now-team-content blue">110</p>
</el-col>
<el-col :span="8">
<p class="now-team-title">- 执行工单 -</p>
<p class="now-team-content blue">110</p>
</el-col>
<el-col :span="8">
<p class="now-team-title">- 成品率 -</p>
<p class="now-team-content blue">98.8%</p>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'ProductionMonitoringCockpit',
data() {
return {}
},
computed: {},
mounted() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
.now-team{
width: 100%;
.now-team-title{
font-size: 1em;
line-height: 2em;
text-align: center;
color: #fff;
}
p {
margin: 0;
}
.now-team-content{
font-size: 2.5em;
font-weight: 300;
line-height: 1em;
color: #fff;
text-align: center;
}
.blue {
color: #52FFF1;
}
}
</style>

229
src/views/OperationalOverview/components/SimpleLineChart.vue Normal file
View File

@@ -0,0 +1,229 @@
<!--
* @Author: lb
* @Date: 2022-01-21 14:43:06
* @LastEditors: zhp
* @LastEditTime: 2023-02-07 13:46:05
* @Description: 简单折线图
-->
<template>
<div ref="SimpleLineChart" :style="{ height: height ? height + 'px' : '100%', width: '100%' }" />
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
const AxisLine = {
lineStyle: {
type: 'solid',
color: '#123341',
width: '1'
}
}
const AxisLabel = {
textStyle: {
color: '#666a74'
}
}
/**
* 2022.8.23 TODO:
* 1.一份数据三张表
* 2.切换选项卡时只更新一张表的数据
* 3.注释掉成品率条形图，改为将“投入、产出”拆分图，与“成品率”合计三张
*/
class ChartOption {
constructor() {
this.color = [
'#3574a8',
'#9f3476',
'#30959d',
'#5255be',
'#8b4449',
'#a29848',
'#FF6600',
'#FFFF00',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#9a60b4',
'#ea7ccc'
]
this.tooltip = { trigger: 'axis' }
this.grid = {
left: '2%',
right: '2%',
bottom: '5%',
height: '80%',
containLabel: true
}
this.legend = {
itemHeight: 10,
itemWidth: 10,
y: 'top',
x: 'center',
top: 0,
// right: '1%',
data: [
/** dynamic */
],
// right: '1%',
textStyle: {
fontSize: 12,
color: '#ced1d5'
}
}
this.xAxis = {
type: 'category',
boundaryGap: false,
splitLine: { show: false },
axisLine: AxisLine,
axisLabel: { ...AxisLabel, rotate: 20 },
data: [
/** dynamic */
]
}
this.yAxis = {
type: 'value',
splitLine: { show: false },
axisLine: AxisLine,
axisLabel: AxisLabel
}
this.series = [
/** dynmaic */
]
}
/**
* @param {object} rawdata
*/
setLegend(rawdata) {
if (rawdata) {
const data = Object.keys(rawdata)
this.legend.data = data.map(item => ({ icon: 'roundRect', name: item }))
}
}
/**
* @param {object} rawdata
*/
setCategory(rawdata) {
if (rawdata) {
if (Object.keys(rawdata).length > 0) {
const first = rawdata[Object.keys(rawdata)[0]]
this.xAxis.data = Object.keys(first)
}
}
}
/**
* @param {object} rawdata
*/
setData(rawdata) {
if (rawdata) {
this.series = []
for (const key in rawdata) {
this.series.push({
name: key,
type: 'line',
data: Object.entries(rawdata[key]).map(([subkey, value]) => value)
})
}
}
}
clearOptions() {
this.legend.data.splice(0)
this.xAxis.data.splice(0)
this.series.splice(0)
}
// add more...
}
export default {
name: 'SimpleLineChart',
mixins: [resize],
props: {
beilv: {
type: Number,
default: 1
},
height: {
type: Number,
default: 1
},
legend: {
type: Array,
default: () => []
},
caty: {
type: Array,
default: () => []
},
dataList: {
type: Object,
default: () => ({})
}
},
data() {
return {
chart: null,
defaultOpts: new ChartOption()
}
},
computed: {
showLegend() {
return this.legend.length > 0
}
},
watch: {
dataList: {
handler: function(val) {
this.updateChartOptions()
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
this.chart = null
}
},
methods: {
initChart() {
if (!this.chart) {
this.chart = echarts.init(this.$refs.SimpleLineChart)
this.updateChartOptions()
}
},
updateChartOptions() {
if (!this.chart) return
this.defaultOpts.clearOptions()
/** set */
this.defaultOpts.setLegend(this.dataList)
this.defaultOpts.setCategory(this.dataList)
this.defaultOpts.setData(this.dataList)
/** log */
this.chart.setOption({ ...this.defaultOpts })
}
}
}
</script>
<style scoped>
.chart {
margin-top: -3em;
}
</style>

51
src/views/OperationalOverview/components/alarmLevel.vue Normal file
View File

@@ -0,0 +1,51 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zwq
* @LastEditTime: 2022-01-23 00:14:53
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<span class="alarm-level">
<span
style="display: inline-block; height: .6em;width: .6em; border-radius: .3em; position: relative;"
:style="{background: colorList[injectData.level].back, boxShadow: `0px 0px 2px 2px ${colorList[injectData.level].border}`}"
/>
{{ injectData.level }}级
</span>
</template>
<script>
export default {
name: 'NextDay',
props: {
injectData: {
type: Object,
default: () => ({})
}
},
data() {
return {
colorList: {
1: {
back: 'rgba(255, 12, 12, 1)',
border: 'rgba(255, 12, 12, .5)'
},
2: {
back: 'rgba(255, 183, 12, 1)',
border: 'rgba(255, 183, 12, .5)'
},
3: {
back: 'rgba(39, 96, 255, 1)',
border: 'rgba(39, 96, 255, .5)'
},
4: {
back: 'rgba(12, 255, 30, 1)',
border: 'rgba(12, 255, 30, .5)'
}
}
}
},
methods: {
}
}
</script>

195
src/views/OperationalOverview/components/baseContainer/index.vue Normal file
View File

@@ -0,0 +1,195 @@
<!--
* @Author: gtz
* @Date: 2022-01-19 15:58:17
* @LastEditors: zhp
* @LastEditTime: 2023-11-14 13:28:27
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->
<template>
<div class="base-container" ref="baseContainer" :style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
:class="{ 'no-padding': noPadding, 'border-none': !showLine }">
<!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
<template v-if="showLine">
<div class="line" />
<div class="line line-vertical" />
<div class="line line-right" />
<div class="line line-right-vertical" />
<div class="line line-bottom" />
<div class="line line-bottom-vertical" />
<div class="line line-bottom-right" />
<div class="line line-bottom-right-vertical" />
</template>
<div class="bar-item">
<div v-if="title" class="bar-title">
<span>
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
{{ title }}
</span>
</div>
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
<slot />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BaseContainer',
props: {
showLine: {
type: Boolean,
default: true
},
noPadding: {
type: Boolean,
default: false
},
back: {
type: String,
default: ''
},
noContentPadding: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
titleIcon: {
type: String,
default: ''
},
height: {
type: Number,
default: 200
},
baseSize: {
type: Number,
default: 12
},
beilv: {
type: Number,
default: 1
}
},
data() {
return {
curIndex: 0,
// imgUrl: require(`../../../../assets/img/${this.back}.png`),
}
},
created() {
// console.log(this.back);
// this.$nextTick(() => {
// this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)`
// })
// console.log(this.$refs.baseContainer.style)
},
methods: {
changeTab(num) {
this.curIndex = num
this.$emit('tabSelect', num)
}
}
}
</script>
<style lang="scss" scoped>
.base-container {
color: #fff;
width: 100%;
// background-color: rgba($color: #061027, $alpha: 0.15);
position: relative;
// border: 2px solid;
background: url('../../../../assets/img/energy.png') no-repeat;
background-size: 100% 100%;
// border-radius: 40px 0px 40px 0px;
// border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
// .line {
// position: absolute;
// border-top: 4px solid #52fff1;
// width: 2em;
// top: -0.25em;
// left: -0.25em;
// &-vertical {
// top: calc(-5em / 12);
// left: calc(-1em / 12);
// transform: rotate(90deg);
// transform-origin: left;
// }
// &-right {
// top: -0.25em;
// right: -0.25em;
// left: inherit;
// }
// &-right-vertical {
// top: calc(-5em / 12);
// right: calc(-1em / 12);
// left: inherit;
// transform: rotate(-90deg);
// transform-origin: right;
// }
// &-bottom {
// top: inherit;
// left: -0.25em;
// bottom: -0.25em;
// }
// &-bottom-vertical {
// top: inherit;
// left: calc(-1em / 12);
// bottom: calc(-5em / 12);
// transform: rotate(-90deg);
// transform-origin: left;
// }
// &-bottom-right {
// top: inherit;
// left: inherit;
// right: -0.25em;
// bottom: -0.25em;
// }
// &-bottom-right-vertical {
// top: inherit;
// left: inherit;
// right: calc(-1em / 12);
// bottom: calc(-5em / 12);
// transform: rotate(90deg);
// transform-origin: right;
// }
// }
.bar-item {
height: 100%;
display: flex;
flex-direction: column;
}
.bar-title {
width: 100%;
color: #52fff1;
font-size: 1.5em;
padding: 0.67em;
}
.bar-content {
padding: 1em;
flex: 1 auto;
}
.no-padding {
padding: 0;
}
.p-0 {
padding: 0;
}
&.border-none {
border: none;
}
}
</style>

187
src/views/OperationalOverview/components/baseContainer1/index.vue Normal file
View File

@@ -0,0 +1,187 @@
<!--
* @Author: gtz
* @Date: 2022-01-19 15:58:17
* @LastEditors: zhp
* @LastEditTime: 2023-09-21 16:15:14
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->
<template>
<div
class="base-container"
:style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
:class="{ 'no-padding': noPadding, 'border-none': !showLine }"
>
<!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
<template v-if="showLine">
<div class="line" />
<div class="line line-vertical" />
<div class="line line-right" />
<div class="line line-right-vertical" />
<div class="line line-bottom" />
<div class="line line-bottom-vertical" />
<div class="line line-bottom-right" />
<div class="line line-bottom-right-vertical" />
</template>
<div class="bar-item">
<div v-if="title" class="bar-title">
<span>
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
{{ title }}
</span>
</div>
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
<slot />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BaseContainer',
props: {
showLine: {
type: Boolean,
default: true
},
noPadding: {
type: Boolean,
default: false
},
noContentPadding: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
titleIcon: {
type: String,
default: ''
},
height: {
type: Number,
default: 200
},
baseSize: {
type: Number,
default: 12
},
beilv: {
type: Number,
default: 1
}
},
data() {
return {
curIndex: 0
}
},
mounted() {},
methods: {
changeTab(num) {
this.curIndex = num
this.$emit('tabSelect', num)
}
}
}
</script>
<style lang="scss" scoped>
.base-container {
color: #fff;
width: 100%;
background-color: rgba($color: #061027, $alpha: 0.15);
position: relative;
// border: 2px solid;
background: url('../../../../assets/img/bg-bottom-item.png') no-repeat;
background-size: 100% 100%;
// border-radius: 40px 0px 40px 0px;
// border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
// .line {
// position: absolute;
// border-top: 4px solid #52fff1;
// width: 2em;
// top: -0.25em;
// left: -0.25em;
// &-vertical {
// top: calc(-5em / 12);
// left: calc(-1em / 12);
// transform: rotate(90deg);
// transform-origin: left;
// }
// &-right {
// top: -0.25em;
// right: -0.25em;
// left: inherit;
// }
// &-right-vertical {
// top: calc(-5em / 12);
// right: calc(-1em / 12);
// left: inherit;
// transform: rotate(-90deg);
// transform-origin: right;
// }
// &-bottom {
// top: inherit;
// left: -0.25em;
// bottom: -0.25em;
// }
// &-bottom-vertical {
// top: inherit;
// left: calc(-1em / 12);
// bottom: calc(-5em / 12);
// transform: rotate(-90deg);
// transform-origin: left;
// }
// &-bottom-right {
// top: inherit;
// left: inherit;
// right: -0.25em;
// bottom: -0.25em;
// }
// &-bottom-right-vertical {
// top: inherit;
// left: inherit;
// right: calc(-1em / 12);
// bottom: calc(-5em / 12);
// transform: rotate(90deg);
// transform-origin: right;
// }
// }
.bar-item {
height: 100%;
display: flex;
flex-direction: column;
}
.bar-title {
width: 100%;
color: #52fff1;
font-size: 1.5em;
padding: 0.67em;
}
.bar-content {
padding: 1em;
flex: 1 auto;
}
.no-padding {
padding: 0;
}
.p-0 {
padding: 0;
}
&.border-none {
border: none;
}
}
</style>

187
src/views/OperationalOverview/components/baseTable.vue Normal file
View File

@@ -0,0 +1,187 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zhp
* @LastEditTime: 2023-11-14 10:11:09
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column
v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
:width="70"
align="center"
/>
<el-table-column
v-for="item in renderTableHeadList"
:key="item.prop"
:show-overflow-tooltip="showOverflow"
v-bind="item"
>
<template slot-scope="scope">
<component
:is="item.subcomponent"
v-if="item.subcomponent"
:inject-data="{...scope.row, ...item}"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
</div>
</template>
<script>
import { isObject, isString } from 'lodash'
export default {
name: 'BaseTable',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
props: {
tableData: {
type: Array,
required: true,
validator: val => val.filter(item => !isObject(item)).length === 0
},
tableConfig: {
type: Array,
required: true,
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
},
isLoading: {
type: Boolean,
required: false
},
page: {
type: Number,
required: false,
default: 1
},
limit: {
type: Number,
required: false,
default: 5
},
beilv: {
type: Number,
default: 1
},
showOverflow: {
type: Boolean,
default: true
},
showIndex: {
type: Boolean,
default: true
}
},
data() {
return {
tableConfigBak: [],
selectedBox: new Array(100).fill(true)
}
},
computed: {
renderData() {
if (this.tableData.length && !this.tableData[0]._pageIndex) {
this.tableData.forEach((item, index) => {
item._pageIndex = (this.page - 1) * this.limit + index + 1
})
}
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
},
renderTableHeadList() {
return this.tableConfig.filter((item, index) => {
return this.selectedBox[index]
})
}
},
beforeMount() {
this.selectedBox = new Array(100).fill(true)
},
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(14, 32, 62, 1)',
color: 'rgba(255,255,255,0.5)',
height: 26 + 'px',
lineHeight: 26 + 'px',
padding: 0,
fontSize: 12 + 'px'
}
} else {
return {
background: 'rgba(32, 55, 96, 1)',
color: 'rgba(255,255,255,0.5)',
height: 26 + 'px',
lineHeight: 26 + 'px',
padding: 0,
fontSize: 12 + 'px'
}
}
},
setCellStyle() {
return {
// lineHeight: 23 + 'px'
}
}
}
}
</script>
<style lang="scss">
@import "../styles/index.scss";
.visual-base-table-container {
.el-table {
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
}
// .setting {
// text-align: right;
// padding: 15px;
// .setting-box {
// width: 100px;
// }
// i {
// color: #aaa;
// @extend .pointer;
// }
// }
</style>

40
src/views/OperationalOverview/components/baseVideo.vue Normal file
View File

@@ -0,0 +1,40 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zhp
* @LastEditTime: 2023-11-13 16:41:28
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<div class="base-video-container">
<!-- <video id="v1" :style="{height: videoHeight + 'px'}" :src="require('../../../assets/video/3d.mkv')" autoplay loop muted /> -->
</div>
</template>
<script>
export default {
name: 'BaseVideo',
props: {
videoHeight: {
type: Number,
default: () => 200
},
beilv: {
type: Number,
default: () => 1
}
},
data() {
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.base-video-container{
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
}
</style>

325
src/views/OperationalOverview/components/doubleYChart .vue Normal file
View File

@@ -0,0 +1,325 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2023-10-16 14:20:45
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
</div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'linearBarChart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
borderRadius: {
type: Array,
default: () => [9, 9, 0, 0]
},
beilv: {
type: Number,
default: 1
},
height: {
type: Number,
default: 200
},
showLegend: {
type: Boolean,
default: false
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
series: []
}
},
mounted() {
console.log('mounted')
console.log('borderRadius: ', this.borderRadius)
this.series = [
{
name: this.dataList[0].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
]),
barBorderRadius: this.borderRadius
},
data: this.dataList[0].data,
barWidth: 6
},
{
name: this.dataList[1].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
]),
barBorderRadius: this.borderRadius
},
data: this.dataList[1].data,
barWidth: 6
},
{
name: this.dataList[2].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[2].topColor },
{ offset: 1, color: this.dataList[2].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[2].data,
barWidth: 6
},
{
name: this.dataList[3].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[3].topColor },
{ offset: 1, color: this.dataList[3].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[3].data,
barWidth: 6
},
{
name: this.dataList[4].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[4].topColor },
{ offset: 1, color: this.dataList[4].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[4].data,
barWidth: 6
},
{
name: this.dataList[5].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[5].topColor },
{ offset: 1, color: this.dataList[5].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[5].data,
barWidth: 6
}
]
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
console.log(1)
const colors = ['#5470C6', '#91CC75', '#EE6666']
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
legend: {
data: ['产线产量', '产线良品率'],
textStyle: {
fontSize: 12 * this.beilv,
color: '#ced1d5'
}
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
},
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
},
// yAxis: {
// },
yAxis: [
{
min: function() { // 取最小值向下取整为最小刻度
return 0
},
max: function(value) { // 取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true,
type: 'value',
name: '良品率/%',
nameTextStyle: {// y轴上方单位的颜色
color: '#fff'
},
position: 'right',
alignTicks: true,
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#ced1d5', // 坐标值得具体的颜色
formatter: '{value} 片'
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
{
min: function() { // 取最小值向下取整为最小刻度
return 0
},
max: function(value) { // 取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true,
type: 'value',
name: '产量/片', // y轴上方的单位
nameTextStyle: {// y轴上方单位的颜色
color: '#fff'
},
position: 'left',
alignTicks: true,
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
formatter: '{value} 片'
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }
// },
}
],
series: [
{
name: '产线产量',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#9DD5FF' },
{ offset: 1, color: '#1295FF' }
])
// barBorderRadius: this.borderRadius
},
data: [
2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561
]
},
{
name: '产线良品率',
type: 'line',
yAxisIndex: 0,
data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5]
}
]
})
}
}
}
</script>

237
src/views/OperationalOverview/components/linearBarChart.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
</div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'linearBarChart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
borderRadius: {
type: Array,
default: () => [9, 9, 0, 0]
},
beilv: {
type: Number,
default: 1
},
height: {
type: Number,
default: 200
},
showLegend: {
type: Boolean,
default: false
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
series: []
}
},
mounted() {
console.log('mounted')
console.log('borderRadius: ', this.borderRadius)
this.series = [
{
name: this.dataList[0].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
]),
barBorderRadius: this.borderRadius
},
data: this.dataList[0].data,
barWidth: 6
},
{
name: this.dataList[1].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
]),
barBorderRadius: this.borderRadius
},
data: this.dataList[1].data,
barWidth: 6
},
{
name: this.dataList[2].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[2].topColor },
{ offset: 1, color: this.dataList[2].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[2].data,
barWidth: 6
},
{
name: this.dataList[3].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[3].topColor },
{ offset: 1, color: this.dataList[3].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[3].data,
barWidth: 6
},
{
name: this.dataList[4].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[4].topColor },
{ offset: 1, color: this.dataList[4].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[4].data,
barWidth: 6
},
{
name: this.dataList[5].name,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[5].topColor },
{ offset: 1, color: this.dataList[5].bottomColor }
]),
// borderRadius: [5, 5, 0, 0]
barBorderRadius: this.borderRadius
},
data: this.dataList[5].data,
barWidth: 6
}
]
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
console.log(1)
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 30,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
},
data: this.nameList
},
yAxis: {
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
},
type: 'value'
},
legend: {
itemHeight: 10,
itemWidth: 10,
x: 'center', // 可设定图例在左、右、居中
y: 'top', // 可设定图例在上、下、居中
show: this.showLegend,
data: this.dataList,
right: '1%',
textStyle: {
fontSize: 12 * this.beilv,
color: '#ced1d5'
}
},
series: this.series
})
}
}
}
</script>

55
src/views/OperationalOverview/components/mixins/resize.js Normal file
View File

@@ -0,0 +1,55 @@
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
beforeDestroy() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
}
}

40
src/views/OperationalOverview/components/nextDay.vue Normal file
View File

@@ -0,0 +1,40 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zwq
* @LastEditTime: 2022-01-23 00:14:53
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<div class="next-day" :style="{background: injectData.nextLong < 0 ? 'rgba(255, 84, 76, 0.6)' : injectData.nextLong < 10 ? 'rgba(251, 211, 80, 0.6)' : 'rgba(142, 254, 83, 0.6)'}">
{{ injectData.nextLong }}
</div>
</template>
<script>
export default {
name: 'NextDay',
props: {
injectData: {
type: Object,
default: () => ({})
}
},
data() {
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.next-day{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
</style>

237
src/views/OperationalOverview/components/threeBarChart.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<div>
<div :id="id" :class="className" :style="{ height: height + 'px', width:width}" />
</div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'threeBarChart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: Number,
default: 200
},
showLegend: {
type: Boolean,
default: false
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
series: []
}
},
mounted() {
if (this.dataList.length > 1) {
this.series = [
{ // 柱体
name: this.dataList[0].name,
type: 'bar',
barWidth: 30,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
])
},
data: this.dataList[0].data
},
{ // 柱顶
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 20,
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
symbolSize: [30, 12],
zlevel: 2,
itemStyle: { color: this.dataList[0].topColor },
data: this.dataList[0].data
},
{ // 柱底
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 20,
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [30, 15],
itemStyle: { color: this.dataList[0].bottomColor },
data: this.dataList[0].data
},
{ // 柱体
name: this.dataList[1].name,
type: 'bar',
barWidth: 30,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
])
},
data: this.dataList[1].data
},
{ // 柱顶
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 20,
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
symbolSize: [30, 12],
zlevel: 2,
itemStyle: { color: this.dataList[1].topColor },
data: this.dataList[1].data
},
{ // 柱底
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 20,
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [30, 15],
itemStyle: { color: this.dataList[1].topColor },
data: this.dataList[1].data
}
]
} else {
this.series = [
{ // 柱体
name: this.dataList[0].name,
type: 'bar',
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
])
},
data: this.dataList[0].data
},
{ // 柱顶
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 12,
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
symbolSize: [12, 6],
zlevel: 2,
itemStyle: { color: this.dataList[0].topColor },
data: this.dataList[0].data
},
{ // 柱底
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 12,
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [12, 6],
itemStyle: { color: this.dataList[0].bottomColor },
data: this.dataList[0].data
}
]
}
this.$nextTick(() => {
console.log(this.series)
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
data: this.nameList
},
yAxis: {
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
},
type: 'value'
},
series: this.series
})
}
}
}
</script>

86
src/views/OperationalOverview/components/topRadioGroup.vue Normal file
View File

@@ -0,0 +1,86 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:27:34
* @LastEditors: zwq
* @LastEditTime: 2022-01-21 15:55:08
* @Description:
-->
<template>
<div class="top-radio-group" style="width:100%;text-align:center;">
<el-radio-group v-model="radioModel" size="mini" @change="handleChange">
<el-radio-button v-for="item in radioList" :key="item.value" :label="item.value">
{{ item.name }}
</el-radio-button>
</el-radio-group>
</div>
</template>
<script>
export default {
name: 'TopRadioGroup',
props: {
dateType: {
type: Number,
default: 0
},
radioList: {
type: Array,
default: () => {
return [{ value: '0', name: '当天' }, { value: '1', name: '本周' }, { value: '2', name: '本月' }]
}
}
},
data() {
return {
radioModel: 0
}
},
mounted() {
this.$nextTick(() => {
this.radioModel = this.dateType
})
},
methods: {
handleChange(v) {
this.$emit('change-time-range', v)
}
}
}
</script>
<style lang="scss" scoped>
.top-radio-group >>> .el-radio-group {
display: flex;
width: 100%;
}
.top-radio-group >>> .el-radio-button {
flex: 1 1;
}
.top-radio-group >>> .el-radio-button__inner {
padding: 4px 0;
text-align: center;
}
::v-deep .el-radio-button__inner {
width: 100%;
border: none;
background: #133648;
padding: 3px 2em;
margin-bottom: 1em;
margin-top: -0.5em;
color: white;
line-height: 14px;
outline: none;
box-shadow: none;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #3eb0ae;
border: none;
color: white;
outline: none;
box-shadow: none;
}
</style>

67
src/views/OperationalOverview/components/utilChart.vue Normal file
View File

@@ -0,0 +1,67 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zwq
* @LastEditTime: 2022-01-23 00:14:53
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<el-row class="util-chart">
<el-col :span="20" class="chart-main-box">
<div class="chart-main">
<div class="chart-cover" :style="{width: percent + '%', backgroundImage: `linear-gradient(to right, ${leftColor}, ${rightColor})`}" />
</div>
</el-col>
<el-col :span="3" :offset="1">
{{ percent }}%
</el-col>
</el-row>
</template>
<script>
export default {
name: 'UtilChart',
props: {
percent: {
type: Number,
default: () => 0
},
leftColor: {
type: String,
default: () => 'rgba(18, 149, 255, 1)'
},
rightColor: {
type: String,
default: () => 'rgba(157, 213, 255, 1)'
}
},
data() {
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.util-chart{
width: 100%;
.chart-main-box {
position: relative;
height: 1em;
.chart-main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: rgba(30, 45, 69, 1);
border-radius: 1em;
.chart-cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-radius: 1em;
}
}
}
}
</style>

66
src/views/OperationalOverview/components/videoFooter.vue Normal file
View File

@@ -0,0 +1,66 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zwq
* @LastEditTime: 2022-01-23 00:14:53
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<el-row class="base-footer-container" :style="{height: 36 + 'px'}">
<el-col v-for="item in footerList" :key="item" :span="4" class="base-footer-item" :style="{lineHeight: 36 + 'px', fontSize: 18 + 'px'}" :class="check === item ? 'isActive' : ''" @click.native="handleCheck(item)">
{{ item }}
</el-col>
</el-row>
</template>
<script>
export default {
name: 'BaseFooter',
props: {
beilv: {
type: Number,
default: () => 1
}
},
data() {
return {
footerList: ['钢1线', '钢2线', '钢3线', '钢4线', '钢5线', '钢6线'],
check: '钢1线'
}
},
methods: {
handleCheck(name) {
this.check = name
}
}
}
</script>
<style lang="scss" scoped>
.base-footer-container{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
.base-footer-item {
text-align: center;
cursor: pointer;
background: rgba($color: #133648, $alpha: 0.29);
}
.isActive {
background: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
position: relative;
}
.isActive::before {
content: '';
position: absolute;
top: -10px;
left: 0;
height:0;
width: 100%;
height: 10px;
transform-origin: 50% 100% 0;
transform: perspective(40px) rotateX(45deg);
background-image: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
}
}
</style>

969
src/views/OperationalOverview/processingBoard.vue Normal file
View File

@@ -0,0 +1,969 @@
<!--
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2023-10-17 11:10:22
* @Description:
-->
<template>
<div id="container" ref="container" class="visual-container" :style="styles">
<el-row
class="container-title"
:style="{
height: 88 + 'px',
lineHeight: 88 + 'px',
fontSize: 31 + 'px'
}"
>
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
许昌安彩深加工看板
<!-- <el-button
type="text"
class="title-button"
:style="{ right: 33 + 'px', top: 37 + 'px' }"
@click="changeFullScreen"
>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
</el-button> -->
</el-row>
<el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'设备报警'" :title-icon="'5_1'">
<base-table1
:page="1"
:limit="9"
:show-index="false"
:table-config="qualityYearTableProps"
:table-data="qualityYearList"
/>
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'各工序缺陷汇总'" :title-icon="'5_2'">
<div class="visual-select">
<el-select v-model="modelMonth" size="mini" placeholder="">
<el-option key="1" value="钢1线" label="钢1线" default />
</el-select>
</div>
<base-table1
:page="1"
:limit="9"
:show-index="false"
:table-config="qualityMonthTableProps"
:table-data="qualityMonthList"
/>
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'设备监控'" :title-icon="'5_3'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 为外部添加一个容器并显式地设置一个高度: -->
<!-- <div style="height: 300px;"> -->
<div style="width:100%; overflow: hidden scroll;">
<!-- <el-row style="margin-bottom: 1em">
<p class="now-team-title">加工工单进度</p>
</el-row> -->
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
{{ op.name }}
</p>
<p v-else class="now-secondary-title">{{ op.name }}</p>
</el-row>
<!-- <el-row>
<el-progress :percentage="100" class="custom-progress-bar" />
<p class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
成都碲化镉5000一期订单
</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">成都碲化镉二订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">长利订单1000</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">国际工程20号订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
</el-row> -->
</div>
<!-- </div> -->
</base-container>
</el-col>
</el-row>
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="256" :title="'能源监控'" :title-icon="'5_5'">
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div>
<el-row :gutter="9">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
<linear-bar-chart
:name-list="cxNameList"
:data-list="cxDataList"
:height="359"
:show-legend="true"
/>
</el-col>
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-table3
:page="2"
:limit="5"
:table-config="qualityTableProps2"
:table-data="qualityList2"
/>
</el-col> -->
</el-row>
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'5_4'">
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div>
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<double-y-chart
:id=" 'doubleYChart' "
:name-list="cxNameList"
:data-list="cxDataList"
:height="359"
:show-legend="true"
/>
</base-container>
</el-col>
</el-row>
<!-- end -->
<!-- <el-col :span="16">
<el-row>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
<base-container :height="672">
<base-video :video-height="624" />
</base-container>
</el-col>
</el-row>
</el-col>
-->
</el-row>
</div>
</template>
<script>
import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable'
// import baseTable2 from './components/baseTable'
// import baseTable3 from './components/baseTable'
import TopRadioGroup from './components/topRadioGroup'
// import pieChart1 from './components/PieChart'
// import pieChart2 from './components/PieChart'
// import pieChart3 from './components/PieChart'
// import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
// import BaseVideo from './components/baseVideo.vue'
import alarmLevel from './components/alarmLevel'
// import axios from '@/utils/request'
import doubleYChart from './components/doubleYChart '
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
// let resizeFun = null
import LinearBarChart from './components/linearBarChart'
const qualityTableProps1 = [
{
prop: 'name',
label: '产线名称'
},
{
prop: 'createTime',
label: '发生时间'
},
{
prop: 'code',
label: '质量编码'
},
{
prop: 'content',
label: '质量内容'
}
]
const qualityTableProps2 = [
{
prop: 'name',
label: '工序名称'
},
{
prop: 'createTime',
label: '发生时间'
},
{
prop: 'code',
label: '质量编码'
},
{
prop: 'content',
label: '质量内容'
}
]
const cxNameList = ['周一', '周二', '周三', '周四', '周五']
const cxDataList = [
{
topColor: '#9DD5FF',
bottomColor: '#1295FF',
name: '电耗能',
data: [100, 150, 121, 97, 140]
},
{
topColor: '#FF8BC3',
bottomColor: '#EB46A1',
name: '水耗能',
data: [110, 110, 151, 77, 110]
},
{
topColor: '#85F6E9',
bottomColor: '#2EC6B4',
name: '天然气',
data: [110, 120, 171, 287, 40]
},
{
topColor: '#9496FF',
bottomColor: '#6567FF',
name: '焦炉煤气',
data: [140, 157, 122, 27, 240]
},
{
topColor: '#F68E8A',
bottomColor: '#E95552',
name: '余热发电',
data: [170, 180, 127, 17, 340]
},
{
topColor: '#FFE873',
bottomColor: '#E7AE2A',
name: '二氧化硫',
data: [140, 160, 121, 57, 170]
}
]
const qualityList1 = [
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
{ name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' }
]
const qualityList2 = [
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
{ name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' },
{ name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' },
{ name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' },
{ name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' }
]
const legendData1 = [
{
name: '设备1',
icon: 'circle',
value: 196
},
{
name: '设备2',
icon: 'circle',
value: 147
},
{
name: '设备3',
icon: 'circle',
value: 24
},
{
name: '设备4',
icon: 'circle',
value: 85
},
{
name: '设备5',
icon: 'circle',
value: 8
},
{
name: '设备6',
icon: 'circle',
value: 112
},
{
name: '设备7',
icon: 'circle',
value: 146
},
{
name: '设备8',
icon: 'circle',
value: 27
},
{
name: '设备9',
icon: 'circle',
value: 2
},
{
name: '设备10',
icon: 'circle',
value: 90
}
]
const legendData2 = [
{
name: '磨边',
icon: 'circle',
value: 196
},
{
name: '清洗',
icon: 'circle',
value: 135
},
{
name: '固化',
icon: 'circle',
value: 144
},
{
name: '镀膜',
icon: 'circle',
value: 97
},
{
name: '激光打孔',
icon: 'circle',
value: 12
},
{
name: '丝网印刷',
icon: 'circle',
value: 10
},
{
name: '钢化炉',
icon: 'circle',
value: 3
}
]
const legendData3 = [
{
name: '钢一线',
icon: 'circle',
value: 196
},
{
name: '钢二线',
icon: 'circle',
value: 133
},
{
name: '钢三线',
icon: 'circle',
value: 24
},
{
name: '钢四线',
icon: 'circle',
value: 77
},
{
name: '钢五线',
icon: 'circle',
value: 77
}
]
const qualityYearTableProps = [
{
prop: 'eqName',
label: '设备名称'
},
{
prop: 'eqCode',
label: '设备编码'
},
{
prop: 'level',
label: '报警级别',
subcomponent: alarmLevel,
align: 'center'
},
{
prop: 'content',
label: '报警内容'
}
]
const qualityYearList = [
{ eqName: '钢化炉', eqCode: '21321312', level: 1, content: 'Temperature high' },
{ eqName: '磨边机', eqCode: '32323232', level: 4, content: 'Device warning/alarm' },
{ eqName: '镀膜机', eqCode: '32213213', level: 3, content: 'Temperature high' },
{ eqName: '钢化清洗机', eqCode: '21321323', level: 1, content: 'P030: JET: Note: Transportation subsequent machine is not running' },
{ eqName: '固化机', eqCode: '21321321', level: 2, content: 'P040' },
{ eqName: '磨边清洗机', eqCode: '21321321', level: 2, content: 'M4033.6' },
{ eqName: '预热机', eqCode: '21321321', level: 2, content: 'M4033.6' },
{ eqName: '下片机', eqCode: '21321321', level: 3, content: 'P040' },
{
eqName: '冷却机', eqCode: '21321321', level: 4, content: 'P0xx: Pos. number exhaust UVnumber: Reserve' },
{
eqName: 'A储片机106', eqCode: '21321321', level: 1, content: 'P0xx: Pos. number exhaust UVnumber: Reserve' },
{ eqName: '二次清洗机', eqCode: '21321321', level: 2, content: 'Temperature high' },
{ eqName: '二次磨边机', eqCode: '21321321', level: 2, content: 'Temperature high' },
{ eqName: '测试设备', eqCode: '21321321', level: 2, content: 'Temperature high' }
]
const qualityMonthTableProps = [
{
prop: 'lineName',
label: '产线名'
},
{
prop: 'process',
label: '工序'
},
{
prop: 'eqName',
label: '设备名'
},
{
prop: 'eqCode',
label: '设备编码'
},
{
prop: 'long',
label: '总运行时长(h)'
},
// {
// prop: 'createTime',
// label: '保养时间'
// },
{
prop: 'status',
label: '设备状态'
}
// {
// prop: 'nextCreateTime',
// label: '下次保养时间'
// }
// {
// prop: 'nextLong',
// label: '距离保养时间(天)',
// // subcomponent: nextDay,
// align: 'center'
// }
]
const qualityMonthList = [
{
lineName: '钢一线',
process: '41',
eqName: '二次清洗机',
eqCode: '2312312',
long: '200',
// createTime: '2021-02-25 12:00:01',
status: '报警'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 365
},
{
lineName: '钢二线',
process: '41',
eqName: '锻造机',
eqCode: '43434',
long: '252',
// createTime: '2021-11-25 12:00:01',
status: '正常'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 4
},
{
lineName: '钢三线',
process: '41',
eqName: '设备3',
eqCode: '23213212',
long: '100',
// createTime: '2021-10-25 12:00:01',
status: '故障停机'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 24
},
{
lineName: '钢四线',
process: '41',
eqName: '设备4',
eqCode: '23213',
long: '322',
// createTime: '2021-02-25 12:00:01',
status: '故障停机'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: -36
},
{
lineName: '钢五线',
process: '41',
eqName: '设备5',
eqCode: '23121312',
long: '232',
// createTime: '2021-06-25 12:00:01',
status: '待机'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
},
{
lineName: '钢五线',
process: '41',
eqName: '设备5',
eqCode: '23121312',
long: '212',
// createTime: '2021-06-25 12:00:01',
status: '待机'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
},
{
lineName: '钢五线',
process: '41',
eqName: '设备5',
eqCode: '23121312',
long: '123',
// createTime: '2021-06-25 12:00:01',
status: '镀膜机'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
},
{
lineName: '钢五线',
process: '41',
eqName: '清洗机',
eqCode: '23121312',
long: '322',
// createTime: '2021-06-25 12:00:01',
status: 'Remote'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
},
{
lineName: '钢五线',
process: '41',
eqName: '磨边机',
eqCode: '23121312',
long: '232',
// createTime: '2021-06-25 12:00:01',
status: 'Non-scheduled'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
},
{
lineName: '钢五线',
process: '41',
eqName: '磨边机',
eqCode: '23121312',
long: '232',
// createTime: '2021-06-25 12:00:01',
status: 'Non-scheduled'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
},
{
lineName: '钢五线',
process: '41',
eqName: '磨边机',
eqCode: '23121312',
long: '232',
// createTime: '2021-06-25 12:00:01',
status: 'Non-scheduled'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
},
{
lineName: '钢五线',
process: '41',
eqName: '磨边机',
eqCode: '23121312',
long: '232',
// createTime: '2021-06-25 12:00:01',
status: 'Non-scheduled'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
},
{
lineName: '钢五线',
process: '41',
eqName: '磨边机',
eqCode: '23121312',
long: '232',
// createTime: '2021-06-25 12:00:01',
status: 'Non-scheduled'
// nextCreateTime: '2022-12-25 12:00:01',
// nextLong: 111
}
]
const orderProcessList = [
{
id: '1', outRate: '.8', name: '凯盛0322'
}, {
id: '1', outRate: '.4', name: '光伏玻璃4.0'
}, {
id: '1', outRate: '.5', name: '光伏玻璃3.0'
}, {
id: '1', outRate: '.3', name: '光伏玻璃2.0'
}, {
id: '1', outRate: '.5', name: '光伏玻璃1.0'
}, {
id: '1', outRate: '.8', name: '光伏玻璃'
},
{
id: '1', outRate: '.8', name: '统计订单'
}
]
export default {
name: 'ProductionMonitoringCockpit',
components: {
baseContainer,
baseTable1,
// baseTable2,
// baseTable3,
TopRadioGroup,
doubleYChart,
LinearBarChart
// pieChart1,
// pieChart2
// pieChart3
// BaseVideo
},
data() {
return {
beilv2: 1,
beilv: 1,
value: 100,
// offsetWidth: null,
qualityYearTableProps,
cxNameList,
cxDataList,
qualityYearList,
clientWidth: 0,
containerWidth: 111111,
isFullScreen: false,
// orderProcessList: [],
orderProcessList,
qualityTableProps1,
qualityMonthList,
qualityMonthTableProps,
modelMonth: '',
qualityList1,
qualityTableProps2,
qualityList2,
dateType: '0',
legendData1,
legendData2,
legendData3
}
},
computed: {
// ...mapGetters(['sidebar']),
styles() {
const v = Math.floor(this.value * this.beilv2 * 100) / 10000
return {
transform: `scale(${v})`,
transformOrigin: 'top left'
}
}
},
watch: {
clientWidth(val) {
if (!this.timer) {
this.clientWidth = val
this.beilv2 = this.clientWidth / 1920
this.timer = true
let _this = this
setTimeout(function () {
_this.timer = false
}, 500)
}
// 这里可以添加修改时的方法
this.windowWidth(val);
}
},
created() {
// this.fetchList('exception-alarm')
// this.fetchList('inAndOutOfEachLine')
// this.fetchList('order-process')
// this.fetchList('line-chart-data')
this.init()
this.windowWidth(document.documentElement.clientWidth)
},
mounted() {
const _this = this;
window.onresize = () => {
return (() => {
_this.clientWidth = `${document.documentElement.clientWidth}`
this.beilv2 = _this.clientWidth / 1920
})()
}
// this.beilv2 = window.innerWidth / 1920
// addEventListener('resize', resizeFun = () => {
// this.beilv2 = window.innerWidth / 1920
// })
// erd.listenTo(document, (element) => {
// console.log(element.offsetWidth)
// this.beilv2 = element.offsetWidth / 1920
// // var width = element.offsetWidth;
// // var height = element.offsetHeight;
// });
},
// beforeDestroy() {
// //离开页面删除检测器和所有侦听器
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
// removeEventListener('resize', resizeFun)
// },
methods: {
windowWidth(value) {
this.clientWidth = value
},
// fetchList(type) {
// switch (type) {
// case 'order-process':
// return axios({
// url: '/analysis/factory-monitor/order',
// method: 'post'
// }).then(res => {
// if (res.data) {
// this.orderProcessList = res.data
// // this.orderProcessList = [
// // { id: 1, name: '订单1', outRate: 0.5 },
// // { id: 2, name: '订单2', outRate: 0.54 },
// // { id: 3, name: '订单3', outRate: 0.45 },
// // { id: 4, name: '订单4', outRate: 0.65 },
// // { id: 5, name: '订单5', outRate: 0.35 },
// // { id: 6, name: '订单6', outRate: 0.15 },
// // { id: 7, name: '订单7', outRate: 0.5 },
// // { id: 8, name: '订单8', outRate: 0.5 }
// // ]
// } else {
// this.orderProcessList.splice(0)
// }
// })
// }
// },
change() {
this.isFullScreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
},
changeFullScreen() {
this.containerWidth = 223223223
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle(this.$refs.container)
}
}
}
</script>
<style lang="scss" scoped>
.visual-container {
width: 1920px;
height: 1080px;
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
background-size: cover;
// opacity: .8;
.container-title {
width: 100%;
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
background-size: 100% 100%;
color: #00fff0;
text-align: center;
.title-button {
color: #00fff0;
font-size: 20px;
position: absolute;
}
}
.container-main {
padding: 10px;
}
}
.now-team-title {
margin: 0;
margin-top: -1em;
font-size: 1.2em;
line-height: 2em;
color: #fff;
}
.main-title {
text-align: center;
}
.now-secondary-title {
margin: 0;
font-size: 1em;
line-height: 2em;
color: #fff;
}
.now-team-content {
font-size: 3em;
line-height: 1em;
color: #52fff1;
text-align: center;
}
::v-deep .el-progress-bar__inner {
background-color: unset;
background-image: linear-gradient(to right, #4573fe, #47f8dc);
}
.visual-select {
position: absolute;
right: 1em;
top: 2em;
}
// .container-main {
// padding: 0px;
// }
</style>
<style lang="scss">
.visual-container {
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background: #1b2b3d;
}
::-webkit-scrollbar-corner {
background: #1b2b3d;
}
::-webkit-scrollbar-track {
width: 6px;
background: #1b2b3d;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background: rgba($color: #5bc4be, $alpha: 0.7);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
transition: background-color 0.3s;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba($color: #5bc4be, $alpha: 1);
}
}
.el-input {
min-height: 10px;
}
.el-input__inner {
background-color: rgba($color: #31878c, $alpha: 0.29);
border: rgba($color: #31878c, $alpha: 0.29);
color: aliceblue;
}
.el-divider--vertical {
height: 174px;
width: 1px;
border: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.15);
margin-left: 3em;
}
</style>
<style scoped>
.flex-col {
flex-direction: column;
}
.flex-1 {
flex: 1 1;
}
.h-full {
height: calc(100vh - 150px);
}
/* .container-main {
min-height: calc(100vh - 10em);
} */
</style>

99
src/views/OperationalOverview/styles/btn.scss Normal file
View File

@@ -0,0 +1,99 @@
@import './variables.scss';
@mixin colorBtn($color) {
background: $color;
&:hover {
color: $color;
&:before,
&:after {
background: $color;
}
}
}
.blue-btn {
@include colorBtn($blue)
}
.light-blue-btn {
@include colorBtn($light-blue)
}
.red-btn {
@include colorBtn($red)
}
.pink-btn {
@include colorBtn($pink)
}
.green-btn {
@include colorBtn($green)
}
.tiffany-btn {
@include colorBtn($tiffany)
}
.yellow-btn {
@include colorBtn($yellow)
}
.pan-btn {
font-size: 14px;
color: #fff;
padding: 14px 36px;
border-radius: 8px;
border: none;
outline: none;
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
background: #fff;
&:before,
&:after {
width: 100%;
transition: 600ms ease all;
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
&::after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
}
.custom-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #fff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
padding: 10px 15px;
font-size: 14px;
border-radius: 4px;
}

173
src/views/OperationalOverview/styles/element-ui.scss Normal file
View File

@@ -0,0 +1,173 @@
// cover some element-ui styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.el-upload {
input[type="file"] {
display: none !important;
}
}
.el-upload__input {
display: none;
}
.cell {
.el-tag {
margin-right: 0px;
}
}
.visual-container {
.el-table {
.cell {
line-height: 1.2em !important;
}
}
}
.app-container {
.el-table th>.cell {
color: rgb(0, 0, 0,0.85);
}
.el-table__body tr.current-row>td {
background-color: #EAF1FC;
}
}
.el-table--medium th, .el-table--medium td {
padding: 5px 0;
}
::v-deep .el-table__fixed-right {
right: 0 !important;
height: 100% !important;
}
.el-button--mini {
padding: 4px 0;
}
.small-padding {
.cell {
padding-left: 5px;
padding-right: 5px;
}
}
.fixed-width {
.el-button--mini {
padding: 7px 10px;
min-width: 60px;
}
}
.status-col {
.cell {
padding: 0 10px;
text-align: center;
.el-tag {
margin-right: 0px;
}
}
}
.el-button--primary {
background-color: #0B58FF !important;
border-color: #0B58FF !important;
}
// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
border-radius: 4px;
}
.el-dialog__header {
padding: 12px 24px 8px;
border-bottom: 1px solid #E9E9E9;
text-align: left;
}
.el-dialog__title {
font-size: 16px;
font-weight: 700;
color: rgba(0, 0, 0, 0.85);
}
.el-form-item__label {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
padding-right: 8px;
}
.el-dialog__headerbtn {
top: 16px;
right: 24px;
}
.el-form-item--medium .el-form-item__label {
line-height: 32px;
}
.el-button--medium {
padding: 8px 16px;
}
.el-select {
width: 100%;
}
.el-switch.is-checked .el-switch__core {
background-color: #0B58FF;
border-color: #0B58FF;
}
.el-radio__input.is-checked .el-radio__inner {
background-color: #0B58FF;
border-color: #0B58FF;
}
.el-button--text{
color:#0B58FF;
}
.el-tabs__item.is-active {
color: #0b58ff;
}
.el-tooltip__popper.is-dark {
max-width: 1100px;
}
// refine element ui upload
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
// dropdown
.el-dropdown-menu {
a {
display: block
}
}
// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
display: inline-flex !important;
}
// to fix el-date-picker css style
.el-range-separator {
box-sizing: content-box;
}

31
src/views/OperationalOverview/styles/element-variables.scss Normal file
View File

@@ -0,0 +1,31 @@
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
// $--color-text-regular: #1f2d3d;
$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;
$--table-border: 1px solid #dfe6ec;
/* icon font path, required */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
theme: $--color-primary;
}

319
src/views/OperationalOverview/styles/index.scss Normal file
View File

@@ -0,0 +1,319 @@
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
label {
font-weight: 700;
}
html {
height: 100%;
box-sizing: border-box;
}
#app {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.no-padding {
padding: 0px !important;
}
.padding-content {
padding: 4px 0;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
div:focus {
outline: none;
}
.fr {
float: right;
}
.fl {
float: left;
}
.pr-5 {
padding-right: 5px;
}
.pl-5 {
padding-left: 5px;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
.inlineBlock {
display: block;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
aside {
background: #eef1f6;
padding: 8px 24px;
margin-bottom: 20px;
border-radius: 2px;
display: block;
line-height: 32px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
a {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
}
//main-container全局样式
.app-container {
margin:0 16px 0;
background-color: #fff;
border-radius: 4px;
padding: 16px 16px 0;
height: calc(100vh - 134px);
overflow: auto;
}
.components-container {
margin: 30px 50px;
position: relative;
}
// 覆盖原有的分页样式-start
.el-pagination {
position: relative;
}
.el-pagination.is-background .btn-prev,.el-pagination.is-background .btn-next,.el-pagination.is-background .el-pager li {
background-color: #fff;
}
.el-pagination__jump {
margin-left: 125px;
}
.el-pagination__sizes {
position: absolute;
right: 100px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #0B58FF;
}
.el-pagination .el-select .el-input .el-input__inner {
height: 22px;
}
.el-badge__content {
border: none;
}
// 覆盖原有的分页样式-end
.text-center {
text-align: center
}
.sub-navbar {
height: 50px;
line-height: 50px;
position: relative;
width: 100%;
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
.subtitle {
font-size: 20px;
color: #fff;
}
&.draft {
background: #d0d0d0;
}
&.deleted {
background: #d0d0d0;
}
}
.link-type,
.link-type:focus {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
//refine vue-multiselect plugin
.multiselect {
line-height: 16px;
}
.multiselect--active {
z-index: 1000 !important;
}
// 业务代码中
.content-row {
padding: 10px 0;
}
.el-dialog {
width: 1000px;
}
.el-dialog__body {
padding: 30px 40px;
}
.el-dialog__wrapper {
backdrop-filter: blur(5px);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color:rgba(144,147,153,0);
}
::-webkit-scrollbar-corner {
background-color:rgba(144,147,153,0);
}
::-webkit-scrollbar-track {
width: 6px;
background: rgba(144,147,153,0);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(144,147,153,.5);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
transition: background-color .3s;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(144,147,153,.3);
}
// 数据分析单选框样式覆盖
.app-container{
.data-analysis-radio{
.el-radio-button__inner {
border: 0;
padding: 7px 0;
margin: 0 15px;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
background-color: transparent;
color: #606266;
box-shadow: 0 0 0 0 transparent;
border-bottom: 2px solid #0B58FF;
}
.el-radio-button:first-child .el-radio-button__inner,
.el-radio-button:last-child .el-radio-button__inner {
border-radius: 0;
}
}
}
.el-table--group, .el-table--border {
border: none;
}
// 全局loading样式覆盖
.el-loading-mask{
z-index: 99999;
}
input::-webkit-input-placeholder {
/* WebKit browsers */
font-size:12px;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size:12px;
}
input:-ms-input-placeholder {
font-size:12px;
}

66
src/views/OperationalOverview/styles/mixin.scss Normal file
View File

@@ -0,0 +1,66 @@
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
@mixin pct($pct) {
width: #{$pct};
position: relative;
margin: 0 auto;
}
@mixin triangle($width, $height, $color, $direction) {
$width: $width/2;
$color-border-style: $height solid $color;
$transparent-border-style: $width solid transparent;
height: 0;
width: 0;
@if $direction==up {
border-bottom: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==right {
border-left: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
@else if $direction==down {
border-top: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==left {
border-right: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
}

209
src/views/OperationalOverview/styles/sidebar.scss Normal file
View File

@@ -0,0 +1,209 @@
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
// margin-left: $sideBarWidth;
position: relative;
}
.sidebar-container {
transition: width 0.28s;
// width: $sideBarWidth !important;
// background-color: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
// background-color: $menuHover !important;
}
}
.is-active>.el-submenu__title {
// color: $subMenuActiveText !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
// min-width: $sideBarWidth !important;
// background-color: $subMenuBg !important;
&:hover {
// background-color: $subMenuHover !important;
}
}
}
.hideSidebar {
.sidebar-container {
width: 54px !important;
}
.main-container {
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
// min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform .28s;
// width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
// transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
// background-color: $menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}

48
src/views/OperationalOverview/styles/transition.scss Normal file
View File

@@ -0,0 +1,48 @@
// global transition css
/* fade */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
}
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
}
.breadcrumb-move {
transition: all .5s;
}
.breadcrumb-leave-active {
position: absolute;
}

35
src/views/OperationalOverview/styles/variables.scss Normal file
View File

@@ -0,0 +1,35 @@
// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#0B253F;
$subMenuHover:#001528;
$sideBarWidth: 248px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
// menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}

24
src/views/choicePart/components/Navbar.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="navbar">
<div style="color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 13px">
<img src="../../../assets/images/cnbm.png" style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px" alt="">
MES
</div>
<div style="padding-top: 15px; padding-right: 38px;">
<navbar-right />
</div>
</div>
</template>
<script>
import NavbarRight from '../../../layout/components/NavbarRight.vue'
export default {
name: 'Navbar',
components: { NavbarRight }
}
</script>
<style lang='scss' scoped>
.navbar {
height: 64px;
background: rgba(8, 17, 50, 0.25);
}
</style>

312
src/views/choicePart/index.vue Normal file
View File

@@ -0,0 +1,312 @@
<template>
<div class="choicepart-container">
<navbar />
<div class="choicepart-wrapper">
<div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1574px;height:538px;'">
<div class="choicepart-line1">
<div
v-for="(item, index) in menuArr1"
:key="index"
class="choicepart-item"
@click="handelClick(item, item.choicepart)"
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}"
>
<div>
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt="">
</div>
<div class="choicepart-item-title">{{item.meta.title}}</div>
</div>
</div>
<div class="choicepart-line2">
<div
v-for="(item, index) in menuArr2"
:key="index"
class="choicepart-item"
@click="handelClick(item, item.choicepart)"
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}"
>
<div>
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt="">
</div>
<div class="choicepart-item-title">{{item.meta.title}}</div>
</div>
</div>
</div>
</div>
<div class="choicepart-footer">&copy; 中建材智能自动化研究院有限公司</div>
</div>
</template>
<script>
import Navbar from './components/Navbar.vue'
import { debounce } from '@/utils/debounce'
export default {
components: { Navbar },
name: 'choicePart',
data() {
return {
boxReset: '',
scale: 1,
menuArr1: [
{
name: 'Core',
title: '基础核心',
visible: false,
meta: {
title: ''
}
},
{
name: 'Order',
title: '订单管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'Equipment',
title: '设备管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'Group',
title: '班组管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'Quality',
title: '质量管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'Warehouse',
title: '仓库管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'Energy',
title: '能源管理',
visible: false,
meta: {
title: ''
}
}
],
menuArr2: [
{
name: 'Packaging',
title: '包装管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'Material',
title: '物料管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'Extend',
title: '工艺管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'Delivery',
title: '成品发货',
visible: false,
meta: {
title: ''
}
},
{
name: 'Report',
title: '报表管理',
visible: false,
meta: {
title: ''
}
},
{
name: 'System',
title: '系统管理',
visible: false,
meta: {
title: ''
}
}
],
}
},
// computed:{
// ...mapGetters(['sidebarRouters'])
// },
mounted() {
this.getMsg()
this.boxReset = debounce(() => {
this.resetSize()
}, 300)
this.boxReset()
window.addEventListener('resize', () => {
this.boxReset()
})
},
methods: {
getMsg() {
let menuList = this.$store.state.permission.sidebarRouters
console.log(menuList)
if (menuList.length > 0) {
for (let i = 0; i < menuList.length; i ++) {
for (let k = 0; k < 7; k++) {
if (menuList[i].name === this.menuArr1[k].name) {
this.menuArr1[k].visible = true
this.menuArr1[k].id = menuList[i].id
this.menuArr1[k].choicepart = i
this.menuArr1[k].children = menuList[i].children
this.menuArr1[k].meta = menuList[i].meta
}
}
for (let j = 0; j < 6; j++) {
if (menuList[i].name === this.menuArr2[j].name) {
this.menuArr2[j].visible = true
this.menuArr2[j].id = menuList[i].id
this.menuArr2[j].choicepart = i
this.menuArr2[j].children = menuList[i].children
this.menuArr2[j].meta = menuList[i].meta
}
}
}
}
console.log(this.menuArr1)
console.log(this.menuArr2)
},
handelClick(item, index) {
// this.$router.push({name: 'SystemUser'})
this.$store.dispatch('app/setChoicepart', index)
this.toRouter(item)
// if (item.meta.unuse) {
// this.$message.warning(this.$t('暂无数据'))
// } else {
// this.toRouter(item)
// }
},
toRouter(item) {
console.log(item)
if (item.children) {
this.toRouter(item.children[0])
} else {
this.$router.push({ name: item.name })
}
},
resetSize() {
let choicepartBox = document.querySelector('#choicepartBox')
let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight)
let bw = parseFloat(choicepartBox.style.width)
let bh = parseFloat(choicepartBox.style.height)
let wx = 0.82/(bw / rw)
let hx = 0.56/(bh / rh)
this.scale = wx > hx ? hx : wx
}
}
}
</script>
<style lang='scss' scoped>
.choicepart-container {
position: relative;
width: 100%;
height: 100%;
background: url('../../assets/images/choicepart/choicepart-back.png') repeat;
background-size: 100% 100%;
.choicepart-wrapper {
width: 100vw;
height: calc(100vh - 94px);
display: flex;
justify-content: center;
align-items: center;
}
.choicepart-box {
// border: 1px solid red;
.choicepart-line1 {
width: 100%;
margin-bottom: 80px;
display: flex;
flex-flow: row nowrap;
}
.choicepart-line2 {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.choicepart-item {
width: 184px;
height: 224px;
background: url('../../assets/images/choicepart/choice-item-back.png') no-repeat;
background-size: 100% 100%;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
position: relative;
margin: 0 20px;
img {
width: 184px;
height: 224px;
}
.choicepart-item-title {
overflow: hidden;
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
bottom: 0;
left: 2px;
right: 2px;
text-align: center;
color: #fff;
font-size: 16px;
line-height: 40px;
height: 40px;
letter-spacing: 2px;
background-color: rgba($color: #0b58ff, $alpha: 0.45);
}
}
.choicepart-item:hover {
.choicepart-item-title {
background-color: rgba($color: #0b58ff, $alpha: 1);
}
}
}
.choicepart-footer {
position: absolute;
width: 100%;
color: #C7C7C7;
user-select: none;
font-size: 12px;
letter-spacing: 1px;
height: 30px;
display: grid;
place-content: center;
bottom: 0;
opacity: 0.5;
}
}
</style>

3
src/views/energy/base/energyPlcConnect/index.vue
View File

@@ -67,7 +67,8 @@ const tableProps = [
},
{
prop: 'plcTableCode',
label: '关联表编码'
label: '关联表编码',
showOverflowtooltip: true
},
{
prop: 'cnName',

17
src/views/group/base/groupClasses/components/groupClassAdd.vue
View File

@@ -116,6 +116,7 @@ export default {
getGroupClasses(id).then((res) => {
if (res.code === 0) {
this.form = res.data
this.form.disableTime = res.data.disableTime || ''
}
})
} else {
@@ -145,22 +146,10 @@ export default {
submitForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
let obj = {}
if (this.form.disableTime) {
obj = this.form
} else {
obj.id = this.form.id
obj.name = this.form.name
obj.code = this.form.code
obj.enableTime = this.form.enableTime
obj.startTime = this.form.startTime
obj.endTime = this.form.endTime
obj.daySpan = this.form.daySpan
obj.remark = this.form.remark
}
this.form.disableTime = this.form.disableTime || ''
if (this.isEdit) {
//编辑
updateGroupClasses({ ...obj }).then((res) => {
updateGroupClasses({ ...this.form }).then((res) => {
if (res.code === 0) {
this.$modal.msgSuccess("操作成功");
this.$emit('successSubmit')

10
src/views/group/base/groupTeamScheduling/index.vue
View File

@@ -34,7 +34,7 @@
<el-button type="primary" size="small" plain v-show="showSetting" @click="cancelSetting">取消</el-button>
</el-form-item>
<el-form-item label="请先选择查询的班组" class="rightItem">
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('1')">班组上下片查询</el-button>
<!-- <el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('1')">班组上下片查询</el-button> -->
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('2')">班组能源查询</el-button>
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('3')">班组检测查询</el-button>
</el-form-item>
@@ -286,22 +286,18 @@ export default {
case '1':
this.$router.push({
path: '/core/enhance/product-line-24h?startTime='+this.chooseObj.startTime+'&endTime='+this.chooseObj.endTime,
// name: 'ProductionLineData',
// params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
})
break;
case '2': // 能源
this.$router.push({
path: '/energy/monitoring/energy-report-search?startTime='+this.chooseObj.startTime+'&endTime='+this.chooseObj.endTime
// name: 'EnergyReportSearch',
// params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
})
break;
default:
this.$router.push({
path: '/quality/monitoring/quality-statistics',
path: '/quality/base/quality-inspection-data/detection-information/statistical-data?startTime='+this.chooseObj.startTime+'&endTime='+this.chooseObj.endTime,
// name: 'QualityStatistics',
params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
// params: { startTime: this.chooseObj.startTime, endTime: this.chooseObj.endTime }
})
}
}

807
src/views/login.vue
View File

@@ -1,81 +1,238 @@
<template xmlns="">
<div class="container">
<div class="logo"></div>
<!-- 登录区域 -->
<div class="content">
<!-- 配图 -->
<div class="pic"></div>
<!-- 表单 -->
<div class="field">
<!-- [移动端]标题 -->
<h2 class="mobile-title">
<h3 class="title">芋道后台管理系统</h3>
</h2>
<div class="container">
<div class="logo"></div>
<!-- 登录区域 -->
<div class="content">
<!-- 配图 -->
<div class="pic">
<div
class="welcome"
style="
position: absolute;
top: 15%;
left: 20%;
user-select: none;
display: flex;
flex-direction: column;
align-items: flex-start;
">
<strong
style="
letter-spacing: 1px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 500;
font-size: 88px;
">
<span style="color: #26b9de">Wel</span>
<span style="color: #fff">come</span>
</strong>
<p
style="
margin: 0;
font-size: 26px;
letter-spacing: 1px;
color: #26b9de;
opacity: 75%;
">
<span
style="
display: inline-block;
height: 20px;
width: 20px;
margin-left: 8px;
margin-right: 12px;
border-radius: 100%;
background: #26b9de;
"></span>
产线生产监控系统
</p>
</div>
<video
src="/static/videos/login.webm"
muted
autoplay
loop
style="
user-select: none;
position: absolute;
top: 28%;
width: 100%;
height: 70%;
"></video>
</div>
<!-- 表单 -->
<div class="field">
<!-- [移动端]标题 -->
<h2 class="mobile-title">
<h3 class="title">中建材智能自动化研究院有限公司</h3>
</h2>
<h2 class="pc-title" style="">
<h3
class="title"
style="
margin: 0;
margin-left: 32px;
font-weight: 400;
user-select: none;
color: #000;
font-size: 36px;
line-height: 54px;
letter-spacing: 2px;
">
<img
src="../assets/logo/cnbm.png"
alt="cnbm_logo"
style="
height: 48px;
width: 48px;
position: relative;
top: 12px;
right: 8px;
" />
<span>中建材智能自动化研究院有限公司</span>
</h3>
<h3
class="sub-title"
style="
margin: 0;
margin-left: 32px;
font-weight: 400;
user-select: none;
color: #000;
font-size: 36px;
line-height: 54px;
letter-spacing: 2px;
">
产线生产监控系统
</h3>
</h2>
<!-- 表单 -->
<div class="form-cont">
<el-tabs class="form" v-model="loginForm.loginType" style=" float:none;">
<el-tab-pane label="账号密码登录" name="uname">
</el-tab-pane>
<el-tab-pane label="短信验证码登录" name="sms">
</el-tab-pane>
</el-tabs>
<div>
<el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
<el-form-item prop="tenantName" v-if="tenantEnable">
<el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
<svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<!-- 账号密码登录 -->
<div v-if="loginForm.loginType === 'uname'">
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
@keyup.enter.native="getCode">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
</div>
<!-- 表单 -->
<div class="form-cont">
<el-tabs
class="form"
v-model="loginForm.loginType"
style="float: none">
<el-tab-pane label="账号密码登录" name="uname"></el-tab-pane>
<el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane>
</el-tabs>
<div style="">
<el-form
ref="loginForm"
:model="loginForm"
:rules="LoginRules"
class="login-form">
<el-form-item prop="tenantName" v-if="tenantEnable">
<el-input
v-model="loginForm.tenantName"
type="text"
auto-complete="off"
placeholder="租户">
<!-- <svg-icon
slot="prefix"
icon-class="tree"
class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<!-- 账号密码登录 -->
<div v-if="loginForm.loginType === 'uname'">
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号">
<!-- <svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="getCode">
<!-- <svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<el-checkbox
v-model="loginForm.rememberMe"
style="margin: 0 0 25px 0">
记住密码
</el-checkbox>
</div>
<!-- 短信验证码登录 -->
<div v-if="loginForm.loginType === 'sms'">
<el-form-item prop="mobile">
<el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号">
<svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="mobileCode">
<el-input v-model="loginForm.mobileCode" type="text" auto-complete="off" placeholder="短信验证码"
class="sms-login-mobile-code-prefix" @keyup.enter.native="handleLogin">
<template>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</template>
<template slot="append">
<span v-if="mobileCodeTimer <= 0" class="getMobileCode" @click="getSmsCode"
style="cursor: pointer;">获取验证码</span>
<span v-if="mobileCodeTimer > 0" class="getMobileCode">{{ mobileCodeTimer }}秒后可重新获取</span>
</template>
</el-input>
</el-form-item>
</div>
<!-- 短信验证码登录 -->
<div v-if="loginForm.loginType === 'sms'">
<el-form-item prop="mobile">
<el-input
v-model="loginForm.mobile"
type="text"
auto-complete="off"
placeholder="请输入手机号">
<!-- <svg-icon
slot="prefix"
icon-class="phone"
class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<el-form-item prop="mobileCode">
<el-input
v-model="loginForm.mobileCode"
type="text"
auto-complete="off"
placeholder="短信验证码"
class="sms-login-mobile-code-prefix"
@keyup.enter.native="handleLogin">
<!-- <template>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon" />
</template> -->
<template slot="suffix">
<span
v-if="mobileCodeTimer <= 0"
class="getMobileCode"
@click="getSmsCode"
style="
cursor: pointer;
color: #0b58ff;
font-size: 18px;
line-height: 66px;
padding-right: 12px;
">
获取验证码
</span>
<span v-if="mobileCodeTimer > 0" class="getMobileCode">
{{ mobileCodeTimer }}秒后可重新获取
</span>
</template>
</el-input>
</el-form-item>
</div>
<!-- 下方的登录按钮 -->
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
@click.native.prevent="getCode">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
<!-- 下方的登录按钮 -->
<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%; height: 66px; font-size: 18px;"
@click.native.prevent="getCode">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
<!-- 社交登录 -->
<!-- <el-form-item style="width:100%;">
<!-- 社交登录 -->
<!-- <el-form-item style="width:100%;">
<div class="oauth-login" style="display:flex">
<div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
<img :src="item.img" height="25px" width="25px" alt="登录" >
@@ -83,265 +240,305 @@
</div>
</div>
</el-form-item> -->
</el-form>
</div>
</div>
</div>
</div>
</el-form>
</div>
</div>
<!-- 图形验证码 -->
<Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }"
@success="handleLogin" />
<!-- footer -->
<div class="footer">
Copyright © 2023 中建材智能自动化院 All Rights Reserved.
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
Copyright © 2023 中建材智能自动化院 All Rights Reserved.
</div>
</div>
<!-- 图形验证码 -->
<Verify
ref="verify"
:captcha-type="'blockPuzzle'"
:img-size="{ width: '400px', height: '200px' }"
@success="handleLogin" />
</div>
</template>
<script>
import { sendSmsCode, socialAuthRedirect } from "@/api/login";
import { getTenantIdByName } from "@/api/system/tenant";
import { SystemUserSocialTypeEnum } from "@/utils/constants";
import { getCaptchaEnable, getTenantEnable } from "@/utils/ruoyi";
import { sendSmsCode, socialAuthRedirect } from '@/api/login';
import { getTenantIdByName } from '@/api/system/tenant';
import { SystemUserSocialTypeEnum } from '@/utils/constants';
import { getCaptchaEnable, getTenantEnable } from '@/utils/ruoyi';
import {
getPassword,
getRememberMe, getTenantName,
getUsername,
removePassword, removeRememberMe, removeTenantName,
removeUsername,
setPassword, setRememberMe, setTenantId, setTenantName,
setUsername
} from "@/utils/auth";
getPassword,
getRememberMe,
getTenantName,
getUsername,
removePassword,
removeRememberMe,
removeTenantName,
removeUsername,
setPassword,
setRememberMe,
setTenantId,
setTenantName,
setUsername,
} from '@/utils/auth';
import Verify from '@/components/Verifition/Verify';
import { resetUserPwd } from "@/api/system/user";
import { resetUserPwd } from '@/api/system/user';
export default {
name: "Login",
components: {
Verify
},
data() {
return {
codeUrl: "",
captchaEnable: true,
tenantEnable: true,
mobileCodeTimer: 0,
loginForm: {
loginType: "uname",
username: "admin",
password: "admin123",
captchaVerification: "",
mobile: "",
mobileCode: "",
rememberMe: false,
tenantName: "技术中心",
},
scene: 21,
name: 'Login',
components: {
Verify,
},
data() {
return {
codeUrl: '',
captchaEnable: true,
tenantEnable: true,
mobileCodeTimer: 0,
loginForm: {
loginType: 'uname',
username: 'admin',
password: 'admin123',
captchaVerification: '',
mobile: '',
mobileCode: '',
rememberMe: false,
tenantName: '技术中心',
},
scene: 21,
LoginRules: {
username: [
{ required: true, trigger: "blur", message: "用户名不能为空" }
],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" }
],
mobile: [
{ required: true, trigger: "blur", message: "手机号不能为空" },
{
validator: function (rule, value, callback) {
if (/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(value) === false) {
callback(new Error("手机号格式错误"));
} else {
callback();
}
}, trigger: "blur"
}
],
tenantName: [
{ required: true, trigger: "blur", message: "租户不能为空" },
{
validator: (rule, value, callback) => {
// debugger
getTenantIdByName(value).then(res => {
const tenantId = res.data;
if (tenantId && tenantId >= 0) {
// 设置租户
setTenantId(tenantId)
callback();
} else {
callback('租户不存在');
}
});
},
trigger: 'blur'
}
]
},
loading: false,
redirect: undefined,
// 枚举
SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
};
},
created() {
// 租户开关
this.tenantEnable = getTenantEnable();
if (this.tenantEnable) {
getTenantIdByName(this.loginForm.tenantName).then(res => { // 设置租户
const tenantId = res.data;
if (tenantId && tenantId >= 0) {
setTenantId(tenantId)
}
});
}
// 验证码开关
this.captchaEnable = getCaptchaEnable();
// 重定向地址
this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined;
this.getCookie();
},
methods: {
getCode() {
// 情况一，未开启：则直接登录
if (!this.captchaEnable) {
this.handleLogin({})
return;
}
LoginRules: {
username: [
{ required: true, trigger: 'blur', message: '用户名不能为空' },
],
password: [
{ required: true, trigger: 'blur', message: '密码不能为空' },
],
mobile: [
{ required: true, trigger: 'blur', message: '手机号不能为空' },
{
validator: function (rule, value, callback) {
if (
/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(
value
) === false
) {
callback(new Error('手机号格式错误'));
} else {
callback();
}
},
trigger: 'blur',
},
],
tenantName: [
{ required: true, trigger: 'blur', message: '租户不能为空' },
{
validator: (rule, value, callback) => {
// debugger
getTenantIdByName(value).then((res) => {
const tenantId = res.data;
if (tenantId && tenantId >= 0) {
// 设置租户
setTenantId(tenantId);
callback();
} else {
callback('租户不存在');
}
});
},
trigger: 'blur',
},
],
},
loading: false,
redirect: undefined,
// 枚举
SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
};
},
created() {
// 租户开关
this.tenantEnable = getTenantEnable();
if (this.tenantEnable) {
getTenantIdByName(this.loginForm.tenantName).then((res) => {
// 设置租户
const tenantId = res.data;
if (tenantId && tenantId >= 0) {
setTenantId(tenantId);
}
});
}
// 验证码开关
this.captchaEnable = getCaptchaEnable();
// 重定向地址
this.redirect = this.$route.query.redirect
? decodeURIComponent(this.$route.query.redirect)
: undefined;
this.getCookie();
},
methods: {
getCode() {
// 情况一，未开启：则直接登录
if (!this.captchaEnable) {
this.handleLogin({});
return;
}
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// 弹出验证码
this.$refs.verify.show()
},
getCookie() {
const username = getUsername();
const password = getPassword();
const rememberMe = getRememberMe();
const tenantName = getTenantName();
this.loginForm = {
...this.loginForm,
username: username ? username : this.loginForm.username,
password: password ? password : this.loginForm.password,
rememberMe: rememberMe ? getRememberMe() : false,
tenantName: tenantName ? tenantName : this.loginForm.tenantName,
};
},
handleLogin(captchaParams) {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
// 设置 Cookie
if (this.loginForm.rememberMe) {
setUsername(this.loginForm.username)
setPassword(this.loginForm.password)
setRememberMe(this.loginForm.rememberMe)
setTenantName(this.loginForm.tenantName)
} else {
removeUsername()
removePassword()
removeRememberMe()
removeTenantName()
}
this.loginForm.captchaVerification = captchaParams.captchaVerification
// 发起登陆
// console.log("发起登录", this.loginForm);
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {
});
}).catch(() => {
this.loading = false;
});
}
});
},
async doSocialLogin(socialTypeEnum) {
// 设置登录中
this.loading = true;
let tenant = false;
if (this.tenantEnable) {
await this.$prompt('请输入租户名称', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(async ({ value }) => {
await getTenantIdByName(value).then(res => {
const tenantId = res.data;
tenant = true
if (tenantId && tenantId >= 0) {
setTenantId(tenantId)
}
});
}).catch(() => {
// 取消登录按钮 loading状态
this.loading = false;
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// 弹出验证码
this.$refs.verify.show();
},
getCookie() {
const username = getUsername();
const password = getPassword();
const rememberMe = getRememberMe();
const tenantName = getTenantName();
this.loginForm = {
...this.loginForm,
username: username ? username : this.loginForm.username,
password: password ? password : this.loginForm.password,
rememberMe: rememberMe ? getRememberMe() : false,
tenantName: tenantName ? tenantName : this.loginForm.tenantName,
};
},
handleLogin(captchaParams) {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
// 设置 Cookie
if (this.loginForm.rememberMe) {
setUsername(this.loginForm.username);
setPassword(this.loginForm.password);
setRememberMe(this.loginForm.rememberMe);
setTenantName(this.loginForm.tenantName);
} else {
removeUsername();
removePassword();
removeRememberMe();
removeTenantName();
}
this.loginForm.captchaVerification =
captchaParams.captchaVerification;
// 发起登陆
// console.log("发起登录", this.loginForm);
this.$store
.dispatch(
this.loginForm.loginType === 'sms' ? 'SmsLogin' : 'Login',
this.loginForm
)
.then(() => {
this.$router.push({ path: this.redirect || '/' }).catch(() => {});
})
.catch(() => {
this.loading = false;
});
}
});
},
async doSocialLogin(socialTypeEnum) {
// 设置登录中
this.loading = true;
let tenant = false;
if (this.tenantEnable) {
await this.$prompt('请输入租户名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
})
.then(async ({ value }) => {
await getTenantIdByName(value).then((res) => {
const tenantId = res.data;
tenant = true;
if (tenantId && tenantId >= 0) {
setTenantId(tenantId);
}
});
})
.catch(() => {
// 取消登录按钮 loading状态
this.loading = false;
return false
});
} else {
tenant = true
}
if (tenant) {
// 计算 redirectUri
const redirectUri = location.origin + '/social-login?'
+ encodeURIComponent('type=' + socialTypeEnum.type + '&redirect=' + (this.redirect || "/")); // 重定向不能丢
// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
// 进行跳转
socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => {
// console.log(res.url);
window.location.href = res.data;
});
}
},
/** ========== 以下为升级短信登录 ========== */
getSmsCode() {
if (this.mobileCodeTimer > 0) return;
this.$refs.loginForm.validate(valid => {
if (!valid) return;
sendSmsCode(this.loginForm.mobile, this.scene, this.loginForm.uuid, this.loginForm.code).then(res => {
this.$modal.msgSuccess("获取验证码成功")
this.mobileCodeTimer = 60;
let msgTimer = setInterval(() => {
this.mobileCodeTimer = this.mobileCodeTimer - 1;
if (this.mobileCodeTimer <= 0) {
clearInterval(msgTimer);
}
}, 1000);
});
});
}
}
return false;
});
} else {
tenant = true;
}
if (tenant) {
// 计算 redirectUri
const redirectUri =
location.origin +
'/social-login?' +
encodeURIComponent(
'type=' +
socialTypeEnum.type +
'&redirect=' +
(this.redirect || '/')
); // 重定向不能丢
// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
// 进行跳转
socialAuthRedirect(
socialTypeEnum.type,
encodeURIComponent(redirectUri)
).then((res) => {
// console.log(res.url);
window.location.href = res.data;
});
}
},
/** ========== 以下为升级短信登录 ========== */
getSmsCode() {
if (this.mobileCodeTimer > 0) return;
this.$refs.loginForm.validate((valid) => {
if (!valid) return;
sendSmsCode(
this.loginForm.mobile,
this.scene,
this.loginForm.uuid,
this.loginForm.code
).then((res) => {
this.$modal.msgSuccess('获取验证码成功');
this.mobileCodeTimer = 60;
let msgTimer = setInterval(() => {
this.mobileCodeTimer = this.mobileCodeTimer - 1;
if (this.mobileCodeTimer <= 0) {
clearInterval(msgTimer);
}
}, 1000);
});
});
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/login.scss";
@import '~@/assets/styles/login.scss';
.oauth-login {
display: flex;
align-items: center;
cursor: pointer;
display: flex;
align-items: center;
cursor: pointer;
}
.oauth-login-item {
display: flex;
align-items: center;
margin-right: 10px;
display: flex;
align-items: center;
margin-right: 10px;
}
.oauth-login-item img {
height: 25px;
width: 25px;
height: 25px;
width: 25px;
}
.oauth-login-item span:hover {
text-decoration: underline red;
color: red;
text-decoration: underline red;
color: red;
}
.sms-login-mobile-code-prefix {
:deep(.el-input__prefix) {
top: 22%;
}
}</style>
:deep(.el-input__prefix) {
top: 22%;
}
}
</style>

22
src/views/order/base/orderManage/components/addWorkOrder.vue
View File

@@ -92,8 +92,8 @@
<el-col :span='12'>
<el-form-item label="物料计算方式" prop="materialMethod">
<el-radio-group v-model="form.materialMethod" disabled>
<el-radio :label="1">产品基础</el-radio>
<el-radio :label="2">工艺扩展</el-radio>
<el-radio :label="1">产品基础BOM</el-radio>
<el-radio :label="2">工艺扩展BOM</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@@ -253,12 +253,20 @@ export default {
})
} else {
// 新增工单
this.form.planStartTime = this.planStartTime ? new Date(this.planStartTime).valueOf() : ''
this.form.planFinishTime = this.planFinishTime ? new Date(this.planFinishTime).valueOf() : ''
orderIssue({ ...this.form }).then(res => {
let _this = this
_this.form.planStartTime = _this.planStartTime ? new Date(_this.planStartTime).valueOf() : ''
_this.form.planFinishTime = _this.planFinishTime ? new Date(_this.planFinishTime).valueOf() : ''
orderIssue({ ..._this.form }).then(res => {
if (res.code === 0) {
this.$modal.msgSuccess("操作成功")
this.$emit('addWorkOrderSubmit')
_this.$modal.msgSuccess("操作成功")
let name = this.form.name
_this.$emit('addWorkOrderSubmit')
// 询问是否添加预使用主原料
_this.$modal.confirm('是否添加预使用主原料信息?').then(function() {
_this.$router.push({
path: '/core/core-work-order?workOrderName='+encodeURI(name)
})
})
}
})
}

30
src/views/order/base/orderManage/components/orderAdd.vue
View File

@@ -24,7 +24,7 @@
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name+' | '+item.specifications"
:label="item.name+' | '+(item.specifications || '')"
:value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.specifications }}</span>
@@ -41,7 +41,7 @@
</el-col>
<el-col :span='12'>
<el-form-item label="客户" prop="customerId">
<el-select v-model="form.customerId" placeholder="请选择" style="width: 100%;">
<el-select v-model="form.customerId" placeholder="请选择" style="width: 100%;" clearable>
<el-option
v-for="item in customerList"
:key="item.id"
@@ -55,7 +55,7 @@
<el-row>
<el-col :span='12'>
<el-form-item label="优先级" prop="priority">
<el-select v-model="form.priority" placeholder="请选择" style="width: 100%;">
<el-select v-model="form.priority" placeholder="请选择" style="width: 100%;" clearable>
<el-option
v-for="item in getDictDatas(DICT_TYPE.ORDER_PRIORITY)"
:key="item.value"
@@ -67,7 +67,7 @@
</el-col>
<el-col :span='12'>
<el-form-item label="包装规格" prop="packSpec">
<el-select v-model="form.packSpec" placeholder="请选择" style="width: 100%;">
<el-select v-model="form.packSpec" placeholder="请选择" style="width: 100%;" clearable>
<el-option
v-for="item in getDictDatas(DICT_TYPE.PACK_SPEC)"
:key="item.value"
@@ -86,7 +86,7 @@
</el-col>
<el-col :span='12'>
<el-form-item label="关联工艺" prop="processFlowId">
<el-select v-model="form.processFlowId" placeholder="请选择" style="width: 100%;">
<el-select v-model="form.processFlowId" placeholder="请选择" style="width: 100%;" clearable @change="processFlowIdChange">
<el-option
v-for="item in processFlowList"
:key="item.id"
@@ -100,9 +100,9 @@
<el-row>
<el-col :span='12'>
<el-form-item label="物料计算方式" prop="materialMethod">
<el-radio-group v-model="form.materialMethod">
<el-radio :label="1">产品基础</el-radio>
<el-radio :label="2">工艺扩展</el-radio>
<el-radio-group v-model="form.materialMethod" @change='materialMethodChange'>
<el-radio :label="1">产品基础BOM</el-radio>
<el-radio :label="2">工艺扩展BOM</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@@ -240,6 +240,20 @@ export default {
}
}
},
// 工艺变更
materialMethodChange(val) {
if (val === 2 && !this.form.processFlowId) {
this.form.materialMethod = 1
this.$modal.msgError("请先选择关联工艺");
}
},
// 工艺变更
processFlowIdChange(val) {
console.log(val)
if (!val) {
this.form.materialMethod = 1
}
},
submitForm() {
this.$refs['orderAddForm'].validate((valid) => {
if (valid) {

33
src/views/order/base/orderManage/index.vue
View File

@@ -194,12 +194,22 @@ export default {
type: 'add',
btnName: '新增工单',
showParam: {
type: '&',
type: '|',
data: [
{
type: 'equal',
name: 'status',
value: 1
},
{
type: 'equal',
name: 'status',
value: 2
},
{
type: 'equal',
name: 'status',
value: 3
}
]
}
@@ -210,12 +220,22 @@ export default {
type: 'bind',
btnName: '绑定工单',
showParam: {
type: '&',
type: '|',
data: [
{
type: 'equal',
name: 'status',
value: 1
},
{
type: 'equal',
name: 'status',
value: 2
},
{
type: 'equal',
name: 'status',
value: 3
}
]
}
@@ -224,14 +244,19 @@ export default {
this.$auth.hasPermi('base:order-manage:bindWorkOrder')
? {
type: 'complete',
btnName: '完成工单',
btnName: '完成订单',
showParam: {
type: '&',
type: '|',
data: [
{
type: 'equal',
name: 'status',
value: 2
},
{
type: 'equal',
name: 'status',
value: 3
}
]
}

50
src/views/order/monitoring/orderCompletionMonitoring/index.vue
View File

@@ -6,9 +6,24 @@
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<el-tabs v-model="activeName" @tab-click="handleClick">
<base-table
:page="1"
:limit="5000"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="250"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table>
<!-- <el-tabs v-model="activeName" @tab-click="toggleTab">
<el-tab-pane label="数据列表" name="dataList">
<!-- 列表 -->
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
@@ -26,7 +41,7 @@
/>
</base-table>
</el-tab-pane>
<el-tab-pane label="柱状图" name="barChart">
<el-tab-pane label="环形图" name="barChart">
<div class="boxTitle">
<span class="blueTitle"></span>
<span>各订单环形图</span>
@@ -36,7 +51,7 @@
style="width: 182px; height: 180px;"
></div>
</el-tab-pane>
</el-tabs>
</el-tabs> -->
</div>
</template>
<script>
@@ -147,14 +162,15 @@ export default {
activeName: 'dataList',
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 20,
// pageNo: 1,
// pageSize: 5000,
name: null,
startProduceTime: []
},
tableProps,
list: [],
tableH: this.tableHeight(270),
// tableH: this.tableHeight(270),
tableH: this.tableHeight(230),
total: 0,
tableBtn: [
this.$auth.hasPermi('base:order-completion-monitoring:orderDet')
@@ -175,12 +191,13 @@ export default {
btnName: '发货详情'
}
: undefined
].filter((v) => v),
].filter((v) => v)
}
},
mounted() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(270)
// this.tableH = this.tableHeight(270)
this.tableH = this.tableHeight(230)
})
this.getOrderList()
this.getPage()
@@ -332,17 +349,26 @@ export default {
console.log(val)
switch (val.type) {
case 'orderDetail':
this.$router.push({
path: '/core/core-work-order-detail?woIdString='+val.data.woIdString
})
break
case 'qualityDetail':
this.$router.push({
path: '/quality/base/quality-inspection-data/detection-information/statistical-data?woIdString='+val.data.woIdString
})
break
default:
this.$router.push({
path: '/delivery/delivery-log?orderId='+encodeURI(val.data.name)
})
}
},
toggleTab() {
if (this.activeName === 'barChart') {
this.getPieChart()
}
}
}
}
}
</script>

33
src/views/quality/base/qualityScrapDet/index.vue
View File

@@ -43,9 +43,9 @@ import basicPage from '../../../core/mixins/basic-page';
import { parseTime } from '../../../core/mixins/code-filter';
import {
getQualityScrapDetPage,
deleteQualityScrapDet
deleteQualityScrapDet,
} from '@/api/base/qualityScrapDet';
import { getList, } from "@/api/base/qualityScrapType";
const tableProps = [
{
prop: 'createTime',
@@ -98,10 +98,18 @@ export default {
formConfig: [
{
type: 'input',
label: '批次名',
placeholder: '批次名',
param: 'name',
},
label: '报废原因',
placeholder: '报废原因',
param: 'content',
},
{
type: 'select',
label: '报废类型',
selectOptions: [],
labelField: 'name',
valueField: 'id',
param: 'typeId',
},
{
type: 'button',
btnName: '查询',
@@ -124,7 +132,10 @@ export default {
components: {
AddOrUpdate,
},
created() {},
created() { },
mounted () {
this.getDict();
},
methods: {
// 获取数据列表
getDataList() {
@@ -134,13 +145,19 @@ export default {
this.listQuery.total = response.data.total;
this.dataListLoading = false;
});
},
async getDict() {
// 物料列表
const res = await getList();
this.formConfig[1].selectOptions = res.data;
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.name = val.name ? val.name : undefined;
this.listQuery.content = val.content ? val.content : undefined;
this.listQuery.typeId = val.typeId ? val.typeId : undefined;
this.getDataList();
break;
case 'reset':

4
src/views/quality/base/qualityScrapType/index.vue
View File

@@ -98,8 +98,8 @@ export default {
formConfig: [
{
type: 'input',
label: '批次名',
placeholder: '批次名',
label: '报废类型',
placeholder: '报废类型',
param: 'name',
},
{

214
src/views/quality/monitoring/currentData/index.vue
View File

@@ -9,12 +9,18 @@
<el-tabs v-model="activeName" :stretch="true" @tab-click="handleTabClick">
<el-tab-pane :label="'\u2002表格数据\u2002'" name="table">
<!-- 列表 -->
<div class="blue-title">产品名：{{ productDetail.name }} 产品规格：{{ productDetail.specifications }}</div>
<base-table class="base-table__margin" :table-props="productProps" :page="1" :limit="10" :table-data="list">
</base-table>
<div v-for="(item,index) in downProps" :key="index">
<div class="blue-title">工单:{{ list[index].workOrderName }}</div>
<base-table class="base-table__margin" :table-props="item" :page="1" :limit="10"
:table-data="downList[index]">
</base-table>
</div>
</el-tab-pane>
<el-tab-pane :label="'\u3000图形数据\u3000'" name="chart" style="overflow: inherit">
<!-- <base-table class="base-table__margin" :table-props="valueTableProps" :page="1" :limit="10"
:table-data="valueList" @emitFun="handleEmitFun"></base-table> -->
<div id="main" style="height: 500px;width: 1000px;"></div>
</el-tab-pane>
</el-tabs>
</el-col>
@@ -49,7 +55,7 @@ import {
// import Editor from '@/components/Editor';
import moment from 'moment';
// import DialogForm from './dialogForm.vue';
import * as echarts from 'echarts';
// import basicPageMixin from '@/mixins/lb/basicPageMixin';
export default {
name: 'statisticalData',
@@ -61,6 +67,12 @@ export default {
return {
list: [],
dynamicProps: [],
downProps: [],
downList: [],
productDetail: {
name: null,
specifications:null,
},
activeName: 'table',
searchBarFormConfig: [
// {
@@ -202,19 +214,19 @@ export default {
return [
{
// width: 160,
prop: 'inspectionContent',
label: '检测内容',
prop: 'workOrderName',
label: '工单名',
},
...this.dynamicProps,
{
// width: 128,
prop: 'sumInput',
label: '检测类型总数',
label: '上片总数',
},
{
// width: 128,
prop: 'scrapRatio',
label: '比例(%)',
prop: 'sumOutput',
label: '下片总数',
// subcomponent: {
// name: 'TextOnly',
// props: {
@@ -259,7 +271,61 @@ export default {
}
this.getList()
},
methods: {
methods: {
handleTabClick() {
if (this.activeName === 'chart') {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
let arrXAxis = []
this.list.forEach((ele) => {
arrXAxis.push(ele.workOrderName)
})
this.downList.forEach((ele) => {
ele.forEach((item) => {
if (ele.length !==0 && item.productionline) {
arrXAxis.push('产线' + item.productionline)
}
})
})
let arrYAxis = []
this.list.forEach((ele) => {
// console.log(ele);
arrYAxis.push(ele.sumInput)
})
this.downList.forEach((ele) => {
ele.forEach((item) => {
console.log(item);
// if (ele.length !== 0 && item.productionline) {
arrYAxis.push(item.sumInput)
// }
})
})
// console.log(arrXAxis);
option = {
xAxis: {
type: 'category',
data: arrXAxis
},
yAxis: {
type: 'value'
},
series: [
{
data: arrYAxis,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
}
},
/** 获取搜索栏的产线列表 */
// async getDict() {
// const res = await getProductList()
@@ -297,31 +363,71 @@ export default {
/** 查询列表 */
async getDataList() {
this.loading = true;
// 执行查询
// 执行查询
this.downProps= []
const res = await getInspectionData(this.queryParams)
console.log(res);
this.dynamicProps = this.filterNameData(res.data[0].upPart)
this.productDetail.name = res.data[0].productName
this.productDetail.specifications = res.data[0].specifications
// this.productName = res.data[0].productName
this.dynamicProps = this.filterNameData(res.data[0].upPart.nameData)
console.log(this.dynamicProps)
this.list = this.filterData(res.data[0].upPart.data)
console.log(this.list);
},
filterNameData(upData) {
console.log(upData);
// upData.forEach((ele) => {
const ndSet = new Set();
upData.nameData.forEach((nd) => {
ndSet.add(nd.name);
});
return Array.from(ndSet.values())
.sort()
.map((name) => ({
prop: name,
label: name,
}));
// })
console.log(this.list)
res.data[0].downPart.forEach((ele) => {
// console.log(ele.data);
let arr = this.downFilterNameData(ele.nameData)
if (arr.length !== 0) {
let propArr = [{
// width: 160,
prop: 'inspectionContent',
label: '检测内容',
},
...arr,
{
// width: 128,
prop: 'sumInput',
label: '原片总数',
},
{
// width: 128,
prop: 'sumScrap',
label: '未通过检测总数',
},
{
// width: 128,
prop: 'scrapRatio',
label: '报废比例',
}]
this.downProps.push(propArr)
}
// this.downProps = []
})
res.data[0].downPart.forEach((ele) => {
// console.log(ele.data);
let arr =this.downFilterData(ele.data)
if (arr.length !== 0) {
this.downList.push(arr)
}
// this.downProps = []
})
// console.log(this.downList);
},
filterData(data) {
downFilterNameData(nameData) {
const ndSet = new Set();
nameData.forEach((nd) => {
ndSet.add(nd.name);
});
return Array.from(ndSet.values())
.sort()
.map((name) => ({
prop: name,
label: name,
}));
// })
},
downFilterData(data) {
return data.map((item) => {
const { data: innerData } = item;
const keyValuePairs = {};
@@ -333,6 +439,39 @@ export default {
...keyValuePairs,
sumInput: item.sumInput,
scrapRatio: item.scrapRatio,
sumScrap: item.sumScrap
};
});
},
filterNameData(nameData) {
// console.log(upData);
// upData.forEach((ele) => {
const ndSet = new Set();
nameData.forEach((nd) => {
ndSet.add(nd.name);
});
return Array.from(ndSet.values())
.sort()
.map((name) => ({
prop: name,
label: name,
}));
// })
},
filterData(data) {
return data.map((item) => {
const { data: innerData } = item;
const keyValuePairs = {};
innerData.map((d) => {
keyValuePairs[d.dynamicName] = d.dynamicValue;
});
return {
inspectionContent: item.inspectionContent,
workOrderName: item.workOrderName,
...keyValuePairs,
sumInput: item.sumInput,
sumOutput: item.sumOutput,
};
});
},
@@ -456,5 +595,24 @@ export default {
height: 36px;
}
}
.blue-title {
position: relative;
padding: 4px 0;
padding-left: 12px;
font-size: 14px;
color: #606266;
font-weight: 700;
margin-bottom: 12px;
&::before {
content: '';
position: absolute;
left: 0;
top: 6px;
height: 16px;
width: 4px;
border-radius: 1px;
background: #0b58ff;
}
}
</style>

2
src/views/quality/monitoring/deviceParameters/index.vue
View File

@@ -15,7 +15,7 @@
">
<div class="factory-list__selector" style="margin: 12px" title="点击切换工厂" @mouseenter="factoryListOpen = true"
@mouseleave="factoryListOpen = false">
{{ currentFactory?.label || '点我选择工厂' }}
{{ currentFactory?.label || '点我选择设备' }}
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
<ul class="factory-list" v-if="sidebarContent.length" @click.prevent="factoryChangeHandler">
<li v-for="fc in sidebarContent" :key="fc.id" :data-value="fc.id" class="factory-list__item"

45
src/views/quality/monitoring/statisticalData/index.vue
View File

@@ -69,8 +69,9 @@ export default {
type: 'select',
label: '工单号',
placeholder: '请选择工单号',
param: 'workOrderId',
param: 'workOrderIdList',
selectOptions: [],
multiple:true,
},
{
type: 'select',
@@ -188,8 +189,8 @@ export default {
// },
// 查询参数
queryParams: {
workOrderId: undefined,
productId: undefined,
workOrderIdList:undefined,
productionId: undefined,
startTime: undefined,
endTime: undefined,
// productionLineId: null,
@@ -244,21 +245,24 @@ export default {
},
},
mounted() {
if (this.$route.params.startTime && this.$route.params.endTime) {
this.searchBarFormConfig[0].defaultSelect = [
this.$route.params.startTime,
this.$route.params.endTime,
];
this.queryParams.param = {};
this.$set(
this.queryParams.param,
'startTime',
this.$route.params.startTime
);
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
} else {
this.searchBarFormConfig[0].defaultSelect = [];
if (this.$route.query.woIdString) {
this.queryParams.workOrderIdList = this.$route.query.woIdString
}
// if (this.$route.params.startTime && this.$route.params.endTime) {
// this.searchBarFormConfig[0].defaultSelect = [
// this.$route.params.startTime,
// this.$route.params.endTime,
// ];
// this.queryParams.param = {};
// this.$set(
// this.queryParams.param,
// 'startTime',
// this.$route.params.startTime
// );
// this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
// } else {
// this.searchBarFormConfig[0].defaultSelect = [];
// }
this.getList()
},
methods: {
@@ -302,7 +306,8 @@ export default {
// 执行查询
const {
data: { data, otherList, otherMap, nameData },
} = await getStatisticalDataPage(this.queryParams)
} = await getStatisticalDataPage(this.queryParams)
console.log(this.queryParams);
this.dynamicProps = this.filterNameData(nameData)
this.list = this.filterData(data);
},
@@ -336,8 +341,8 @@ export default {
/** 取消按钮 */
handleSearchBarBtnClick(val) {
if (val.btnName === 'search') {
this.queryParams.workOrderId = val.workOrderId ? val.workOrderId : undefined
this.queryParams.productId = val.productId ? val.productId : undefined
this.queryParams.workOrderIdList = val.workOrderIdList ? val.workOrderIdList : undefined
this.queryParams.productionId = val.productionId ? val.productionId : undefined
this.queryParams.startTime = val.checkTime ? val.checkTime[0] : undefined
this.queryParams.endTime = val.checkTime ? val.checkTime[1] : undefined

130
src/views/warehouse/end-material/warehouseLocationMonitoring/index.vue
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-21 14:26:23
* @LastEditors: zwq
* @LastEditTime: 2023-11-06 11:25:34
* @LastEditTime: 2023-11-14 09:40:33
* @Description:
-->
<template>
@@ -11,11 +11,35 @@
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag effect="dark" color="#7362F3" style="border: none">缓存</el-tag>
<el-tag effect="dark" color="#16DC09" style="border: none">活动</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">其它</el-tag>
</div>
<!-- <div class="tips">
<el-tag color="#D7DBE5" style="border: none; color: black">停用</el-tag>
<el-tag color="#D8E5FF" style="border: none; color: black">启用</el-tag>
<el-divider direction="vertical" />
<el-tag effect="dark" color="#16DC09" style="border: none">可用</el-tag>
<el-tag effect="dark" color="#FFD781" style="border: none">
占用-待入库
</el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none">
占用-有货
</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">
占用-待出库
</el-tag>
</div> -->
<el-row class="dashboard-legend">
<div
v-for="item in cassetteStatusList"
:key="'cassette' + item.id"
class="dashboard-legend-cassette">
<div
class="dashboard-legend-cassette-cricle"
:style="{ background: item.color }" />
{{ item.name }}
</div>
|
<div class="dashboard-legend-port" style="background: #d7dbe5">停用</div>
<div class="dashboard-legend-port" style="background: #d8e5ff">启用</div>
</el-row>
<div class="mainbody">
<div v-for="i in total" :key="i">
<el-row>
@@ -26,11 +50,14 @@
v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
:key="a.id + a.code"
:title="a.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[a.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[a.type - 1],
background: dotColor[a.status],
}" />
<p class="p-name">{{ a.name }}</p>
</div>
@@ -41,11 +68,14 @@
v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
:key="b.id + b.code"
:title="b.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[b.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[b.type - 1],
background: dotColor[b.status],
}" />
<p class="p-name">{{ b.name }}</p>
</div>
@@ -61,11 +91,14 @@
v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
:key="c.id + c.code"
:title="c.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[c.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[c.type - 1],
background: dotColor[c.status],
}" />
<p class="p-name">{{ c.name }}</p>
</div>
@@ -76,11 +109,14 @@
v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
:key="d.id + d.code"
:title="d.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[d.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[d.type - 1],
background: dotColor[d.status],
}" />
<p class="p-name">{{ d.name }}</p>
</div>
@@ -106,7 +142,14 @@ export default {
four: [],
},
total: 0,
bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
bgColor: ['#D7DBE5', '#D8E5FF'],
dotColor: ['#16DC09', '#FFD781', '#7362F3', '#FFA08F'],
cassetteStatusList: [
{ id: '1', name: '可用', color: '#16DC09' },
{ id: '2', name: '占用-待入库', color: '#FFD781' },
{ id: '3', name: '占用-有货', color: '#7362F3' },
{ id: '4', name: '占用-待出库', color: '#FFA08F' },
],
formConfig: [
{
type: 'button',
@@ -130,26 +173,26 @@ export default {
there: [],
four: [],
}),
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 2) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 2) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
});
});
},
buttonClick(val) {
switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
top: 22px;
right: 120px;
}
.dashboard-legend {
margin: 5px 5px 10px 5px;
.dashboard-legend-cassette {
display: inline-block;
margin-right: 24px;
.dashboard-legend-cassette-cricle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
}
}
.dashboard-legend-port {
display: inline-block;
height: 24px;
line-height: 24px;
border-radius: 4px;
padding: 0 16px;
margin-left: 24px;
}
}
</style>

2
src/views/warehouse/end-material/warehouseRealtimeLocation/index.vue
View File

@@ -17,7 +17,7 @@
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="100"
:width="140"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />

8
src/views/warehouse/mixins/basic-page.js
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2022-08-24 11:19:43
* @LastEditors: zwq
* @LastEditTime: 2023-11-03 16:06:21
* @LastEditTime: 2023-11-14 15:59:53
* @Description:
*/
export default {
@@ -38,8 +38,10 @@ export default {
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.list;
this.listQuery.total = response.data.total;
if(response.hasOwnProperty('data')){
this.tableData = response.data.list;
this.listQuery.total = response.data.total;
}
this.dataListLoading = false;
});
},

130
src/views/warehouse/out-material/warehouseLocationMonitoring/index.vue
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-21 14:26:23
* @LastEditors: zwq
* @LastEditTime: 2023-11-06 11:32:23
* @LastEditTime: 2023-11-14 09:40:21
* @Description:
-->
<template>
@@ -11,11 +11,35 @@
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag effect="dark" color="#7362F3" style="border: none">缓存</el-tag>
<el-tag effect="dark" color="#16DC09" style="border: none">活动</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">其它</el-tag>
</div>
<!-- <div class="tips">
<el-tag color="#D7DBE5" style="border: none; color: black">停用</el-tag>
<el-tag color="#D8E5FF" style="border: none; color: black">启用</el-tag>
<el-divider direction="vertical" />
<el-tag effect="dark" color="#16DC09" style="border: none">可用</el-tag>
<el-tag effect="dark" color="#FFD781" style="border: none">
占用-待入库
</el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none">
占用-有货
</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">
占用-待出库
</el-tag>
</div> -->
<el-row class="dashboard-legend">
<div
v-for="item in cassetteStatusList"
:key="'cassette' + item.id"
class="dashboard-legend-cassette">
<div
class="dashboard-legend-cassette-cricle"
:style="{ background: item.color }" />
{{ item.name }}
</div>
|
<div class="dashboard-legend-port" style="background: #d7dbe5">停用</div>
<div class="dashboard-legend-port" style="background: #d8e5ff">启用</div>
</el-row>
<div class="mainbody">
<div v-for="i in total" :key="i">
<el-row>
@@ -26,11 +50,14 @@
v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
:key="a.id + a.code"
:title="a.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[a.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[a.type - 1],
background: dotColor[a.status],
}" />
<p class="p-name">{{ a.name }}</p>
</div>
@@ -41,11 +68,14 @@
v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
:key="b.id + b.code"
:title="b.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[b.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[b.type - 1],
background: dotColor[b.status],
}" />
<p class="p-name">{{ b.name }}</p>
</div>
@@ -61,11 +91,14 @@
v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
:key="c.id + c.code"
:title="c.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[c.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[c.type - 1],
background: dotColor[c.status],
}" />
<p class="p-name">{{ c.name }}</p>
</div>
@@ -76,11 +109,14 @@
v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
:key="d.id + d.code"
:title="d.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[d.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[d.type - 1],
background: dotColor[d.status],
}" />
<p class="p-name">{{ d.name }}</p>
</div>
@@ -106,7 +142,14 @@ export default {
four: [],
},
total: 0,
bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
bgColor: ['#D7DBE5', '#D8E5FF'],
dotColor: ['#16DC09', '#FFD781', '#7362F3', '#FFA08F'],
cassetteStatusList: [
{ id: '1', name: '可用', color: '#16DC09' },
{ id: '2', name: '占用-待入库', color: '#FFD781' },
{ id: '3', name: '占用-有货', color: '#7362F3' },
{ id: '4', name: '占用-待出库', color: '#FFA08F' },
],
formConfig: [
{
type: 'button',
@@ -130,26 +173,26 @@ export default {
there: [],
four: [],
}),
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 5) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 5) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
});
});
},
buttonClick(val) {
switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
top: 22px;
right: 120px;
}
.dashboard-legend {
margin: 5px 5px 10px 5px;
.dashboard-legend-cassette {
display: inline-block;
margin-right: 24px;
.dashboard-legend-cassette-cricle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
}
}
.dashboard-legend-port {
display: inline-block;
height: 24px;
line-height: 24px;
border-radius: 4px;
padding: 0 16px;
margin-left: 24px;
}
}
</style>

2
src/views/warehouse/out-material/warehouseRealtimeLocation/index.vue
View File

@@ -17,7 +17,7 @@
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="100"
:width="140"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />

130
src/views/warehouse/package-material/warehouseLocationMonitoring/index.vue
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-21 14:26:23
* @LastEditors: zwq
* @LastEditTime: 2023-11-06 11:31:52
* @LastEditTime: 2023-11-14 09:40:08
* @Description:
-->
<template>
@@ -11,11 +11,35 @@
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag effect="dark" color="#7362F3" style="border: none">缓存</el-tag>
<el-tag effect="dark" color="#16DC09" style="border: none">活动</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">其它</el-tag>
</div>
<!-- <div class="tips">
<el-tag color="#D7DBE5" style="border: none; color: black">停用</el-tag>
<el-tag color="#D8E5FF" style="border: none; color: black">启用</el-tag>
<el-divider direction="vertical" />
<el-tag effect="dark" color="#16DC09" style="border: none">可用</el-tag>
<el-tag effect="dark" color="#FFD781" style="border: none">
占用-待入库
</el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none">
占用-有货
</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">
占用-待出库
</el-tag>
</div> -->
<el-row class="dashboard-legend">
<div
v-for="item in cassetteStatusList"
:key="'cassette' + item.id"
class="dashboard-legend-cassette">
<div
class="dashboard-legend-cassette-cricle"
:style="{ background: item.color }" />
{{ item.name }}
</div>
|
<div class="dashboard-legend-port" style="background: #d7dbe5">停用</div>
<div class="dashboard-legend-port" style="background: #d8e5ff">启用</div>
</el-row>
<div class="mainbody">
<div v-for="i in total" :key="i">
<el-row>
@@ -26,11 +50,14 @@
v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
:key="a.id + a.code"
:title="a.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[a.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[a.type - 1],
background: dotColor[a.status],
}" />
<p class="p-name">{{ a.name }}</p>
</div>
@@ -41,11 +68,14 @@
v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
:key="b.id + b.code"
:title="b.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[b.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[b.type - 1],
background: dotColor[b.status],
}" />
<p class="p-name">{{ b.name }}</p>
</div>
@@ -61,11 +91,14 @@
v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
:key="c.id + c.code"
:title="c.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[c.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[c.type - 1],
background: dotColor[c.status],
}" />
<p class="p-name">{{ c.name }}</p>
</div>
@@ -76,11 +109,14 @@
v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
:key="d.id + d.code"
:title="d.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[d.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[d.type - 1],
background: dotColor[d.status],
}" />
<p class="p-name">{{ d.name }}</p>
</div>
@@ -106,7 +142,14 @@ export default {
four: [],
},
total: 0,
bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
bgColor: ['#D7DBE5', '#D8E5FF'],
dotColor: ['#16DC09', '#FFD781', '#7362F3', '#FFA08F'],
cassetteStatusList: [
{ id: '1', name: '可用', color: '#16DC09' },
{ id: '2', name: '占用-待入库', color: '#FFD781' },
{ id: '3', name: '占用-有货', color: '#7362F3' },
{ id: '4', name: '占用-待出库', color: '#FFA08F' },
],
formConfig: [
{
type: 'button',
@@ -130,26 +173,26 @@ export default {
there: [],
four: [],
}),
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 3) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 3) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
});
});
},
buttonClick(val) {
switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
top: 22px;
right: 120px;
}
.dashboard-legend {
margin: 5px 5px 10px 5px;
.dashboard-legend-cassette {
display: inline-block;
margin-right: 24px;
.dashboard-legend-cassette-cricle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
}
}
.dashboard-legend-port {
display: inline-block;
height: 24px;
line-height: 24px;
border-radius: 4px;
padding: 0 16px;
margin-left: 24px;
}
}
</style>

2
src/views/warehouse/package-material/warehouseRealtimeLocation/index.vue
View File

@@ -17,7 +17,7 @@
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="100"
:width="140"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />

130
src/views/warehouse/part-material/warehouseLocationMonitoring/index.vue
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-21 14:26:23
* @LastEditors: zwq
* @LastEditTime: 2023-11-06 11:31:14
* @LastEditTime: 2023-11-14 09:39:54
* @Description:
-->
<template>
@@ -11,11 +11,35 @@
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag effect="dark" color="#7362F3" style="border: none">缓存</el-tag>
<el-tag effect="dark" color="#16DC09" style="border: none">活动</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">其它</el-tag>
</div>
<!-- <div class="tips">
<el-tag color="#D7DBE5" style="border: none; color: black">停用</el-tag>
<el-tag color="#D8E5FF" style="border: none; color: black">启用</el-tag>
<el-divider direction="vertical" />
<el-tag effect="dark" color="#16DC09" style="border: none">可用</el-tag>
<el-tag effect="dark" color="#FFD781" style="border: none">
占用-待入库
</el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none">
占用-有货
</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">
占用-待出库
</el-tag>
</div> -->
<el-row class="dashboard-legend">
<div
v-for="item in cassetteStatusList"
:key="'cassette' + item.id"
class="dashboard-legend-cassette">
<div
class="dashboard-legend-cassette-cricle"
:style="{ background: item.color }" />
{{ item.name }}
</div>
|
<div class="dashboard-legend-port" style="background: #d7dbe5">停用</div>
<div class="dashboard-legend-port" style="background: #d8e5ff">启用</div>
</el-row>
<div class="mainbody">
<div v-for="i in total" :key="i">
<el-row>
@@ -26,11 +50,14 @@
v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
:key="a.id + a.code"
:title="a.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[a.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[a.type - 1],
background: dotColor[a.status],
}" />
<p class="p-name">{{ a.name }}</p>
</div>
@@ -41,11 +68,14 @@
v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
:key="b.id + b.code"
:title="b.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[b.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[b.type - 1],
background: dotColor[b.status],
}" />
<p class="p-name">{{ b.name }}</p>
</div>
@@ -61,11 +91,14 @@
v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
:key="c.id + c.code"
:title="c.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[c.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[c.type - 1],
background: dotColor[c.status],
}" />
<p class="p-name">{{ c.name }}</p>
</div>
@@ -76,11 +109,14 @@
v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
:key="d.id + d.code"
:title="d.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[d.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[d.type - 1],
background: dotColor[d.status],
}" />
<p class="p-name">{{ d.name }}</p>
</div>
@@ -106,7 +142,14 @@ export default {
four: [],
},
total: 0,
bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
bgColor: ['#D7DBE5', '#D8E5FF'],
dotColor: ['#16DC09', '#FFD781', '#7362F3', '#FFA08F'],
cassetteStatusList: [
{ id: '1', name: '可用', color: '#16DC09' },
{ id: '2', name: '占用-待入库', color: '#FFD781' },
{ id: '3', name: '占用-有货', color: '#7362F3' },
{ id: '4', name: '占用-待出库', color: '#FFA08F' },
],
formConfig: [
{
type: 'button',
@@ -130,26 +173,26 @@ export default {
there: [],
four: [],
}),
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 4) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 4) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
});
});
},
buttonClick(val) {
switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
top: 22px;
right: 120px;
}
.dashboard-legend {
margin: 5px 5px 10px 5px;
.dashboard-legend-cassette {
display: inline-block;
margin-right: 24px;
.dashboard-legend-cassette-cricle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
}
}
.dashboard-legend-port {
display: inline-block;
height: 24px;
line-height: 24px;
border-radius: 4px;
padding: 0 16px;
margin-left: 24px;
}
}
</style>

2
src/views/warehouse/part-material/warehouseRealtimeLocation/index.vue
View File

@@ -17,7 +17,7 @@
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="100"
:width="140"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />

130
src/views/warehouse/raw-material/warehouseLocationMonitoring/index.vue
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-21 14:26:23
* @LastEditors: zwq
* @LastEditTime: 2023-11-06 11:30:20
* @LastEditTime: 2023-11-14 09:39:02
* @Description:
-->
<template>
@@ -11,11 +11,35 @@
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div class="tips">
<el-tag effect="dark" color="#7362F3" style="border: none">缓存</el-tag>
<el-tag effect="dark" color="#16DC09" style="border: none">活动</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">其它</el-tag>
</div>
<!-- <div class="tips">
<el-tag color="#D7DBE5" style="border: none; color: black">停用</el-tag>
<el-tag color="#D8E5FF" style="border: none; color: black">启用</el-tag>
<el-divider direction="vertical" />
<el-tag effect="dark" color="#16DC09" style="border: none">可用</el-tag>
<el-tag effect="dark" color="#FFD781" style="border: none">
占用-待入库
</el-tag>
<el-tag effect="dark" color="#7362F3" style="border: none">
占用-有货
</el-tag>
<el-tag effect="dark" color="#FFA08F" style="border: none">
占用-待出库
</el-tag>
</div> -->
<el-row class="dashboard-legend">
<div
v-for="item in cassetteStatusList"
:key="'cassette' + item.id"
class="dashboard-legend-cassette">
<div
class="dashboard-legend-cassette-cricle"
:style="{ background: item.color }" />
{{ item.name }}
</div>
|
<div class="dashboard-legend-port" style="background: #d7dbe5">停用</div>
<div class="dashboard-legend-port" style="background: #d8e5ff">启用</div>
</el-row>
<div class="mainbody">
<div v-for="i in total" :key="i">
<el-row>
@@ -26,11 +50,14 @@
v-for="a in wareData.one.slice((i - 1) * 10, i * 10)"
:key="a.id + a.code"
:title="a.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[a.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[a.type - 1],
background: dotColor[a.status],
}" />
<p class="p-name">{{ a.name }}</p>
</div>
@@ -41,11 +68,14 @@
v-for="b in wareData.two.slice((i - 1) * 10, i * 10)"
:key="b.id + b.code"
:title="b.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[b.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[b.type - 1],
background: dotColor[b.status],
}" />
<p class="p-name">{{ b.name }}</p>
</div>
@@ -61,11 +91,14 @@
v-for="c in wareData.there.slice((i - 1) * 10, i * 10)"
:key="c.id + c.code"
:title="c.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[c.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[c.type - 1],
background: dotColor[c.status],
}" />
<p class="p-name">{{ c.name }}</p>
</div>
@@ -76,11 +109,14 @@
v-for="d in wareData.four.slice((i - 1) * 10, i * 10)"
:key="d.id + d.code"
:title="d.name"
style="background: #fff8e8; float: left">
:style="{
background: bgColor[d.enabled],
float: 'left',
}">
<div
class="dashboard-layout-item-cricle"
:style="{
background: bgColor[d.type - 1],
background: dotColor[d.status],
}" />
<p class="p-name">{{ d.name }}</p>
</div>
@@ -106,7 +142,14 @@ export default {
four: [],
},
total: 0,
bgColor: ['#7362F3', '#16DC09', '#FFA08F'],
bgColor: ['#D7DBE5', '#D8E5FF'],
dotColor: ['#16DC09', '#FFD781', '#7362F3', '#FFA08F'],
cassetteStatusList: [
{ id: '1', name: '可用', color: '#16DC09' },
{ id: '2', name: '占用-待入库', color: '#FFD781' },
{ id: '3', name: '占用-有货', color: '#7362F3' },
{ id: '4', name: '占用-待出库', color: '#FFA08F' },
],
formConfig: [
{
type: 'button',
@@ -130,26 +173,26 @@ export default {
there: [],
four: [],
}),
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 1) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
getWarehouseList().then((response) => {
response.data.forEach((item) => {
if (item.storageType === 1) {
listByWarehouse(item.id).then((response) => {
response.data.forEach((a, b) => {
if (b % 4 === 0) {
this.wareData.one.push(a);
} else if (b % 4 === 1) {
this.wareData.two.push(a);
} else if (b % 4 === 2) {
this.wareData.there.push(a);
} else if (b % 4 === 3) {
this.wareData.four.push(a);
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
this.total = Math.ceil(response.data.length / 40);
});
}
});
});
});
},
buttonClick(val) {
switch (val.btnName) {
@@ -225,4 +268,25 @@ export default {
top: 22px;
right: 120px;
}
.dashboard-legend {
margin: 5px 5px 10px 5px;
.dashboard-legend-cassette {
display: inline-block;
margin-right: 24px;
.dashboard-legend-cassette-cricle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
}
}
.dashboard-legend-port {
display: inline-block;
height: 24px;
line-height: 24px;
border-radius: 4px;
padding: 0 16px;
margin-left: 24px;
}
}
</style>

2
src/views/warehouse/raw-material/warehouseRealtimeLocation/index.vue
View File

@@ -17,7 +17,7 @@
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="100"
:width="140"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />