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

projects/mesxc-dy #278

Merged
juzi merged 2 commits from projects/mesxc-dy into projects/mesxc-test 2024-03-26 16:56:55 +08:00
Conversation 0 Commits 2 Files Changed 5 +988 -4791
61 changed files with 988 additions and 4791 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit df2df6ed7a - Show all commits

4
.env.dev
View File

@ -1,8 +1,8 @@
### ###
# @Author: Do not edit # @Author: Do not edit
# @Date: 2023-08-29 09:40:39 # @Date: 2023-08-29 09:40:39
# @LastEditTime: 2024-03-22 10:28:37 # @LastEditTime: 2024-03-25 15:59:53
# @LastEditors: DY # @LastEditors: zhp
# @Description: # @Description:
### ###
# 开发环境配置 # 开发环境配置

470
src/views/OperationalOverview/AGVBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-03-12 09:05:20 * @LastEditTime: 2024-03-26 09:57:35
* @Description: * @Description:
--> -->
<template> <template>
@ -36,17 +36,7 @@
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'order'" :back="'energy'"> <base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'order'" :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;"> <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-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD"> <p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" /> <i class="el-icon-check" />
@ -56,31 +46,7 @@
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" :percentage="op.outRate * 100" <el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" :percentage="op.outRate * 100"
class="custom-progress-bar" /> class="custom-progress-bar" />
</el-row> </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>
<!-- </div> -->
</base-container> </base-container>
</el-col> </el-col>
</el-row> </el-row>
@ -89,50 +55,18 @@
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'productLine'" <base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'productLine'"
:back="'energy'"> :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="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps" <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
:table-data="inventoryList" /> :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> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'info'" <base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'info'"
:back="'energy'"> :back="'energy'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps" <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
:table-data="locationList" /> :table-data="locationList" />
</base-container> </base-container>
</el-col> </el-col>
</el-row> </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> </el-row>
</div> </div>
</template> </template>
@ -142,252 +76,7 @@ import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable' import baseTable1 from './components/baseTable'
import baseTable from './components/baseTable' import baseTable from './components/baseTable'
import baseTable2 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 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 = [ const locationTableProps = [
{ {
prop: 'eqName', prop: 'eqName',
@ -552,107 +241,6 @@ const qualityYearList = [
{ eqName: 'RQ20230920', eqCode: '3-03', level: '成品库B-D区-4', product: ' 3.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日' } { 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 { export default {
name: 'ProductionMonitoringCockpit', name: 'ProductionMonitoringCockpit',
components: { components: {
@ -676,12 +264,10 @@ export default {
times:undefined, times:undefined,
value: 100, value: 100,
qualityYearTableProps, qualityYearTableProps,
cxNameList,
inventoryTableProps, inventoryTableProps,
inventoryList, inventoryList,
locationList, locationList,
locationTableProps, locationTableProps,
cxDataList,
qualityYearList, qualityYearList,
isFullScreen: false, isFullScreen: false,
orderProcessList: [ orderProcessList: [
@ -710,18 +296,12 @@ export default {
outRate: '0.4' outRate: '0.4'
} }
], ],
qualityTableProps1, // qualityTableProps1,
qualityMonthList,
qualityMonthTableProps,
modelMonth: '', modelMonth: '',
qualityList1,
// logoutTime: 43200000, // logoutTime: 43200000,
qualityTableProps2, // qualityTableProps2,
qualityList2, // qualityList2,
dateType: '0', dateType: '0',
legendData1,
legendData2,
legendData3
} }
}, },
computed: { computed: {
@ -770,23 +350,7 @@ export default {
this.beilv2 = _this.clientWidth / 1920 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: { methods: {
getTimes() { getTimes() {
setInterval(this.getTimesInterval, 1000); setInterval(this.getTimesInterval, 1000);
@ -815,32 +379,6 @@ export default {
windowWidth(value) { windowWidth(value) {
this.clientWidth = 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() { change() {
this.isFullScreen = screenfull.isFullscreen this.isFullScreen = screenfull.isFullscreen
}, },

746
src/views/OperationalOverview/coldBoard.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-01-29 16:50:26 * @Date: 2024-01-29 16:50:26
* @LastEditTime: 2024-03-13 09:07:37 * @LastEditTime: 2024-03-26 16:30:12
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -134,143 +134,32 @@
<script> <script>
import baseContainer from './components/baseContainer' import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable' import baseTable1 from './components/baseTable'
// import baseContainer1 from './components/baseContainer/indexcopy'
// import baseTable2 from './components/baseTable'
// import baseTable3 from './components/baseTable'
import TopRadioGroup from './components/topRadioGroup'
import screenfull from 'screenfull' import screenfull from 'screenfull'
// import BaseVideo from './components/baseVideo.vue'
import alarmLevel from './components/alarmLevel'
import pileBarChart from './components/pileBarChart' import pileBarChart from './components/pileBarChart'
import colorDiv from './components/colorDiv' import colorDiv from './components/colorDiv'
import moment from "moment"; import moment from "moment";
// import axios from '@/utils/request'
import doubleYChart from './components/coldDoubleYChart' import doubleYChart from './components/coldDoubleYChart'
import { parseTime } from '../core/mixins/code-filter'; import { parseTime } from '../core/mixins/code-filter';
import ISRAChart from './components/ISRAChart.vue'; import ISRAChart from './components/ISRAChart.vue';
import { getDcsMsg, closeDcsMsg } from "./wsInterface" import { getDcsMsg, closeDcsMsg } from "./wsInterface"
import LinearBarChart from './components/linearBarChart' import LinearBarChart from './components/linearBarChart'
const qualityYearTableProps= [] import WebSocketHeartbeat from './ws.js';
const EqMonitoringPropsFun = [
{ prop: 'equipmentName', label: '设备名称' },
{ prop: 'status', label: '运行状态', width: 80}
]
const EqMonitoringProps = [
{ prop: 'line', label: '产线' },
{ prop: 'name', label: '设备名称' },
{ prop: 'code', label: '设备编码' },
{
prop: 'run',
label: '运行状态',
},
{
prop: 'error',
label: '故障状态',
},
]
const cutProps = [
{ prop: 'lineName', label: '产线', width: 50 },
{
prop: 'time', label: '时间',
filter: parseTime
},
{ prop: 'size', label: '规格' },
{ prop: 'productArea', label: '良品面积', width: 80 },
{ prop: 'wasteArea', label: '废片面积', width: 80 },
{
prop: 'product', label: '良品率', width: 80,
subcomponent: colorDiv,
},
]
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 ISRATableProps = [
{
prop: 'linename',
label:'产线'
},
{
prop: 'time',
label: '时间'
},
{
prop: 'type',
label:'缺陷类型'
},
{
prop: 'num',
label: '缺陷数量'
},
{
prop: 'percent',
label: '占比'
}
]
export default { export default {
name: 'ProductionMonitoringCockpit', name: 'ProductionMonitoringCockpit',
components: { components: {
baseContainer, baseContainer,
baseTable1, baseTable1,
pileBarChart, pileBarChart,
TopRadioGroup,
doubleYChart, doubleYChart,
LinearBarChart, LinearBarChart,
ISRAChart ISRAChart
// baseContainer1
// pieChart1,
// pieChart2
// pieChart3
// BaseVideo
}, },
data() { data() {
return { return {
beilv2: 1, beilv2: 1,
beilv: 1, beilv: 1,
value: 100, value: 100,
EqMonitoringProps,
EqMonitoringPropsFun,
realEqList:[], realEqList:[],
qualityYearTableProps,
ISRATableProps,
orderList: [], orderList: [],
times: '', times: '',
cutConfig: { cutConfig: {
@ -330,21 +219,18 @@ export default {
}, },
ISRAList:[], ISRAList:[],
EnergyMonitoringNameList: [], EnergyMonitoringNameList: [],
equipmentList: [],
EnergyMonitoringList: [], EnergyMonitoringList: [],
// offsetWidth: null,
cxNameList,
cxDataList,
// time:12,
cutProps,
// logoutTime: 43200000,
cutTableDataList:[],
clientWidth: 0, clientWidth: 0,
containerWidth: 111111, containerWidth: 111111,
isFullScreen: false, isFullScreen: false,
cutWsData: {}, cutWsData: {},
Cutws: undefined,
funWs: undefined,
SJGws: undefined,
funWsData: {}, funWsData: {},
SJGWsData: {}, SJGWsData: {},
cxNameList:[],
cxDataList:[],
// orderProcessList: [], // orderProcessList: [],
dateType: '0', dateType: '0',
wsIsOpen:false, wsIsOpen:false,
@ -385,19 +271,15 @@ export default {
} }
}, },
created() { created() {
// this.fetchList('exception-alarm')
// this.fetchList('inAndOutOfEachLine')
// this.fetchList('order-process')
// this.fetchList('line-chart-data')
this.init() this.init()
setTimeout(() => { setTimeout(() => {
window.location.reload() window.location.reload()
}, 86400000) }, 86400000)
}, },
destroyed() { destroyed() {
this.funInitWebSocket() this.CutWebsocketClose()
this.CutInitWebSocket()
this.SJGWebsocketClose() this.SJGWebsocketClose()
this.funWebSocketClose()
if (this.wsIsOpen) { if (this.wsIsOpen) {
closeDcsMsg() closeDcsMsg()
this.wsIsOpen = false this.wsIsOpen = false
@ -428,59 +310,20 @@ export default {
this.beilv2 = _this.clientWidth / 1920 this.beilv2 = _this.clientWidth / 1920
})() })()
} }
// logoutInterval = setInterval(() => {
// this.logoutTime -= 1000
// }, 1000)
// if (this.logoutTime === 0) {
// this.SJGInitWebSocket()
// this.CutInitWebSocket()
// this.funInitWebSocket()
// this.logoutTimeReset()
// }
}, },
// beforeDestroy() {
// //离开页面删除检测器和所有侦听器
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
// removeEventListener('resize', resizeFun)
// },
methods: { methods: {
// logoutTimeReset() {
// this.logoutTime = this.time * 60 * 60 * 1000
// },
CutWebsocketClose(e) { CutWebsocketClose(e) {
console.log('WebSocket 断开连接', e) this.Cutws.ws.onclose = (event) => { console.log(event );}
}, },
SJGWebsocketClose(e) { SJGWebsocketClose(e) {
console.log('WebSocket 断开连接', e) this.SJGws.ws.onclose = (event) => { console.log(event); }
}, },
funWebSocketClose(e) { funWebSocketClose(e) {
console.log('WebSocket 断开连接', e) this.funWs.ws.onclose = (event) => { console.log(event); }
}, },
formatTime(time, option) { formatTime(time, option) {
// if (('' + time).length === 10) {
// time = parseInt(time) * 1000
// } else {
// time = +time
// }
console.log(time); console.log(time);
const d = new Date(time) const d = new Date(time)
// const now = Date.now()
// console.log(time);
// const diff = (now - d) / 1000
// if (diff < 30) {
// return '刚刚'
// } else if (diff < 3600) {
// // less 1 hour
// return Math.ceil(diff / 60) + '分钟前'
// } else if (diff < 3600 * 24) {
// return Math.ceil(diff / 3600) + '小时前'
// } else if (diff < 3600 * 24 * 2) {
// return '1天前'
// }
// if (option) {
// return parseTime(time, option)
// } else {
return ( return (
d.getMonth() + d.getMonth() +
1 + 1 +
@ -495,30 +338,6 @@ export default {
) )
// } // }
}, },
// getList() {
// // this.loading = true;
// // 执行查询
// // let data = '{ "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }'
// // let obj = JSON.parse(data)
// // // for()
// // let arr = []
// // for (let i in obj.data.FanFrequencyInfo) {
// // arr.push({
// // equipmentName: i,
// // status: obj.data.FanFrequencyInfo[i]
// // })
// // }
// // this.funList = arr``
// this.$axios.get(
// '/monitoring/equipment-monitor/realtime-page',
// 'get',
// this.queryParams
// ).then((res) => {
// this.realEqList = res.data.list;
// // this.total = response.data.total;
// // this.loading = false;
// });
// },
getTimes() { getTimes() {
setInterval(this.getTimesInterval, 1000); setInterval(this.getTimesInterval, 1000);
}, },
@ -544,133 +363,229 @@ export default {
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}, },
SJGInitWebSocket() { SJGInitWebSocket() {
if (typeof (WebSocket) === 'undefined') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket') const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
} else { this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
// const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG' // 处理收到的消息
let date = new Date().valueOf() this.SJGws.ws.onmessage = (event) => {
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}` this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
this.SJGWebsocket = new WebSocket(SJGWsUrl) if (this.SJGWsData.type === 'isra') {
// 监听 WebSocket 连接 console.log('222222', this.SJGWsData.detData)
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen console.log(this.SJGWsData.detData);
// 监听 WebSocket 错误信息 let chartData = this.SJGWsData.detData.map((item, index) => {
this.SJGWebsocket.onerror = this.SJGWebsocketOnError return {
// 监听 WebSocket 消息 name: item.type,
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage num: item.num
// 监听 webSocket 断开信息 }
this.SJGWebsocket.onclose = this.SJGWebsocketClose })
} this.$refs['ISRAChart'].updateChart(chartData)
} else if (this.SJGWsData.type === 'equipment') {
this.realEqList = this.SJGWsData.detData.map((ele, index) => [
// console.log(item)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${ele.name || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${ele.run || ''}</span>`,
])
}
this.realEqConfig.data = this.realEqList
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
};
// if (typeof (WebSocket) === 'undefined') {
// alert('您的浏览器不支持WebSocket')
// } else {
// // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
// // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
// let date = new Date().valueOf()
// const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
// this.SJGWebsocket = new WebSocket(SJGWsUrl)
// // 监听 WebSocket 连接
// this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
// // 监听 WebSocket 错误信息
// this.SJGWebsocket.onerror = this.SJGWebsocketOnError
// // 监听 WebSocket 消息
// this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
// // 监听 webSocket 断开信息
// this.SJGWebsocket.onclose = this.SJGWebsocketClose
// }
}, },
CutInitWebSocket() { CutInitWebSocket() {
if (typeof (WebSocket) === 'undefined') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket')
} else {
// const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
let date = new Date().valueOf()
const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}` const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
// const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
this.Cutws = new WebSocketHeartbeat(cutWsUrl);
this.cutWebsocket = new WebSocket(cutWsUrl) // 处理收到的消息
// 监听 WebSocket 连接 this.Cutws.ws.onmessage = (event) => {
this.cutWebsocket.onopen = this.cutWebsocketOnOpen console.log(event)
// 监听 WebSocket 错误信息 this.cutWsData = event?.data ? JSON.parse(event?.data) : {}
this.cutWebsocket.onerror = this.cutWebsocketOnError if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
// 监听 WebSocket 消息 let cutArr = this.cutWsData.productHourData.map((item, index) => [
this.cutWebsocket.onmessage = this.cutWebsocketOnMessage `<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
// 监听 webSocket 断开信息 </span>`,
this.cutWebsocket.onclose = this.cutWebsocketClose `<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
} </span>`,
`<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
`<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
`<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
`<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
`<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
<div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
])
this.cutConfig.data = cutArr
this.$refs['cutScrollBoard'].updateRows(cutArr)
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
let nameList = []
let nameWasteList = []
let topNameList = []
let productList = []
let wasteList = []
let sumAreaList = []
let yieldList = []
// this.cutTableDataList =
this.cutWsData.coldDetData.forEach((ele, index) => {
nameList.push(ele.lineName)
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea)
productList.push(ele.productArea)
wasteList.push(ele.wastArea)
nameWasteList.push('缺陷面积:' + ele.wastArea)
sumAreaList.push(ele.sumArea)
yieldList.push((ele.yield * 100).toFixed(3))
})
this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
}
};
// if (typeof (WebSocket) === 'undefined') {
// alert('您的浏览器不支持WebSocket')
// } else {
// // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
// // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
// let date = new Date().valueOf()
// const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
// this.cutWebsocket = new WebSocket(cutWsUrl)
// // 监听 WebSocket 连接
// this.cutWebsocket.onopen = this.cutWebsocketOnOpen
// // 监听 WebSocket 错误信息
// this.cutWebsocket.onerror = this.cutWebsocketOnError
// // 监听 WebSocket 消息
// this.cutWebsocket.onmessage = this.cutWebsocketOnMessage
// // 监听 webSocket 断开信息
// this.cutWebsocket.onclose = this.cutWebsocketClose
// }
}, },
funInitWebSocket() { funInitWebSocket() {
if (typeof (WebSocket) === 'undefined') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket') const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
} else { this.funWs = new WebSocketHeartbeat(funWsUrl);
// const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111' // 处理收到的消息
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG' this.funWs.ws.onmessage = (event) => {
let date = new Date().valueOf() this.funWsData = event?.data ? JSON.parse(event?.data) : {}
const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}` // FanInfo
this.funWebsocket = new WebSocket(funWsUrl) if (this.funWsData.type === 'AnnealFanInfo') {
// 监听 WebSocket 连接 let arr = []
this.funWebsocket.onopen = this.funWebsocketOnOpen let index = 0
// 监听 WebSocket 错误信息 for (let i in this.funWsData.data.annealFanInfo) {
this.funWebsocket.onerror = this.funWebsocketOnError index++,
// 监听 WebSocket 消息 arr.push([
this.funWebsocket.onmessage = this.funWebsocketOnMessage `
// 监听 webSocket 断开信息
this.funWebsocket.onclose = this.funWebsocketClose
}
},
funWebsocketOnOpen() {
console.log('socket连接成功')
this.SJGWebsocket.onmessage()
},
// 连接建立失败重连
funWebsocketOnError(e) {
this.funInitWebSocket()
},
// 数据接收
funWebsocketOnMessage(e) {
this.funWsData = e?.data ? JSON.parse(e?.data) : {}
// FanInfo
if (this.funWsData.type === 'AnnealFanInfo') {
let arr = []
let index = 0
for (let i in this.funWsData.data.annealFanInfo) {
index++,
// let index = 1,
// index++
// arr.push({
// equipmentName: i,
// status: this.funWsData.data.annealFanInfo[i]
// })
arr.push([
// console.log(item)
`
<span style="color:rgba(255,255,255,0.5)" >${index || ''} <span style="color:rgba(255,255,255,0.5)" >${index || ''}
</span>`, </span>`,
// formatDate(item.planStartTime) || '', `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
`
<span style="color:rgba(255,255,255,0.5)" >${i || ''}
</span>`, </span>`,
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`, `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
]) ])
}
this.annealFunConfig.data = arr
this.$refs['annealFunScrollBoard'].updateRows(arr)
} }
this.annealFunConfig.data = arr if (this.funWsData.type === 'FanInfo') {
this.$refs['annealFunScrollBoard'].updateRows(arr) let arr = []
} let index = 0
if (this.funWsData.type === 'FanInfo') { for (let i in this.funWsData.data.fanInfo) {
let arr = [] index++,
let index = 0 arr.push([
for (let i in this.funWsData.data.fanInfo) { `<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
index++, `<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
// arr.push({ `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
// equipmentName: i, ])
// status: this.funWsData.data.fanInfo[i] }
// }) this.funConfig.data = arr
arr.push([ this.$refs['funScrollBoard'].updateRows(arr)
// console.log(item)
`
<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
])
} }
this.funConfig.data = arr };
this.$refs['funScrollBoard'].updateRows(arr) // if (typeof (WebSocket) === 'undefined') {
// this.funList = arr // alert('您的浏览器不支持WebSocket')
} // } else {
}, // // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
cutWebsocketOnOpen() { // // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
console.log('socket连接成功') // let date = new Date().valueOf()
this.SJGWebsocket.onmessage() // const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
}, // this.funWebsocket = new WebSocket(funWsUrl)
// 连接建立失败重连 // // 监听 WebSocket 连接
cutWebsocketOnError(e) { // this.funWebsocket.onopen = this.funWebsocketOnOpen
this.CutInitWebSocket() // // 监听 WebSocket 错误信息
// this.funWebsocket.onerror = this.funWebsocketOnError
// // 监听 WebSocket 消息
// this.funWebsocket.onmessage = this.funWebsocketOnMessage
// // 监听 webSocket 断开信息
// this.funWebsocket.onclose = this.funWebsocketClose
// }
}, },
// funWebsocketOnOpen() {
// console.log('socket连接成功')
// this.SJGWebsocket.onmessage()
// },
// // 连接建立失败重连
// funWebsocketOnError(e) {
// this.funInitWebSocket()
// },
// 数据接收
// funWebsocketOnMessage(e) {
// this.funWsData = e?.data ? JSON.parse(e?.data) : {}
// // FanInfo
// if (this.funWsData.type === 'AnnealFanInfo') {
// let arr = []
// let index = 0
// for (let i in this.funWsData.data.annealFanInfo) {
// index++,
// arr.push([
// `
// <span style="color:rgba(255,255,255,0.5)" >${index || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
// ])
// }
// this.annealFunConfig.data = arr
// this.$refs['annealFunScrollBoard'].updateRows(arr)
// }
// if (this.funWsData.type === 'FanInfo') {
// let arr = []
// let index = 0
// for (let i in this.funWsData.data.fanInfo) {
// index++,
// arr.push([
// `<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
// ])
// }
// this.funConfig.data = arr
// this.$refs['funScrollBoard'].updateRows(arr)
// }
// },
// cutWebsocketOnOpen() {
// console.log('socket连接成功')
// this.SJGWebsocket.onmessage()
// },
// // 连接建立失败重连
// cutWebsocketOnError(e) {
// this.CutInitWebSocket()
// },
getSize(str) { getSize(str) {
// console.log(str.match(/\d+(\.\d+)?/g)) // console.log(str.match(/\d+(\.\d+)?/g))
let size = str.match(/\d+(\.\d+)?/g).map(ele => { let size = str.match(/\d+(\.\d+)?/g).map(ele => {
@ -680,157 +595,82 @@ export default {
return size[0] + '*' + size[1] + '*' + size[2] return size[0] + '*' + size[1] + '*' + size[2]
}, },
// 数据接收 // 数据接收
cutWebsocketOnMessage(e) { // cutWebsocketOnMessage(e) {
this.cutWsData = e?.data ? JSON.parse(e?.data) : {} // this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') { // if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
// this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => { // let cutArr = this.cutWsData.productHourData.map((item, index) => [
// // if (ele.progressRate != 1) { // `<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
// return { // </span>`,
// id: ele.id, // `<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
// lineName: ele.lineName, // </span>`,
// time: ele.time, // `<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
// size: this.getSize(ele.size), // `<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
// productArea: ele.productArea + '㎡', // `<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
// wasteArea: ele.wasteArea + '㎡', // `<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
// product: (ele.product * 100).toFixed(2) // `<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
// } // <div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
// // } // ])
// }); // this.cutConfig.data = cutArr
let cutArr = this.cutWsData.productHourData.map((item, index) => [ // this.$refs['cutScrollBoard'].updateRows(cutArr)
// console.log(item) // } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
` // let nameList = []
<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''} // let nameWasteList = []
</span>`, // let topNameList = []
// formatDate(item.planStartTime) || '', // let productList = []
` // let wasteList = []
<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''} // let sumAreaList = []
</span>`, // let yieldList = []
`<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`, // // this.cutTableDataList =
`<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`, // this.cutWsData.coldDetData.forEach((ele, index) => {
`<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`, // nameList.push(ele.lineName)
`<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`, // topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea)
`<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div> // productList.push(ele.productArea)
<div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>` // wasteList.push(ele.wastArea)
]) // nameWasteList.push('缺陷面积:' + ele.wastArea)
this.cutConfig.data = cutArr // sumAreaList.push(ele.sumArea)
this.$refs['cutScrollBoard'].updateRows(cutArr) // yieldList.push((ele.yield *100).toFixed(3))
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') { // })
let nameList = [] // this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
let nameWasteList = [] // this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
let topNameList = [] // }
let productList = [] // },
let wasteList = [] // SJGWebsocketOnOpen() {
let sumAreaList = [] // console.log('socket连接成功')
let yieldList = [] // this.SJGWebsocket.onmessage()
// this.cutTableDataList = // },
this.cutWsData.coldDetData.forEach((ele, index) => {
nameList.push(ele.lineName)
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea)
productList.push(ele.productArea)
wasteList.push(ele.wastArea)
nameWasteList.push('缺陷面积:' + ele.wastArea)
sumAreaList.push(ele.sumArea)
yieldList.push((ele.yield *100).toFixed(3))
})
this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
}
},
SJGWebsocketOnOpen() {
console.log('socket连接成功')
this.SJGWebsocket.onmessage()
},
// 连接建立失败重连 // 连接建立失败重连
SJGWebsocketOnError(e) { // SJGWebsocketOnError(e) {
this.SJGInitWebSocket() // this.SJGInitWebSocket()
}, // },
// 数据接收 // 数据接收
SJGWebsocketOnMessage(e) { // SJGWebsocketOnMessage(e) {
// let data = { "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" } // this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
// let obj = JSON.parse(data.data) // if (this.SJGWsData.type === 'isra') {
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {} // console.log('222222', this.SJGWsData.detData)
if (this.SJGWsData.type === 'isra') { // console.log(this.SJGWsData.detData);
console.log('222222', this.SJGWsData.detData); // let chartData = this.SJGWsData.detData.map((item, index) => {
// this.ISRAList = this.SJGWsData.detData.map((ele, index) => { // return {
// // if (ele.progressRate != 1) { // name: item.type,
// return { // num:item.num
// id: ele.id, // }
// linename: ele.linename, // })
// type: ele.type, // this.$refs['ISRAChart'].updateChart(chartData)
// num: ele.num, // } else if (this.SJGWsData.type === 'equipment') {
// time:ele.time, // this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
// percent: ele.percent // // console.log(item)
// } // `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
// // } // </span>`,
// }); // `<span style="color:rgba(255,255,255,0.5)">${ele.name || ''}</span>`,
console.log(this.SJGWsData.detData); // `<span style="color:rgba(255,255,255,0.5)">${ele.run || ''}</span>`,
let chartData = this.SJGWsData.detData.map((item, index) => { // ])
return { // }
name: item.type, // this.realEqConfig.data = this.realEqList
num:item.num // this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
} // },
})
// let ISRAArr = this.SJGWsData.detData.map((item, index) => [
// // console.log(item)
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
// </span>`,
// // formatDate(item.planStartTime) || '',
// `
// <span style="color:rgba(255,255,255,0.5)" >${item.linename || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.type || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.num || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${(item.percent * 100).toFixed(2) || ''}</span>`,
// ])
// this.ISRAConfig.data = ISRAArr
this.$refs['ISRAChart'].updateChart(chartData)
} else if (this.SJGWsData.type === 'equipment') {
this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
// console.log(item)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
// `<span style="color:rgba(255,255,255,0.5)" >${item.line || ''}
// </span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.run || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
]);
}
this.realEqConfig.data = this.realEqList
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
},
windowWidth(value) { windowWidth(value) {
this.clientWidth = value this.clientWidth = value
this.beilv2 = this.clientWidth / 1920 this.beilv2 = this.clientWidth / 1920
}, },
// 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() { change() {
this.isFullScreen = screenfull.isFullscreen this.isFullScreen = screenfull.isFullscreen
}, },

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

@ -1,127 +0,0 @@
<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>

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

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

@ -1,158 +0,0 @@
<!--
* @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
View File

@ -1,158 +0,0 @@
<!--
* @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
View File

@ -1,144 +0,0 @@
<!--
* @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
View File

@ -1,170 +0,0 @@
<!--
* @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
View File

@ -1,31 +0,0 @@
<!--
* @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
View File

@ -1,60 +0,0 @@
<!--
* @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
View File

@ -1,83 +0,0 @@
<!--
* @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
View File

@ -1,229 +0,0 @@
<!--
* @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
View File

@ -1,51 +0,0 @@
<!--
* @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>

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

@ -1,187 +0,0 @@
<!--
* @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>

8
src/views/OperationalOverview/components/baseTable.vue
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Date: 2020-12-14 09:07:03 * @Author: zhp
* @Date: 2024-03-26 09:20:18
* @LastEditTime: 2024-03-26 09:20:18
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-01-12 14:30:46
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description: * @Description:
--> -->
<template> <template>
@ -158,7 +158,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../styles/index.scss"; // @import "../styles/index.scss";
.visual-base-table-container { .visual-base-table-container {
.el-table { .el-table {
border: 0; border: 0;

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

@ -1,40 +0,0 @@
<!--
* @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>

4
src/views/OperationalOverview/components/coldDoubleYChart.vue
View File

@ -2,7 +2,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-09-21 09:06:28 * @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-01-29 15:39:59 * @LastEditTime: 2024-03-25 18:34:58
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -158,7 +158,7 @@ export default {
legend: { legend: {
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
top: '1%', top: '20',
// right: '20px', // right: '20px',
data: ['产线产量', '产线良品率'], data: ['产线产量', '产线良品率'],
textStyle: { textStyle: {

2
src/views/OperationalOverview/components/doubleYChart .vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-09-21 09:06:28 * @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-03-13 08:51:12 * @LastEditTime: 2024-03-26 16:16:50
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->

23
src/views/OperationalOverview/components/linearBarChart.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" /> <div :id="id" :class="className" :style="{ height: '420px', width: width }" />
</div> </div>
</template> </template>
@ -19,7 +19,7 @@ export default {
}, },
className: { className: {
type: String, type: String,
default: 'chart' default: 'enChart'
}, },
width: { width: {
type: String, type: String,
@ -84,7 +84,7 @@ export default {
}, },
methods: { methods: {
initChart(nameList, dataList) { initChart(nameList, dataList) {
console.log('1111', dataList); // console.log('1111', dataList);
// console.log(1) // console.log(1)
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id))
// if (dataList.length !== 0) { // if (dataList.length !== 0) {
@ -123,13 +123,7 @@ export default {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
} }
}, },
grid: { grid: { top: 90, right: 60, bottom: 20, left: 90 },
top: 30,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
// legend: { // legend: {
// itemWidth: 10, // itemWidth: 10,
// itemHeight: 10, // itemHeight: 10,
@ -205,4 +199,11 @@ export default {
} }
} }
</script> </script>
<style>
.enChart {
position: absolute;
height: 100%;
width: 100%;
top: -30px;
}
</style>

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

@ -1,40 +0,0 @@
<!--
* @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>

68
src/views/OperationalOverview/components/pileBarChart.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-27 13:54:52 * @Date: 2023-12-27 13:54:52
* @LastEditTime: 2024-03-13 09:04:11 * @LastEditTime: 2024-03-26 10:50:30
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -92,18 +92,17 @@ export default {
methods: { methods: {
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) { initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
let rawData = [] let rawData = []
rawData.push(passRateList,wasteList) let colors = ['#0fdedb', '#2359ec']
// console.log(1) rawData.push(passRateList, wasteList)
const totalData = []; const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) { for (let i = 0; i < rawData[0].length; ++i) {
let sum = 0; let sum = 0;
for (let j = 0; j < rawData.length; ++j) { for (let j = 0; j < rawData.length; ++j) {
sum += rawData[j][i]; sum += rawData[j][i];
}
totalData.push(sum);
} }
totalData.push(sum); console.log('total', totalData);
}
let colors = ['#0fdedb', '#2359ec' ]
console.log('total', totalData);
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id))
const series = [ const series = [
'良品', '良品',
@ -123,55 +122,16 @@ export default {
formatter: (params) => Math.round(params.value * 1000) / 10 + '%' formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
}, },
color:colors[sid], color:colors[sid],
data: rawData[sid].map((d, did) => data: rawData.length != 0 ? rawData[sid].map((d, did) =>
totalData[did] <= 0 ? 0 : d / totalData[did] totalData[did] <= 0 ? 0 : d / totalData[did]
) ) : []
}; };
}); });
// let series = [
// {
// // 辅助系列
// name: '良品',
// type: 'bar',
// stack: 'total',
// // silent: true,
// // itemStyle: {
// color: '#0fdedb',
// // },
// // barCategoryGap: '10%',
// barWidth: 10,
// data: passRateList
// },
// {
// type: 'bar',
// stack: 'total',
// name: '废品',
// // barCategoryGap: '10%',
// data: wasteList,
// // barWidth: 10,
// // barWidth: 15,
// // label: {
// // position: [10, 10],
// // normal: {
// // position: [800, -24],
// // show: true,
// // textStyle: {
// // color: '#2359ec',
// // fontSize: 16,
// // },
// // },
// // },
// }
// ]
// for (i = 0; i < 5; i++) {
// series.push({
// })
// }
this.chart.setOption({ this.chart.setOption({
legend: { legend: {
itemWidth: 12, itemWidth: 12,
itemHeight: 12, itemHeight: 12,
top:'10',
icon: 'rect', icon: 'rect',
textStyle: { textStyle: {
color: '#ffffff' color: '#ffffff'

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

@ -1,237 +0,0 @@
<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
View File

@ -1,86 +0,0 @@
<!--
* @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
View File

@ -1,67 +0,0 @@
<!--
* @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
View File

@ -1,66 +0,0 @@
<!--
* @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>

841
src/views/OperationalOverview/processingBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-03-21 16:07:39 * @LastEditTime: 2024-03-26 15:43:27
* @Description: * @Description:
--> -->
<template> <template>
@ -16,24 +16,11 @@
许昌安彩深加工看板 许昌安彩深加工看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3> <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3> <h3 class="time">{{ times }}</h3>
<!-- <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>
<el-row class="container-main flex-col" type="flex"> <el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;"> <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'"> <base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
:table-data="equipmentList" /> -->
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
:table-data="qualityYearList" /> -->
<dv-scroll-board class="eqTable" :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' /> <dv-scroll-board class="eqTable" :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' />
</base-container> </base-container>
@ -41,36 +28,18 @@
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'"> <base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" /> -->
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" /> -->
<dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' /> <dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'order'"> <base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'order'">
<!-- <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;"> <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 orderList" :key="op.id" style="margin-bottom: 1em"> <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
<!-- <el-col :span="12"> --> <!-- <el-col :span="12"> -->
<p class="now-secondary-title">{{ op.name }}</p> <p class="now-secondary-title">{{ op.name }}</p>
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" <el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white"
:percentage="op.progressRate * 100" class="custom-progress-bar" /> :percentage="op.progressRate * 100" class="custom-progress-bar" />
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
{{ op.name }}
</p> -->
<!-- </el-col> -->
</el-row> </el-row>
</div> </div>
<!-- </div> --> <!-- </div> -->
@ -82,368 +51,62 @@
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :show-yes-time="true" :no-content-padding="true" :height="256" :size="'middle'" :title="'能源监控'" <base-container :show-yes-time="true" :no-content-padding="true" :height="256" :size="'middle'" :title="'能源监控'"
:title-icon="'energyMonitoring'"> :title-icon="'energyMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<el-row :gutter="9"> <el-row :gutter="9">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
<linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList" <linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
:data-list="EnergyMonitoringList" :height="359" /> :data-list="EnergyMonitoringList" :height="359" />
</el-col> </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> </el-row>
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'" <base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'"
:title="'产线产量及良品率'" :title-icon="'productLine'"> :title="'产线产量及良品率'" :title-icon="'productLine'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="390" :show-legend="true" /> <double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="390" :show-legend="true" />
</base-container> </base-container>
</el-col> </el-col>
</el-row> </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> </el-row>
</div> </div>
</template> </template>
<script> <script>
import baseContainer from './components/baseContainer' import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable' 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 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 doubleYChart from './components/doubleYChart '
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
// let resizeFun = null
import LinearBarChart from './components/linearBarChart' import LinearBarChart from './components/linearBarChart'
const qualityTableProps1 = [ import WebSocketHeartbeat from './ws.js';
{
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: 'name',
label: '设备名称'
},
{
prop: 'code',
label: '设备编码'
},
{
prop: 'status',
label: '设备状态',
// subcomponent: alarmLevel,
align: 'center'
},
{
prop: 'error',
label: '是否故障'
}
]
// 创建WebSocketHeartbeat实例
const qualityYearList = [ const qualityYearList = [
{ {
name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否' }, name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否'
},
{ {
name: '烘干炉', code: 'EQ20240110112537000241', status: '运行', error: '否' }, name: '烘干炉', code: 'EQ20240110112537000241', status: '运行', error: '否'
},
{ {
name: '清洗机', code: ' EQ20240110112310000232', status: '运行', error: '否' }, name: '清洗机', code: ' EQ20240110112310000232', status: '运行', error: '否'
},
{ name: '钢化清洗机', code: 'EQ20240110111700000208', status: '运行', error: '否' }, { name: '钢化清洗机', code: 'EQ20240110111700000208', status: '运行', error: '否' },
{ name: '固化机', code: 'EQ20240110111700000201', status: '运行', error: '否' }, { name: '固化机', code: 'EQ20240110111700000201', status: '运行', error: '否' },
{ {
name: '磨边清洗机', code: ' EQ20240110111700000208', status: '运行', error: '否' }, name: '磨边清洗机', code: ' EQ20240110111700000208', status: '运行', error: '否'
},
{ name: '预热机', code: 'EQ20240110111700000205', status: '故障', error: '是' }, { name: '预热机', code: 'EQ20240110111700000205', status: '故障', error: '是' },
{ name: '下片机', code: 'EQ20240115151435000279', status: '运行', error: '否' }, { name: '下片机', code: 'EQ20240115151435000279', status: '运行', error: '否' },
{ {
name: '冷却机', code: 'EQ20240110111700000203', status: '运行', error: '否' }, name: '冷却机', code: 'EQ20240110111700000203', status: '运行', error: '否'
},
{ {
name: 'A储片机106', code: 'EQ20240110111700000202', status: '运行', error: '否' }, name: 'A储片机106', code: 'EQ20240110111700000202', status: '运行', error: '否'
},
{ name: '二次清洗机', code: 'EQ20240110111700000209', status: '运行', error: '否' }, { name: '二次清洗机', code: 'EQ20240110111700000209', status: '运行', error: '否' },
{ {
name: '二次磨边机', code: ' EQ20240110110927000181', status: '故障', error: '是' }, name: '二次磨边机', code: ' EQ20240110110927000181', status: '故障', error: '是'
},
{ name: '测试设备', code: 'EQ20240110111700000201', status: '运行', error: '否' } { name: '测试设备', code: 'EQ20240110111700000201', status: '运行', error: '否' }
]
const qualityMonthTableProps = [
{
prop: 'productionLineName',
label: '产线名'
},
{
prop: 'sectionName',
label: '工序'
},
{
prop: 'count',
label: '损耗片数'
},
{
prop: 'inspectionTypeName',
label: '缺陷类型'
},
] ]
const qualityMonthList = [ const qualityMonthList = [
{ {
@ -514,7 +177,7 @@ export default {
baseTable1, baseTable1,
// baseTable2, // baseTable2,
// baseTable3, // baseTable3,
TopRadioGroup, // TopRadioGroup,
doubleYChart, doubleYChart,
LinearBarChart LinearBarChart
// pieChart1, // pieChart1,
@ -530,11 +193,8 @@ export default {
orderList:[], orderList:[],
times: '', times: '',
EnergyMonitoringNameList: [], EnergyMonitoringNameList: [],
equipmentList:[], // equipmentList:[],
EnergyMonitoringList: [], EnergyMonitoringList: [],
// offsetWidth: null,
qualityYearTableProps,
cxNameList,
eqConfig: { eqConfig: {
header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'], header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'],
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
@ -557,7 +217,9 @@ export default {
// index:true, // index:true,
rowNum: 10 rowNum: 10
}, },
cxDataList, // cxDataList,
SJGws: undefined,
wsHeartbeat:undefined,
productLineList:[], productLineList:[],
qualityYearList, qualityYearList,
clientWidth: 0, clientWidth: 0,
@ -565,17 +227,10 @@ export default {
isFullScreen: false, isFullScreen: false,
// orderProcessList: [], // orderProcessList: [],
orderProcessList, orderProcessList,
qualityTableProps1,
qualityMonthList, qualityMonthList,
qualityMonthTableProps, // qualityMonthTableProps,
modelMonth: '', modelMonth: '',
qualityList1,
qualityTableProps2,
qualityList2,
dateType: '0', dateType: '0',
legendData1,
legendData2,
legendData3
} }
}, },
computed: { computed: {
@ -605,10 +260,7 @@ export default {
} }
}, },
created() { created() {
// this.fetchList('exception-alarm') this.getData()
// this.fetchList('inAndOutOfEachLine')
// this.fetchList('order-process')
// this.fetchList('line-chart-data')
this.init() this.init()
setTimeout(() => { setTimeout(() => {
window.location.reload() window.location.reload()
@ -646,24 +298,6 @@ export default {
this.beilv2 = _this.clientWidth / 1920 this.beilv2 = _this.clientWidth / 1920
})() })()
} }
// 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() { // beforeDestroy() {
// //离开页面删除检测器和所有侦听器 // //离开页面删除检测器和所有侦听器
@ -671,6 +305,22 @@ export default {
// removeEventListener('resize', resizeFun) // removeEventListener('resize', resizeFun)
// }, // },
methods: { methods: {
getData() {
let processArr = qualityMonthList.map((item, index) => [
// console.log(item)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
])
this.processConfig.data = processArr
this.$refs['processScrollBoard'].updateRows(processArr)
},
// getList() { // getList() {
// // this.$axios.get( // // this.$axios.get(
// // 'base/core-production-line/listAll', // // 'base/core-production-line/listAll',
@ -742,233 +392,226 @@ export default {
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}, },
initWebSocket() { initWebSocket() {
if (typeof (WebSocket) === 'undefined') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket') const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
} else { this.wsHeartbeat = new WebSocketHeartbeat(wsUrl);
let date = new Date().valueOf()
const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}` // 处理收到的消息
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG' this.wsHeartbeat.ws.onmessage = (event) => {
// const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111' console.log('收到消息:', event.data)
// 实例化 WebSocket this.wsData = event?.data ? JSON.parse(event?.data) : {}
this.websocket = new WebSocket(wsUrl) // console.log('22222', this.wsData.data)
// 监听 WebSocket 连接 if (this.wsData.type === 'EnergyMonitoring') {
this.websocket.onopen = this.websocketOnOpen let EnergyNameList = []
// 监听 WebSocket 错误信息 this.wsData.data.forEach((ele) => {
this.websocket.onerror = this.websocketOnError EnergyNameList.push(ele.lineName)
// 监听 WebSocket 消息 })
this.websocket.onmessage = this.websocketOnMessage this.EnergyMonitoringNameList = EnergyNameList
// 监听 webSocket 断开信息 let EnergyDataList = []
this.websocket.onclose = this.websocketClose this.wsData.data.forEach((ele) => {
} EnergyDataList.push(ele.useQuantity
)
})
this.EnergyMonitoringList = EnergyDataList
console.log(EnergyDataList)
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
}
};
// if (typeof (WebSocket) === 'undefined') {
// alert('您的浏览器不支持WebSocket')
// } else {
// const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
// // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
// // const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
// // 实例化 WebSocket
// this.websocket = new WebSocket(wsUrl)
// // 监听 WebSocket 连接
// this.websocket.onopen = this.websocketOnOpen
// // 监听 WebSocket 错误信息
// this.websocket.onerror = this.websocketOnError
// // 监听 WebSocket 消息
// this.websocket.onmessage = this.websocketOnMessage
// // 监听 webSocket 断开信息
// this.websocket.onclose = this.websocketClose
// }
}, },
SJGInitWebSocket() { SJGInitWebSocket() {
if (typeof (WebSocket) === 'undefined') { let date = new Date().valueOf()
alert('您的浏览器不支持WebSocket') const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
} else { this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
// const wsUrl = `ws://10.70.2.2:8080/websocket/message?userId=EN${date}`
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
let date = new Date().valueOf()
// console.log(date);
console.log(process.env);
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
this.SJGWebsocket = new WebSocket(SJGWsUrl)
// 监听 WebSocket 连接
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
// 监听 WebSocket 错误信息
this.SJGWebsocket.onerror = this.SJGWebsocketOnError
// 监听 WebSocket 消息
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
// 监听 webSocket 断开信息
this.SJGWebsocket.onclose = this.SJGWebsocketClose
}
},
SJGWebsocketOnOpen() {
console.log('socket连接成功')
// console.log(this.SJGWebsocket.onmessage);
this.SJGWebsocket.onmessage()
},
// 连接建立失败重连
SJGWebsocketOnError(e) {
// console.log('11111', e)
this.SJGInitWebSocket()
},
// 数据接收
SJGWebsocketOnMessage(e) {
// console.log(1111, e)
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
// console.log(this.wsData.detData);
// console.log('22222', this.wsData.data)
if (this.SJGWsData.type === 'order') {
this.orderList = this.SJGWsData.detData.map((ele, index) => {
if (ele.progressRate != 1) {
return {
id: ele.id,
name: ele.name,
progressRate: ele.progressRate.toFixed(3)
}
}
});
console.log(this.orderList)
} else if (this.SJGWsData.type === 'equipment') {
// this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
// // if (ele.progressRate != 1) {
// return {
// id: ele.id,
// name: ele.name,
// code: ele.code,
// status: ele.status,
// error: ele.error=== true ? '是' : '否'
// }
// // }
// });
let eqArr = this.SJGWsData.detData.map((item, index) => [
// console.log(item)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
])
this.eqConfig.data = eqArr
this.$refs['eqScrollBoard'].updateRows(eqArr)
// console.log(SJGWsData.orderList)
} else if (this.SJGWsData.type === 'productline') {
console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
// console.log(this.wsData.detData);
let nameList = []
let passRateList = []
let outputNumList = []
// console.log('2222222222', this.productLineList); // 处理收到的消息
// this.productLineList.forEach((item) => { this.SJGws.ws.onmessage = (event) => {
console.log('收到消息:', event.data)
this.SJGWsData = event?.data ? JSON.parse(event?.data) : {}
// console.log(this.wsData.detData);
// console.log('22222', this.wsData.data)
if (this.SJGWsData.type === 'order') {
this.orderList = this.SJGWsData.detData.map((ele, index) => {
if (ele.progressRate != 1) {
return {
id: ele.id,
name: ele.name,
progressRate: ele.progressRate.toFixed(3)
}
}
});
console.log(this.orderList)
} else if (this.SJGWsData.type === 'equipment') {
let eqArr = this.SJGWsData.detData.map((item, index) => [
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
])
this.eqConfig.data = eqArr
this.$refs['eqScrollBoard'].updateRows(eqArr)
// console.log(SJGWsData.orderList)
} else if (this.SJGWsData.type === 'productline') {
console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
let nameList = []
let passRateList = []
let outputNumList = []
this.SJGWsData.detData.forEach((ele) => { this.SJGWsData.detData.forEach((ele) => {
// if (item.id == ele.productionLineId) { // if (item.id == ele.productionLineId) {
// if (item.name.substr(0, 1) == "D") { // if (item.name.substr(0, 1) == "D") {
// console.log(ele) // console.log(ele)
nameList.push(ele.lineName) nameList.push(ele.lineName)
outputNumList.push(ele.outputNum) outputNumList.push(ele.outputNum)
passRateList.push(ele.passRate) passRateList.push(ele.passRate)
// } // }
// } // }
}) })
// }) this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
// progressRateList = EnergyNameList } else if (this.SJGInitWebSocket === 'inspection') {
// let EnergyDataList = [] }
// this.SJGWsData.detData.forEach((ele) => { };
// }) // if (typeof (WebSocket) === 'undefined') {
// this.SJGWsData.detData.forEach((ele) => { // alert('您的浏览器不支持WebSocket')
// }) // } else {
// console.log(this.EnergyMonitoringNameList) // let date = new Date().valueOf()
// console.log(this.EnergyMonitoringList) // // console.log(date);
// this.$nextTick(() => { // console.log(process.env);
this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList) // const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
} else if (this.SJGInitWebSocket === 'inspection') { // this.SJGWebsocket = new WebSocket(SJGWsUrl)
let processArr = qualityMonthList.map((item, index) => [ // // 监听 WebSocket 连接
// console.log(item) // this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''} // // 监听 WebSocket 错误信息
</span>`, // this.SJGWebsocket.onerror = this.SJGWebsocketOnError
// formatDate(item.planStartTime) || '', // // 监听 WebSocket 消息
` // this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''} // // 监听 webSocket 断开信息
</span>`, // this.SJGWebsocket.onclose = this.SJGWebsocketClose
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`, // }
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
])
this.processConfig.data = processArr
this.$refs['processScrollBoard'].updateRows(processArr)
}
}, },
// SJGWebsocketOnOpen() {
// console.log('socket连接成功')
// // console.log(this.SJGWebsocket.onmessage);
// this.SJGWebsocket.onmessage()
// },
// // 连接建立失败重连
// SJGWebsocketOnError(e) {
// // console.log('11111', e)
// this.SJGInitWebSocket()
// },
// 数据接收
// SJGWebsocketOnMessage(e) {
// console.log(1111, e)
// this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
// // console.log(this.wsData.detData);
// // console.log('22222', this.wsData.data)
// if (this.SJGWsData.type === 'order') {
// this.orderList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
// return {
// id: ele.id,
// name: ele.name,
// progressRate: ele.progressRate.toFixed(3)
// }
// }
// });
// console.log(this.orderList)
// } else if (this.SJGWsData.type === 'equipment') {
// let eqArr = this.SJGWsData.detData.map((item, index) => [
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
// ])
// this.eqConfig.data = eqArr
// this.$refs['eqScrollBoard'].updateRows(eqArr)
// // console.log(SJGWsData.orderList)
// } else if (this.SJGWsData.type === 'productline') {
// console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
// let nameList = []
// let passRateList = []
// let outputNumList = []
// this.SJGWsData.detData.forEach((ele) => {
// // if (item.id == ele.productionLineId) {
// // if (item.name.substr(0, 1) == "D") {
// // console.log(ele)
// nameList.push(ele.lineName)
// outputNumList.push(ele.outputNum)
// passRateList.push(ele.passRate)
// // }
// // }
// })
// this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
// } else if (this.SJGInitWebSocket === 'inspection') {
// }
// },
SJGWebsocketClose(e) {
this.SJGws.ws.onclose = (event) => { console.log(event); }
},
// // 连接建立之后执行send方法发送数据
// websocketOnOpen() {
// console.log('socket连接成功')
// this.websocket.onmessage()
// },
// 连接建立失败重连
// websocketOnError(e) {
// console.log('11111', e)
// this.initWebSocket()
// },
// 数据接收
// websocketOnMessage(e) {
// // console.log(1111, e)
// this.wsData = e?.data ? JSON.parse(e?.data) : {}
// // console.log('22222', this.wsData.data)
// if (this.wsData.type === 'EnergyMonitoring') {
// let EnergyNameList = []
// this.wsData.data.forEach((ele) => {
// EnergyNameList.push(ele.lineName)
// })
// this.EnergyMonitoringNameList = EnergyNameList
// let EnergyDataList = []
// this.wsData.data.forEach((ele) => {
// EnergyDataList.push(ele.useQuantity
// )
// })
// this.EnergyMonitoringList = EnergyDataList
// console.log(EnergyDataList)
// this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
// }
// },
// 数据发送 // 数据发送
// SJGWebsocketSend() { // websocketSend() {
// this.websocket.send('11111') // this.websocket.send('11111')
// }, // },
// // 关闭 // // 关闭
SJGWebsocketClose(e) {
console.log('WebSocket 断开连接', e)
},
// // 连接建立之后执行send方法发送数据
websocketOnOpen() {
console.log('socket连接成功')
this.websocket.onmessage()
},
// 连接建立失败重连
websocketOnError(e) {
console.log('11111', e)
this.initWebSocket()
},
// 数据接收
websocketOnMessage(e) {
// console.log(1111, e)
this.wsData = e?.data ? JSON.parse(e?.data) : {}
// console.log('22222', this.wsData.data)
if (this.wsData.type === 'EnergyMonitoring') {
let EnergyNameList = []
this.wsData.data.forEach((ele) => {
EnergyNameList.push(ele.lineName)
})
this.EnergyMonitoringNameList = EnergyNameList
let EnergyDataList = []
this.wsData.data.forEach((ele) => {
EnergyDataList.push(ele.useQuantity
// {
// type: 'bar',
// data: ele.useQuantity,
// barWidth: 6
// }
)
})
this.EnergyMonitoringList = EnergyDataList
console.log(EnergyDataList)
// console.log(this.EnergyMonitoringNameList)
// console.log(this.EnergyMonitoringList)
// this.$nextTick(() => {
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
// })
}
},
// 数据发送
websocketSend() {
this.websocket.send('11111')
},
// 关闭
websocketClose(e) { websocketClose(e) {
// console.log('WebSocket 断开连接', e) this.wsHeartbeat.ws.onclose = (event) => { console.log(event); }
}, },
windowWidth(value) { windowWidth(value) {
this.clientWidth = value this.clientWidth = value
this.beilv2 = this.clientWidth / 1920 this.beilv2 = this.clientWidth / 1920
}, },
// 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() { change() {
this.isFullScreen = screenfull.isFullscreen this.isFullScreen = screenfull.isFullscreen
}, },

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

@ -1,99 +0,0 @@
@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
View File

@ -1,173 +0,0 @@
// 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
View File

@ -1,31 +0,0 @@
/**
* 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
View File

@ -1,319 +0,0 @@
@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
View File

@ -1,66 +0,0 @@
@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
View File

@ -1,209 +0,0 @@
#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
View File

@ -1,48 +0,0 @@
// 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
View File

@ -1,35 +0,0 @@
// 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;
}

64
src/views/OperationalOverview/ws.js Normal file
View File

@ -0,0 +1,64 @@
/*
* @Author: zhp
* @Date: 2024-03-26 14:38:14
* @LastEditTime: 2024-03-26 15:45:20
* @LastEditors: zhp
* @Description:
*/
class WebSocketHeartbeat {
constructor(url) {
this.url = url;
this.ws = null;
this.heartBeatTimer = null;
this.isReconnecting = false;
this.initWebSocket();
}
initWebSocket() {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => {
console.log('WebSocket连接已打开');
this.startHeartBeat();
};
this.ws.onmessage = (event) => {
console.log('收到消息:', event.data);
// 在这里处理收到的消息，可以根据具体需求进行处理
};
this.ws.onclose = () => {
console.log('WebSocket连接已关闭');
this.stopHeartBeat();
if (!this.isReconnecting) {
this.reconnectWebSocket();
}
};
}
startHeartBeat() {
this.heartBeatTimer = setInterval(() => {
if (this.ws.readyState === WebSocket.OPEN) {
// this.ws.send('ping');
}
}, 5000);
}
stopHeartBeat() {
clearInterval(this.heartBeatTimer);
}
reconnectWebSocket() {
this.isReconnecting = true;
setTimeout(() => {
this.initWebSocket();
this.isReconnecting = false;
}, 3000);
}
closeWebSocket() {
this.ws.close();
}
}
export default WebSocketHeartbeat;

7
src/views/cost/energyCost/index.vue
View File

@ -12,6 +12,7 @@
:table-props="tableProps" :table-props="tableProps"
:page="listQuery.pageNo" :page="listQuery.pageNo"
:limit="listQuery.pageSize" :limit="listQuery.pageSize"
:max-height="tableH"
:table-data="tableData"></base-table> :table-data="tableData"></base-table>
<pagination <pagination
:limit.sync="listQuery.pageSize" :limit.sync="listQuery.pageSize"
@ -69,6 +70,7 @@ export default {
}, },
tableData: [], tableData: [],
tableProps, tableProps,
tableH: this.tableHeight(260),
drawerVisible: false, drawerVisible: false,
formConfig: [ formConfig: [
{ {
@ -109,6 +111,9 @@ export default {
}, },
components: {}, components: {},
created() { created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
getEnergyTypeListAll().then((response) => { getEnergyTypeListAll().then((response) => {
this.formConfig[0].selectOptions = response.data; this.formConfig[0].selectOptions = response.data;
}); });
@ -133,7 +138,7 @@ export default {
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10; this.listQuery.pageSize = 20;
this.listQuery.energyTypeId = val.energyTypeId; this.listQuery.energyTypeId = val.energyTypeId;
this.listQuery.searchTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.searchTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.startTime = val.searchTime this.listQuery.startTime = val.searchTime

7
src/views/cost/energyCostHis/index.vue
View File

@ -12,6 +12,7 @@
:table-props="tableProps" :table-props="tableProps"
:page="listQuery.pageNo" :page="listQuery.pageNo"
:limit="listQuery.pageSize" :limit="listQuery.pageSize"
:max-height="tableH"
:table-data="tableData"></base-table> :table-data="tableData"></base-table>
<pagination <pagination
:limit.sync="listQuery.pageSize" :limit.sync="listQuery.pageSize"
@ -79,6 +80,7 @@ export default {
}, },
tableData: [], tableData: [],
tableProps, tableProps,
tableH: this.tableHeight(260),
drawerVisible: false, drawerVisible: false,
formConfig: [ formConfig: [
{ {
@ -133,6 +135,9 @@ export default {
}, },
components: {}, components: {},
created() { created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
@ -150,7 +155,7 @@ export default {
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10; this.listQuery.pageSize = 20;
this.listQuery.reportType = val.reportType; this.listQuery.reportType = val.reportType;
this.listQuery.energyTypeId = val.energyTypeId; this.listQuery.energyTypeId = val.energyTypeId;
this.listQuery.reportTime = val.searchTime this.listQuery.reportTime = val.searchTime

4
src/views/cost/mixins/basic-page.js
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2022-08-24 11:19:43 * @Date: 2022-08-24 11:19:43
* @LastEditors: zwq * @LastEditors: zwq
* @LastEditTime: 2023-12-07 09:35:33 * @LastEditTime: 2024-03-25 14:11:46
* @Description: * @Description:
*/ */
export default { export default {
@ -17,7 +17,7 @@ export default {
}, },
tableData: [], tableData: [],
listQuery: { listQuery: {
pageSize: 10, pageSize: 20,
pageNo: 1, pageNo: 1,
total: 1, total: 1,
}, },

16
src/views/cost/rawMaterialConfig/index.vue
View File

@ -12,6 +12,7 @@
:table-props="tableProps" :table-props="tableProps"
:page="listQuery.pageNo" :page="listQuery.pageNo"
:limit="listQuery.pageSize" :limit="listQuery.pageSize"
:max-height="tableH"
:table-data="tableData"> :table-data="tableData">
<method-btn <method-btn
v-if="tableBtn.length" v-if="tableBtn.length"
@ -61,7 +62,7 @@ const tableProps = [
{ {
prop: 'code', prop: 'code',
label: '原料编码', label: '原料编码',
width: 190, width: 180,
}, },
{ {
prop: 'grade', prop: 'grade',
@ -79,10 +80,9 @@ const tableProps = [
align: 'right', align: 'right',
}, },
{ {
prop: 'enabledTime', prop: 'time',
label: '生效时间', label: '生效时间',
filter: parseTime, width: 235,
width: 150,
}, },
{ {
prop: 'remark', prop: 'remark',
@ -99,6 +99,7 @@ export default {
deleteURL: deleteCostMaterialSet, deleteURL: deleteCostMaterialSet,
}, },
tableProps, tableProps,
tableH: this.tableHeight(260),
tableBtn: [ tableBtn: [
this.$auth.hasPermi(`cost:rawMaterialConfig:update`) this.$auth.hasPermi(`cost:rawMaterialConfig:update`)
? { ? {
@ -147,6 +148,9 @@ export default {
AddOrUpdate, AddOrUpdate,
}, },
created() { created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
getHotMaterialList().then((response) => { getHotMaterialList().then((response) => {
this.formConfig[0].selectOptions = response.data; this.formConfig[0].selectOptions = response.data;
}); });
@ -156,14 +160,14 @@ export default {
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10; this.listQuery.pageSize = 20;
this.listQuery.materialId = val.name; this.listQuery.materialId = val.name;
this.getDataList(); this.getDataList();
break; break;
case 'reset': case 'reset':
this.$refs.searchBarForm.resetForm(); this.$refs.searchBarForm.resetForm();
this.listQuery = { this.listQuery = {
pageSize: 10, pageSize: 20,
pageNo: 1, pageNo: 1,
total: 1, total: 1,
}; };

7
src/views/cost/rawMaterialCost/index.vue
View File

@ -12,6 +12,7 @@
:table-props="tableProps" :table-props="tableProps"
:page="listQuery.pageNo" :page="listQuery.pageNo"
:limit="listQuery.pageSize" :limit="listQuery.pageSize"
:max-height="tableH"
:table-data="tableData"></base-table> :table-data="tableData"></base-table>
<pagination <pagination
:limit.sync="listQuery.pageSize" :limit.sync="listQuery.pageSize"
@ -74,6 +75,7 @@ export default {
}, },
tableData: [], tableData: [],
tableProps, tableProps,
tableH: this.tableHeight(260),
drawerVisible: false, drawerVisible: false,
formConfig: [ formConfig: [
{ {
@ -114,6 +116,9 @@ export default {
}, },
components: {}, components: {},
created() { created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
getHotMaterialList().then((response) => { getHotMaterialList().then((response) => {
this.formConfig[0].selectOptions = response.data; this.formConfig[0].selectOptions = response.data;
}); });
@ -138,7 +143,7 @@ export default {
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10; this.listQuery.pageSize = 20;
this.listQuery.materialId = val.materialId; this.listQuery.materialId = val.materialId;
this.listQuery.searchTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.searchTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.startTime = val.searchTime this.listQuery.startTime = val.searchTime

9
src/views/cost/rawMaterialCostHis/index.vue
View File

@ -12,6 +12,7 @@
:table-props="tableProps" :table-props="tableProps"
:page="listQuery.pageNo" :page="listQuery.pageNo"
:limit="listQuery.pageSize" :limit="listQuery.pageSize"
:max-height="tableH"
:table-data="tableData"></base-table> :table-data="tableData"></base-table>
<pagination <pagination
:limit.sync="listQuery.pageSize" :limit.sync="listQuery.pageSize"
@ -41,7 +42,7 @@ const tableProps = [
{ {
prop: 'reportName', prop: 'reportName',
label: '时间', label: '时间',
minWidth: 150, minWidth: 160,
}, },
{ {
prop: 'rawMaterialName', prop: 'rawMaterialName',
@ -78,6 +79,7 @@ export default {
}, },
tableData: [], tableData: [],
tableProps, tableProps,
tableH: this.tableHeight(260),
drawerVisible: false, drawerVisible: false,
formConfig: [ formConfig: [
{ {
@ -132,6 +134,9 @@ export default {
}, },
components: {}, components: {},
created() { created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
@ -149,7 +154,7 @@ export default {
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10; this.listQuery.pageSize = 20;
this.listQuery.reportType = val.reportType; this.listQuery.reportType = val.reportType;
this.listQuery.materialId = val.materialId; this.listQuery.materialId = val.materialId;
this.listQuery.times = val.searchTime this.listQuery.times = val.searchTime

10
src/views/extend/processEquMaterialBom/add-or-updata.vue
View File

@ -2,11 +2,11 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-18 14:16:25 * @Date: 2021-11-18 14:16:25
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-03-20 09:18:30 * @LastEditTime: 2024-03-22 17:11:55
* @Description: * @Description:
--> -->
<template> <template>
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="50%"> <el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="true" class="drawer" size="50%">
<small-title slot="title" :no-padding="true"> <small-title slot="title" :no-padding="true">
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }} {{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
</small-title> </small-title>
@ -75,7 +75,7 @@
:limit.sync="listQuery.pageSize" :page-sizes="[5, 10, 15]" @pagination="getList" /> :limit.sync="listQuery.pageSize" :page-sizes="[5, 10, 15]" @pagination="getList" />
</div> </div>
</div> </div>
<div class="drawer-body__footer"> <div v-if="!isdetail" class="drawer-body__footer">
<el-button style="" @click="goback()">取消</el-button> <el-button style="" @click="goback()">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</div> </div>
@ -198,7 +198,7 @@ export default {
} }
// 修改的提交 // 修改的提交
if (this.dataForm.id) { if (this.dataForm.id) {
this.urlOptions.updateURL(this.dataForm).then(response => { this.urlOptions.updateURL(this.dataForm).then(res => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess("修改成功");
this.visible = false; this.visible = false;
this.$emit("refreshDataList"); this.$emit("refreshDataList");
@ -206,7 +206,7 @@ export default {
return; return;
} }
// 添加的提交 // 添加的提交
this.urlOptions.createURL(this.dataForm).then(response => { this.urlOptions.createURL(this.dataForm).then(res => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.idAttrShow = true; this.idAttrShow = true;
this.dataForm.id = res.data this.dataForm.id = res.data

6
src/views/extend/processEquValueBom/add-or-updata.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-18 14:16:25 * @Date: 2021-11-18 14:16:25
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-03-22 09:01:30 * @LastEditTime: 2024-03-25 14:07:31
* @Description: * @Description:
--> -->
<template> <template>
@ -289,7 +289,7 @@ export default {
} }
// 修改的提交 // 修改的提交
if (this.dataForm.id) { if (this.dataForm.id) {
this.urlOptions.updateURL(this.dataForm).then(response => { this.urlOptions.updateURL(this.dataForm).then(res => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess("修改成功");
this.visible = false; this.visible = false;
this.$emit("refreshDataList"); this.$emit("refreshDataList");
@ -297,7 +297,7 @@ export default {
return; return;
} }
// 添加的提交 // 添加的提交
this.urlOptions.createURL(this.dataForm).then(response => { this.urlOptions.createURL(this.dataForm).then(res => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.idAttrShow = true; this.idAttrShow = true;
this.dataForm.id = res.data this.dataForm.id = res.data

4
src/views/extend/processEquValueBom/attr-add.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-11-08 15:30:27 * @Date: 2023-11-08 15:30:27
* @LastEditTime: 2023-12-04 15:19:33 * @LastEditTime: 2024-03-25 14:14:04
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -118,7 +118,7 @@ export default {
this.$refs['dataForm'].resetFields(); this.$refs['dataForm'].resetFields();
if (this.dataForm.id) { if (this.dataForm.id) {
getProcessEquValueBomDet({ getProcessEquValueBomDet({
id: this.dataForm.id id: this.dataForm.id,
}).then((res) => { }).then((res) => {
this.dataForm = res.data; this.dataForm = res.data;
const arr = [] const arr = []

26
src/views/extend/processEquValueBom/statusBtn.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-11-08 14:00:52 * @Date: 2023-11-08 14:00:52
* @LastEditTime: 2023-11-09 09:59:53 * @LastEditTime: 2024-03-25 14:09:33
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -25,24 +25,24 @@ export default {
}, },
data() { data() {
return { return {
state: false // state: false
}
},
computed: {
state() {
return this.injectData.enabled === 1 ? true : false
} }
}, },
// computed: {
// readonly() {
// return !!this.injectData.readonly
// }
// },
mounted() { mounted() {
this.mapToState() // this.mapToState()
}, },
methods: { methods: {
mapToState() { // mapToState() {
if (this.injectData.prop === 'enabled') { // if (this.injectData.prop === 'enabled') {
this.state = this.injectData.enabled === 1 ? true : false // this.state = this.injectData.enabled === 1 ? true : false
} // }
}, // },
changeHandler() { changeHandler() {
// let params = {} // let params = {}
let payload = {} let payload = {}

12
src/views/login.vue
View File

@ -297,16 +297,16 @@ export default {
this.handleLogin({}); this.handleLogin({});
}, },
getCookie() { getCookie() {
// const username = getUsername(); const username = getUsername();
// const password = getPassword(); const password = getPassword();
// const rememberMe = getRememberMe(); const rememberMe = getRememberMe()
const tenantName = getTenantName(); const tenantName = getTenantName();
this.loginForm = { this.loginForm = {
...this.loginForm, ...this.loginForm,
username: username ? username : this.loginForm.username, username: username ? username : this.loginForm.username,
password: password ? password : this.loginForm.password, password: password ? password : this.loginForm.password,
rememberMe: rememberMe ? getRememberMe() : false, rememberMe: rememberMe ? getRememberMe() : false,
tenantName: tenantName ? tenantName : this.loginForm.tenantName, tenantName: tenantName ? tenantName : this.loginForm.tenantName,
}; };
}, },
handleLogin(captchaParams) { handleLogin(captchaParams) {

10
src/views/quality/base/qualityHotMaterial/add-or-updata.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-08 13:46:17 * @Date: 2023-12-08 13:46:17
* @LastEditTime: 2024-03-21 10:40:52 * @LastEditTime: 2024-03-25 08:50:25
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -73,12 +73,12 @@
</el-form-item> </el-form-item>
</el-row> </el-row>
<el-row :gutter="24" v-for="(item,index) in ingredientList" :key="item.id"> <el-row :gutter="24" v-for="(item,index) in ingredientList" :key="item.id">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="成分"> <el-form-item label="成分">
{{ item.name }} {{ item.name }}
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item :prop="'checkValueList.' + index + '.checkValue'" label="成分含量" <el-form-item :prop="'checkValueList.' + index + '.checkValue'" label="成分含量"
:rules="[{ required: true, message: '成分含量不能为空', trigger: 'blur' }]"> :rules="[{ required: true, message: '成分含量不能为空', trigger: 'blur' }]">
<el-input oninput="value=value.replace(/[^\d]/g,'')" :disabled="isdetail" <el-input oninput="value=value.replace(/[^\d]/g,'')" :disabled="isdetail"
@ -92,12 +92,12 @@
</span> </span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="6">
<el-form-item :prop="'checkValueList.' + index + '.minValue'" label="最小值"> <el-form-item :prop="'checkValueList.' + index + '.minValue'" label="最小值">
<el-input disabled style="width: 90%;margin-right: 10px;" v-model="item.minValue"></el-input> <el-input disabled style="width: 90%;margin-right: 10px;" v-model="item.minValue"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="6">
<el-form-item :prop="'checkValueList.' + index + '.minValue'" label="最大值"> <el-form-item :prop="'checkValueList.' + index + '.minValue'" label="最大值">
<el-input disabled style="width: 90%;margin-right: 10px;" v-model="item.maxValue"></el-input> <el-input disabled style="width: 90%;margin-right: 10px;" v-model="item.maxValue"></el-input>
</el-form-item> </el-form-item>

2
src/views/quality/base/qualityInspectionType/index.vue
View File

@ -162,7 +162,7 @@ export default {
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 20,
name: null, name: null,
}, },
// 表单参数 // 表单参数

11
src/views/quality/base/qualityScrapLog/add-or-updata.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-11-06 15:15:30 * @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-03-20 09:38:10 * @LastEditTime: 2024-03-22 17:13:16
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -10,7 +10,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="工单号" prop="workOrderId"> <el-form-item label="工单号" prop="workOrderId">
<el-select v-model="dataForm.workOrderId" placeholder="请选择工单号"> <el-select filterable v-model="dataForm.workOrderId" placeholder="请选择工单号">
<el-option v-for="dict in workOrderList" :key="dict.id" :label="dict.name" :value="dict.id" /> <el-option v-for="dict in workOrderList" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -58,6 +58,13 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-col :span="8">
<el-form-item label="来源" prop="source">
<el-select v-model="dataForm.source" placeholder="请选择来源" multiple>
<el-option v-for="dict in sourceList" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" placeholder="备注" /> <el-input v-model="dataForm.remark" placeholder="备注" />

17
src/views/quality/monitoring/equipmentTraceability/index.vue
View File

@ -244,7 +244,7 @@ export default {
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
param: 'timerange', param: 'recordTime',
}, },
// { // {
// parent: 'dateFilterType', // parent: 'dateFilterType',
@ -270,6 +270,7 @@ export default {
btnName: '导出', btnName: '导出',
name: 'export', name: 'export',
color: 'warning', color: 'warning',
}, },
// { // {
// type: 'separate', // type: 'separate',
@ -381,7 +382,7 @@ export default {
}, },
/** 查询列表 */ /** 查询列表 */
async getList() { async getList() {
this.loading = true; this.loading = true
const { code, data } = await this.$axios({ const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/efficiency', url: '/analysis/equipment-analysis/efficiency',
method: 'get', method: 'get',
@ -402,14 +403,14 @@ export default {
if (btnName == 'search') { if (btnName == 'search') {
this.queryParams.workOrderId = payload.workOrderId || null; this.queryParams.workOrderId = payload.workOrderId || null;
// this.queryParams.lineId = payload.lineId || null; // this.queryParams.lineId = payload.lineId || null;
if (0 == payload.dateFilterType) { // if (0 == payload.dateFilterType) {
this.queryParams.recordTime = payload.timerange; this.queryParams.recordTime = payload.recordTime;
} else if (1 == payload.dateFilterType) { // } else if (1 == payload.dateFilterType) {
this.queryParams.recordTime = [ this.queryParams.recordTime = [
`${payload.timeday} 00:00:00`, payload.recordTime[0],
`${payload.timeday} 23:59:59`, payload.recordTime[1],
]; ];
} // }
} else { } else {
this.handleExport() this.handleExport()
this.queryParams.recordTime = null; this.queryParams.recordTime = null;

4
src/views/quality/monitoring/materielDateFrom/index.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2023-08-01 14:55:51 * @Date: 2023-08-01 14:55:51
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-03-21 15:14:04 * @LastEditTime: 2024-03-25 16:07:07
* @Description: * @Description:
--> -->
<template> <template>
@ -64,7 +64,7 @@ const tableProps = [
{ {
prop: 'source', prop: 'source',
label: '数据来源', label: '数据来源',
filter: (val) => val == 1 ? '内部' : '外部' filter: (val) => val == 1 ? '手动' : '自动'
}, },
{ {
prop: 'remark', prop: 'remark',

64
src/views/report/glass/day.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-01-24 15:15:24 * @Date: 2024-01-24 15:15:24
* @LastEditTime: 2024-03-22 10:14:23 * @LastEditTime: 2024-03-26 09:34:12
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -40,7 +40,7 @@ import inputTable from './inputTable.vue';
import { getCorePLList } from '@/api/base/coreProductionLine'; import { getCorePLList } from '@/api/base/coreProductionLine';
import moment from 'moment' import moment from 'moment'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
export default { export default {
components: { inputTable }, components: { inputTable },
data() { data() {
@ -66,7 +66,7 @@ export default {
}; };
}, },
created() { created() {
this.getDict() // this.getDict()
this.getTodayStartTimeAndEndTime() this.getTodayStartTimeAndEndTime()
this.getDataList() this.getDataList()
}, },
@ -104,6 +104,8 @@ export default {
}, },
async getDataList() { async getDataList() {
const res = await getCorePLList()
this.proLineList = res.data;
this.dataListLoading = true this.dataListLoading = true
if (this.listQuery.reportTime.length == 0) { if (this.listQuery.reportTime.length == 0) {
this.$message({ this.$message({
@ -135,9 +137,9 @@ export default {
// item.dailyOutputTrend = null // item.dailyOutputTrend = null
// } // }
item.dailyOutputTrend = item.dailyOutputTrend && item.dailyOutputTrend != 0 ? this.multipliedByHundred(item.dailyOutputTrend) + '%' : item.dailyOutputTrend == 0 ? 0 : null item.dailyOutputTrend = item.dailyOutputTrend && item.dailyOutputTrend != 0 ? this.multipliedByHundred(item.dailyOutputTrend) + '%' : item.dailyOutputTrend == 0 ? 0 : null
item.originalGlassStatisticsTrend = item.dailyOutputTrend && item.originalGlassStatisticsTrend != 0 ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : item.originalGlassStatisticsTrend == 0 ? 0 : null item.originalGlassStatisticsTrend = item.originalGlassStatisticsTrend && item.originalGlassStatisticsTrend != 0 ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : item.originalGlassStatisticsTrend == 0 ? 0 : null
item.actualProductTrend = item.dailyOutputTrend && item.actualProductTrend != 0 ? this.multipliedByHundred(item.actualProductTrend) + '%' : item.actualProductTrend == 0 ? 0 : null item.actualProductTrend = item.actualProductTrend && item.actualProductTrend != 0 ? this.multipliedByHundred(item.actualProductTrend) + '%' : item.actualProductTrend == 0 ? 0 : null
item.originalGlassPassTrend = item.dailyOutputTrend && item.originalGlassPassTrend != 0 ? this.multipliedByHundred(item.originalGlassPassTrend) + '%' : item.originalGlassPassTrend == 0 ? 0 : null item.originalGlassPassTrend = item.originalGlassPassTrend && item.originalGlassPassTrend != 0 ? this.multipliedByHundred(item.originalGlassPassTrend) + '%' : item.originalGlassPassTrend == 0 ? 0 : null
} }
}) })
}) })
@ -221,30 +223,34 @@ export default {
// 处理查询参数 // 处理查询参数
var xlsxParam = { raw: true }; var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */ /* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book( import('xlsx').then(excel => {
document.querySelector("#exportTable"), var wb = excel.utils.table_to_book(
xlsxParam document.querySelector("#exportTable"),
); xlsxParam
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩日原片生产汇总.xlsx"
); );
} catch (e) { /* 获取二进制字符串作为输出 */
if (typeof console !== "undefined") console.log(e, wbout); var wbout = excel.write(wb, {
} bookType: "xlsx",
return wbout; bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩日原片生产汇总.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
//do something......
})
}, },
}, },
}; };

61
src/views/report/glass/month.vue
View File

@ -30,7 +30,7 @@ import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
import inputTable from './inputTable.vue'; import inputTable from './inputTable.vue';
import { getCorePLList } from '@/api/base/coreProductionLine'; import { getCorePLList } from '@/api/base/coreProductionLine';
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
export default { export default {
components: { inputTable }, components: { inputTable },
data() { data() {
@ -57,7 +57,7 @@ export default {
}, },
created() { created() {
this.getCurrentMonthFirst() this.getCurrentMonthFirst()
this.getDict() // this.getDict()
this.getDataList() this.getDataList()
}, },
methods: { methods: {
@ -98,6 +98,8 @@ export default {
}, },
// 获取数据列表 // 获取数据列表
async getDataList() { async getDataList() {
const res = await getCorePLList()
this.proLineList = res.data;
this.dataListLoading = true; this.dataListLoading = true;
if (this.listQuery.reportTime.length == 0) { if (this.listQuery.reportTime.length == 0) {
this.$message({ this.$message({
@ -129,9 +131,9 @@ export default {
// item.dailyOutputTrend = null // item.dailyOutputTrend = null
// } // }
item.dailyOutputTrend = item.dailyOutputTrend && item.dailyOutputTrend != 0 ? this.multipliedByHundred(item.dailyOutputTrend) + '%' : item.dailyOutputTrend == 0 ? 0 : null item.dailyOutputTrend = item.dailyOutputTrend && item.dailyOutputTrend != 0 ? this.multipliedByHundred(item.dailyOutputTrend) + '%' : item.dailyOutputTrend == 0 ? 0 : null
item.originalGlassStatisticsTrend = item.dailyOutputTrend && item.originalGlassStatisticsTrend != 0 ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : item.originalGlassStatisticsTrend == 0 ? 0 : null item.originalGlassStatisticsTrend = item.originalGlassStatisticsTrend && item.originalGlassStatisticsTrend != 0 ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : item.originalGlassStatisticsTrend == 0 ? 0 : null
item.actualProductTrend = item.dailyOutputTrend && item.actualProductTrend != 0 ? this.multipliedByHundred(item.actualProductTrend) + '%' : item.actualProductTrend == 0 ? 0 : null item.actualProductTrend = item.actualProductTrend && item.actualProductTrend != 0 ? this.multipliedByHundred(item.actualProductTrend) + '%' : item.actualProductTrend == 0 ? 0 : null
item.originalGlassPassTrend = item.dailyOutputTrend && item.originalGlassPassTrend != 0 ? this.multipliedByHundred(item.originalGlassPassTrend) + '%' : item.originalGlassPassTrend == 0 ? 0 : null item.originalGlassPassTrend = item.originalGlassPassTrend && item.originalGlassPassTrend != 0 ? this.multipliedByHundred(item.originalGlassPassTrend) + '%' : item.originalGlassPassTrend == 0 ? 0 : null
} }
}) })
}) })
@ -223,30 +225,33 @@ export default {
// 处理查询参数 // 处理查询参数
var xlsxParam = { raw: true }; var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */ /* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book( import('xlsx').then(excel => {
document.querySelector("#exportTable"), var wb = excel.utils.table_to_book(
xlsxParam document.querySelector("#exportTable"),
); xlsxParam
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩月原片生产汇总.xlsx"
); );
} catch (e) { /* 获取二进制字符串作为输出 */
if (typeof console !== "undefined") console.log(e, wbout); var wbout = excel.write(wb, {
} bookType: "xlsx",
return wbout; bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩月原片生产汇总.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
//do something......
})
} }
}, },
}; };

77
src/views/report/glass/weekly.vue
View File

@ -32,7 +32,7 @@ import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
import inputTable from './inputTable.vue'; import inputTable from './inputTable.vue';
import { getCorePLList } from '@/api/base/coreProductionLine'; import { getCorePLList } from '@/api/base/coreProductionLine';
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
export default { export default {
components: { inputTable }, components: { inputTable },
data() { data() {
@ -86,23 +86,23 @@ export default {
}, },
], ],
}; };
}, },
created () {
// this.getDict()
},
mounted() { mounted() {
// const day = new Date().getDay() // const day = new Date().getDay()
// console.log('周四', day) // console.log('周四', day)
this.getCurrentWeekStartTimeAndEndTime() this.getCurrentWeekStartTimeAndEndTime()
// this.changeTime(new Date(new Date().getTime() - day * 24 * 60 * 60 * 1000)) // this.changeTime(new Date(new Date().getTime() - day * 24 * 60 * 60 * 1000))
this.getDict()
this.getDataList() this.getDataList()
}, },
methods: { methods: {
async getDict() { // async getDict() {
// 产线列表 // // 产线列表
await getCorePLList().then(res => {
this.proLineList = res.data;
// this.getDataList() // },
});
},
getCurrentWeekStartTimeAndEndTime() { getCurrentWeekStartTimeAndEndTime() {
this.reportTime = new Date() this.reportTime = new Date()
var weekday = new Array(7); var weekday = new Array(7);
@ -187,6 +187,8 @@ export default {
}, },
// 获取数据列表 // 获取数据列表
async getDataList() { async getDataList() {
const res = await getCorePLList()
this.proLineList = res.data;
this.dataListLoading = true; this.dataListLoading = true;
if (this.listQuery.reportTime.length == 0) { if (this.listQuery.reportTime.length == 0) {
this.$message({ this.$message({
@ -218,9 +220,9 @@ export default {
// item.dailyOutputTrend = null // item.dailyOutputTrend = null
// } // }
item.dailyOutputTrend = item.dailyOutputTrend && item.dailyOutputTrend != 0 ? this.multipliedByHundred(item.dailyOutputTrend) + '%' : item.dailyOutputTrend == 0 ? 0 : null item.dailyOutputTrend = item.dailyOutputTrend && item.dailyOutputTrend != 0 ? this.multipliedByHundred(item.dailyOutputTrend) + '%' : item.dailyOutputTrend == 0 ? 0 : null
item.originalGlassStatisticsTrend = item.dailyOutputTrend && item.originalGlassStatisticsTrend != 0 ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : item.originalGlassStatisticsTrend == 0 ? 0 : null item.originalGlassStatisticsTrend = item.originalGlassStatisticsTrend && item.originalGlassStatisticsTrend != 0 ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : item.originalGlassStatisticsTrend == 0 ? 0 : null
item.actualProductTrend = item.dailyOutputTrend && item.actualProductTrend != 0 ? this.multipliedByHundred(item.actualProductTrend) + '%' : item.actualProductTrend == 0 ? 0 : null item.actualProductTrend = item.actualProductTrend && item.actualProductTrend != 0 ? this.multipliedByHundred(item.actualProductTrend) + '%' : item.actualProductTrend == 0 ? 0 : null
item.originalGlassPassTrend = item.dailyOutputTrend && item.originalGlassPassTrend != 0 ? this.multipliedByHundred(item.originalGlassPassTrend) + '%' : item.originalGlassPassTrend == 0 ? 0 : null item.originalGlassPassTrend = item.originalGlassPassTrend && item.originalGlassPassTrend != 0 ? this.multipliedByHundred(item.originalGlassPassTrend) + '%' : item.originalGlassPassTrend == 0 ? 0 : null
} }
}) })
}) })
@ -286,30 +288,33 @@ export default {
// 处理查询参数 // 处理查询参数
var xlsxParam = { raw: true }; var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */ /* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book( import('xlsx').then(excel => {
document.querySelector("#exportTable"), var wb = excel.utils.table_to_book(
xlsxParam document.querySelector("#exportTable"),
); xlsxParam
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩周原片生产汇总.xlsx"
); );
} catch (e) { /* 获取二进制字符串作为输出 */
if (typeof console !== "undefined") console.log(e, wbout); var wbout = excel.write(wb, {
} bookType: "xlsx",
return wbout; bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩周原片生产汇总.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
//do something......
})
} }
}, },
}; };

61
src/views/report/glass/year.vue
View File

@ -27,7 +27,7 @@ import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
import inputTable from './inputTable.vue'; import inputTable from './inputTable.vue';
import { getCorePLList } from '@/api/base/coreProductionLine'; import { getCorePLList } from '@/api/base/coreProductionLine';
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
export default { export default {
components: { inputTable }, components: { inputTable },
data() { data() {
@ -53,7 +53,7 @@ export default {
}; };
}, },
created() { created() {
this.getDict() // this.getDict()
}, },
mounted () { mounted () {
this.getCurrentYearFirst() this.getCurrentYearFirst()
@ -98,6 +98,8 @@ export default {
}, },
// 获取数据列表 // 获取数据列表
async getDataList() { async getDataList() {
const res = await getCorePLList()
this.proLineList = res.data;
this.dataListLoading = true; this.dataListLoading = true;
if (this.listQuery.reportTime.length == 0) { if (this.listQuery.reportTime.length == 0) {
this.$message({ this.$message({
@ -129,9 +131,9 @@ export default {
// item.dailyOutputTrend = null // item.dailyOutputTrend = null
// } // }
item.dailyOutputTrend = item.dailyOutputTrend && item.dailyOutputTrend != 0 ? this.multipliedByHundred(item.dailyOutputTrend) + '%' : item.dailyOutputTrend == 0 ? 0 : null item.dailyOutputTrend = item.dailyOutputTrend && item.dailyOutputTrend != 0 ? this.multipliedByHundred(item.dailyOutputTrend) + '%' : item.dailyOutputTrend == 0 ? 0 : null
item.originalGlassStatisticsTrend = item.dailyOutputTrend && item.originalGlassStatisticsTrend != 0 ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : item.originalGlassStatisticsTrend == 0 ? 0 : null item.originalGlassStatisticsTrend = item.originalGlassStatisticsTrend && item.originalGlassStatisticsTrend != 0 ? this.multipliedByHundred(item.originalGlassStatisticsTrend) + '%' : item.originalGlassStatisticsTrend == 0 ? 0 : null
item.actualProductTrend = item.dailyOutputTrend && item.actualProductTrend != 0 ? this.multipliedByHundred(item.actualProductTrend) + '%' : item.actualProductTrend == 0 ? 0 : null item.actualProductTrend = item.actualProductTrend && item.actualProductTrend != 0 ? this.multipliedByHundred(item.actualProductTrend) + '%' : item.actualProductTrend == 0 ? 0 : null
item.originalGlassPassTrend = item.dailyOutputTrend && item.originalGlassPassTrend != 0 ? this.multipliedByHundred(item.originalGlassPassTrend) + '%' : item.originalGlassPassTrend == 0 ? 0 : null item.originalGlassPassTrend = item.originalGlassPassTrend && item.originalGlassPassTrend != 0 ? this.multipliedByHundred(item.originalGlassPassTrend) + '%' : item.originalGlassPassTrend == 0 ? 0 : null
} }
}) })
}) })
@ -195,30 +197,33 @@ export default {
// 处理查询参数 // 处理查询参数
var xlsxParam = { raw: true }; var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */ /* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book( import('xlsx').then(excel => {
document.querySelector("#exportTable"), var wb = excel.utils.table_to_book(
xlsxParam document.querySelector("#exportTable"),
); xlsxParam
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩年原片生产汇总.xlsx"
); );
} catch (e) { /* 获取二进制字符串作为输出 */
if (typeof console !== "undefined") console.log(e, wbout); var wbout = excel.write(wb, {
} bookType: "xlsx",
return wbout; bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩年原片生产汇总.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
//do something......
})
} }
}, },
}; };

53
src/views/report/productionDayReport/index.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:45:25 * @Date: 2023-12-12 13:45:25
* @LastEditTime: 2024-03-22 09:36:12 * @LastEditTime: 2024-03-26 09:41:07
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -177,7 +177,7 @@ import {
// import Editor from '@/components/Editor'; // import Editor from '@/components/Editor';
import moment from 'moment'; import moment from 'moment';
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
// import DialogForm from './dialogForm.vue'; // import DialogForm from './dialogForm.vue';
import { getCorePLList } from '@/api/base/coreProductionLine'; import { getCorePLList } from '@/api/base/coreProductionLine';
// import basicPageMixin from '@/mixins/lb/basicPageMixin'; // import basicPageMixin from '@/mixins/lb/basicPageMixin';
@ -492,30 +492,33 @@ export default {
// 处理查询参数 // 处理查询参数
var xlsxParam = { raw: true }; var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */ /* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book( import('xlsx').then(excel => {
document.querySelector("#exportTable"), var wb = excel.utils.table_to_book(
xlsxParam document.querySelector("#exportTable"),
); xlsxParam
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩日成品生产汇总.xlsx"
); );
} catch (e) { /* 获取二进制字符串作为输出 */
if (typeof console !== "undefined") console.log(e, wbout); var wbout = excel.write(wb, {
} bookType: "xlsx",
return wbout; bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩日成品生产汇总.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
//do something......
})
}, },
// timeSelect() { // timeSelect() {
// // switch (this.queryParams.timeDim) { // // switch (this.queryParams.timeDim) {

55
src/views/report/productionMonthReport/index.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:45:25 * @Date: 2023-12-12 13:45:25
* @LastEditTime: 2024-03-22 09:56:14 * @LastEditTime: 2024-03-26 09:41:33
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -128,7 +128,7 @@
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="goodProductPassTrend" label="增减" align="center"> <el-table-column prop="goodProductPassTrend" label="增减" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-if="!disabled" v-model="scope.row.goodProductPassTrend" :disabled="!disabled"> <el-input v-if="!disabled" v-model="scope.row.goodProductPassTrend" :disabled="!disabled">
</el-input> </el-input>
@ -180,7 +180,7 @@ import moment from 'moment';
import { parseTime } from '../../core/mixins/code-filter'; import { parseTime } from '../../core/mixins/code-filter';
import { getCorePLList } from '@/api/base/coreProductionLine' import { getCorePLList } from '@/api/base/coreProductionLine'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
// import basicPageMixin from '@/mixins/lb/basicPageMixin'; // import basicPageMixin from '@/mixins/lb/basicPageMixin';
const tableProps = [ const tableProps = [
{ {
@ -470,30 +470,33 @@ export default {
// 处理查询参数 // 处理查询参数
var xlsxParam = { raw: true }; var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */ /* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book( import('xlsx').then(excel => {
document.querySelector("#exportTable"), var wb = excel.utils.table_to_book(
xlsxParam document.querySelector("#exportTable"),
); xlsxParam
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩月成品生产汇总.xlsx"
); );
} catch (e) { /* 获取二进制字符串作为输出 */
if (typeof console !== "undefined") console.log(e, wbout); var wbout = excel.write(wb, {
} bookType: "xlsx",
return wbout; bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩月成品生产汇总.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
//do something......
})
}, },
getCurrentMonthFirst() { getCurrentMonthFirst() {
const date = new Date(); const date = new Date();

51
src/views/report/productionWeekReport/index.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:45:25 * @Date: 2023-12-12 13:45:25
* @LastEditTime: 2024-03-22 09:47:20 * @LastEditTime: 2024-03-26 09:41:51
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -488,30 +488,33 @@ export default {
// 处理查询参数 // 处理查询参数
var xlsxParam = { raw: true }; var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */ /* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book( import('xlsx').then(excel => {
document.querySelector("#exportTable"), var wb = excel.utils.table_to_book(
xlsxParam document.querySelector("#exportTable"),
); xlsxParam
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩周成品生产汇总.xlsx"
); );
} catch (e) { /* 获取二进制字符串作为输出 */
if (typeof console !== "undefined") console.log(e, wbout); var wbout = excel.write(wb, {
} bookType: "xlsx",
return wbout; bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩周成品生产汇总.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
//do something......
})
}, },
startWeek() { startWeek() {
// console.log(this.weekValue1); // console.log(this.weekValue1);

53
src/views/report/productionYearReport/index.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:45:25 * @Date: 2023-12-12 13:45:25
* @LastEditTime: 2024-03-22 09:47:09 * @LastEditTime: 2024-03-26 09:42:08
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -185,7 +185,7 @@ import moment from 'moment';
import { parseTime } from '../../core/mixins/code-filter'; import { parseTime } from '../../core/mixins/code-filter';
import { getCorePLList } from '@/api/base/coreProductionLine' import { getCorePLList } from '@/api/base/coreProductionLine'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import * as XLSX from 'xlsx' // import * as XLSX from 'xlsx'
const tableProps = [ const tableProps = [
{ {
// width: 128, // width: 128,
@ -422,30 +422,33 @@ export default {
// 处理查询参数 // 处理查询参数
var xlsxParam = { raw: true }; var xlsxParam = { raw: true };
/* 从表生成工作簿对象 */ /* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book( import('xlsx').then(excel => {
document.querySelector("#exportTable"), var wb = excel.utils.table_to_book(
xlsxParam document.querySelector("#exportTable"),
); xlsxParam
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩年成品生产汇总.xlsx"
); );
} catch (e) { /* 获取二进制字符串作为输出 */
if (typeof console !== "undefined") console.log(e, wbout); var wbout = excel.write(wb, {
} bookType: "xlsx",
return wbout; bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"许昌安彩年成品生产汇总.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
//do something......
})
}, },
// startYear() { // startYear() {
// if (this.yearValue2 && this.yearValue2 < this.yearValue1) { // if (this.yearValue2 && this.yearValue2 < this.yearValue1) {

8
src/views/socialLogin.vue
View File

@ -83,8 +83,8 @@ export default {
captchaEnable: true, captchaEnable: true,
loginForm: { loginForm: {
loginType: "uname", loginType: "uname",
username: "admin", username: "",
password: "admin123", password: "",
rememberMe: false, rememberMe: false,
captchaVerification: "", captchaVerification: "",
}, },
@ -144,8 +144,8 @@ export default {
const password = getPassword(); const password = getPassword();
const rememberMe = getRememberMe(); const rememberMe = getRememberMe();
this.loginForm = { this.loginForm = {
username: username ? username : this.loginForm.username, username: username ? username : this.loginForm.username,
password: password ? password : this.loginForm.password, password: password ? password : this.loginForm.password,
rememberMe: rememberMe ? getRememberMe() : false, rememberMe: rememberMe ? getRememberMe() : false,
loginType: this.loginForm.loginType, loginType: this.loginForm.loginType,
}; };