|
|
|
@ -1,26 +1,23 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<div class="headTitle">门体发泡可视化平台</div>
|
|
|
|
|
<div class="headTitle">箱、门匹配生产数据监控平台</div>
|
|
|
|
|
<div class="topNum planNum">{{ planNum }}</div>
|
|
|
|
|
<div class="topNum practicalNum">{{ practicalNum }}</div>
|
|
|
|
|
<div class="topNum differenceValue">{{ differenceValue }}</div>
|
|
|
|
|
|
|
|
|
|
<div class="supplementInfo">注射压力标准范围:10.0-12.0Mpa A、B组份枪头压力差<1Mpa</div>
|
|
|
|
|
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
|
|
|
|
|
|
|
|
|
|
<div class="scrollTable">
|
|
|
|
|
<div style="background-color: #094170">
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
|
|
型号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
|
|
计划数
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
|
|
完成数
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
|
|
|
|
|
序号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
|
|
差异数
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
|
|
|
|
|
型号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
|
|
执行进度
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
|
|
|
|
|
扫描时间
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<vue-seamless-scroll
|
|
|
|
@ -32,29 +29,20 @@
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in scrollTableData"
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
|
|
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
|
|
|
|
|
{{ item.value1 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
|
|
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
|
|
|
|
|
{{ item.value2 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
|
|
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
|
|
|
|
|
{{ item.value3 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
|
|
{{ item.value4 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
|
|
{{ item.value5 }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
@ -71,8 +59,9 @@
|
|
|
|
|
<div class="chart4">
|
|
|
|
|
<Chart ref="chart4"></Chart>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTable1">
|
|
|
|
|
<div style="background-color: #094170">
|
|
|
|
|
<transition name="table1">
|
|
|
|
|
<div class="scrollTable1" v-if="show === 0">
|
|
|
|
|
<div style="background-color: #094170; height: calc(25vh/11)">
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
工位
|
|
|
|
|
</div>
|
|
|
|
@ -131,16 +120,324 @@
|
|
|
|
|
18:30
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<vue-seamless-scroll
|
|
|
|
|
:class-option="scrollTableOption"
|
|
|
|
|
:data="scrollTableData1"
|
|
|
|
|
class="case-item"
|
|
|
|
|
style="height: 84%;overflow: hidden;"
|
|
|
|
|
<!-- <vue-seamless-scroll-->
|
|
|
|
|
<!-- :class-option="scrollTableOption"-->
|
|
|
|
|
<!-- :data="scrollTableData1"-->
|
|
|
|
|
<!-- class="case-item"-->
|
|
|
|
|
<!-- style="height: 84%;overflow: hidden;"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in scrollTableData1"
|
|
|
|
|
:key="index"
|
|
|
|
|
style="height: calc(25vh/11)"
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value1 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 8%">
|
|
|
|
|
{{ item.value2 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value3 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value4 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value5 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value6 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 7%">
|
|
|
|
|
{{ item.value7 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value8 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value9 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value10 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value11 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value12 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value13 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value14 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value15 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value16 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value17 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value18 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value19 }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </vue-seamless-scroll>-->
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<transition name="table1">
|
|
|
|
|
<div class="scrollTable1" v-if="show === 1">
|
|
|
|
|
<div style="background-color: #094170;height: calc(25vh/11)">
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
工位
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
|
|
|
|
|
型号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
状态
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
目标
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
计划
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
累计
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
|
|
|
|
|
达成率
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
7:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
8:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
9:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
10:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
11:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
12:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
13:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
14:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
15:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
16:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
17:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
18:30
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <vue-seamless-scroll-->
|
|
|
|
|
<!-- :class-option="scrollTableOption"-->
|
|
|
|
|
<!-- :data="scrollTableData1"-->
|
|
|
|
|
<!-- class="case-item"-->
|
|
|
|
|
<!-- style="height: 84%;overflow: hidden;"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in scrollTableData2"
|
|
|
|
|
:key="index"
|
|
|
|
|
style="height: calc(25vh/11)"
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value1 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 8%">
|
|
|
|
|
{{ item.value2 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value3 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value4 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value5 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value6 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 7%">
|
|
|
|
|
{{ item.value7 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value8 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value9 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value10 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value11 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value12 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value13 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value14 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value15 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value16 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value17 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value18 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value19 }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </vue-seamless-scroll>-->
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<transition name="table1">
|
|
|
|
|
<div class="scrollTable1" v-if="show === 2">
|
|
|
|
|
<div style="background-color: #094170; height: calc(25vh/11)">
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
工位
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
|
|
|
|
|
型号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
状态
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
目标
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
计划
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
累计
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
|
|
|
|
|
达成率
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
7:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
8:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
9:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
10:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
11:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
12:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
13:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
14:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
15:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
16:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
17:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
18:30
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <vue-seamless-scroll-->
|
|
|
|
|
<!-- :class-option="scrollTableOption"-->
|
|
|
|
|
<!-- :data="scrollTableData1"-->
|
|
|
|
|
<!-- class="case-item"-->
|
|
|
|
|
<!-- style="height: 84%;overflow: hidden;"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in scrollTableData1"
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
|
|
style="height: calc(25vh/11)"
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
|
|
<div
|
|
|
|
@ -221,8 +518,163 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
<!-- </vue-seamless-scroll>-->
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<transition name="table1">
|
|
|
|
|
<div class="scrollTable1" v-if="show === 3">
|
|
|
|
|
<div style="background-color: #094170;height: calc(25vh/11)">
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
工位
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
|
|
|
|
|
型号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
状态
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
目标
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
计划
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
累计
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
|
|
|
|
|
达成率
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
7:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
8:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
9:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
10:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
11:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
12:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
13:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
14:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
15:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
16:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
17:30
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
18:30
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <vue-seamless-scroll-->
|
|
|
|
|
<!-- :class-option="scrollTableOption"-->
|
|
|
|
|
<!-- :data="scrollTableData1"-->
|
|
|
|
|
<!-- class="case-item"-->
|
|
|
|
|
<!-- style="height: 84%;overflow: hidden;"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in scrollTableData2"
|
|
|
|
|
:key="index"
|
|
|
|
|
style="height: calc(25vh/11)"
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value1 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 8%">
|
|
|
|
|
{{ item.value2 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value3 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value4 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value5 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value6 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 7%">
|
|
|
|
|
{{ item.value7 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value8 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value9 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value10 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value11 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value12 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value13 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value14 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value15 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value16 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value17 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value18 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
|
|
{{ item.value19 }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </vue-seamless-scroll>-->
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<div class="total">
|
|
|
|
|
<div style="background-color: #094170">
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
@ -300,6 +752,7 @@ export default {
|
|
|
|
|
name: "Liner",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
show: 0,
|
|
|
|
|
planNum: 1000,
|
|
|
|
|
practicalNum: 1000,
|
|
|
|
|
differenceValue: 1000,
|
|
|
|
@ -315,12 +768,17 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
scrollTableData: [],
|
|
|
|
|
scrollTableData1: [],
|
|
|
|
|
scrollTableData2: [],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
let timeInter = setInterval(() => {
|
|
|
|
|
this.show = (this.show + 1) % 4
|
|
|
|
|
}, 10 * 1000)
|
|
|
|
|
getData().then(e => {
|
|
|
|
|
this.scrollTableData = e.table2
|
|
|
|
|
this.scrollTableData = e.table33
|
|
|
|
|
this.scrollTableData1 = e.table3
|
|
|
|
|
this.scrollTableData2 = e.table31
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
@ -563,6 +1021,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
show: false,
|
|
|
|
|
type: "category",
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
@ -588,8 +1047,8 @@ export default {
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
min: 0,
|
|
|
|
|
// max: 140,
|
|
|
|
|
min: 18,
|
|
|
|
|
max: 24,
|
|
|
|
|
splitNumber: 4,
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
@ -616,9 +1075,7 @@ export default {
|
|
|
|
|
{
|
|
|
|
|
name: e.chart6.y[0].name,
|
|
|
|
|
type: "line",
|
|
|
|
|
// smooth: true, //是否平滑
|
|
|
|
|
showAllSymbol: true,
|
|
|
|
|
// symbol: 'image://./static/images/guang-circle.png',
|
|
|
|
|
symbol: "circle",
|
|
|
|
|
symbolSize: 5,
|
|
|
|
|
lineStyle: {
|
|
|
|
@ -729,7 +1186,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: e.chart7.x,
|
|
|
|
|
data: e.chart3.x,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
@ -759,7 +1216,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.chart7.y.name,
|
|
|
|
|
name: e.chart3.y.name,
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "33%",
|
|
|
|
|
label: {
|
|
|
|
@ -784,7 +1241,7 @@ export default {
|
|
|
|
|
borderRadius: 2,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.chart7.y.data,
|
|
|
|
|
data: e.chart3.y.data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
@ -852,7 +1309,7 @@ export default {
|
|
|
|
|
.scrollTableItem {
|
|
|
|
|
color: rgb(185, 186, 192);
|
|
|
|
|
margin: auto 0px;
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
padding: 0 0;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
@ -908,4 +1365,39 @@ export default {
|
|
|
|
|
width: 68%;
|
|
|
|
|
height: 3%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table1-enter-active {
|
|
|
|
|
animation: table-in .5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table1-leave-active {
|
|
|
|
|
animation: table-in .5s reverse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes table-in {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: scale(0);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supplementInfo {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 35.5%;
|
|
|
|
|
left: 73.6%;
|
|
|
|
|
font-size: 0.7vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supplementInfo1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 59%;
|
|
|
|
|
left: 73.6%;
|
|
|
|
|
font-size: 0.7vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|