|
|
<template>
|
|
|
<div class="bg">
|
|
|
<div class="title">白坯车间数字应用大屏</div>
|
|
|
<div class="modelTitle" style=" top: 15.2%;left: 3%;">烘房状态</div>
|
|
|
<!-- <div class="modelTitle" style="top:15.2%;left:32%">设备运行数据</div>-->
|
|
|
<div class="modelTitle" style="top:15.2%;left:32%">烘房耗电量</div>
|
|
|
<div class="modelTitle" style="top:15.2%;left:71%">烘房白坯质量统计</div>
|
|
|
<div class="modelTitle" style="top:65%;left:32%">近7天产量</div>
|
|
|
<!-- <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>-->
|
|
|
<div class="modelTitle" style="top:65%;left:71%">计划达成率</div>
|
|
|
<!-- <div class="title1" style="top:24%;left:34%">成型机产量：</div>-->
|
|
|
<!-- <div class="title1" style="top:24%;left:52.5%">烘房产量：</div>-->
|
|
|
<!-- <div class="title1" style="top:45%;left:34%">烘房耗电量：</div>-->
|
|
|
<!-- <div class="title1" style="top:45%;left:52.5%">AGV开动数量：</div>-->
|
|
|
<!-- <div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>-->
|
|
|
<!-- <div class="unit1" style="top: 31.3%;left: 63.5%">车</div>-->
|
|
|
<!-- <div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>-->
|
|
|
<!-- <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>-->
|
|
|
<!-- <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
|
|
|
<!-- <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
|
|
|
<!-- <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>-->
|
|
|
<!-- <div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>-->
|
|
|
<div class="title2" style="top: 73.5%;left: 86.8%;">计划生产数量：</div>
|
|
|
<div class="title2" style="top: 85.3%;left: 86.8%;">实际生产数量：</div>
|
|
|
<div class="unit2" style="top: 76.5%;left: 95%;">车</div>
|
|
|
<div class="unit2" style="top: 88.5%;left: 95%;">车</div>
|
|
|
<div class="num2" style="top: 76.8%;left: 90.7%;color:#12fdae">{{ proData.sumChe }}</div>
|
|
|
<div class="num2" style="top: 88.6%;left: 90.7%;color:#48b5fd">{{ proData.totalRecordCount }}</div>
|
|
|
<div class="num3" style="top: 80.3%;left: 78.6%;">{{ percent }}</div>
|
|
|
<div class="title3" style="top: 91%;left: 78.8%;">计划达成率</div>
|
|
|
|
|
|
<div class="table1">
|
|
|
<div style="background-color: #0d61aa;height: 5%;line-height: calc(3.9vh - 8px);color:#fbfafd">
|
|
|
<div class="scrollTable" style="font-weight: bold;">
|
|
|
烘房
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;">
|
|
|
温度
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;">
|
|
|
湿度
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;">
|
|
|
在生产
|
|
|
</div>
|
|
|
<div class="scrollTable" style="font-weight: bold;">
|
|
|
单车耗能
|
|
|
</div>
|
|
|
</div>
|
|
|
<vue-seamless-scroll
|
|
|
:class-option="{...chart1TableOption,limitMoveNum:10}"
|
|
|
:data="table1Data"
|
|
|
style="height: 94%;overflow: hidden;margin-top: 1%"
|
|
|
>
|
|
|
<div
|
|
|
v-for="(item, index) in table1Data"
|
|
|
:key="index"
|
|
|
class="case-item"
|
|
|
|
|
|
>
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
<div
|
|
|
class="scrollTable" style="color:#49b2fc">
|
|
|
{{ item.equipment_code }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTable" style="color:#49b2fc">
|
|
|
{{ item.temperature }}℃
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTable" style="color:#49b2fc">
|
|
|
{{ item.humidity }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTable" style="color:#49b2fc">
|
|
|
{{ item.Intheoven }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTable" style="color:#49b2fc">
|
|
|
{{ (parseFloat(item.expend / item.yield) || 0).toFixed(2) }}KWh
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</vue-seamless-scroll>
|
|
|
</div>
|
|
|
<Chart ref="chart1" class="chart1"></Chart>
|
|
|
<Chart ref="chart2" class="chart2"></Chart>
|
|
|
<Chart ref="chart3" class="chart3"></Chart>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
|
|
|
import Chart from "@/components/Charts/Chart";
|
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
import {
|
|
|
agvdata,
|
|
|
avgdata,
|
|
|
dryRoomDataCarousel,
|
|
|
EnergyExpend, getHfChartDatas,
|
|
|
getHourProductionList, getHourProductionLists,
|
|
|
PlanAchievementRate
|
|
|
} from "../../api/board/cs3";
|
|
|
import {parseTime} from "../../utils/openPlatform";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
Chart,
|
|
|
vueSeamlessScroll,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
chart1TableOption: {
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 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,
|
|
|
},
|
|
|
table1Data: [],
|
|
|
CData: [],
|
|
|
HData: [],
|
|
|
expend: 0,
|
|
|
agvData: [],
|
|
|
proData: {},
|
|
|
percent: ''
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getData()
|
|
|
setInterval(() => {
|
|
|
this.getData()
|
|
|
}, 5 * 1000)
|
|
|
},
|
|
|
methods: {
|
|
|
getData() {
|
|
|
dryRoomDataCarousel().then(e => {
|
|
|
this.table1Data = e.data.dryingroomList.filter(v => parseFloat(v.expend / v.yield)) || []
|
|
|
})
|
|
|
EnergyExpend().then(e => {
|
|
|
this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
|
|
|
|
|
|
let option2 = {
|
|
|
grid: {
|
|
|
top: '15%',
|
|
|
bottom: '10%',
|
|
|
// left: '5%',
|
|
|
right: '3%'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
label: {
|
|
|
show: true
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
right: 0,
|
|
|
textStyle: {
|
|
|
color: '#eee'
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: e.map(v => parseFloat(v.monitorName.split(' - ')?.[1]?.split('(')?.[0]) + "#"),
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#fff' //X轴文字颜色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
name: '单位：KWh',
|
|
|
nameTextStyle: {
|
|
|
color: '#fff'
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
formatter: "{c}",
|
|
|
color: "#fff"
|
|
|
},
|
|
|
name: '耗电量',
|
|
|
type: 'bar',
|
|
|
smooth: true, //平滑曲线显示
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "emptyCircle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
// itemStyle: {
|
|
|
// //折线拐点标志的样式
|
|
|
// color: "#058cff",
|
|
|
// },
|
|
|
// lineStyle: {
|
|
|
// color: "#058cff",
|
|
|
// },
|
|
|
// areaStyle: {
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
// },
|
|
|
data: e.map(v => parseFloat(v.expend)),
|
|
|
},
|
|
|
]
|
|
|
};
|
|
|
this.$refs.chart3.setData(option2)
|
|
|
})
|
|
|
agvdata().then(e => {
|
|
|
this.agvData = e.Data.filter(v => v.State === 2)
|
|
|
})
|
|
|
PlanAchievementRate().then(e => {
|
|
|
this.proData = e.data
|
|
|
this.percent = e.msg
|
|
|
})
|
|
|
let time = parseTime(new Date(), '{h}-{i}').split('-')
|
|
|
let i = parseFloat(time[0]) || 0
|
|
|
let s = parseFloat(time [1]) || 0
|
|
|
let createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
|
|
|
let createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
|
|
|
if (parseFloat(`${i}.${s}`) > 7.3 && parseFloat(`${i}.${s}`) < 19.3) {
|
|
|
createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
|
|
|
createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
|
|
|
} else if (parseFloat(`${i}.${s}`) < 7.3) {
|
|
|
createTimeStart = `${parseTime(new Date(), '{y}-{m}-')}${parseFloat(parseTime(new Date(), '${d}')) - 1} 19:30:00`
|
|
|
createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
|
|
|
} else if (parseFloat(`${i}.${s}`) > 19.3) {
|
|
|
createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
|
|
|
createTimeEnd = `${parseTime(new Date(), '{y}-{m}-')}${parseFloat(parseTime(new Date(), '${d}')) + 1} 07:30:00`
|
|
|
} else {
|
|
|
createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
|
|
|
createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
|
|
|
}
|
|
|
|
|
|
getHourProductionList({
|
|
|
productDateStart: createTimeStart,
|
|
|
productDateEnd: createTimeEnd
|
|
|
}).then(e => {
|
|
|
this.CData = e.filter(v => v.equName.includes('成型机'))
|
|
|
this.HData = e.filter(v => v.equName.includes('烘房'))
|
|
|
})
|
|
|
|
|
|
getHfChartDatas({
|
|
|
createTimeStart: createTimeStart,
|
|
|
createTimeEnd: createTimeEnd,
|
|
|
chartType: 'cp'
|
|
|
}).then(vv => {
|
|
|
let e = vv.checkList
|
|
|
console.log(e)
|
|
|
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: '15%',
|
|
|
bottom: '10%',
|
|
|
left: '6%',
|
|
|
right: '6%'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
label: {
|
|
|
show: true
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
right: 0,
|
|
|
textStyle: {
|
|
|
color: '#eee'
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: e.map(v => v.machineName),
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval:0,
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#fff' //X轴文字颜色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
name: '合格数',
|
|
|
nameTextStyle: {
|
|
|
color: '#fff'
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
type: 'value',
|
|
|
name: '合格率',
|
|
|
nameTextStyle: {
|
|
|
color: '#fff'
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
formatter: "{c}%",
|
|
|
color: "#fff"
|
|
|
},
|
|
|
name: '合格率',
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1,
|
|
|
smooth: true, //平滑曲线显示
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "emptyCircle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
// itemStyle: {
|
|
|
// //折线拐点标志的样式
|
|
|
// color: "#058cff",
|
|
|
// },
|
|
|
// lineStyle: {
|
|
|
// color: "#058cff",
|
|
|
// },
|
|
|
// areaStyle: {
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
// },
|
|
|
data: e.map(v => ((parseFloat(v.okQuality) / parseFloat(v.quality)) * 100).toFixed(2)),
|
|
|
},
|
|
|
{
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
formatter: "{c}",
|
|
|
color: "#fff"
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
y: 1,
|
|
|
x2: 0,
|
|
|
y2: 0,
|
|
|
colorStops: [{
|
|
|
offset: 0, color: '#1e60f2' // 0% 处的颜色
|
|
|
}, {
|
|
|
offset: 1, color: '#00b9ff' // 100% 处的颜色
|
|
|
}],
|
|
|
global: false // 缺省为 false
|
|
|
}
|
|
|
},
|
|
|
name: '合格数',
|
|
|
type: 'bar',
|
|
|
smooth: true, //平滑曲线显示
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "emptyCircle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
// itemStyle: {
|
|
|
// //折线拐点标志的样式
|
|
|
// color: "#058cff",
|
|
|
// },
|
|
|
// lineStyle: {
|
|
|
// color: "#058cff",
|
|
|
// },
|
|
|
// areaStyle: {
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
// },
|
|
|
data: e.map(v => parseFloat(v.quality)),
|
|
|
},
|
|
|
]
|
|
|
};
|
|
|
// let option = {
|
|
|
// tooltip: {
|
|
|
// trigger: 'axis',
|
|
|
// axisPointer: {
|
|
|
// // Use axis to trigger tooltip
|
|
|
// type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
|
// }
|
|
|
// },
|
|
|
// legend: {
|
|
|
// textStyle: {
|
|
|
// color: '#eee'
|
|
|
// }
|
|
|
// },
|
|
|
// grid: {
|
|
|
// left: '3%',
|
|
|
// right: '4%',
|
|
|
// bottom: '3%',
|
|
|
// containLabel: true
|
|
|
// },
|
|
|
// xAxis: {
|
|
|
// type: 'value'
|
|
|
// },
|
|
|
// yAxis: {
|
|
|
// type: 'category',
|
|
|
// axisLabel: {
|
|
|
// color: '#ccc'
|
|
|
// },
|
|
|
// data: e.checkList.map(v => v.machineName),
|
|
|
// // data: e.checkList.map((v,k) => '产品'+k),
|
|
|
// },
|
|
|
// series: [
|
|
|
// {
|
|
|
// name: '合格数量',
|
|
|
// type: 'bar',
|
|
|
// stack: 'total',
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'insideRight',
|
|
|
// formatter: "{c}车",
|
|
|
// color: "#000"
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
// focus: 'series'
|
|
|
// },
|
|
|
// itemStyle: {
|
|
|
// color: {
|
|
|
// type: 'linear',
|
|
|
// x: 0,
|
|
|
// y: 0,
|
|
|
// x2: 1,
|
|
|
// y2: 0,
|
|
|
// colorStops: [{
|
|
|
// offset: 0, color: '#1e60f2' // 0% 处的颜色
|
|
|
// }, {
|
|
|
// offset: 1, color: '#00b9ff' // 100% 处的颜色
|
|
|
// }],
|
|
|
// global: false // 缺省为 false
|
|
|
// }
|
|
|
// },
|
|
|
// data: e.checkList.map(v => parseFloat(v.quality))
|
|
|
// },
|
|
|
// {
|
|
|
// name: '不合格数量',
|
|
|
// type: 'bar',
|
|
|
// stack: 'total',
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: 'right'
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
// focus: 'series'
|
|
|
// },
|
|
|
// data: e.checkList.map(v => 0)
|
|
|
// },
|
|
|
// ]
|
|
|
// };
|
|
|
this.$refs.chart1.setData(option)
|
|
|
})
|
|
|
|
|
|
getHourProductionLists().then(e => {
|
|
|
let option1 = {
|
|
|
grid: {
|
|
|
top: '15%',
|
|
|
bottom: '10%',
|
|
|
// left: '5%',
|
|
|
right: '3%'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
label: {
|
|
|
show: true
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
right: 0,
|
|
|
textStyle: {
|
|
|
color: '#eee'
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: e.map(v => v.pdate),
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#fff' //X轴文字颜色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
name: '单位：车',
|
|
|
nameTextStyle: {
|
|
|
color: '#fff'
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
formatter: "{c}",
|
|
|
color: "#fff"
|
|
|
},
|
|
|
name: '产量',
|
|
|
type: 'line',
|
|
|
smooth: true, //平滑曲线显示
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "emptyCircle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
// itemStyle: {
|
|
|
// //折线拐点标志的样式
|
|
|
// color: "#058cff",
|
|
|
// },
|
|
|
// lineStyle: {
|
|
|
// color: "#058cff",
|
|
|
// },
|
|
|
// areaStyle: {
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
// },
|
|
|
data: e.map(v => parseFloat(v.quantity)),
|
|
|
},
|
|
|
]
|
|
|
};
|
|
|
this.$refs.chart2.setData(option1)
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
.bg {
|
|
|
background-image: url("~@/assets/board/cs3/bg.jpg");
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
top: 3%;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
font-size: 2vw;
|
|
|
color: #fff;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.title1 {
|
|
|
position: absolute;
|
|
|
font-size: 1.2vw;
|
|
|
color: #fff;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.title2 {
|
|
|
position: absolute;
|
|
|
font-size: 0.7vw;
|
|
|
color: #fff;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.title3 {
|
|
|
position: absolute;
|
|
|
font-size: 1.2vw;
|
|
|
color: #0394fc;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.unit1 {
|
|
|
position: absolute;
|
|
|
font-size: 0.8vw;
|
|
|
color: #eee;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.unit2 {
|
|
|
position: absolute;
|
|
|
font-size: 0.8vw;
|
|
|
color: #eee;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.num1 {
|
|
|
position: absolute;
|
|
|
font-size: 1.3vw;
|
|
|
color: #4ab4fd;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.num2 {
|
|
|
position: absolute;
|
|
|
font-size: 1.3vw;
|
|
|
color: #4ab4fd;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.num3 {
|
|
|
position: absolute;
|
|
|
font-size: 2vw;
|
|
|
color: #fff;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.modelTitle {
|
|
|
position: absolute;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.scrollTable {
|
|
|
margin: auto 0px;
|
|
|
padding: 4px 0;
|
|
|
white-space: nowrap;
|
|
|
//overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
width: 20%;
|
|
|
}
|
|
|
|
|
|
.table1 {
|
|
|
position: absolute;
|
|
|
top: 18.5%;
|
|
|
left: 3.2%;
|
|
|
width: 25.4%;
|
|
|
height: 78%;
|
|
|
}
|
|
|
|
|
|
.chart1 {
|
|
|
position: absolute;
|
|
|
width: 27.4%;
|
|
|
height: 41.7%;
|
|
|
top: 18%;
|
|
|
left: 70.4%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.chart2 {
|
|
|
position: absolute;
|
|
|
width: 37.4%;
|
|
|
height: 28.5%;
|
|
|
top: 67.6%;
|
|
|
left: 31.3%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.chart3 {
|
|
|
position: absolute;
|
|
|
width: 37.4%;
|
|
|
height: 42.5%;
|
|
|
top: 17.6%;
|
|
|
left: 31.3%;
|
|
|
}
|
|
|
|
|
|
.case-item {
|
|
|
border: 2px solid #0c61ad;
|
|
|
border-radius: 2px;
|
|
|
margin: 8px 0 0 0;
|
|
|
color: #0c61ad;
|
|
|
font-size: 0.9vw;
|
|
|
line-height: 1.5vw;
|
|
|
background-color: #134781;
|
|
|
}
|
|
|
</style>
|