|
|
@@ -1,11 +1,162 @@
|
|
|
<template>
|
|
|
<!--这是印花模块的模块展示内容-->
|
|
|
- <div for="IN03" id="top" class="top topfac" @click="switchIndex"></div>
|
|
|
+ <div for="IN03" id="top" class="top top03" @click="switchIndex"></div>
|
|
|
<div class="bg2"></div>
|
|
|
+ <template v-if="showIndexData=='index'">
|
|
|
+ <div class="abs" style="left:50%;top:10%;width: 210px;margin-left:-105px;text-align: center;">
|
|
|
+ <div>请选择要查看的产线</div>
|
|
|
+ <div class="cx">
|
|
|
+ <span @click="switchCX(item.index)" :class="item.active?'btn active':'btn'" v-for="item in cxList" :style="{backgroundImage: item.active?`url(${btnFrontBg})`:''}">{{ item.name }}</span>
|
|
|
+ <div @click="switchCX(0)" :class="currentCXNo==0?'btn active':'btn'" :style="{width:'94%', backgroundImage: currentCXNo==0 ?`url(${btnFrontBg})`:''}">全部</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="abs title_row" style="left: 3%;top:6%;font-weight: normal;">
|
|
|
+ <div class="title_left_line"></div><span>产线状态</span><span style="color:#27e6ff">（今日）</span>
|
|
|
+ </div>
|
|
|
+ <div class="abs data_row" style="left: 3%;top:8%;font-weight: normal;">
|
|
|
+ <div style="margin-left: 10px;"><table>
|
|
|
+ <tbody>
|
|
|
+ <tr style="background-color:transparent">
|
|
|
+ <td style="border:0">
|
|
|
+ <div class="littleFont">产线<span style="color:#27e6ff">（开动）</span></div>
|
|
|
+ <div style="font-size: 32px;">{{ deviceStatData.status.openProd||'-' }}<span style="font-size: 12px;">条</span></div>
|
|
|
+ </td>
|
|
|
+ <td style="border:0;padding-left: 40px;">
|
|
|
+ <div class="littleFont">设备<span style="color:#27e6ff">（开机）</span></div>
|
|
|
+ <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.status.open||'-' }}<span style="font-size: 12px;"> 台</span></div>
|
|
|
+ </td>
|
|
|
+ <td style="border:0;padding-left: 40px;">
|
|
|
+ <div class="littleFont">设备<span style="color:#27e6ff">（总数）</span></div>
|
|
|
+ <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.status.total||'-' }}<span style="font-size: 12px;"> 台</span></div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table></div>
|
|
|
+ </div>
|
|
|
+ <div class="abs title_row" style="left: auto;top:6%;font-weight: normal;right: 14%;"><div class="title_left_line"></div><span>生产情况</span><span style="color:#27e6ff">（今日）</span></div>
|
|
|
+ <div class="abs data_row" style="left: auto;top:8%;font-weight: normal;right: 3%;">
|
|
|
+ <div style="margin-left: 10px;"><table>
|
|
|
+ <tbody>
|
|
|
+ <tr style="background-color:transparent">
|
|
|
+ <td style="border:0">
|
|
|
+ <div class="littleFont">白坯<span style="color:#27e6ff">（投放量）</span></div>
|
|
|
+ <div style="font-size: 32px;">{{ deviceStatData.status.baiPei||'-' }}<span style="font-size: 12px;">米</span></div>
|
|
|
+ </td>
|
|
|
+ <td style="border:0;padding-left: 40px;">
|
|
|
+ <div class="littleFont">产量<span style="color:#27e6ff">（米数）</span></div>
|
|
|
+ <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.status.length||'-' }}<span style="font-size: 12px;"> 米</span></div>
|
|
|
+ </td>
|
|
|
+ <td style="border:0;padding-left: 40px;">
|
|
|
+ <div class="littleFont">产量<span style="color:#27e6ff">（重量）</span></div>
|
|
|
+ <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.status.weight||'-' }}<span style="font-size: 12px;"> 吨</span></div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table></div>
|
|
|
+ </div>
|
|
|
+ <div class="abs bottompanel">
|
|
|
+ <div style="width: 15%;height:calc(184px*var(--hRate));display: flex;">
|
|
|
+ <div style="width: 70%;height: 100%;border-right: 1px solid #1a7c90;">
|
|
|
+ <div class="title_row" style="font-weight: normal;margin-top: 10px;"><span style="font-size: 48px;letter-spacing: 5px;margin-right: 20%;">{{currentCXNo==0?'全部':currentCXNo+'号'}}</span><span style="color:#fff;line-height: 48px;">产线</span></div>
|
|
|
+ <div style="padding-left: 5px;color: #27e6ff;margin-top: calc(52px*var(--hRate));width: 88%;">
|
|
|
+ <div style="color: #fff;"><span>开机数</span><span style="float: right;">总数</span></div>
|
|
|
+ <div style="font-size: 22px;margin-top: calc(16px*var(--hRate));"><span>{{ effInfo.open }}<span class="littleFont">台</span></span>
|
|
|
+ <span style="float: right;">{{ effInfo.total }}<span class="littleFont">台</span></span>
|
|
|
+ </div>
|
|
|
+ <div style="position: relative;margin-top: calc(16px*var(--hRate));">
|
|
|
+ <div class="abs fac_progress_value" :style="{width:(effInfo.open/effInfo.total*100)+'%'}"></div>
|
|
|
+ <div class="abs fac_progress" style="background-color: #5f686e;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 30%;height: 100%;margin-left: 4%;">
|
|
|
+ <div style="color: #fff;"><span>单位能耗</span></div>
|
|
|
+ <div style="font-size: 22px;margin-top: calc(16px*var(--hRate));;color: red;">
|
|
|
+ <span>{{ effInfo.energy }}<span class="littleFont">元/米</span></span>
|
|
|
+ </div>
|
|
|
+ <div style="color: #fff;margin-top: calc(26px*var(--hRate));"><span>开机率</span></div>
|
|
|
+ <div style="font-size: 22px;margin-top: calc(16px*var(--hRate));color:#27e6ff ;">
|
|
|
+ <span>{{ effInfo.ratio }}<span class="littleFont">%</span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div :style="{width: '26%',marginLeft:'1%',marginRight: isFullScreen?'2%':'0'}">
|
|
|
+ <div class="title_row" style="font-weight: normal;line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div><span>生产效率</span><span style="color:#27e6ff">（今日）</span></div>
|
|
|
+ <div class="data_row scxl_block">
|
|
|
+ <div :style="{padding: '10px',width: isFullScreen?'96%':'89%'}"><table cellspacing="0" style="width: 100%;font-size: 14px;text-align: center;">
|
|
|
+ <thead>
|
|
|
+ <tr style="font-weight:normal;color: #1fc1d7;background-color: #2dbcd436;">
|
|
|
+ <td style="border:0">班组</td>
|
|
|
+ <td style="border:0">生产时间(H)</td>
|
|
|
+ <td style="border:0">已织造数(米)</td>
|
|
|
+ <td style="border:0">总重量(吨)</td>
|
|
|
+ <td style="border:0">稼动率(%)</td>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr style="font-weight:normal;background-color:transparent;color: #ffffff;font-size: 14px;">
|
|
|
+ <td style="border:0">A班</td>
|
|
|
+ <td style="border:0">{{ effInfo.timeA ||'-' }}</td>
|
|
|
+ <td style="border:0">{{ effInfo.lengthA ||'-' }}</td>
|
|
|
+ <td style="border:0">{{ effInfo.weightA ||'-' }}</td>
|
|
|
+ <td style="border:0">{{ (effInfo.effA*100).toFixed(0) ||'-' }}%</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="font-weight:normal;background-color:transparent;color: #ffffff;background-color: #2dbcd436;font-size: 14px;">
|
|
|
+ <td style="border:0">B班</td>
|
|
|
+ <td style="border:0">{{ effInfo.timeB ||'-' }}</td>
|
|
|
+ <td style="border:0">{{ effInfo.lengthB ||'-' }}</td>
|
|
|
+ <td style="border:0">{{ effInfo.weightB ||'-' }}</td>
|
|
|
+ <td style="border:0">{{ (effInfo.effB*100).toFixed(0) ||'-' }}%</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <div style="width: 100%;display: flex;margin-top: calc(42px*var(--hRate));font-size: 14px;justify-content: center;text-align: center;" >
|
|
|
+ <div style="width: 50%;">
|
|
|
+ <div style="color: #fff;"><span>米数</span></div>
|
|
|
+ <div style="font-size: 22px;color:#27e6ff">
|
|
|
+ <span>{{ effInfo.length }}<span class="littleFont">米</span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 50%;">
|
|
|
+ <div style="color: #fff;"><span>重量</span></div>
|
|
|
+ <div style="font-size: 22px;color:#27e6ff">
|
|
|
+ <span>{{ effInfo.weight }}<span class="littleFont">吨</span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 26%;margin-right: 2%;">
|
|
|
+ <div class="title_row" style="line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div>
|
|
|
+ <span>生产趋势</span><span style="color:#27e6ff">（30天）</span>
|
|
|
+ <span style="margin-left: auto !important;">
|
|
|
+ <span :class="buttonCode1=='Length'?'fac_btn active':'fac_btn'" @click="LoadSCLine('Length')">米数</span>
|
|
|
+ <span :class="buttonCode1=='Weight'?'fac_btn active':'fac_btn'" @click="LoadSCLine('Weight')">重量</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div :class="isFullScreen?'data_row sc_qushi_block_full':'data_row sc_qushi_block'" ref="echarts_sc_qushi"></div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 26%;">
|
|
|
+ <div class="title_row" style="line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div>
|
|
|
+ <span>能耗趋势</span><span style="color:#27e6ff">（30天）</span>
|
|
|
+ <span style="margin-left: auto !important;">
|
|
|
+ <span :class="buttonCode2=='price'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('price')">折算</span>
|
|
|
+ <span :class="buttonCode2=='electricity'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('electricity')">电</span>
|
|
|
+ <span :class="buttonCode2=='steam'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('steam')">气</span>
|
|
|
+ <span :class="buttonCode2=='water'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('water')">水</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div :class="isFullScreen?'data_row used_qushi_block_full':'data_row used_qushi_block'" ref="echarts_used_qushi"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { ref ,watch,onUnmounted} from 'vue';
|
|
|
+import { ref ,watch,onUnmounted,onMounted} from 'vue';
|
|
|
import {useRouter} from 'vue-router';
|
|
|
+import api from "@/api/system";
|
|
|
+import * as echarts from 'echarts';
|
|
|
export default {
|
|
|
props:{
|
|
|
clickEvent:{
|
|
|
@@ -27,8 +178,38 @@ export default {
|
|
|
const router = useRouter();
|
|
|
let lines={};
|
|
|
let oldLineState={};
|
|
|
+ let deviceStatData=ref({'status':{},'eff':[]});
|
|
|
+ const effInfo = ref({});
|
|
|
+ const dataTypeUnit={
|
|
|
+ 'Length':'米',
|
|
|
+ 'Weight':'吨',
|
|
|
+ 'price':'元/米',
|
|
|
+ 'electricity':'kwh',
|
|
|
+ 'steam':'GJ',
|
|
|
+ 'water':'m³',
|
|
|
+ };
|
|
|
let updateLineStateTimer = null;
|
|
|
const showIndexData=ref('');
|
|
|
+ const currentCXNo = ref(0);
|
|
|
+ const buttonCode1=ref('');
|
|
|
+ const buttonCode2 = ref('');
|
|
|
+ const echarts_sc_qushi = ref(null);
|
|
|
+ const echarts_used_qushi = ref(null);
|
|
|
+ let echartsEleIns_1=null;
|
|
|
+ let echartsEleIns_0=null;
|
|
|
+ const isFullScreen = ref(false); //是否全屏模式
|
|
|
+ let getDataTimer = null;
|
|
|
+ const cxList=ref([
|
|
|
+ {"name":1,active:false,index:1},
|
|
|
+ {"name":2,active:false,index:2},
|
|
|
+ {"name":3,active:false,index:3},
|
|
|
+ {"name":4,active:false,index:4},
|
|
|
+ {"name":5,active:false,index:5},
|
|
|
+ {"name":6,active:false,index:6},
|
|
|
+ {"name":7,active:false,index:7},
|
|
|
+ {"name":8,active:false,index:8},
|
|
|
+ ])
|
|
|
+ const btnFrontBg = require('@/assets/image/nav_btn_front.png');
|
|
|
watch(() => props.clickEvent, newVal=> {
|
|
|
if(newVal==null){
|
|
|
return;
|
|
|
@@ -38,7 +219,11 @@ export default {
|
|
|
watch(() => props.in03ModelLoadState, newVal=> {
|
|
|
if(newVal){
|
|
|
console.log('印花模型加载状态：',newVal)
|
|
|
- init();
|
|
|
+ clearTimeout(getDataTimer);
|
|
|
+ setTimeout(() => {
|
|
|
+ DataFull.GetData();
|
|
|
+ init();
|
|
|
+ }, 1000);
|
|
|
}
|
|
|
},{deep:true,immediate:true})
|
|
|
watch(() => props.userTimeout, newVal=> {
|
|
|
@@ -52,11 +237,41 @@ export default {
|
|
|
showIndexData.value = newVal;
|
|
|
},{deep:true,immediate:true})
|
|
|
|
|
|
+ let DataFull={
|
|
|
+ GetData:function(){
|
|
|
+ getDataTimer = setTimeout(function () {
|
|
|
+ //每1分钟主动查询一次数据
|
|
|
+ DataFull.GetData();
|
|
|
+ }, 60*1000);
|
|
|
+ api.Get03Data().then((res)=>{
|
|
|
+ if(window.CurrentTargetType!='IN03') return;
|
|
|
+ if (res == null || player.Native==null) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(res.code!=200){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ deviceStatData.value = res.data;
|
|
|
+ effInfo.value = res.data.eff[currentCXNo.value]; //产线信息
|
|
|
+ LoadSCLine('Length');
|
|
|
+ LoadUsedLine('price');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
async function init(){
|
|
|
if(player==null || player.Native==null) return;
|
|
|
- player.Native.Camera.moveTo([-82.44752782107487, -169.5681236210533, 197.8407699405502],
|
|
|
- [-83.9162839208987, 127.59715392660286, -64.11893924293801],
|
|
|
- [-0.00326832109282338, 0.66126128414494, 0.7501485400693781], 1);
|
|
|
+ if(BODY_H_RATE>0.9){
|
|
|
+ //全屏模式下的视角
|
|
|
+ player.Native.Camera.moveTo([-91.64839019242504, -186.23753805841608, 166.78946395819892],
|
|
|
+ [-90.82528929434541, 136.7362546068112, -54.52457853422797],
|
|
|
+ [0.0014405644117746175, 0.5652582237894268, 0.8249127621831281], 1);
|
|
|
+ }else{
|
|
|
+ //非全屏模式下的视角
|
|
|
+ player.Native.Camera.moveTo([-90.4534875451608, -201.60779996809177, 156.1529830648182],
|
|
|
+ [-89.63620356422999, 119.08351214395233, -52.22443982968761],
|
|
|
+ [0.001388561848385436, 0.544853112866498, 0.838530355619688], 1);
|
|
|
+ }
|
|
|
// 使用异步函数
|
|
|
(async () => {
|
|
|
setTimeout(function() {
|
|
|
@@ -74,6 +289,7 @@ export default {
|
|
|
}
|
|
|
if(rootObj==null){
|
|
|
console.log('未找到该模型的根节点')
|
|
|
+ window.location.reload();
|
|
|
return;
|
|
|
}
|
|
|
var items = await player.Native.ModelTree.getSubItems(rootObj.item)
|
|
|
@@ -160,7 +376,288 @@ export default {
|
|
|
router.push('/main');
|
|
|
}
|
|
|
}
|
|
|
+ function switchCX(ind){
|
|
|
+ currentCXNo.value = ind;
|
|
|
+ let tmp=cxList.value;
|
|
|
+ for (let index = 0; index < tmp.length; index++) {
|
|
|
+ const element = tmp[index];
|
|
|
+ if(element.index==ind) tmp[index].active = true;
|
|
|
+ else tmp[index].active = false;
|
|
|
+ }
|
|
|
+ cxList.value = tmp;
|
|
|
+ effInfo.value = deviceStatData.value.eff[ind]; //产线信息
|
|
|
+ LoadSCLine(buttonCode1.value);
|
|
|
+ LoadUsedLine(buttonCode2.value);
|
|
|
+ }
|
|
|
+ function LoadSCLine(dataType) {
|
|
|
+ buttonCode1.value = dataType;
|
|
|
+ let data = deviceStatData.value.prodTrade;
|
|
|
+ //生产趋势
|
|
|
+ //获取数据中weight、aweight、bweight
|
|
|
+ var t = echarts_sc_qushi.value;
|
|
|
+ var dataLine = [];
|
|
|
+ var times = [];
|
|
|
+ var v_series = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var tv = data[i]['date'];
|
|
|
+ times.push([tv,data[i].tips]);
|
|
|
+ let line = data[i].line[currentCXNo.value];
|
|
|
+ if(dataType=='Length'){
|
|
|
+ dataLine.push({value:line['length'],type:'Length'});
|
|
|
+ }else{
|
|
|
+ dataLine.push({value:line['weight'],type:'Weight'});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (dataLine.length == 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ v_series.push({
|
|
|
+ name: currentCXNo.value==0?"全部产线":currentCXNo.value+'号产线', type: 'line', //symbol: 'none',
|
|
|
+ data: dataLine, itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#1EFFFF', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: '#1EFFFF' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barWidth: "8",
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [3, 3, 0, 0,],
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#fbc16b'}, // 0% 处的颜色
|
|
|
+ {offset: 1, color: '#fbc16b70'} // 100% 处的颜色
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ });
|
|
|
+ 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',
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ color: '#556677',
|
|
|
+ borderColor: 'rgba(0,0,0,0)',
|
|
|
+ shadowColor: 'rgba(0,0,0,0)',
|
|
|
+ shadowOffsetY: 0
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ textStyle: {
|
|
|
+ color: '#5c6c7c'
|
|
|
+ },
|
|
|
+ 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 times = [];
|
|
|
+ var v_series = [];
|
|
|
+ var week_aefficiency = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ times.push([data[i]['date'],data[i].tips]);
|
|
|
+ let line = data[i].line[currentCXNo.value];
|
|
|
+ if(line[dataType]!=null) week_aefficiency.push({value:line[dataType],type:dataType});
|
|
|
+ }
|
|
|
+ if (week_aefficiency.length> 0) {
|
|
|
+ v_series.push({
|
|
|
+ name: currentCXNo.value==0?"全部产线":currentCXNo.value+'号产线', type: 'line', //symbol: 'none',
|
|
|
+ data: week_aefficiency,
|
|
|
+ symbol: 'circle', // 使用圆作为折点标记
|
|
|
+ symbolSize: 6,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#fbc16b', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fbc16b' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ var opt = {
|
|
|
+ title: {
|
|
|
+ show: false, //不显示标题
|
|
|
+ text: '',
|
|
|
+ textStyle: {
|
|
|
+ color: "rgb(89, 151, 229)",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "30px"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ 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(()=>{
|
|
|
+ if(BODY_H_RATE>0.9) isFullScreen.value=true;
|
|
|
+ else isFullScreen.value=false;
|
|
|
+ })
|
|
|
onUnmounted(()=>{
|
|
|
+ clearTimeout(getDataTimer);
|
|
|
clearTimeout(updateLineStateTimer);
|
|
|
if(player!=null && player.Native!=null && window.IN03Markers!=null){
|
|
|
window.IN03Markers.forEach(async ele=>{
|
|
|
@@ -170,7 +667,21 @@ export default {
|
|
|
window.IN03Markers=null;
|
|
|
})
|
|
|
return{
|
|
|
- switchIndex
|
|
|
+ switchIndex,
|
|
|
+ echarts_sc_qushi,
|
|
|
+ echarts_used_qushi,
|
|
|
+ showIndexData,
|
|
|
+ deviceStatData,
|
|
|
+ effInfo,
|
|
|
+ btnFrontBg,
|
|
|
+ cxList,
|
|
|
+ currentCXNo,
|
|
|
+ switchCX,
|
|
|
+ buttonCode1,
|
|
|
+ buttonCode2,
|
|
|
+ isFullScreen,
|
|
|
+ LoadUsedLine,
|
|
|
+ LoadSCLine,
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -178,14 +689,15 @@ export default {
|
|
|
<style scope="IN03">
|
|
|
.bg2{
|
|
|
z-index: 1; pointer-events: none;position: absolute;
|
|
|
- top: calc(90px * var(--hRate));
|
|
|
+ top: calc(22px * var(--hRate));
|
|
|
left: 0;
|
|
|
width: 1877.54px;
|
|
|
- height: 89%;
|
|
|
+ height: 96%;
|
|
|
margin-left: 19px;
|
|
|
border: 2px solid #17666e;
|
|
|
border-top: 0px;
|
|
|
- /*background:url('../../assets/image/000.png');
|
|
|
+
|
|
|
+ /*
|
|
|
|
|
|
background:url('../../assets/image/000.png');
|
|
|
-webkit-mask-image:radial-gradient(circle, transparent 26%, #95afc5 54%);
|
|
|
@@ -204,4 +716,62 @@ export default {
|
|
|
background-size: 20px 20px;
|
|
|
*/
|
|
|
}
|
|
|
+.bottompanel{
|
|
|
+ display: flex;
|
|
|
+ left: 3% !important;
|
|
|
+ top: calc(728px * var(--hRate)) !important;
|
|
|
+ width: 96%;
|
|
|
+ height: calc(360px * var(--hRate));
|
|
|
+}
|
|
|
+
|
|
|
+.cx{
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ height: 110px;
|
|
|
+ color: #27e6ff;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.cx .btn{
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid #008899;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ margin: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+}
|
|
|
+
|
|
|
+.cx .btn:hover,.cx .btn.active{
|
|
|
+ color: #ffffff;
|
|
|
+ border-color: #0cd7f0 !important;
|
|
|
+}
|
|
|
+.scxl_block{
|
|
|
+ font-weight: normal;
|
|
|
+ background-image: url('../../assets/image/t03_sc_bg.png');
|
|
|
+ height: calc(250px*var(--hRate));
|
|
|
+ width: auto;
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ font-weight: normal !important;
|
|
|
+}
|
|
|
+.used_qushi_block,.sc_qushi_block{
|
|
|
+ height: calc(250px*var(--hRate));
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #008899;
|
|
|
+ background: rgb(0 85 102 / 40%);
|
|
|
+}
|
|
|
+
|
|
|
+.used_qushi_block_full,.sc_qushi_block_full{
|
|
|
+ height: calc(230px*var(--hRate));
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #008899;
|
|
|
+ background: rgb(0 85 102 / 40%);
|
|
|
+}
|
|
|
</style>
|
