|
|
|
|
@ -1,20 +1,165 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="fangyi">
|
|
|
|
|
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">防疫安全</div>
|
|
|
|
|
<div class="fytb" id="fytb"></div>
|
|
|
|
|
<div class="bottomBtns"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import "echarts-gl";
|
|
|
|
|
import { epidemicTrend } from '@/api/companyCanban'
|
|
|
|
|
export default {
|
|
|
|
|
props: ['companyId'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
|
|
companyID: this.companyId,
|
|
|
|
|
fangyiList: {},
|
|
|
|
|
dateList: [],
|
|
|
|
|
jingneiList: [],
|
|
|
|
|
jingwaiList: [],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
console.log(this.companyID, 'this.companyID');
|
|
|
|
|
epidemicTrend({ companyId: this.companyID }).then(res => {
|
|
|
|
|
this.fangyiList = res.data
|
|
|
|
|
this.initfytb()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initfytb() {
|
|
|
|
|
let myChart = echarts.init(document.getElementById("fytb"));
|
|
|
|
|
const dateList = this.fangyiList.list_12.map(item => {
|
|
|
|
|
return item.statisticsDate
|
|
|
|
|
})
|
|
|
|
|
const jingnwaiList = this.fangyiList.list_12.map(item => {
|
|
|
|
|
return item.numValue
|
|
|
|
|
})
|
|
|
|
|
const jingnneiList = this.fangyiList.list_13.map(item => {
|
|
|
|
|
return item.numValue
|
|
|
|
|
})
|
|
|
|
|
const option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
top: "5%",
|
|
|
|
|
right: "5%",
|
|
|
|
|
bottom: "15%",
|
|
|
|
|
left: "15%",
|
|
|
|
|
},
|
|
|
|
|
legend: [{
|
|
|
|
|
data: ['这是一个小标题'],
|
|
|
|
|
top: '5%',
|
|
|
|
|
width: 100,
|
|
|
|
|
selectedMode: false,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.7)'
|
|
|
|
|
},
|
|
|
|
|
}, {
|
|
|
|
|
top: '5%',
|
|
|
|
|
right: 'center',
|
|
|
|
|
width: 200,
|
|
|
|
|
data: ['境外', '境内'],
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.7)'
|
|
|
|
|
},
|
|
|
|
|
},],
|
|
|
|
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
show: true,
|
|
|
|
|
minInterval: 1,
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true, // 是否显示刻度标签
|
|
|
|
|
color: "#D0DEEE", // 刻度标签文字的颜色
|
|
|
|
|
},
|
|
|
|
|
minorTick: { show: false },
|
|
|
|
|
data: dateList,
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
show: true,
|
|
|
|
|
minInterval: 1,
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
minorTick: { show: false },
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true, // 是否显示刻度标签
|
|
|
|
|
color: "#FFF", // 刻度标签文字的颜色
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "境外",
|
|
|
|
|
type: "line",
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
stack: "Total",
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: "series",
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "rgb(128, 255, 165)",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "rgb(1, 191, 236)",
|
|
|
|
|
},
|
|
|
|
|
]),
|
|
|
|
|
},
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#00d2c4",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: jingnwaiList,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "境内",
|
|
|
|
|
type: "line",
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
stack: "Total",
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: "series",
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "rgb(255, 191, 0)",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "rgb(224, 62, 76)",
|
|
|
|
|
},
|
|
|
|
|
]),
|
|
|
|
|
},
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#FFCB6A",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: jingnneiList,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
@ -47,9 +192,18 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fytb {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 93px);
|
|
|
|
|
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottomBtns {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
