wilson
/
ccl_plm-vue
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2024-06-06

master
zelian_wu 2 years ago
parent
ee539d52ca
commit
301886490c
5 changed files with 133 additions and 174 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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 editCollectDetail = (data)=>createAPI(`/collect/detail/edit`,'post',data)
export const selectCollectRecordList = (data)=>createAPI(`/collect/record/list`,'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 selectCollectHistoryList = (data)=>createAPI(`/collect/history/list`,'post',data)
export const selectCollectHistoryDetailList = (data)=>createAPI(`/collect/history/detail/list`,'post',data) export const selectCollectHistoryDetailList = (data)=>createAPI(`/collect/history/detail/list`,'post',data)

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

@ -221,7 +221,10 @@ export default {
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" > <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-option label="配胶间设备" value="配胶间设备"/> <el-option label="配胶间设备" value="配胶间设备"/>
</el-select> </el-select>
</el-form-item> </el-form-item>

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

@ -181,7 +181,10 @@ export default {
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" > <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-option label="配胶间设备" value="配胶间设备"/> <el-option label="配胶间设备" value="配胶间设备"/>
</el-select> </el-select>
</el-form-item> </el-form-item>

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

@ -18,101 +18,38 @@
<div class="pie"> <div class="pie">
<div class="pie_left"> <div class="pie_left">
<div class="pie_content" > <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>
<div class="pie_chart" style="text-align: center;"> <div class="pie_chart" style="text-align: center;">
<div>
<div v-for="item in line1">
<div style="margin-bottom: 20px"> <div style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div>
</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> </div>
<div class="pie_content pie_footer"> <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> </div>
<div class="pie_right"> <div class="pie_right">
<div class="pie_content"> <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>
<div class="pie_chart" style="text-align: center;"> <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 style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div>
</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> </div>
<div class="pie_content pie_footer"> <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> </div>
</div> </div>
@ -122,101 +59,38 @@
<div class="pie"> <div class="pie">
<div class="pie_left"> <div class="pie_left">
<div class="pie_content"> <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>
<div class="pie_chart" style="text-align: center;"> <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 style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div>
</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> </div>
<div class="pie_content pie_footer"> <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> </div>
<div class="pie_right"> <div class="pie_right">
<div class="pie_content"> <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>
<div class="pie_chart" style="text-align: center;"> <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 style="margin-bottom: 20px">
<div>一放</div>
<div>xxxx</div>
<div>{{ item.deviceDesc.split(';')[0] }}</div>
<div>{{ item.deviceDesc.split(';')[1] }}</div>
</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> </div>
<div class="pie_content pie_footer"> <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> </div>
</div> </div>
@ -233,23 +107,18 @@
<script> <script>
import dayjs from "dayjs"; import dayjs from "dayjs";
import {selectCollectRecordByItemList} from "../../../api/cdc/collect";
export default { export default {
name: 'collectScreen', name: 'collectScreen',
data(){ data(){
return{ return{
newTime:new Date(), 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: { title: {
text: '浓度/xxxx',
text: '浓度/Gas Concentration',
left: 'center' left: 'center'
}, },
color: ['#2f82d7'], color: ['#2f82d7'],
@ -268,10 +137,10 @@ export default {
data : [ data : [
{ {
yAxis : 16, yAxis : 16,
name : '下限/Lower - 16'
name : '下限/Lower 16'
}, { }, {
yAxis : 20, yAxis : 20,
name : '上限/Upper - 20'
name : '上限/Upper 20'
} }
], ],
label : { 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() { mounted() {
this.initCharts();
this.timer = setInterval(()=>{ this.timer = setInterval(()=>{
this.newTime = new Date() this.newTime = new Date()
}) })
this.initCharts();
}, },
beforeDestroy() { beforeDestroy() {
if (this.timer){ if (this.timer){

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

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

Write Preview
Loading…
Cancel
Save