|
@@ -2,9 +2,116 @@
|
|
|
<!--这是全厂模块的模块展示内容-->
|
|
|
<div for="FAC" id="top" class="top topfac">
|
|
|
<div title="返回主视图"
|
|
|
- style="cursor: pointer;position: absolute;right: 10px;top: 25px;height: 38px;width: 38px;text-align: center;"
|
|
|
+ style="cursor: pointer;position: absolute;right: 40px;top: 25px;height: 38px;width: 38px;text-align: center;"
|
|
|
@click="backMasterViewByFac"><img src="../../assets/image/view.png"></div>
|
|
|
</div>
|
|
|
+ <div class="bg1"></div>
|
|
|
+ <div class="abs leftPanel">
|
|
|
+ <div class="title_row"><div class="title_left_line"></div><span>平均值</span><span style="color:#27e6ff">(本月)</span></div>
|
|
|
+ <div class="data_row"><img src="../../assets/image/icon_00.png">
|
|
|
+ <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;font-weight: bold;">{{ deviceStatData.avgMonth.costTotal }}<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;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">{{ deviceStatData.avgMonth.costJb }}<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;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">{{ deviceStatData.avgMonth.costRz }}<span style="font-size: 12px;"> 元/米</span></div>
|
|
|
+ </td>
|
|
|
+ <td style="border-bottom: 0;border-right: 1px solid #146c86;padding-left: 20px;"> </td>
|
|
|
+ <td style="border:0;padding-left: 40px;">
|
|
|
+ <div class="littleFont">经编<span style="color:#27e6ff">(产出)</span></div>
|
|
|
+ <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.yieldJb }}<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;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.jdl }}<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;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.yieldRz }}<span style="font-size: 12px;"> 米/日</span></div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table></div>
|
|
|
+ </div>
|
|
|
+ <div class="title_row" style="margin-top: 3%;"><div class="title_left_line"></div><span>经编</span><span style="color:#27e6ff">(生产情况)</span></div>
|
|
|
+ <div class="data_row" style="width: 300px;display: block;margin-top:0;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div ref="echarts1" class="fac_pie"></div>
|
|
|
+ <div ref="echarts2" class="fac_pie"></div>
|
|
|
+ </div>
|
|
|
+ <div style="padding-left: 25px;color: #27e6ff;width: 100%;">
|
|
|
+ <div class="littleFont">产量(今日)</div>
|
|
|
+ <div style="font-size: 22px;font-weight: bold;">{{ deviceStatData.currYield.jb.yield }}<span class="littleFont">米</span></div>
|
|
|
+ <div style="position: relative;margin-top: 5px;">
|
|
|
+ <div class="abs fac_progress_value" :style="{width:(deviceStatData.currYield.jb.yield/deviceStatData.currYield.jb.yieldMax*100)+'%',backgroundColor: '#008899'}"></div>
|
|
|
+ <div class="abs fac_progress" style="background-color: #072e47;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding-left: 25px;color: #27e6ff;margin-top: 25px;width: 100%;">
|
|
|
+ <div class="littleFont"><span>开机数(今日)</span><span style="float: right;">总数</span></div>
|
|
|
+ <div style="font-size: 22px;"><b>{{ deviceStatData.currYield.jb.openNum }}<span class="littleFont">台</span></b>
|
|
|
+ <b style="float: right;">{{ deviceStatData.currYield.jb.totalNum }}<span class="littleFont">台</span></b>
|
|
|
+ </div>
|
|
|
+ <div style="position: relative;margin-top: 5px;">
|
|
|
+ <div class="abs fac_progress_value" :style="{width:deviceStatData.currYield.jb.openRatio+'%',backgroundColor: '#008899'}"></div>
|
|
|
+ <div class="abs fac_progress" style="background-color: #072e47;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="title_row" style="margin-top: 3%;"><div class="title_left_line"></div><span>染整</span><span style="color:#27e6ff">(生产情况)</span></div>
|
|
|
+ <div class="data_row" style="width: 300px;display: block;margin-top:0;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div ref="echarts3" class="fac_pie"></div>
|
|
|
+ <div ref="echarts4" class="fac_pie"></div>
|
|
|
+ </div>
|
|
|
+ <div style="padding-left: 25px;color: #27e6ff;width: 100%;">
|
|
|
+ <div class="littleFont">印染(今日)</div>
|
|
|
+ <div style="font-size: 22px;font-weight: bold;">{{ deviceStatData.currYield.rz.yield }}<span class="littleFont">米</span></div>
|
|
|
+ <div style="position: relative;margin-top: 5px;">
|
|
|
+ <div class="abs fac_progress_value" :style="{width:(deviceStatData.currYield.rz.yield/deviceStatData.currYield.rz.yieldMax*100)+'%'}"></div>
|
|
|
+ <div class="abs fac_progress"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding-left: 25px;color: #27e6ff;margin-top: 25px;width: 100%;">
|
|
|
+ <div class="littleFont"><span>开机数(今日)</span><span style="float: right;">总数</span></div>
|
|
|
+ <div style="font-size: 22px;"><b>{{ deviceStatData.currYield.rz.openNum }}<span class="littleFont">台</span></b>
|
|
|
+ <b style="float: right;">{{ deviceStatData.currYield.rz.totalNum }}<span class="littleFont">台</span></b>
|
|
|
+ </div>
|
|
|
+ <div style="position: relative;margin-top: 5px;">
|
|
|
+ <div class="abs fac_progress_value" :style="{width:deviceStatData.currYield.rz.openRatio+'%'}"></div>
|
|
|
+ <div class="abs fac_progress"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="abs rightPanel">
|
|
|
+ <div class="title_row" style="line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div>
|
|
|
+ <span>生产趋势</span><span style="color:#27e6ff">(7天)</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="data_row" ref="echarts_sc_qushi" style="width: 100%;height: 42%;border: 1px solid #008899;"></div>
|
|
|
+ <div class="title_row" style="line-height: 30px;margin-top: 8%;"><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="data_row" ref="echarts_used_qushi" style="width: 100%;height: 42%;border: 1px solid #008899;"></div>
|
|
|
+ </div>
|
|
|
<div id="iframeWin" v-if="isShowIframeWin" :class="iframeWinData.class">
|
|
|
<div class="title"><img src="../../assets/image/title_icon.png" style="margin: 7px;float: left;"><span class="text">{{ iframeWinData.title }}</span><img src="../../assets/image/Close.png" style="margin: 7px;float: right;cursor: pointer;" @click="CloseIframeWin"></div>
|
|
|
<div class="content"><iframe id="ifrm" :src="iframeWinData.src" class=""></iframe></div>
|
|
@@ -13,6 +120,7 @@
|
|
|
<script>
|
|
|
import { ref,onMounted,watch,emit,onUnmounted } from 'vue';
|
|
|
import api from "@/api/system";
|
|
|
+import * as echarts from 'echarts';
|
|
|
export default {
|
|
|
props:{
|
|
|
facModelLoadState:{
|
|
@@ -23,16 +131,45 @@ export default {
|
|
|
setup(props,{emit}) {
|
|
|
const isShowIframeWin=ref(false);
|
|
|
const iframeWinData = ref({});
|
|
|
+ const echarts1 = ref(null);
|
|
|
+ const echarts2 = ref(null);
|
|
|
+ const echarts3 = ref(null);
|
|
|
+ const echarts4 = ref(null);
|
|
|
+ const echarts_sc_qushi = ref(null);
|
|
|
+ const echarts_used_qushi = ref(null);
|
|
|
+ let buttonCode1 = ref('');
|
|
|
+ let buttonCode2 = ref('');
|
|
|
+ let deviceStatData=ref({"avgMonth":{},"currYield":{"jb":{},"rz":{}}});
|
|
|
+ let typeUnitName = '';
|
|
|
+ const dataTypeUnit={
|
|
|
+ 'Length':'米',
|
|
|
+ 'Weight':'吨',
|
|
|
+ 'price':'元/米',
|
|
|
+ 'electricity':'kwh',
|
|
|
+ 'steam':'GJ',
|
|
|
+ 'water':'m³',
|
|
|
+ };
|
|
|
let getDataTimer=null;
|
|
|
+ let getDataTimer1 = null;
|
|
|
+ let getDataTimer2 = null;
|
|
|
+ let getDataTimer3 = null;
|
|
|
+ let getDataTimer4 = null;
|
|
|
let MarkerMapFac={};
|
|
|
let FacStockData={};
|
|
|
let markerLClickObj = null;
|
|
|
+ let echartsEleIns_0=null;
|
|
|
+ let echartsEleIns_1=null;
|
|
|
watch(() => props.facModelLoadState, newVal=> {
|
|
|
- if(newVal && MarkerMapFac["FAC"]==null){
|
|
|
+ if(newVal){
|
|
|
//模型加载完成
|
|
|
console.log('全厂模型加载完成')
|
|
|
clearTimeout(getDataTimer);
|
|
|
- loadmarkers()
|
|
|
+ try{
|
|
|
+ if(MarkerMapFac["FAC"]==null) loadmarkers();
|
|
|
+ backMasterViewByFac();
|
|
|
+ }catch(e){
|
|
|
+ window.location.reload();
|
|
|
+ }
|
|
|
}
|
|
|
},{deep:true,immediate:true})
|
|
|
|
|
@@ -79,12 +216,41 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
+ },
|
|
|
+ GetDeviceStat:function(){
|
|
|
+ api.GetFacDeviceStat().then(res=>{
|
|
|
+ if(window.CurrentTargetType!='FAC') return;
|
|
|
+ getDataTimer1 = setTimeout(function () {
|
|
|
+ //每1分钟主动查询一次数据
|
|
|
+ DataFull.GetDeviceStat()
|
|
|
+ }, 60*1000);
|
|
|
+ if (res == null || player.Native==null || window.CurrentTargetType!='FAC') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(res.code!=200){
|
|
|
+ /*
|
|
|
+ let msg = ElMessage({
|
|
|
+ message:"正在加载数据",
|
|
|
+ type:"info",
|
|
|
+ duration:0,
|
|
|
+ })
|
|
|
+ */
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ deviceStatData.value = res.data;
|
|
|
+ LoadSCLine('Length');
|
|
|
+ LoadUsedLine('price');
|
|
|
+ LoadJBPie();
|
|
|
+ LoadRZPie();
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
//全局厂房最佳视图
|
|
|
function backMasterViewByFac(){
|
|
|
// player.Native.Camera.moveTo([235.678127000173, 13.38107286701451, 74.13573809425804], [-1248.3191825020908, -262.59031050373517, -409.93944372657353], [-0.30023176822741604, -0.055832565112502126, 0.9522308596238611], 1);
|
|
|
- player.Native.Camera.moveTo([286.03479667714066, -369.1462098899696, 250.99077822208548], [-1630.186261661935, 1578.4562059189793, -1508.5247276647053],[-0.3797261858729431, 0.38594484375048804, 0.840746454851163], 1);
|
|
|
+ player.Native.Camera.moveTo([230.81374612743963, -478.03486595784244, 397.44713298891566],
|
|
|
+ [-1191.7422834310603, 2397.473667672639, -1974.2218082537938],
|
|
|
+ [-0.2635955199415324, 0.5328234187400651, 0.8041247454897171], 1);
|
|
|
// 使用异步函数
|
|
|
(async () => {
|
|
|
setTimeout(function() {
|
|
@@ -103,12 +269,12 @@ export default {
|
|
|
"minLod": 0,
|
|
|
"textFontSize":16,
|
|
|
"textColor": parseInt("0xffffffff"),
|
|
|
- "contentPadding":[5,5,5,5],
|
|
|
+ "contentPadding":[10,10,10,10],
|
|
|
"userData":"bpb|白坯布("+StockTypeUnit['bpb']+")\r\r当前库存:{curr}\r统计时间:7点至次日7点\r当日入库:{d-in} 出库:{d-out}\r当月入库:{m-in} 出库:{m-out}\r"
|
|
|
};
|
|
|
|
|
|
var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(obj02.item);
|
|
|
- options.pos = [obj02Aabb.aabb[0][0], obj02Aabb.aabb[0][1]-10, obj02Aabb.aabb[0][2]+115];
|
|
|
+ options.pos = [obj02Aabb.aabb[0][0]-40, obj02Aabb.aabb[0][1]-10, obj02Aabb.aabb[0][2]+115];
|
|
|
//options.parentNode=tmp.item;
|
|
|
options.imgId = imgid
|
|
|
options.imgSize = [0, 140];
|
|
@@ -126,7 +292,7 @@ export default {
|
|
|
"minLod": 0,
|
|
|
"textFontSize":16,
|
|
|
"textColor": parseInt("0xffffffff"),
|
|
|
- "contentPadding":[5,5,5,5],
|
|
|
+ "contentPadding":[10,10,10,10],
|
|
|
"userData":"pt|盘头("+StockTypeUnit['pt']+")\r\r当前库存:{curr}\r统计时间:7点至次日7点\r当日入库:{d-in} 出库:{d-out}\r当月入库:{m-in} 出库:{m-out}\r"
|
|
|
};
|
|
|
var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(pantou.item);
|
|
@@ -147,11 +313,11 @@ export default {
|
|
|
"minLod": 0,
|
|
|
"textFontSize":16,
|
|
|
"textColor": parseInt("0xffffffff"),
|
|
|
- "contentPadding":[5,5,5,5],
|
|
|
+ "contentPadding":[10,10,10,10],
|
|
|
"userData":"ycl|原材料("+StockTypeUnit['ycl']+")\r\r当前库存:{curr}\r统计时间:7点至次日7点\r当日入库:{d-in} 出库:{d-out}\r当月入库:{m-in} 出库:{m-out}\r"
|
|
|
};
|
|
|
var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(pantou.item);
|
|
|
- options.pos = [obj02Aabb.aabb[0][0], obj02Aabb.aabb[0][1]-30, obj02Aabb.aabb[0][2]+60];
|
|
|
+ options.pos = [obj02Aabb.aabb[0][0]-50, obj02Aabb.aabb[0][1]-10, obj02Aabb.aabb[0][2]+60];
|
|
|
//options.parentNode=tmp.item;
|
|
|
options.imgId = imgid
|
|
|
options.imgSize = [0, 140];
|
|
@@ -166,10 +332,10 @@ export default {
|
|
|
"minLod": 0,
|
|
|
"textFontSize":16,
|
|
|
"textColor": parseInt("0xffffffff"),
|
|
|
- "contentPadding":[5,5,5,5],
|
|
|
+ "contentPadding":[10,10,10,10],
|
|
|
"userData":"cp|成品("+StockTypeUnit['cp']+")\r\r当前库存:{curr}\r统计时间:7点至次日7点\r当日入库:{d-in} 出库:{d-out}\r当月入库:{m-in} 出库:{m-out}\r"
|
|
|
};
|
|
|
- options.pos = [obj02Aabb.aabb[0][0]+120, obj02Aabb.aabb[0][1]+10, obj02Aabb.aabb[0][2]+65];
|
|
|
+ options.pos = [obj02Aabb.aabb[0][0]+100, obj02Aabb.aabb[0][1]+10, obj02Aabb.aabb[0][2]+75];
|
|
|
//options.parentNode=tmp.item;
|
|
|
options.imgId = imgid
|
|
|
options.imgSize = [250, 140];
|
|
@@ -192,6 +358,709 @@ export default {
|
|
|
emit('markerLClick',markerLClickObj);
|
|
|
});
|
|
|
DataFull.GetFacData();
|
|
|
+ DataFull.GetDeviceStat();
|
|
|
+ /*
|
|
|
+ DataFull.GetFacProduction();
|
|
|
+ DataFull.GetScLine();
|
|
|
+ DataFull.GetUsedLine();
|
|
|
+ LoadJBPie();
|
|
|
+ LoadRZPie();
|
|
|
+ */
|
|
|
+ }
|
|
|
+ function LoadSCLine(dataType) {
|
|
|
+ buttonCode1.value = dataType;
|
|
|
+ typeUnitName = dataTypeUnit[dataType];
|
|
|
+ let data = deviceStatData.value.prodTrade;
|
|
|
+ //生产趋势
|
|
|
+ //获取数据中weight、aweight、bweight
|
|
|
+ var t = echarts_sc_qushi.value;
|
|
|
+ var week_efficiency = [];
|
|
|
+ var week_aefficiency = [];
|
|
|
+ var week_befficiency = [];
|
|
|
+ var times = [];
|
|
|
+ var v_series = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var tv = data[i]['date'];
|
|
|
+ times.push(tv);
|
|
|
+ if(dataType=='Length'){
|
|
|
+ week_aefficiency.push(data[i]['jbLength'])
|
|
|
+ week_befficiency.push(data[i]['rzLength'])
|
|
|
+ }else{
|
|
|
+ week_aefficiency.push(data[i]['jbWeight'])
|
|
|
+ week_befficiency.push(data[i]['rzWeight'])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (week_aefficiency.length == 0 && week_befficiency.length==0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ v_series.push({
|
|
|
+ name: "经编", type: 'bar', smooth: true, //symbol: 'none',
|
|
|
+ data: week_aefficiency, 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% 处的颜色
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ });
|
|
|
+ v_series.push({
|
|
|
+ name: "染整", type: 'bar', smooth: true, //symbol: 'none',
|
|
|
+ data: week_befficiency, itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#295589', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: '#295589' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barWidth: "8",
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [3, 3, 0, 0,],
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#fc4850'}, // 0% 处的颜色
|
|
|
+ {offset: 1, color: '#fc485070'} // 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}<br/>`;
|
|
|
+ result += ` ${item.marker} ${item.seriesName}: ${item.value}(`+typeUnitName+`)<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"
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ typeUnitName = dataTypeUnit[dataType];
|
|
|
+ let data = deviceStatData.value.energyTrade;
|
|
|
+ //能耗趋势
|
|
|
+ var t = echarts_used_qushi.value;
|
|
|
+ var times = [];
|
|
|
+ var v_series = [];
|
|
|
+ var week_aefficiency = [];
|
|
|
+ var week_befficiency = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ times.push(data[i]['date']);
|
|
|
+ if(data[i]['jb'][dataType]!=null) week_aefficiency.push(data[i]['jb'][dataType]);
|
|
|
+ if(data[i]['rz'][dataType]!=null) week_befficiency.push(data[i]['rz'][dataType]);
|
|
|
+ }
|
|
|
+ if (week_aefficiency.length> 0) {
|
|
|
+ v_series.push({
|
|
|
+ name: "经编", type: 'line', //symbol: 'none',
|
|
|
+ data: week_aefficiency,
|
|
|
+ symbol: 'circle', // 使用圆作为折点标记
|
|
|
+ symbolSize: 6,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#fbc16b', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fbc16b' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if(week_befficiency.length>0){
|
|
|
+ v_series.push({
|
|
|
+ name: "染整", type: 'line', //symbol: 'none',
|
|
|
+ data: week_befficiency,
|
|
|
+ symbol: 'circle', // 使用圆作为折点标记
|
|
|
+ symbolSize: 6,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#fc4850', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fc4850' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ 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}<br/>`;
|
|
|
+ result += ` ${item.marker} ${item.seriesName}: ${item.value}(`+typeUnitName+`)<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"
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ function LoadJBPie(){
|
|
|
+ //嫁动率
|
|
|
+ const myChart = echarts.init(echarts1.value);
|
|
|
+ // 配置项
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: '进度仪表盘',
|
|
|
+ left: 'center',
|
|
|
+ top: 'top',
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a} <br/>{b} : {c}%'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '经编',
|
|
|
+ type: 'gauge',
|
|
|
+ startAngle: '90',
|
|
|
+ endAngle: '-270',
|
|
|
+ pointer: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ itemStyle:{
|
|
|
+ color:"#28c4d8"
|
|
|
+ },
|
|
|
+ roundCap: true, //圆角
|
|
|
+ width: 8 // 进度条宽度
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show:true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 8, // 仪表盘宽度,
|
|
|
+ color: [[1, '#052c45']] // 底色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 隐藏刻度
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show:false,
|
|
|
+ length: 15, // 分割线长度
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ distance: 25,
|
|
|
+ color: '#999',
|
|
|
+ fontSize: 14,
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: deviceStatData.value.currYield.jb.jdl, // 初始进度值
|
|
|
+ name: '当前嫁动率',
|
|
|
+ title:{
|
|
|
+ offsetCenter: [0, -15], // 位置调整,'50%' 表示垂直居中,0 表示水平居中(根据需要调整)
|
|
|
+ color: '#27e6ff', // 文字颜色
|
|
|
+ fontSize: 14*BODY_H_RATE // 文字大小
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ offsetCenter: [0, 10],
|
|
|
+ formatter: '{value}%',
|
|
|
+ color: '#27e6ff', // 文字颜色
|
|
|
+ fontSize: 24*BODY_H_RATE // 文字大小
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['59%', '60.5%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ clockWise: false,
|
|
|
+ tooltip:{
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ shadowBlur: 20,
|
|
|
+ shadowColor: 'rgba(0, 255, 255,.3)',
|
|
|
+ color: '#008596',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [100]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 使用配置项渲染图表
|
|
|
+ myChart.setOption(option);
|
|
|
+ //开机率
|
|
|
+ const kjOpt = {
|
|
|
+ title: {
|
|
|
+ text: '进度仪表盘',
|
|
|
+ left: 'center',
|
|
|
+ top: 'top',
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a} <br/>{b} : {c}%'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '经编',
|
|
|
+ type: 'gauge',
|
|
|
+ startAngle: '90',
|
|
|
+ endAngle: '-270',
|
|
|
+ pointer: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ itemStyle:{
|
|
|
+ color:"#28c4d8"
|
|
|
+ },
|
|
|
+ roundCap: true, //圆角
|
|
|
+ width: 8 // 进度条宽度
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show:true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 8, // 仪表盘宽度,
|
|
|
+ color: [[1, '#052c45']] // 底色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 隐藏刻度
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show:false,
|
|
|
+ length: 15, // 分割线长度
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ distance: 25,
|
|
|
+ color: '#999',
|
|
|
+ fontSize: 14,
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: deviceStatData.value.currYield.jb.openRatio, // 初始进度值
|
|
|
+ name: '开机率',
|
|
|
+ title:{
|
|
|
+ offsetCenter: [0, -15], // 位置调整,'50%' 表示垂直居中,0 表示水平居中(根据需要调整)
|
|
|
+ color: '#27e6ff', // 文字颜色
|
|
|
+ fontSize: 14*BODY_H_RATE // 文字大小
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ offsetCenter: [0, 10],
|
|
|
+ formatter: '{value}%',
|
|
|
+ color: '#27e6ff', // 文字颜色
|
|
|
+ fontSize: 24*BODY_H_RATE // 文字大小
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['59%', '60.5%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ clockWise: false,
|
|
|
+ tooltip:{
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ shadowBlur: 20,
|
|
|
+ shadowColor: 'rgba(0, 255, 255,.3)',
|
|
|
+ color: '#008596',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [100]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ const kj = echarts.init(echarts2.value);
|
|
|
+ kj.setOption(kjOpt);
|
|
|
+ }
|
|
|
+ function LoadRZPie(){
|
|
|
+ //嫁动率
|
|
|
+ const myChart = echarts.init(echarts3.value);
|
|
|
+ // 配置项
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: '进度仪表盘',
|
|
|
+ left: 'center',
|
|
|
+ top: 'top',
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: function(a){
|
|
|
+ return a.seriesName+'<br>'+a.name+" : "+a.value/100*deviceStatData.value.currYield.rz.maxLine+'条';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '染整',
|
|
|
+ type: 'gauge',
|
|
|
+ startAngle: '90',
|
|
|
+ endAngle: '-270',
|
|
|
+ pointer: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ itemStyle:{
|
|
|
+ color:"#28c4d8"
|
|
|
+ },
|
|
|
+ roundCap: true, //圆角
|
|
|
+ width: 8 // 进度条宽度
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show:true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 8, // 仪表盘宽度,
|
|
|
+ color: [[1, '#052c45']] // 底色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 隐藏刻度
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show:false,
|
|
|
+ length: 15, // 分割线长度
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ distance: 25,
|
|
|
+ color: '#999',
|
|
|
+ fontSize: 14,
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: deviceStatData.value.currYield.rz.openLine/deviceStatData.value.currYield.rz.maxLine*100, // 初始进度值
|
|
|
+ name: '开动产线',
|
|
|
+ title:{
|
|
|
+ offsetCenter: [0, -15], // 位置调整,'50%' 表示垂直居中,0 表示水平居中(根据需要调整)
|
|
|
+ color: '#27e6ff', // 文字颜色
|
|
|
+ fontSize: 14*BODY_H_RATE // 文字大小
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ offsetCenter: [0, 10],
|
|
|
+ formatter:function(v){
|
|
|
+ return v/100*deviceStatData.value.currYield.rz.maxLine+'条'
|
|
|
+ },
|
|
|
+ color: '#27e6ff', // 文字颜色
|
|
|
+ fontSize: 24*BODY_H_RATE // 文字大小
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['59%', '60.5%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ clockWise: false,
|
|
|
+ tooltip:{
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ shadowBlur: 20,
|
|
|
+ shadowColor: 'rgba(0, 255, 255,.3)',
|
|
|
+ color: '#008596',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [100]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 使用配置项渲染图表
|
|
|
+ myChart.setOption(option);
|
|
|
+ //开机率
|
|
|
+ const kjOpt = {
|
|
|
+ title: {
|
|
|
+ text: '进度仪表盘',
|
|
|
+ left: 'center',
|
|
|
+ top: 'top',
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a} <br/>{b} : {c}%'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '染整',
|
|
|
+ type: 'gauge',
|
|
|
+ startAngle: '90',
|
|
|
+ endAngle: '-270',
|
|
|
+ pointer: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ itemStyle:{
|
|
|
+ color:"#28c4d8"
|
|
|
+ },
|
|
|
+ roundCap: true, //圆角
|
|
|
+ width: 8 // 进度条宽度
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show:true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 8, // 仪表盘宽度,
|
|
|
+ color: [[1, '#052c45']] // 底色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 隐藏刻度
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show:false,
|
|
|
+ length: 15, // 分割线长度
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ distance: 25,
|
|
|
+ color: '#999',
|
|
|
+ fontSize: 14,
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: deviceStatData.value.currYield.rz.openRatio, // 初始进度值
|
|
|
+ name: '开机率',
|
|
|
+ title:{
|
|
|
+ offsetCenter: [0, -15], // 位置调整,'50%' 表示垂直居中,0 表示水平居中(根据需要调整)
|
|
|
+ color: '#27e6ff', // 文字颜色
|
|
|
+ fontSize: 14*BODY_H_RATE // 文字大小
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ offsetCenter: [0, 10],
|
|
|
+ formatter: '{value}%',
|
|
|
+ color: '#27e6ff', // 文字颜色
|
|
|
+ fontSize: 24*BODY_H_RATE // 文字大小
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['59%', '60.5%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ clockWise: false,
|
|
|
+ tooltip:{
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ shadowBlur: 20,
|
|
|
+ shadowColor: 'rgba(0, 255, 255,.3)',
|
|
|
+ color: '#008596',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [100]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ const kj = echarts.init(echarts4.value);
|
|
|
+ kj.setOption(kjOpt);
|
|
|
}
|
|
|
function showStockTrend(type){
|
|
|
iframeWinData.value = {class:'newwin bpbWin',src:'/stock-trend-fx#'+type,title:StockTypeName[type]+'库存趋势'};
|
|
@@ -204,10 +1073,18 @@ export default {
|
|
|
}
|
|
|
onMounted(()=>{
|
|
|
clearTimeout(getDataTimer);
|
|
|
+ clearTimeout(getDataTimer1);
|
|
|
+ clearTimeout(getDataTimer2);
|
|
|
+ clearTimeout(getDataTimer3);
|
|
|
+ clearTimeout(getDataTimer4);
|
|
|
backMasterViewByFac();
|
|
|
});
|
|
|
onUnmounted(()=>{
|
|
|
clearTimeout(getDataTimer);
|
|
|
+ clearTimeout(getDataTimer1);
|
|
|
+ clearTimeout(getDataTimer2);
|
|
|
+ clearTimeout(getDataTimer3);
|
|
|
+ clearTimeout(getDataTimer4);
|
|
|
if(MarkerMapFac["FAC"]==null) return;
|
|
|
for(let key in MarkerMapFac["FAC"]){
|
|
|
if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(key)
|
|
@@ -217,12 +1094,102 @@ export default {
|
|
|
backMasterViewByFac,
|
|
|
loadmarkers,
|
|
|
showStockTrend,
|
|
|
+ LoadSCLine,
|
|
|
+ LoadUsedLine,
|
|
|
isShowIframeWin,
|
|
|
iframeWinData,
|
|
|
markerLClickObj,
|
|
|
CloseIframeWin,
|
|
|
getDataTimer,
|
|
|
+ getDataTimer1,
|
|
|
+ getDataTimer2,
|
|
|
+ getDataTimer3,
|
|
|
+ getDataTimer4,
|
|
|
+ deviceStatData,
|
|
|
+ echarts1,
|
|
|
+ echarts2,
|
|
|
+ echarts3,
|
|
|
+ echarts4,
|
|
|
+ echarts_sc_qushi,
|
|
|
+ echarts_used_qushi,
|
|
|
+ buttonCode1,
|
|
|
+ buttonCode2,
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.bg1{
|
|
|
+ z-index: 1; pointer-events: none;position: absolute;
|
|
|
+ top: calc(90px * var(--hRate));
|
|
|
+ left: 0;
|
|
|
+ width: 98.2%;
|
|
|
+ height: 89%;
|
|
|
+ margin-left: 19px;
|
|
|
+ border: 2px solid #17666e;
|
|
|
+ border-top: 0px;
|
|
|
+ /*
|
|
|
+ background:url('../../assets/image//bg.png');
|
|
|
+ -webkit-mask-image:radial-gradient(circle, transparent 26%, #95afc5 54%);
|
|
|
+
|
|
|
+ background:
|
|
|
+ repeating-linear-gradient(
|
|
|
+ 45deg,
|
|
|
+ #ccc 0, #ccc 10px,
|
|
|
+ transparent 10px, transparent 20px
|
|
|
+ ),
|
|
|
+ repeating-linear-gradient(
|
|
|
+ -45deg,
|
|
|
+ #ccc 0, #ccc 10px,
|
|
|
+ transparent 10px, transparent 20px
|
|
|
+ );
|
|
|
+ background-size: 20px 20px;
|
|
|
+ */
|
|
|
+}
|
|
|
+.devicePanel{
|
|
|
+ position: absolute;top: 5%;left: 2%;width: 300px;height: 306px;z-index: 2;color: rgb(255, 255, 255);font-size: 18px;padding: 10px;border: 1px solid #b4a9e6;background: #1d476c1c;border-radius: 5px;box-shadow: 0px 0px 4px #5d7a94;
|
|
|
+}
|
|
|
+.deviceItem{
|
|
|
+ line-height: 35px;width:80%;display:inline-block;height: 60px;font-weight: bold;
|
|
|
+}
|
|
|
+.deviceDetailItem{
|
|
|
+ line-height: 20px;width:80%;display:inline-block;font-weight: normal;font-size: 14px;margin-left: 58px;color: #e1d7e8;
|
|
|
+}
|
|
|
+.precentBg{
|
|
|
+ width: 100%;height: 10px;display: inline-block;background: rgb(221 219 224);border-radius: 10px;
|
|
|
+}
|
|
|
+.productionPanel{
|
|
|
+ position: absolute;
|
|
|
+ top: 9%;
|
|
|
+ right: 5%;
|
|
|
+ width: 11%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ z-index: 2;
|
|
|
+ filter: blur(0px);
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ /*border: 1px solid #b4a9e6;*/
|
|
|
+ /*background: #1d476c1c;*/
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 10px #c1cce587;
|
|
|
+ /*transform: rotateZ(0deg) rotateX(20deg) rotateY(-58deg) skew(2deg);*/
|
|
|
+
|
|
|
+}
|
|
|
+.productionPanel .content{
|
|
|
+ background: transparent;padding: 5px;
|
|
|
+}
|
|
|
+.productionPanel .title{
|
|
|
+ text-align: center;width: 100%;font-weight: bold;line-height: 32px;font-size: 18px;color: #d6dce3;
|
|
|
+}
|
|
|
+.productionPanel .cyc{
|
|
|
+ border: 10px solid #2566ad;
|
|
|
+ border-radius: 50%;
|
|
|
+ height: 66px;
|
|
|
+ text-align: center;
|
|
|
+ width: 33%;
|
|
|
+ line-height: 66px;
|
|
|
+ background: #258cce;
|
|
|
+ font-size: 19px;
|
|
|
+ margin: 10px 29%;
|
|
|
+}
|
|
|
+</style>
|