Browse Source

2024-06-06

master
zelian_wu 2 years ago
parent
commit
301886490c
  1. 1
      src/api/cdc/collect.js
  2. 5
      src/views/modules/cdc/collectHistory.vue
  3. 5
      src/views/modules/cdc/collectRecord.vue
  4. 284
      src/views/modules/cdc/collectScreen.vue
  5. 12
      src/views/modules/cdc/device.vue

1
src/api/cdc/collect.js

@ -16,5 +16,6 @@ export const removeCollectDetail = (data)=>createAPI(`/collect/detail/remove`,'p
export const editCollectDetail = (data)=>createAPI(`/collect/detail/edit`,'post',data)
export const selectCollectRecordList = (data)=>createAPI(`/collect/record/list`,'post',data)
export const selectCollectRecordByItemList = (data)=>createAPI(`/collect/record/list/item`,'post',data)
export const selectCollectHistoryList = (data)=>createAPI(`/collect/history/list`,'post',data)
export const selectCollectHistoryDetailList = (data)=>createAPI(`/collect/history/detail/list`,'post',data)

5
src/views/modules/cdc/collectHistory.vue

@ -221,7 +221,10 @@ export default {
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" >
<el-option label="全部" value=""/>
<el-option label="涂布机器" value="涂布机器"/>
<el-option label="涂布机器-大线" value="涂布机器-大线"/>
<el-option label="涂布机器-小线" value="涂布机器-小线"/>
<el-option label="涂布机器-浓度-大线" value="涂布机器-浓度-大线"/>
<el-option label="涂布机器-浓度-小线" value="涂布机器-浓度-小线"/>
<el-option label="配胶间设备" value="配胶间设备"/>
</el-select>
</el-form-item>

5
src/views/modules/cdc/collectRecord.vue

@ -181,7 +181,10 @@ export default {
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" >
<el-option label="全部" value=""/>
<el-option label="涂布机器" value="涂布机器"/>
<el-option label="涂布机器-大线" value="涂布机器-大线"/>
<el-option label="涂布机器-小线" value="涂布机器-小线"/>
<el-option label="涂布机器-浓度-大线" value="涂布机器-浓度-大线"/>
<el-option label="涂布机器-浓度-小线" value="涂布机器-浓度-小线"/>
<el-option label="配胶间设备" value="配胶间设备"/>
</el-select>
</el-form-item>

284
src/views/modules/cdc/collectScreen.vue

@ -18,101 +18,38 @@
<div class="pie">
<div class="pie_left">
<div class="pie_content" >
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">静电/xxxx</span>
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">静电/Static Electricity</span>
</div>
<div class="pie_chart" style="text-align: center;">
<div>
<div v-for="item in line1">
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
<div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
</div>
</div>
<div class="pie_content pie_footer">
<div>上限/Upper - 1.28</div>
<div>下限/Lower - 1.20</div>
<div>上限/Upper <span v-if="line1.length !== 0">{{line1[0].maxValue}}</span><span v-else>0</span></div>
<div>下限/Lower <span v-if="line1.length !== 0">{{line1[0].minValue}}</span><span v-else>0</span></div>
</div>
</div>
<div class="pie_right">
<div class="pie_content">
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">浓度/xxxx</span>
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">浓度/Gas Concentration</span>
</div>
<div class="pie_chart" style="text-align: center;">
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div v-for="item in lineGC1">
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
<div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
</div>
</div>
<div class="pie_content pie_footer">
<div>上限/Upper - 75</div>
<div>下限/Lower - 60</div>
<div>上限/Upper <span v-if="lineGC1.length !== 0">{{lineGC1[0].maxValue}}</span><span v-else>0</span></div>
<div>下限/Lower <span v-if="lineGC1.length !== 0">{{lineGC1[0].minValue}}</span><span v-else>0</span></div>
</div>
</div>
</div>
@ -122,101 +59,38 @@
<div class="pie">
<div class="pie_left">
<div class="pie_content">
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">静电/xxxx</span>
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">静电/Static Electricity</span>
</div>
<div class="pie_chart" style="text-align: center;">
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div v-for="item in line2">
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
<div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
</div>
</div>
<div class="pie_content pie_footer">
<div>上限/Upper - 1.28</div>
<div>下限/Lower - 1.20</div>
<div>上限/Upper <span v-if="line2.length !== 0">{{line2[0].maxValue}}</span><span v-else>0</span></div>
<div>下限/Lower <span v-if="line2.length !== 0">{{line2[0].minValue}}</span><span v-else>0</span></div>
</div>
</div>
<div class="pie_right">
<div class="pie_content">
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">浓度/xxxx</span>
<span style="padding: 5px 10px;border-bottom: 1px solid #ccc;">浓度/Gas Concentration</span>
</div>
<div class="pie_chart" style="text-align: center;">
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div v-for="item in lineGC2">
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
</div>
<div>
<div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
</div>
<div style="border-radius: 50%;border: 1px solid #ccc;width: 80px;height: 80px;line-height: 80px">12222</div>
<div :style="`border-radius: 50%;border: 1px solid ${item.warnFlag === 'Y'?'red':'#ccc'};width: 80px;height: 80px;line-height: 80px`">{{item.itemValue}}</div>
</div>
</div>
<div class="pie_content pie_footer">
<div>上限/Upper - 75</div>
<div>下限/Lower - 60</div>
<div>上限/Upper <span v-if="lineGC2.length !== 0">{{lineGC2[0].maxValue}}</span><span v-else>0</span></div>
<div>下限/Lower <span v-if="lineGC2.length !== 0">{{lineGC2[0].minValue}}</span><span v-else>0</span></div>
</div>
</div>
</div>
@ -233,23 +107,18 @@
<script>
import dayjs from "dayjs";
import {selectCollectRecordByItemList} from "../../../api/cdc/collect";
export default {
name: 'collectScreen',
data(){
return{
newTime:new Date(),
}
},
methods:{
dateFormat(){
return dayjs().format("YYYY-MM-DD HH:mm:ss")
},
initCharts(){
let myChart = this.$echarts.init(document.getElementById('main'));
let option = {
dataList:[],
option : {
title: {
text: '浓度/xxxx',
text: '浓度/Gas Concentration',
left: 'center'
},
color: ['#2f82d7'],
@ -268,10 +137,10 @@ export default {
data : [
{
yAxis : 16,
name : '下限/Lower - 16'
name : '下限/Lower 16'
}, {
yAxis : 20,
name : '上限/Upper - 20'
name : '上限/Upper 20'
}
],
label : {
@ -284,15 +153,92 @@ export default {
}
}
],
};
option && myChart.setOption(option);
}
}
},
computed:{
line1:{
get(){
return this.dataList.filter(item=>item.deviceType === '涂布机器-大线')
}
},
line2:{
get(){
return this.dataList.filter(item=>item.deviceType === '涂布机器-小线')
}
},
lineGC1:{
get(){
return this.dataList.filter(item=>item.deviceType === '涂布机器-浓度-大线')
}
},
lineGC2:{
get(){
return this.dataList.filter(item=>item.deviceType === '涂布机器-浓度-小线')
}
},
line3:{
get(){
return this.dataList.filter(item=>item.deviceType === '配胶间设备')
},
},
},
methods:{
getDataList(){
let params = {
}
selectCollectRecordByItemList(params).then(({data})=>{
if (data && data.code === 0){
if (this.dataList.length !== 0){
this.dataList = data.rows;
this.initCharts();
return
}
this.dataList = data.rows;
}
}).catch((error)=>{
this.$message.error(error)
})
},
dateFormat(){
return dayjs().format("YYYY-MM-DD HH:mm:ss")
},
initCharts(){
let myChart = this.$echarts.init(document.getElementById('main'));
this.option && myChart.setOption(this.option);
}
},
watch:{
line3:{
deep: true,
handler(val){
this.option.series[0].data = val.map(item=>item.itemValue)
if (val.length !== 0){
this.option.series[0].markLine.data = [
{
yAxis : val[0].minValue,
name : `下限/Lower ${val[0].minValue}`
}, {
yAxis : val[0].maxValue,
name : `上限/Lower ${val[0].maxValue}`
}
]
}
this.option.xAxis = val.map(item=>item.deviceDesc)
this.initCharts()
}
}
},
created() {
this.getDataList();
},
mounted() {
this.initCharts();
this.timer = setInterval(()=>{
this.newTime = new Date()
})
this.initCharts();
},
beforeDestroy() {
if (this.timer){

12
src/views/modules/cdc/device.vue

@ -219,7 +219,7 @@ export default {
deviceNo: '',
site: null,
deviceDesc: null,
deviceType: '涂布机器',
deviceType: '',
addressDesc: null,
deviceIp: null,
deviceAddress: null,
@ -340,7 +340,10 @@ export default {
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" >
<el-option label="全部" value=""/>
<el-option label="涂布机器" value="涂布机器"/>
<el-option label="涂布机器-大线" value="涂布机器-大线"/>
<el-option label="涂布机器-小线" value="涂布机器-小线"/>
<el-option label="涂布机器-浓度-大线" value="涂布机器-浓度-大线"/>
<el-option label="涂布机器-浓度-小线" value="涂布机器-浓度-小线"/>
<el-option label="配胶间设备" value="配胶间设备"/>
</el-select>
</el-form-item>
@ -390,7 +393,10 @@ export default {
<el-col :span="6">
<el-form-item label="设备类型" prop="deviceType" :show-message="false">
<el-select v-model="form.deviceType" placeholder="请选择设备类型">
<el-option label="涂布机器" value="涂布机器"/>
<el-option label="涂布机器-大线" value="涂布机器-大线"/>
<el-option label="涂布机器-小线" value="涂布机器-小线"/>
<el-option label="涂布机器-浓度-大线" value="涂布机器-浓度-大线"/>
<el-option label="涂布机器-浓度-小线" value="涂布机器-浓度-小线"/>
<el-option label="配胶间设备" value="配胶间设备"/>
</el-select>
</el-form-item>

Loading…
Cancel
Save