|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<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 style="position: absolute;top: 62%; left: 16%;color:#FFF">正在生产： <div
|
|
|
style="width: 12px;height: 12px;background-color: #5dfd36;display: inline-block;border-radius: 50%;">
|
|
|
</div> 停机：<div
|
|
|
style="width: 12px;height: 12px;background-color: #ffffff88;display: inline-block;border-radius: 50%;"></div>
|
|
|
注料位置台车：<div style="width: 12px;height: 12px;background-color: #ff0000;display: inline-block;border-radius: 50%;">
|
|
|
</div> 出模位置台车：<div
|
|
|
style="width: 12px;height: 12px;background-color: #FF8000;display: inline-block;border-radius: 50%;"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="scrollTable">
|
|
|
<div style="background-color: #094170">
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
|
|
|
序号
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
|
|
|
型号
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
|
|
|
扫描时间
|
|
|
</div>
|
|
|
</div>
|
|
|
<vue-seamless-scroll :class-option="scrollTableOption" :data="scrollTableData" class="case-item"
|
|
|
style="height: 84%;overflow: hidden;">
|
|
|
<div v-for="(item, index) in scrollTableData" :key="index">
|
|
|
<div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
|
|
|
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
|
|
|
{{ item.value1 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
|
|
|
{{ item.value2 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
|
|
|
{{ item.value3 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</vue-seamless-scroll>
|
|
|
</div>
|
|
|
<div class="chart1">
|
|
|
<Chart ref="chart1"></Chart>
|
|
|
</div>
|
|
|
<div class="chart2">
|
|
|
<Chart ref="chart2"></Chart>
|
|
|
</div>
|
|
|
<div class="chart3">
|
|
|
<Chart ref="chart3"></Chart>
|
|
|
</div>
|
|
|
<div class="chart4">
|
|
|
<Chart ref="chart4"></Chart>
|
|
|
</div>
|
|
|
<div>
|
|
|
<!-- <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>-->
|
|
|
<!-- <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-->
|
|
|
<!-- 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-->
|
|
|
<!-- 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 === 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%">-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 8%">-->
|
|
|
<!-- 合计-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 100%-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 7%">-->
|
|
|
<!-- 100%-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="scrollTableItem" style="font-weight: bold;width: 5%">-->
|
|
|
<!-- 1000-->
|
|
|
<!-- </div>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- </div>-->
|
|
|
</div>
|
|
|
<div class="tableOne">
|
|
|
<div style="height: 9%;color: #fff;text-align: center;background-color: #38a2de">
|
|
|
<div style="width: 33%;display: inline-block">台车号</div>
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
</div>
|
|
|
<div v-for="i in 10"
|
|
|
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#ffffff88' : '#5dfd36')">
|
|
|
<div style="width: 33%;display: inline-block">{{ i }}</div>
|
|
|
<div style="width: 33%;display: inline-block">487JFY</div>
|
|
|
<div style="width: 33%;display: inline-block">15-15</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tableTwo">
|
|
|
<div style="height: 9%;color: #fff;text-align: center;background-color: #38a2de">
|
|
|
<div style="width: 33%;display: inline-block">台车号</div>
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
</div>
|
|
|
<div v-for="i in 10"
|
|
|
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#ff0000' : '#5dfd36')">
|
|
|
<div style="width: 33%;display: inline-block">{{ i }}</div>
|
|
|
<div style="width: 33%;display: inline-block">487JFY</div>
|
|
|
<div style="width: 33%;display: inline-block">15-15</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tableThree">
|
|
|
<div style="height: 9%;color: #fff;text-align: center;background-color: #38a2de">
|
|
|
<div style="width: 33%;display: inline-block">台车号</div>
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
</div>
|
|
|
<div v-for="i in 10"
|
|
|
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#FF8000' : '#5dfd36')">
|
|
|
<div style="width: 33%;display: inline-block">{{ i }}</div>
|
|
|
<div style="width: 33%;display: inline-block">487JFY</div>
|
|
|
<div style="width: 33%;display: inline-block">15-15</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tableFour">
|
|
|
<div style="height: 9%;color: #fff;text-align: center;background-color: #38a2de">
|
|
|
<div style="width: 33%;display: inline-block">台车号</div>
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
</div>
|
|
|
<div v-for="i in 10"
|
|
|
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#ffffff88' : '#5dfd36')">
|
|
|
<div style="width: 33%;display: inline-block">{{ i }}</div>
|
|
|
<div style="width: 33%;display: inline-block">487JFY</div>
|
|
|
<div style="width: 33%;display: inline-block">15-15</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
import Chart from "../../../components/board/Chart";
|
|
|
import * as echarts from 'echarts'
|
|
|
import { getData } from "@/api/board/getData";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
vueSeamlessScroll,
|
|
|
Chart
|
|
|
},
|
|
|
name: "Liner",
|
|
|
data() {
|
|
|
return {
|
|
|
show: 0,
|
|
|
planNum: 1000,
|
|
|
practicalNum: 1000,
|
|
|
differenceValue: 1000,
|
|
|
scrollTableOption: {
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 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: 0,
|
|
|
},
|
|
|
scrollTableData: [],
|
|
|
scrollTableData1: [],
|
|
|
scrollTableData2: [],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
let timeInter = setInterval(() => {
|
|
|
this.show = (this.show + 1) % 4
|
|
|
}, 10 * 1000)
|
|
|
getData().then(e => {
|
|
|
this.scrollTableData = e.table33
|
|
|
this.scrollTableData1 = e.table3
|
|
|
this.scrollTableData2 = e.table31
|
|
|
this.$refs.chart1.setData({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "0",
|
|
|
right: "4%",
|
|
|
bottom: "0",
|
|
|
top: 35,
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
data: e.chart5.y.map(val => val.name),
|
|
|
right: 'center',
|
|
|
top: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
itemWidth: 12,
|
|
|
itemHeight: 10,
|
|
|
// itemGap: 35
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: e.chart5.x,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
// interval: 0,
|
|
|
// rotate: 40,
|
|
|
textStyle: {
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: e.chart5.y[0].name,
|
|
|
type: "bar",
|
|
|
barWidth: "30%",
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#39ffff",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#f5804d",
|
|
|
},
|
|
|
]),
|
|
|
borderRadius: 2,
|
|
|
},
|
|
|
},
|
|
|
data: e.chart5.y[0].data,
|
|
|
},
|
|
|
{
|
|
|
name: e.chart5.y[1].name,
|
|
|
type: "bar",
|
|
|
barWidth: "30%",
|
|
|
barGap: '40%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#47cbfd",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#3e8aff",
|
|
|
},
|
|
|
]),
|
|
|
borderRadius: 2,
|
|
|
},
|
|
|
},
|
|
|
data: e.chart5.y[1].data,
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart2.setData({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "0",
|
|
|
right: "4%",
|
|
|
bottom: 0,
|
|
|
top: 20,
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: e.chart3.x,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
// rotate: 40,
|
|
|
textStyle: {
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: e.chart3.y.name,
|
|
|
type: "bar",
|
|
|
barWidth: "40%",
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#47cbfd",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#3e8aff",
|
|
|
},
|
|
|
]),
|
|
|
borderRadius: 3,
|
|
|
},
|
|
|
},
|
|
|
data: e.chart3.y.data,
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart3.setData({
|
|
|
legend: {
|
|
|
data: e.chart6.y.map(val => val.name),
|
|
|
right: 'center',
|
|
|
top: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
itemWidth: 12,
|
|
|
itemHeight: 10,
|
|
|
// itemGap: 35
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
lineStyle: {
|
|
|
color: {
|
|
|
type: "linear",
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(0, 255, 233,0)",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
|
color: "rgba(255, 255, 255,1)",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(0, 255, 233,0)",
|
|
|
},
|
|
|
],
|
|
|
global: false,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
left: 40,
|
|
|
right: "5%",
|
|
|
bottom: "15%",
|
|
|
// containLabel: true
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
show: false,
|
|
|
type: "category",
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
splitArea: {
|
|
|
// show: true,
|
|
|
color: "#f00",
|
|
|
lineStyle: {
|
|
|
color: "#f00",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
boundaryGap: false,
|
|
|
data: e.chart6.x,
|
|
|
},
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 18,
|
|
|
max: 24,
|
|
|
splitNumber: 4,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: e.chart6.y[0].name,
|
|
|
type: "line",
|
|
|
showAllSymbol: true,
|
|
|
symbol: "circle",
|
|
|
symbolSize: 5,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(108,80,243,0.3)",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(108,80,243,0)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(108,80,243, 0.9)",
|
|
|
shadowBlur: 20,
|
|
|
},
|
|
|
},
|
|
|
data: e.chart6.y[0].data,
|
|
|
},
|
|
|
{
|
|
|
name: e.chart6.y[1].name,
|
|
|
type: "line",
|
|
|
// smooth: true, //是否平滑
|
|
|
showAllSymbol: true,
|
|
|
// symbol: 'image://./static/images/guang-circle.png',
|
|
|
symbol: "circle",
|
|
|
symbolSize: 5,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#668e84",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#668e84",
|
|
|
},
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
color: "#00ca95",
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(0,202,149,0.3)",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(0,202,149,0)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(0,202,149, 0.9)",
|
|
|
shadowBlur: 20,
|
|
|
},
|
|
|
},
|
|
|
data: e.chart6.y[1].data,
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart4.setData({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "0",
|
|
|
right: "4%",
|
|
|
bottom: "0",
|
|
|
top: "10%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: e.chart3.x,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
// interval: 0,
|
|
|
// rotate: 40,
|
|
|
textStyle: {
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: e.chart3.y.name,
|
|
|
type: "bar",
|
|
|
barWidth: "33%",
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#39ffff",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#f5804d",
|
|
|
},
|
|
|
]),
|
|
|
borderRadius: 2,
|
|
|
},
|
|
|
},
|
|
|
data: e.chart3.y.data,
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
methods: {}
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.app-container {
|
|
|
background-image: url("../../../assets/board/foaming.jpg");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.headTitle {
|
|
|
position: absolute;
|
|
|
top: 5%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -100%);
|
|
|
font-size: 1.5vw;
|
|
|
color: #d6eaed;
|
|
|
letter-spacing: 10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.topNum {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
color: #5db9e8;
|
|
|
top: 17.1%;
|
|
|
letter-spacing: 2vw;
|
|
|
}
|
|
|
|
|
|
.planNum {
|
|
|
font-size: 1.7vw;
|
|
|
left: 36.5%;
|
|
|
}
|
|
|
|
|
|
.practicalNum {
|
|
|
left: 50.9%;
|
|
|
font-size: 1.7vw;
|
|
|
color: #97febd;
|
|
|
}
|
|
|
|
|
|
.differenceValue {
|
|
|
font-size: 1.7vw;
|
|
|
left: 65.4%;
|
|
|
color: #b15462;
|
|
|
}
|
|
|
|
|
|
.scrollTable {
|
|
|
position: absolute;
|
|
|
top: 15%;
|
|
|
left: 4%;
|
|
|
width: 23%;
|
|
|
height: 20%;
|
|
|
}
|
|
|
|
|
|
.scrollTableItem {
|
|
|
color: rgb(185, 186, 192);
|
|
|
margin: auto 0px;
|
|
|
padding: 0 0;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
width: 16.6%;
|
|
|
}
|
|
|
|
|
|
.chart1 {
|
|
|
position: absolute;
|
|
|
top: 14.5%;
|
|
|
left: 73%;
|
|
|
width: 23.5%;
|
|
|
height: 21%;
|
|
|
}
|
|
|
|
|
|
.chart2 {
|
|
|
position: absolute;
|
|
|
top: 43%;
|
|
|
left: 3.6%;
|
|
|
width: 23.3%;
|
|
|
height: 15.5%;
|
|
|
}
|
|
|
|
|
|
.chart3 {
|
|
|
position: absolute;
|
|
|
top: 42%;
|
|
|
left: 73%;
|
|
|
width: 23.5%;
|
|
|
height: 18.5%;
|
|
|
}
|
|
|
|
|
|
.chart4 {
|
|
|
position: absolute;
|
|
|
top: 66.2%;
|
|
|
left: 73%;
|
|
|
width: 23.5%;
|
|
|
height: 28.5%;
|
|
|
}
|
|
|
|
|
|
.scrollTable1 {
|
|
|
position: absolute;
|
|
|
top: 66%;
|
|
|
left: 3.5%;
|
|
|
width: 68%;
|
|
|
height: 25%;
|
|
|
}
|
|
|
|
|
|
.total {
|
|
|
position: absolute;
|
|
|
top: 91%;
|
|
|
left: 3.5%;
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
.tableOne {
|
|
|
position: absolute;
|
|
|
top: 66%;
|
|
|
left: 3.5%;
|
|
|
width: 17%;
|
|
|
height: 29%;
|
|
|
}
|
|
|
|
|
|
.tableTwo {
|
|
|
position: absolute;
|
|
|
top: 66%;
|
|
|
left: 20.7%;
|
|
|
width: 16.8%;
|
|
|
height: 29%;
|
|
|
}
|
|
|
|
|
|
.tableThree {
|
|
|
position: absolute;
|
|
|
top: 66%;
|
|
|
left: 37.7%;
|
|
|
width: 16.8%;
|
|
|
height: 29%;
|
|
|
}
|
|
|
|
|
|
.tableFour {
|
|
|
position: absolute;
|
|
|
top: 66%;
|
|
|
left: 54.7%;
|
|
|
width: 16.8%;
|
|
|
height: 29%;
|
|
|
}
|
|
|
</style>
|