|
|
@@ -0,0 +1,463 @@
|
|
|
+<template>
|
|
|
+ <div class="content" style="height: 450px;background-color: #0238445e;">
|
|
|
+ <div class="leftpanel">
|
|
|
+ <span v-for="item in btns" :class="item.active?'btn active':'btn'" @click="switchBtn(item.code)">{{ item.text }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="rightpanel">
|
|
|
+ <el-table v-show="btnCode=='001'" v-loading="loading" :data="effdata">
|
|
|
+ <el-table-column label="产线" align="center" prop="line" />
|
|
|
+ <el-table-column label="开机数(台)" align="center" prop="open"></el-table-column>
|
|
|
+ <el-table-column label="总数" align="center" prop="total" />
|
|
|
+ <el-table-column label="开机率" align="center" prop="ratio">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ scope.row.ratio }} %</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="生产时间(H)" align="center">
|
|
|
+ <el-table-column label="A班" align="center" prop="timeA" />
|
|
|
+ <el-table-column label="B班" align="center" prop="timeB" />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="已织造数(米)" align="center">
|
|
|
+ <el-table-column label="A班" align="center" prop="lengthA" />
|
|
|
+ <el-table-column label="B班" align="center" prop="lengthB" />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="总重量(T)" align="center">
|
|
|
+ <el-table-column label="A班" align="center" prop="weightA" />
|
|
|
+ <el-table-column label="B班" align="center" prop="weightB" />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="稼动率(%)" align="center">
|
|
|
+ <el-table-column label="A班" align="center" prop="effA" />
|
|
|
+ <el-table-column label="B班" align="center" prop="effB" />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div v-show="btnCode=='002'" style="width: 98%;height: 93%;padding: 1%;">
|
|
|
+ <div style="height: 35px;width: 100%;">
|
|
|
+ <span style="margin-left: auto !important;">
|
|
|
+ <span :class="buttonCode1=='Length'?'btn active':'btn'" @click="LoadSCLine('Length')">米数</span>
|
|
|
+ <span :class="buttonCode1=='Weight'?'btn active':'btn'" @click="LoadSCLine('Weight')">重量</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div ref="echarts_sc_qushi" style="width: 100%;height: 90%;"></div>
|
|
|
+ </div>
|
|
|
+ <div v-show="btnCode=='003'" style="width: 98%;height: 93%;padding: 1%;">
|
|
|
+ <div style="height: 35px;width: 100%;">
|
|
|
+ <span style="margin-left: auto !important;">
|
|
|
+ <span :class="buttonCode2=='price'?'btn active':'btn'" @click="LoadUsedLine('price')">折算</span>
|
|
|
+ <span :class="buttonCode2=='electricity'?'btn active':'btn'" @click="LoadUsedLine('electricity')">电</span>
|
|
|
+ <span :class="buttonCode2=='steam'?'btn active':'btn'" @click="LoadUsedLine('steam')">气</span>
|
|
|
+ <span :class="buttonCode2=='water'?'btn active':'btn'" @click="LoadUsedLine('water')">水</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div ref="echarts_used_qushi" style="width: 100%;height: 90%;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { ref ,watch,onUnmounted,onMounted} from 'vue';
|
|
|
+import api from "@/api/system";
|
|
|
+import * as echarts from 'echarts';
|
|
|
+export default {
|
|
|
+ props:{
|
|
|
+
|
|
|
+ },
|
|
|
+ setup(props,{emit}) {
|
|
|
+ const loading = ref(true);
|
|
|
+ const btns=ref([{"text":"生产效率",active:true,code:'001'},{"text":"生产趋势",active:false,code:'002'},{"text":"能耗趋势",active:false,code:'003'}]);
|
|
|
+ const deviceStatData = ref({});
|
|
|
+ const effdata = ref([]);
|
|
|
+ const btnCode= ref('001');
|
|
|
+ const buttonCode1=ref('Length');
|
|
|
+ const buttonCode2 = ref('price');
|
|
|
+ const echarts_sc_qushi = ref(null);
|
|
|
+ const echarts_used_qushi = ref(null);
|
|
|
+ let echartsEleIns_1=null;
|
|
|
+ let echartsEleIns_0=null;
|
|
|
+ const dataTypeUnit={
|
|
|
+ 'Length':'米',
|
|
|
+ 'Weight':'吨',
|
|
|
+ 'price':'元/米',
|
|
|
+ 'electricity':'kwh',
|
|
|
+ 'steam':'GJ',
|
|
|
+ 'water':'m³',
|
|
|
+ };
|
|
|
+ let DataFull={
|
|
|
+ GetData:function(){
|
|
|
+ api.Get03Data().then((res)=>{
|
|
|
+ loading.value = false;
|
|
|
+ //if(window.CurrentTargetType!='IN03') return;
|
|
|
+
|
|
|
+ if (res == null) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(res.code!=200){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ deviceStatData.value = res.data;
|
|
|
+ effdata.value = res.data.eff.splice(1,9);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function switchBtn(code){
|
|
|
+ btnCode.value = code;
|
|
|
+ let tmp = btns.value;
|
|
|
+ for (let index = 0; index < tmp.length; index++) {
|
|
|
+ const element = tmp[index];
|
|
|
+ element.active = element.code==code?true:false;
|
|
|
+ }
|
|
|
+ btns.value = tmp;
|
|
|
+ setTimeout(() => {
|
|
|
+ if(code=='002'){
|
|
|
+ LoadSCLine('Length');
|
|
|
+ }else if(code=='003'){
|
|
|
+ LoadUsedLine('price');
|
|
|
+ }
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+ function LoadSCLine(dataType) {
|
|
|
+ buttonCode1.value = dataType;
|
|
|
+ let data = deviceStatData.value.prodTrade;
|
|
|
+ //生产趋势
|
|
|
+ //获取数据中weight、aweight、bweight
|
|
|
+ var t = echarts_sc_qushi.value;
|
|
|
+ var dataLine = [[],[],[],[],[],[],[],[]];
|
|
|
+ var lineColors = ['#1EFFFF','#cccccc','#ffffff','#fbc16b','#fc4850','#68f1f6','#c856fc','#feb54a'];
|
|
|
+ var times = [];
|
|
|
+ var v_series = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var tv = data[i]['date'];
|
|
|
+ times.push([tv,data[i].tips]);
|
|
|
+ if(dataType=='Length'){
|
|
|
+ for (let index = 0; index < 8; index++) {
|
|
|
+ dataLine[index].push({value:data[i].line[index+1]['length'],type:'Length'});
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ for (let index = 0; index < 8; index++) {
|
|
|
+ dataLine[index].push({value:data[i].line[index+1]['weight'],type:'Weight'});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (times.length == 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ for (let index = 0; index < dataLine.length; index++) {
|
|
|
+ v_series.push({
|
|
|
+ name: (index+1)+'号', type: 'line', //symbol: 'none',
|
|
|
+ data: dataLine[index],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: lineColors[index], // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: lineColors[index] // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ var opt = {
|
|
|
+ title: {
|
|
|
+ show: false, //不显示标题
|
|
|
+ text: '',
|
|
|
+ textStyle: {
|
|
|
+ color: "rgb(89, 151, 229)",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "30px"
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true, //不显示图例
|
|
|
+ inactiveColor: "#04417A",
|
|
|
+ data: "",
|
|
|
+ icon:"circle",
|
|
|
+ textStyle: {color: "#fff"},
|
|
|
+ top: "5",
|
|
|
+ left: "10px",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor:'#034b59d6',
|
|
|
+ textStyle: {
|
|
|
+ color: '#cccccc'
|
|
|
+ },
|
|
|
+ padding: [10, 10],
|
|
|
+ extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
|
|
|
+ formatter: function (params) {
|
|
|
+ let xv='';
|
|
|
+ let result = '';
|
|
|
+ params.forEach(function (item) {
|
|
|
+ xv=`${item.name}`;
|
|
|
+ xv = xv.split(',')[1]+'<br>';
|
|
|
+ result += ` ${item.marker} ${item.seriesName}: ${item.value}（`+dataTypeUnit[item.data.type]+`）<br/>`;
|
|
|
+ });
|
|
|
+ return xv+result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '0',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: true,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 45,
|
|
|
+ color: "#26e2fb",
|
|
|
+ formatter:function(v){
|
|
|
+ return v.split(',')[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ data: times
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#26e2fb"
|
|
|
+ },
|
|
|
+ axisLine:{
|
|
|
+ show:true
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#26e2fb"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7DA7CD",
|
|
|
+ type: "dashed",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: v_series
|
|
|
+ };
|
|
|
+ if(echartsEleIns_1!=null){
|
|
|
+ echartsEleIns_1.dispose();
|
|
|
+
|
|
|
+ }
|
|
|
+ echartsEleIns_1 = echarts.init(t);
|
|
|
+ echartsEleIns_1.setOption(opt);
|
|
|
+ }
|
|
|
+ function LoadUsedLine(dataType){
|
|
|
+ buttonCode2.value = dataType;
|
|
|
+ let data = deviceStatData.value.energyTrade;
|
|
|
+ //能耗趋势
|
|
|
+ var t = echarts_used_qushi.value;
|
|
|
+ var dataLine = [[],[],[],[],[],[],[],[]];
|
|
|
+ var lineColors = ['#1EFFFF','#cccccc','#ffffff','#fbc16b','#fc4850','#68f1f6','#c856fc','#feb54a'];
|
|
|
+ var times = [];
|
|
|
+ var v_series = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ times.push([data[i]['date'],data[i].tips]);
|
|
|
+ for (let index = 0; index < 8; index++) {
|
|
|
+ dataLine[index].push({value:data[i].line[index+1][dataType],type:dataType});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (times.length == 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ for (let index = 0; index < dataLine.length; index++) {
|
|
|
+ v_series.push({
|
|
|
+ name: (index+1)+'号', type: 'line', //symbol: 'none',
|
|
|
+ data: dataLine[index],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: lineColors[index], // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: lineColors[index] // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ var opt = {
|
|
|
+ title: {
|
|
|
+ show: false, //不显示标题
|
|
|
+ text: '',
|
|
|
+ textStyle: {
|
|
|
+ color: "rgb(89, 151, 229)",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "30px"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor:'#034b59d6',
|
|
|
+ textStyle: {
|
|
|
+ color: '#cccccc'
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ let xv='';
|
|
|
+ let result = '';
|
|
|
+ params.forEach(function (item) {
|
|
|
+ xv=`${item.name}`;
|
|
|
+ xv = xv.split(',')[1]+'<br>';
|
|
|
+ result += ` ${item.marker} ${item.seriesName}: ${item.value}（`+dataTypeUnit[item.data.type]+`）<br/>`;
|
|
|
+ });
|
|
|
+ return xv+result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true, //不显示图例
|
|
|
+ inactiveColor: "#04417A",
|
|
|
+ data: "",
|
|
|
+ textStyle: {color: "#fff"},
|
|
|
+ top: "5",
|
|
|
+ left:"10px",
|
|
|
+ icon:"circle",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '0',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 45,
|
|
|
+ color: "#26e2fb",
|
|
|
+ formatter:function(v){
|
|
|
+ return v.split(',')[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine:{
|
|
|
+ show:true
|
|
|
+ },
|
|
|
+ axisTick:{
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ data: times
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#26e2fb"
|
|
|
+ },
|
|
|
+ axisLine:{
|
|
|
+ show:true
|
|
|
+ },
|
|
|
+ axisTick:{
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#26e2fb"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7DA7CD",
|
|
|
+ type: "dashed",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: v_series
|
|
|
+ };
|
|
|
+ if(echartsEleIns_0!=null){
|
|
|
+ echartsEleIns_0.dispose();
|
|
|
+ }
|
|
|
+ echartsEleIns_0 = echarts.init(t);
|
|
|
+ echartsEleIns_0.setOption(opt);
|
|
|
+ }
|
|
|
+ onMounted(()=>{
|
|
|
+ DataFull.GetData();
|
|
|
+ })
|
|
|
+ return{
|
|
|
+ deviceStatData,
|
|
|
+ effdata,
|
|
|
+ btns,
|
|
|
+ loading,
|
|
|
+ btnCode,
|
|
|
+ buttonCode1,
|
|
|
+ buttonCode2,
|
|
|
+ echarts_sc_qushi,
|
|
|
+ echarts_used_qushi,
|
|
|
+ switchBtn,
|
|
|
+ LoadSCLine,
|
|
|
+ LoadUsedLine,
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+/* 更改表头背景颜色 */
|
|
|
+.el-table__header,.el-table thead.is-group th.el-table__cell {
|
|
|
+ background-color: #085e6b;
|
|
|
+ color: #1fc3db;
|
|
|
+}
|
|
|
+
|
|
|
+/* 更改表格行鼠标悬停时的背景颜色 */
|
|
|
+.el-table .el-table__body tr:hover>td {
|
|
|
+ background-color: #085e6b !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .el-table__body tr:nth-child(odd) td {
|
|
|
+ background-color: #054f5c; /* 奇数行背景色 */
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .el-table__body tr:nth-child(even) td {
|
|
|
+ background-color: #085e6b; /* 偶数行背景色 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 更改单元格字体颜色 */
|
|
|
+.el-table__cell {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.el-table--border:before,
|
|
|
+.el-table__inner-wrapper:before,
|
|
|
+.el-table--border:after,
|
|
|
+.el-table--border .el-table__inner-wrapper:after,
|
|
|
+.el-table__border-bottom-patch,
|
|
|
+.el-table__border-left-patch{
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+.el-table--border th.el-table__cell{
|
|
|
+ border-bottom:1px;
|
|
|
+}
|
|
|
+.el-table--border .el-table__cell
|
|
|
+{
|
|
|
+ border-right:0px;
|
|
|
+}
|
|
|
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
|
|
+ border-bottom:0px;
|
|
|
+}
|
|
|
+.content .leftpanel{
|
|
|
+ width: 7%;
|
|
|
+ float: left;
|
|
|
+ height: 88%;
|
|
|
+ padding-left: 1%;
|
|
|
+ margin-top: 1%;
|
|
|
+}
|
|
|
+.content .rightpanel{
|
|
|
+ width: 90%;
|
|
|
+ float: left;
|
|
|
+ height: 390px;
|
|
|
+ margin-top: 1%;
|
|
|
+ border: 1px solid #018191;
|
|
|
+ background-color: #034b59d6;
|
|
|
+}
|
|
|
+.content .btn{
|
|
|
+ width: 86px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #085e6b;
|
|
|
+ color: #26e2fb;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.content .btn.active,.content .btn:hover{
|
|
|
+ background-color: #008899;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
