root/screen-hl-one
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏1

Browse Source
This commit is contained in:
caill
2022-07-28 19:51:46 +08:00
parent e05557cccd
commit 89642bba88
2 changed files with 418 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

661
src/pages/MonitoringScreen1.vue
View File

@@ -20,53 +20,104 @@
<div class="item_tip"> <div class="item_tip">
<div class="item_tip_left">计划达成</div> <div class="item_tip_left">计划达成</div>
<div class="item_tip_right"> <div class="item_tip_right">
<span>日计划达成</span><span class="span1">/月计划达成</span> <span :class="{'span1': swiper === true}">日计划达成</span><span :class="{'span1': swiper === false}">/月计划达成</span>
</div> </div>
</div> </div>
<div class="item_content_1"> <div class="swiper_wrap">
<div class="swiper_wrap_con">
<div v-if="swiper === false" class="swiper_item">
<div class="item_content_1_inner"> <div class="item_content_1_inner">
<div class="item_content_1_inner_1">弯头工段</div> <div class="item_content_1_inner_1">弯头工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo1.plan_qty === '' ? 0 : jo1.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日计划量</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo1.real_qty === '' ? 0 : jo1.real_qty}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日完成量</p>
</div> </div>
<div class="item_content_1_inner_2"> <div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo1.finish_rate === '' ? 0 : jo1.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日完成率</p>
</div> </div>
</div> </div>
<div class="item_content_1_inner"> <div class="item_content_1_inner">
<div class="item_content_1_inner_1">弯头工段</div> <div class="item_content_1_inner_1">综合工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo2.plan_qty === '' ? 0 : jo2.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日计划量</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo2.real_qty === '' ? 0 : jo2.real_qty}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日完成量</p>
</div> </div>
<div class="item_content_1_inner_2"> <div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo2.finish_rate === '' ? 0 : jo2.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日完成率</p>
</div> </div>
</div> </div>
<div class="item_content_1_inner"> <div class="item_content_1_inner">
<div class="item_content_1_inner_1">弯头工段</div> <div class="item_content_1_inner_1">成品工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo3.plan_qty === '' ? 0 : jo3.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日计划量</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo3.real_qty === '' ? 0 : jo3.real_qty}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日完成量</p>
</div> </div>
<div class="item_content_1_inner_2"> <div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">220000</p> <p class="item_content_1_inner_2_p1">{{jo3.finish_rate === '' ? 0 : jo3.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p2">日完成率</p>
</div>
</div>
</div>
<div v-else class="swiper_item">
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">弯头工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo1.plan_qty === '' ? 0 : joo1.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">月计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo1.real_qty === '' ? 0 : joo1.real_qty}}</p>
<p class="item_content_1_inner_2_p2">月完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{joo1.finish_rate === '' ? 0 : joo1.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">月完成率</p>
</div>
</div>
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">综合工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo2.plan_qty === '' ? 0 : joo2.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">月计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo2.real_qty === '' ? 0 : joo2.real_qty}}</p>
<p class="item_content_1_inner_2_p2">月完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{joo2.finish_rate === '' ? 0 : joo2.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">月完成率</p>
</div>
</div>
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">成品工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo3.plan_qty === '' ? 0 : joo3.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">月计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo3.real_qty === '' ? 0 : joo3.real_qty}}</p>
<p class="item_content_1_inner_2_p2">月完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{joo3.finish_rate === '' ? 0 : joo3.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">月完成率</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -96,7 +147,6 @@
<div class="item_content_2"> <div class="item_content_2">
<div class="scroll_wrap"> <div class="scroll_wrap">
<ul class="scroll_tab_1"> <ul class="scroll_tab_1">
<li>订单号</li>
<li>工单号</li> <li>工单号</li>
<li>计划完成</li> <li>计划完成</li>
<li>实际完成</li> <li>实际完成</li>
@@ -108,15 +158,16 @@
<vue-seamless-scroll :data="array1" :class-option="defaultOption1"> <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1"> <ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i"> <li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.produceorder_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.plan_qty}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.real_qty}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.gap_qty}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.finish_rate}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div"> <div class="scroll-ul_1_div">
<div class="progress_line_wrap"> <div class="progress_line_wrap">
<div class="progress_dot"></div> <div class="progress_dot_wrap">
<div class="progress_dot" :style="{'left': Number(e.finish_rate) + '%'}"></div>
</div>
</div> </div>
</div> </div>
</li> </li>
@@ -138,20 +189,18 @@
<li>产品规格</li> <li>产品规格</li>
<li>订单数量</li> <li>订单数量</li>
<li>实际完成</li> <li>实际完成</li>
<li>差距</li>
<li>计划完成日期</li> <li>计划完成日期</li>
</ul> </ul>
<div class="scroll_container_1"> <div class="scroll_container_1">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1"> <vue-seamless-scroll :data="array2" :class-option="defaultOption1">
<ul class="scroll-ul_1"> <ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i"> <li v-for="(e, i) in array2" :key="i">
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.produceorder_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_spec}}</div>
<div class="scroll-ul_1_div">{{e.plan_qty}}</div>
<div class="scroll-ul_1_div">{{e.real_qty}}</div>
<div class="scroll-ul_1_div">{{e.date}}</div>
</li> </li>
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
@@ -175,41 +224,41 @@
<div class="right_1_up_right"> <div class="right_1_up_right">
<div class="right_1_up_right_item"> <div class="right_1_up_right_item">
<p class="right_1_up_p1">计划产量</p> <p class="right_1_up_p1">计划产量</p>
<p class="right_1_up_p2">200000<span>PCS</span></p> <p class="right_1_up_p2">{{objL1.plan_qty}}<span>PCS</span></p>
</div> </div>
<div class="right_1_up_right_item"> <div class="right_1_up_right_item">
<p class="right_1_up_p1">计划产量</p> <p class="right_1_up_p1">实际产量</p>
<p class="right_1_up_p2">200000<span>PCS</span></p> <p class="right_1_up_p2">{{objL1.real_qty}}<span>PCS</span></p>
</div> </div>
</div> </div>
</div> </div>
<div class="right_1_down"> <div class="right_1_down">
<div class="right_1_down_inner_1"> <div class="right_1_down_inner_1">
<div>工单总数：</div> <div>工单总数：</div>
<div>190个</div> <div>{{objL1.sum_qty}}个</div>
</div> </div>
<div class="right_1_down_inner_2"> <div class="right_1_down_inner_2">
<div></div> <div :style="{'width': Number(objL1.normal_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%' }"></div>
<div></div> <div :style="{'width': Number(objL1.delayed_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%'}"></div>
</div> </div>
<div class="right_1_down_inner_3"> <div class="right_1_down_inner_3">
<div class="right_1_down_inner_3_i"> <div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l"> <div class="right_1_down_inner_3_l">
<span></span> <span><i class="color1"></i></span>
<span>正常工单</span> <span>正常工单</span>
</div> </div>
<div class="right_1_down_inner_3_r"> <div class="right_1_down_inner_3_r">
<span>163</span> <span>{{objL1.normal_qty}}</span>
<span>个</span> <span>个</span>
</div> </div>
</div> </div>
<div class="right_1_down_inner_3_i"> <div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l"> <div class="right_1_down_inner_3_l">
<span></span> <span><i class="color2"></i></span>
<span>延期工单</span> <span>延期工单</span>
</div> </div>
<div class="right_1_down_inner_3_r"> <div class="right_1_down_inner_3_r">
<span>16</span> <span>{{objL1.delayed_qty}}</span>
<span>个</span> <span>个</span>
</div> </div>
</div> </div>
@@ -222,13 +271,13 @@
<div class="item_tip_left">今日TOP10产量</div> <div class="item_tip_left">今日TOP10产量</div>
</div> </div>
<div class="item_content_4"> <div class="item_content_4">
<vue-seamless-scroll :data="array2" :class-option="defaultOption2"> <vue-seamless-scroll :data="array3" :class-option="defaultOption3">
<ul class="scroll-ul_2"> <ul class="scroll-ul_2">
<li v-for="(e, i) in array2" :key="i"> <li v-for="(e, i) in array3" :key="i">
<div class="scroll-ul_2_div_1"><span></span></div> <div class="scroll-ul_2_div_1"><span>{{e.sort}}</span></div>
<div class="scroll-ul_2_div_2"></div> <div class="scroll-ul_2_div_2">{{e.material_spec}}</div>
<div class="scroll-ul_2_div_3"> <div class="scroll-ul_2_div_3">
<span></span><span></span> <span>{{e.real_qty}}</span><span>产量</span>
</div> </div>
</li> </li>
</ul> </ul>
@@ -240,114 +289,35 @@
<div class="item_tip_left">近30天生产订单分布</div> <div class="item_tip_left">近30天生产订单分布</div>
</div> </div>
<div class="item_content_5"> <div class="item_content_5">
<div class="item_5_l">
<div class="item_5_l_1">
<div id="echart_d4" style="width: 100%; height: 100%"></div> <div id="echart_d4" style="width: 100%; height: 100%"></div>
<!-- <div class="item_5_l"> </div>
<div class="item_5_l_1"></div>
<div class="item_5_l_2"> <div class="item_5_l_2">
<div class="right_1_down_inner_3_i"> <div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1.slice(0,3)" :key="i">
<div class="right_1_down_inner_3_l"> <div class="right_1_down_inner_3_l">
<span></span> <span><i :style="{'background-color': e.color}"></i></span>
<span>正常工单</span> <span>{{e.material_spec}}</span>
</div> </div>
<div class="right_1_down_inner_3_r"> <div class="right_1_down_inner_3_r">
<span>163</span> <span>{{e.real_qty}}</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>163</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>163</span>
<span>个</span> <span>个</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="item_5_r"> <div class="item_5_r">
<div class="right_1_down_inner_3_i"> <div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1.slice(3,10)" :key="i">
<div class="right_1_down_inner_3_l"> <div class="right_1_down_inner_3_l">
<span></span> <span><i :style="{'background-color': e.color}"></i></span>
<span>正常工单</span> <span>{{e.material_spec}}</span>
</div> </div>
<div class="right_1_down_inner_3_r"> <div class="right_1_down_inner_3_r">
<span>163</span> <span>{{e.real_qty}}</span>
<span>个</span> <span>个</span>
</div> </div>
</div> </div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span></span>
<span>正常工单</span>
</div> </div>
<div class="right_1_down_inner_3_r">
<span>163</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>163</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>163</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>163</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>163</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>163</span>
<span>个</span>
</div>
</div>
</div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -357,31 +327,48 @@
</template> </template>
<script> <script>
import {planReached, worksectionHarvest, monthHarvest, productSchedule, unfinishOrder, output, topHarvest, monthOrder} from '@js/getData2.js'
export default { export default {
name: 'MonitoringScreen1', name: 'MonitoringScreen1',
data () { data () {
return { return {
timer: null, interTime: this.$store.getters.setTime,
timer1: null,
timer2: null,
timer3: null,
timeOut1: null,
timeOut2: null,
time: '', time: '',
hours: '', hours: '',
minutes: '', minutes: '',
seconds: '', seconds: '',
date: '', date: '',
week: '', week: '',
swiper: false,
myCharts1: '', myCharts1: '',
myCharts2: '', myCharts2: '',
myCharts3: '', myCharts3: '',
myCharts4: '', myCharts4: '',
array1: [{material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}], jo1: {},
jo2: {},
jo3: {},
joo1: {},
joo2: {},
joo3: {},
arrL2: [],
arrL3: [],
array1: [],
array2: [], array2: [],
num: 7 array3: [],
objL1: {},
arrR1: []
} }
}, },
computed: { computed: {
defaultOption1 () { defaultOption1 () {
return { return {
step: 0.4, // 数值越大速度滚动越快 step: 0.4, // 数值越大速度滚动越快
limitMoveNum: this.num, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右 direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom openWatch: true, // 开启数据实时监控刷新dom
@@ -391,6 +378,18 @@ export default {
} }
}, },
defaultOption2 () { defaultOption2 () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
},
defaultOption3 () {
return { return {
step: 0.4, // 数值越大速度滚动越快 step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
@@ -405,20 +404,32 @@ export default {
}, },
created () { created () {
this.updateTime() this.updateTime()
this.timer = window.setInterval(this.updateTime, 1000) this.timer1 = window.setInterval(this.updateTime, 1000)
this.refresh()
}, },
beforeDestroy () { beforeDestroy () {
this.$once('hook:beforeDestroy', () => { this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer) clearInterval(this.timer1)
clearInterval(this.timer2)
}) })
}, },
mounted () {
this.setEchart1()
this.setEchart2()
this.setEchart3()
this.setEchart4()
},
methods: { methods: {
initData () {
this._planReached()
this._worksectionHarvest()
this._monthHarvest()
this._productSchedule()
this._output()
this._unfinishOrder()
this._topHarvest()
this._monthOrder()
},
refresh () {
this.initData()
this.timer2 = setInterval(() => {
this.initData()
}, this.interTime)
},
updateTime () { updateTime () {
let cd = new Date() let cd = new Date()
let year = cd.getFullYear() let year = cd.getFullYear()
@@ -438,6 +449,16 @@ export default {
this.week = `${week}` this.week = `${week}`
}, },
setEchart1 () { setEchart1 () {
let date = []
let data1 = []
let data2 = []
let data3 = []
this.arrL2.map(e => {
date.push(e.date)
data1.push(e.elbow_qty)
data2.push(e.comprehensive_qty)
data3.push(e.comprehensive_qty)
})
let option = { let option = {
grid: { grid: {
top: 50, top: 50,
@@ -458,6 +479,14 @@ export default {
itemHeight: 7.38, itemHeight: 7.38,
data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}] data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
}, },
dataZoom: [
{
show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
startValue: 0, // 从头开始。
endValue: 4 // end百分比显示范围，endValue具体显示几个数值
}
],
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
@@ -477,7 +506,7 @@ export default {
fontSize: 16 fontSize: 16
} }
}, },
data: ['07-21', '07-21', '07-21', '07-21', '07-21'] data: date
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@@ -524,7 +553,7 @@ export default {
]) ])
} }
}, },
data: ['390', '390', '390', '390', '390'] data: data1
}, },
{ {
name: '综合工段', name: '综合工段',
@@ -546,7 +575,7 @@ export default {
]) ])
} }
}, },
data: ['230', '230', '230', '230', '230'] data: data2
}, },
{ {
name: '成品工段', name: '成品工段',
@@ -568,18 +597,25 @@ export default {
]) ])
} }
}, },
data: ['210', '210', '210', '210', '210'] data: data3
} }
] ]
} }
let echart = document.getElementById('echart_d1') let echart = document.getElementById('echart_d1')
this.myCharts1 = this.$echarts.init(echart) this.myCharts1 = this.$echarts.init(echart)
this.myCharts1.setOption(option) this.myCharts1.setOption(option)
this.autoMove(option, 1)
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.myCharts1.resize() this.myCharts1.resize()
}) })
}, },
setEchart2 () { setEchart2 () {
let date = []
let qty = []
this.arrL3.map(el => {
date.push(el.date)
qty.push(el.real_qty)
})
let option = { let option = {
grid: { grid: {
top: 50, top: 50,
@@ -588,6 +624,14 @@ export default {
bottom: 0, bottom: 0,
containLabel: true containLabel: true
}, },
dataZoom: [
{
show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
startValue: 0, // 从头开始。
endValue: 4 // end百分比显示范围，endValue具体显示几个数值
}
],
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
@@ -602,13 +646,14 @@ export default {
} }
}, },
axisLabel: { axisLabel: {
// interval: 0, interval: 0,
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: 16 fontSize: 16,
align: 'left'
} }
}, },
data: ['07-21', '07-21', '07-21', '07-21', '07-21', '07-21', '07-21', '07-21', '07-21', '07-21'] data: date
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@@ -663,19 +708,45 @@ export default {
], false) ], false)
} }
}, },
data: ['750', '500', '1100', '900', '1200', '750', '500', '1100', '900', '1200'] data: qty
} }
] ]
} }
let echart = document.getElementById('echart_d2') let echart = document.getElementById('echart_d2')
this.myCharts2 = this.$echarts.init(echart) this.myCharts2 = this.$echarts.init(echart)
this.myCharts2.setOption(option) this.myCharts2.setOption(option)
this.autoMove(option, 2)
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.myCharts2.resize() this.myCharts2.resize()
}) })
}, },
autoMove (option, type) {
if (type === 1) {
this.timeOut1 = setInterval(() => {
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
option.dataZoom[0].endValue = 4
option.dataZoom[0].startValue = 0
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
}
this.myCharts1.setOption(option)
}, 2000)
} else if (type === 2) {
this.timeOut2 = setInterval(() => {
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
option.dataZoom[0].endValue = 4
option.dataZoom[0].startValue = 0
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
}
this.myCharts2.setOption(option)
}, 2000)
}
},
setEchart3 () { setEchart3 () {
let value = 85 let value = parseFloat(this.objL1.finish_rate)
let title = '%' let title = '%'
let text = '完成率' let text = '完成率'
let option = { let option = {
@@ -687,7 +758,7 @@ export default {
textStyle: { textStyle: {
rich: { rich: {
a: { a: {
fontSize: 36, fontSize: 32,
color: '#00D9FF', color: '#00D9FF',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
foontWeight: '700' foontWeight: '700'
@@ -757,113 +828,23 @@ export default {
}) })
}, },
setEchart4 () { setEchart4 () {
let arr = [ let arr = []
{ value: 163, name: '三通1/21' }, let colors = []
{ value: 163, name: '三通1/22' }, this.arrR1.map(el => {
{ value: 163, name: '三通1/23' }, arr.push(el.real_qty)
{ value: 24, name: '三通1/24' }, colors.push(el.color)
{ value: 163, name: '三通1/25' }, })
{ value: 163, name: '三通1/26' },
{ value: 163, name: '三通1/27' },
{ value: 163, name: '三通1/28' },
{ value: 163, name: '三通1/29' },
{ value: 163, name: '三通1/30' }
]
var option = { var option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: [{ color: colors,
data: ['三通1/21', '三通1/22', '三通1/23'],
top: 'center',
left: '55%',
orient: 'vertical',
icon: 'circle',
itemGap: 75,
itemHeight: 20,
formatter: (name) => {
var arr = option.series[0].data
arr.map((e, i) => {
if (name === e.name) {
return '{a|' + name + '}{b|' + e.value + '}{c|个}'
}
})
},
textStyle: {
rich: {
a: {
color: '#ffffff',
fontSize: 14,
lineHeight: 30,
fontFamily: 'SourceHanSansCN',
foontWeight: '400'
},
b: {
color: '#00D5FF ',
fontSize: 18,
lineHeight: 30,
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
},
c: {
color: '#ffffff ',
fontSize: 12,
lineHeight: 30,
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
}
}
}
},
{
data: ['三通1/24', '三通1/25', '三通1/26', '三通1/27', '三通1/28', '三通1/29', '三通1/30'],
top: 'center',
left: '80%',
orient: 'vertical',
icon: 'circle',
itemGap: 75,
itemHeight: 20,
formatter: (name) => {
var arr = option.series[0].data
arr.map((e, i) => {
if (name === e.name) {
return '{a|' + name + '}{b|' + e.value + '}{c|个}'
}
})
},
textStyle: {
rich: {
a: {
color: '#ffffff',
fontSize: 14,
lineHeight: 30,
fontFamily: 'SourceHanSansCN',
foontWeight: '400'
},
b: {
color: '#00D5FF ',
fontSize: 18,
lineHeight: 30,
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
},
c: {
color: '#ffffff ',
fontSize: 12,
lineHeight: 30,
fontFamily: 'SourceHanSansCN',
foontWeight: '700'
}
}
}
}
],
series: [ series: [
{ {
name: '区域', name: '区域',
type: 'pie', type: 'pie',
radius: ['40%', '60%'], radius: ['70%', '95%'],
center: ['30%', '50%'], center: ['50%', '50%'],
left: 0, left: 0,
roseType: 'area', roseType: 'area',
avoidLabelOverlap: false, avoidLabelOverlap: false,
@@ -884,6 +865,109 @@ export default {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.myCharts4.resize() this.myCharts4.resize()
}) })
},
/** 左一 */
async _planReached () {
let res = await planReached()
if (res.code === '1') {
this.jo1 = res.dayResult.jo1
this.jo2 = res.dayResult.jo2
this.jo3 = res.dayResult.jo3
this.joo1 = res.monthResult.joo1
this.joo2 = res.monthResult.joo2
this.joo3 = res.monthResult.joo3
window.clearInterval(this.timer3)
this.toSwiper()
} else {
this.Dialog(res.desc)
}
},
/** 轮播 */
toSwiper () {
this.timer3 = setInterval(() => {
this.swiper = !this.swiper
}, 5000)
},
/** 左二 */
async _worksectionHarvest () {
let res = await worksectionHarvest()
if (res.code === '1') {
this.arrL2 = [...res.result]
if (this.arrL2.length > 0) {
window.clearInterval(this.timeOut1)
this.setEchart1()
}
} else {
this.Dialog(res.desc)
}
},
/** 左三 */
async _monthHarvest () {
let res = await monthHarvest()
if (res.code === '1') {
this.arrL3 = [...res.result]
window.clearInterval(this.timeOut2)
this.setEchart2()
} else {
this.Dialog(res.desc)
}
},
/** 中一 */
async _productSchedule () {
let res = await productSchedule()
if (res.code === '1') {
this.array1 = [...res.result]
} else {
this.Dialog(res.desc)
}
},
/** 中二 */
async _unfinishOrder () {
let res = await unfinishOrder()
if (res.code === '1') {
this.array2 = [...res.result]
} else {
this.Dialog(res.desc)
}
},
/** 右一 */
async _output () {
let res = await output()
if (res.code === '1') {
this.objL1 = res.result
this.setEchart3()
} else {
this.Dialog(res.desc)
}
},
/** 右二 */
async _topHarvest () {
let res = await topHarvest()
if (res.code === '1') {
res.result.map((e, i) => {
let index = parseInt(i) + 1
if (index >= 4) {
this.$set(e, 'sort', `NO.${index}`)
}
})
this.array3 = [...res.result]
} else {
this.Dialog(res.desc)
}
},
/** 右三 */
async _monthOrder () {
let res = await monthOrder()
if (res.code === '1') {
let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
res.result.map((e, i) => {
this.$set(e, 'color', colors[i])
})
this.arrR1 = [...res.result]
this.setEchart4()
} else {
this.Dialog(res.desc)
}
} }
} }
} }
@@ -1016,7 +1100,7 @@ header
border-bottom .01rem solid rgba(8,205,248,0.3) border-bottom .01rem solid rgba(8,205,248,0.3)
li li
float left float left
width 13.8% width 15%
_font(.14rem,.4rem,#78B1DE,,center) _font(.14rem,.4rem,#78B1DE,,center)
word-wrap break-word word-wrap break-word
word-break break-all word-break break-all
@@ -1024,8 +1108,8 @@ header
padding 0 .02rem padding 0 .02rem
overflow hidden overflow hidden
box-sizing border-box box-sizing border-box
&:nth-child(7) &:nth-child(6)
width 17.2% width 25%
.scroll_container_1 .scroll_container_1
width 100% width 100%
height calc(100% - .4rem) height calc(100% - .4rem)
@@ -1039,7 +1123,7 @@ header
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3) box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_1_div .scroll-ul_1_div
float left float left
_wh(13.8%, .44rem) _wh(15%, .44rem)
_fj(center) _fj(center)
_font(.14rem, .44rem, #fff,,center) _font(.14rem, .44rem, #fff,,center)
word-wrap break-word word-wrap break-word
@@ -1047,16 +1131,21 @@ header
white-space nowrap white-space nowrap
padding 0 .02rem padding 0 .02rem
overflow hidden overflow hidden
&:nth-child(7) &:nth-child(6)
width 17.2% width 25%
.progress_line_wrap .progress_line_wrap
position relative position relative
_wh(1.35rem, .03rem) _wh(1.35rem, .03rem)
background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%) background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
.progress_dot .progress_dot_wrap
position absolute position absolute
_wh(100%, .15rem)
top -.06rem top -.06rem
left -.05rem left -.05rem
.progress_dot
position absolute
top 0
left 0
_wh(.15rem, .15rem) _wh(.15rem, .15rem)
background center center / 100% 100% url(../assets/images/screen1/dot_1.png) no-repeat background center center / 100% 100% url(../assets/images/screen1/dot_1.png) no-repeat
.item_content_3 .item_content_3
@@ -1092,6 +1181,7 @@ header
_font(.18rem, .18rem, #fff, 700, center) _font(.18rem, .18rem, #fff, 700, center)
span span
_font(.12rem, .18rem, #fff, 700, center) _font(.12rem, .18rem, #fff, 700, center)
padding-left .1rem
.right_1_down .right_1_down
_wh(100%, calc(100% - 1.6rem)) _wh(100%, calc(100% - 1.6rem))
padding .05rem .3rem 0 padding .05rem .3rem 0
@@ -1113,11 +1203,10 @@ header
background-color rgba(0,213,255,0.20) background-color rgba(0,213,255,0.20)
_fj() _fj()
div div
height .0805rem
&:nth-child(1) &:nth-child(1)
_wh(50%, .0805rem)
background-color #07E083 background-color #07E083
&:nth-child(2) &:nth-child(2)
_wh(50%, .0805rem)
background-color #B68845 background-color #B68845
.right_1_down_inner_3 .right_1_down_inner_3
_wh(100%, .3rem) _wh(100%, .3rem)
@@ -1130,17 +1219,22 @@ header
.right_1_down_inner_3_l .right_1_down_inner_3_l
_wh(50%, 100%) _wh(50%, 100%)
overflow hidden overflow hidden
_fj() clear both
span span
display block display block
float left
&:nth-child(1) &:nth-child(1)
_wh(.0725rem, .3rem)
margin-left .15rem
_fj()
i
display block
_wh(.0725rem, .0725rem) _wh(.0725rem, .0725rem)
border-radius 100% border-radius 100%
background-color #07E083
margin-left .15rem
&:nth-child(2) &:nth-child(2)
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.14rem, .3rem, #fff,400,) _font(.12rem, .3rem, #fff,400,)
margin-left .06rem
.right_1_down_inner_3_r .right_1_down_inner_3_r
_wh(50%, 100%) _wh(50%, 100%)
line-height .3rem line-height .3rem
@@ -1211,4 +1305,21 @@ header
_wh(100%, calc(100% - 1.42rem)) _wh(100%, calc(100% - 1.42rem))
.right_1_down_inner_3_i .right_1_down_inner_3_i
margin-bottom .03rem margin-bottom .03rem
.color1
background-color #07E083
.color2
background-color #B68845
.swiper_wrap
clear both
_wh(100%, calc(100% - .32rem))
padding .17rem 0 .24rem
overflow hidden
.swiper_wrap_con
_wh(100%, 100%)
.swiper_item
position relative
left 0
float left
_wh(100%, 100%)
_fj(space-around)
</style> </style>

23
src/pages/Setup.vue
View File

@@ -54,7 +54,6 @@
<script> <script>
import DropdownMenu from '@components/DropdownMenu.vue' import DropdownMenu from '@components/DropdownMenu.vue'
import {queryDevice} from '@js/getData2.js'
export default { export default {
name: 'Login', name: 'Login',
components: { components: {
@@ -69,8 +68,8 @@ export default {
setTime: this.$store.getters.setTime, setTime: this.$store.getters.setTime,
fullscreen: false, fullscreen: false,
heightLimit: false, heightLimit: false,
option: [], option: [{value: 1, label: '大屏一'}],
active: '', active: '0',
open: false open: false
} }
}, },
@@ -81,20 +80,6 @@ export default {
document.body.removeAttribute('class', 'login_bg') document.body.removeAttribute('class', 'login_bg')
}, },
methods: { methods: {
async _queryDevice () {
let res = await queryDevice(this.baseUrl)
if (res.code === '1') {
this.toast(res.desc)
this.option = [...res.rows]
if (this.$store.getters.equipId) {
this.option.map((el, i) => {
if (this.$store.getters.equipId === el.value) {
this.active = i + ''
}
})
}
}
},
toggleItem () { toggleItem () {
if (!this.open) { if (!this.open) {
this.open = true this.open = true
@@ -118,9 +103,9 @@ export default {
} }
this.$store.dispatch('setConfig', obj) this.$store.dispatch('setConfig', obj)
if (this.equipId === 1) { if (this.equipId === 1) {
this.$router.push('/taskscreen') this.$router.push('/MonitoringScreen1')
} else { } else {
this.$router.push('/taskscreen') this.$router.push('/MonitoringScreen1')
} }
let element = document.documentElement let element = document.documentElement
if (this.fullscreen) { if (this.fullscreen) {