2023-09-04 17:24:42 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="main_box">
|
|
|
|
|
|
<div class="home_left">
|
|
|
|
|
|
<!-- 各机构入住率 -->
|
|
|
|
|
|
<div class="inner_box">
|
|
|
|
|
|
<div class="inner_header">
|
|
|
|
|
|
<div class="header_left"></div>
|
|
|
|
|
|
<div class="header_icon">
|
|
|
|
|
|
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
|
|
|
|
|
|
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="header_title">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<span>各机构入住率TOP5</span>
|
|
|
|
|
|
<span class="little_font">（%）</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="left-top1"></div>
|
|
|
|
|
|
<div class="left-top2"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<InnerBox :echartObj="echartObj1" header_title="本年每月用餐类型统计" little_font="(单)"/>
|
|
|
|
|
|
<InnerBox :echartObj="echartObj2" header_title="菜品订单量TOP10" little_font="(单)"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="home_center" style="display: block">
|
2023-09-07 10:41:54 +08:00
|
|
|
|
<dv-border-box-8 :color="['#053D7E', '#1E6FEA']" style="width: 100%;height: 32%">
|
|
|
|
|
|
<div class="inner_box" style="width: 100%;height:100%">
|
2023-09-04 17:24:42 +08:00
|
|
|
|
<div class="inner-header"></div>
|
|
|
|
|
|
<div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
|
|
|
|
|
|
<div class="header-left">
|
|
|
|
|
|
<div class="header-left-title"></div>
|
|
|
|
|
|
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj3" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="header-right">
|
|
|
|
|
|
<div class="header-right-title"></div>
|
|
|
|
|
|
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj4" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-09-07 10:41:54 +08:00
|
|
|
|
</dv-border-box-8>
|
|
|
|
|
|
<dv-border-box-8 :color="['#00D0FF', '#48E5E5']" style="width: 100%;height: 32%">
|
|
|
|
|
|
<div class="inner_box" style="width: 100%;height:100%">
|
2023-09-04 17:24:42 +08:00
|
|
|
|
<div class="inner-center"></div>
|
|
|
|
|
|
<div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
|
|
|
|
|
|
<div class="center-left">
|
|
|
|
|
|
<div class="center-left-title"></div>
|
|
|
|
|
|
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj5" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="center-right">
|
|
|
|
|
|
<div class="center-right-title"></div>
|
|
|
|
|
|
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj6" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-09-07 10:41:54 +08:00
|
|
|
|
</dv-border-box-8>
|
|
|
|
|
|
<dv-border-box-8 :color="['#053D7E', '#1E6FEA']" style="width: 100%;height: 32%">
|
|
|
|
|
|
<div class="inner_box" style="width: 100%;height:100%">
|
2023-09-04 17:24:42 +08:00
|
|
|
|
<div class="inner-bottom"></div>
|
|
|
|
|
|
<div style="display: flex;justify-content: space-around;width: 100%;height: 100%">
|
|
|
|
|
|
<div class="bottom-left"></div>
|
|
|
|
|
|
<div class="bottom-right">
|
|
|
|
|
|
<div class="bottom-right-title"></div>
|
|
|
|
|
|
<Echarts class="echarts" style="height: 80%" :echartObj="echartObj7" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-09-07 10:41:54 +08:00
|
|
|
|
</dv-border-box-8>
|
2023-09-04 17:24:42 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="home_right">
|
2023-09-08 11:34:27 +08:00
|
|
|
|
<div class="inner_box" style="height: 40%">
|
|
|
|
|
|
<div class="inner_header">
|
|
|
|
|
|
<div class="header_left"></div>
|
|
|
|
|
|
<div class="header_icon">
|
|
|
|
|
|
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
|
|
|
|
|
|
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="header_title">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<span>房间状态统计</span>
|
|
|
|
|
|
<span class="little_font"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box_content">
|
|
|
|
|
|
<div style="width: 100%;height: 40%;display: flex;justify-content: center;margin-top: 2%">
|
|
|
|
|
|
<img src="@/assets/img/comprehensive/right-1.png" style="width:20%;max-height: 80%;">
|
|
|
|
|
|
<div style="height: 100%;width: 60%">
|
|
|
|
|
|
<Echarts class="echarts" style="height: 90%;" :echartObj="echartObj9" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="width: 100%;height: 10%;display: flex;justify-content: space-around">
|
|
|
|
|
|
<img src="@/assets/img/comprehensive/right2.png" style="width:30%;max-height: 80%;">
|
|
|
|
|
|
<img src="@/assets/img/comprehensive/right3.png" style="width:60%;max-height: 80%;">
|
|
|
|
|
|
</div>
|
2023-09-08 11:35:56 +08:00
|
|
|
|
<div style="width: 100%;height: 40%;display: flex;justify-content: space-around;align-items: center;">
|
2023-09-08 11:34:27 +08:00
|
|
|
|
<img src="@/assets/img/comprehensive/right4.png" style="width:25%;max-height: 70%;">
|
|
|
|
|
|
<img src="@/assets/img/comprehensive/right5.png" style="width:25%;max-height: 60%;">
|
|
|
|
|
|
<img src="@/assets/img/comprehensive/right6.png" style="width:25%;max-height: 36%;">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-09-04 17:24:42 +08:00
|
|
|
|
<div class="right-center"></div>
|
2023-09-05 11:44:56 +08:00
|
|
|
|
<InnerBox :echartObj="echartObj8" style="width: 100%;margin-left: 0" header_title="护理人员能力分析" />
|
2023-09-04 17:24:42 +08:00
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import Vue from 'vue'
|
|
|
|
|
|
import { Progress,Divider } from 'ant-design-vue';
|
|
|
|
|
|
Vue.use(Progress);
|
|
|
|
|
|
Vue.use(Divider);
|
|
|
|
|
|
import Echarts from "@/components/echarts";
|
|
|
|
|
|
import echarts from "echarts";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
echartObj1: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
bottom: 10,
|
|
|
|
|
|
data: ['套餐(单)','自定义餐(单)','营养餐(单)'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
lineHeight: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
color: ['#2B8EF3','#F5B12D','#48E5E5'],
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
axisLabel: {//x轴文字的配置
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ['1月','2月','3月','4月','5月','6月'],
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisLabel: {//y轴文字的配置
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
color: ['#1F7DAF']
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '套餐(单)',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{name: '套餐(单)', value: 210},
|
|
|
|
|
|
{name: '套餐(单)', value: 140},
|
|
|
|
|
|
{name: '套餐(单)', value: 130},
|
|
|
|
|
|
{name: '套餐(单)', value: 130},
|
|
|
|
|
|
{name: '套餐(单)', value: 130},
|
|
|
|
|
|
{name: '套餐(单)', value: 130},
|
|
|
|
|
|
],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
barGap:0.5,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// color: '#1B7EF2'
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: '#1976E2' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(25,118,226,0.30)' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '自定义餐(单)',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{name: '自定义餐(单)', value: 180} ,
|
|
|
|
|
|
{name: '自定义餐(单)', value: 120},
|
|
|
|
|
|
{name: '自定义餐(单)', value: 48},
|
|
|
|
|
|
{name: '自定义餐(单)', value: 50},
|
|
|
|
|
|
{name: '自定义餐(单)', value: 90},
|
|
|
|
|
|
{name: '自定义餐(单)', value: 120},
|
|
|
|
|
|
],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barGap:0.5,
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// color: '#1B7EF2'
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: '#FF7B00' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(255,123,0,0.30)' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '营养餐(单)',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{name: '营养餐(单)', value: 90} ,
|
|
|
|
|
|
{name: '自定义餐(单)', value: 170},
|
|
|
|
|
|
{name: '营养餐(单)', value: 70},
|
|
|
|
|
|
{name: '营养餐(单)', value: 120},
|
|
|
|
|
|
{name: '营养餐(单)', value: 180},
|
|
|
|
|
|
{name: '营养餐(单)', value: 110}
|
|
|
|
|
|
],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barGap:0.5,
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
//同一系列的柱间距离
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 12
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// color: '#1B7EF2'
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: '#48E5E5' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(72,228,229,0.30)' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
echartObj2: {
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
left: '20',
|
|
|
|
|
|
top: 20,
|
|
|
|
|
|
bottom: '20',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisLabel: {//x轴文字的配置
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine:{
|
|
|
|
|
|
show:false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
splitLine:{
|
|
|
|
|
|
show:false
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {//y轴文字的配置
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ['水煮鱼','麻婆豆腐','锅包肉','糖醋排骨','红烧鱼','切丁肉末','清炒油麦菜', '蒜蓉娃娃菜','青椒肉丝','西红柿鸡蛋',]
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
data: [130,60,40,130,100,160,180,190,260,300],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
itemStyle:{
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: (param)=>{
|
|
|
|
|
|
if(param.dataIndex % 2 ==0){
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
|
|
|
{ offset: 0, color:'rgba(255,187,0,0.30)' },
|
|
|
|
|
|
{ offset: 1, color: '#FFBB00' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
}else {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
|
|
|
{ offset: 0, color:'rgba(25,118,226,0.30)' },
|
|
|
|
|
|
{ offset: 1, color: '#1B7EF2' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
showBackground: true,
|
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|
|
|
|
|
},
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
echartObj3: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
top: 'middle',
|
|
|
|
|
|
right: 0,
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
data: ['设备','床单','被罩','垃圾袋','洗衣液','消毒液'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
lineHeight: 18
|
|
|
|
|
|
},
|
2023-09-08 11:34:27 +08:00
|
|
|
|
// formatter: (name) => {
|
|
|
|
|
|
// let data = this.echartObj3.series[0].data
|
|
|
|
|
|
// let total = 0
|
|
|
|
|
|
// let tarValue
|
|
|
|
|
|
// for (let i = 0; i < data.length; i++) {
|
|
|
|
|
|
// total += data[i].value
|
|
|
|
|
|
// if (data[i].name == name) {
|
|
|
|
|
|
// tarValue = data[i].value
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// //计算出百分比
|
|
|
|
|
|
// let p = Math.round((tarValue / total) * 100) + '%'
|
|
|
|
|
|
// return `${name}${p}`
|
|
|
|
|
|
// }
|
2023-09-04 17:24:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
color: ['#2B8EF3','#48E5E5','#3D7DFA','#68A400','#F5B12D','#D599FD'],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'Access From',
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
radius: [60, 90],
|
|
|
|
|
|
top: 'middle',
|
|
|
|
|
|
left: -50,
|
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
|
label: {
|
2023-09-08 11:34:27 +08:00
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'inside',
|
|
|
|
|
|
formatter: '{c}%',
|
2023-09-04 17:24:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: {
|
2023-09-08 11:34:27 +08:00
|
|
|
|
show: true,
|
2023-09-04 17:24:42 +08:00
|
|
|
|
fontSize: 20,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{ value: 35, name: '设备' },
|
|
|
|
|
|
{ value: 15, name: '床单' },
|
|
|
|
|
|
{ value: 15, name: '被罩' },
|
|
|
|
|
|
{ value: 11, name: '垃圾袋' },
|
|
|
|
|
|
{ value: 10, name: '洗衣液' },
|
|
|
|
|
|
{ value: 9, name: '消毒液' },
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
echartObj4: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
bottom: 10,
|
|
|
|
|
|
data: ['在库(个)','出库(个)'],
|
|
|
|
|
|
itemHeight: 8, // 图例高度
|
|
|
|
|
|
itemWidth: 15, // 图例高度
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
lineHeight: 10,
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
color: ['#2B8EF3','#F5B12D'],
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
axisLabel: {//x轴文字的配置
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
interval: 0, // 强制文字全部显示
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ['设备','床单','被罩','垃圾袋','洗衣液','消毒液'],
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisLabel: {//y轴文字的配置
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
color: ['#1F7DAF']
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '在库(个)',
|
|
|
|
|
|
data: [3000,900,2300,5500,4500,4000],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
stack: 'Ad',
|
|
|
|
|
|
barWidth: 18,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// color: '#1B7EF2'
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: '#1976E2' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(25,118,226,0.30)' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '出库(个)',
|
|
|
|
|
|
data: [1000,5000,5500,12000,2500,2000],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
stack: 'Ad',
|
|
|
|
|
|
barWidth: 18,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// color: '#1B7EF2'
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: '#FFBB00' },
|
|
|
|
|
|
{ offset: 1, color: '#FF7B00' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
echartObj5: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
top: 'middle',
|
|
|
|
|
|
right: 0,
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
data: ['已处理','处理中','未处理'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
lineHeight: 18
|
|
|
|
|
|
},
|
2023-09-08 11:34:27 +08:00
|
|
|
|
// formatter: (name) => {
|
|
|
|
|
|
// let data = this.echartObj5.series[0].data
|
|
|
|
|
|
// let total = 0
|
|
|
|
|
|
// let tarValue
|
|
|
|
|
|
// for (let i = 0; i < data.length; i++) {
|
|
|
|
|
|
// total += data[i].value
|
|
|
|
|
|
// if (data[i].name == name) {
|
|
|
|
|
|
// tarValue = data[i].value
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// //计算出百分比
|
|
|
|
|
|
// let p = Math.round((tarValue / total) * 100) + '%'
|
|
|
|
|
|
// return `${name}${p}`
|
|
|
|
|
|
// }
|
2023-09-04 17:24:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
color: ['#3D7DFA','#48E5E5','#F5B12D'],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'Access From',
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
radius: [60, 90],
|
|
|
|
|
|
top: 'middle',
|
|
|
|
|
|
left: -50,
|
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
|
label: {
|
2023-09-08 11:34:27 +08:00
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'inside',
|
|
|
|
|
|
formatter: '{c}%',
|
2023-09-04 17:24:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: {
|
2023-09-08 11:34:27 +08:00
|
|
|
|
show: true,
|
2023-09-04 17:24:42 +08:00
|
|
|
|
fontSize: 20,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{ value: 35, name: '已处理' },
|
|
|
|
|
|
{ value: 35, name: '处理中' },
|
|
|
|
|
|
{ value: 30, name: '未处理' },
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
echartObj6: {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
axisLabel: {//x轴文字的配置
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisLabel: {//y轴文字的配置
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "rgba(255, 255, 255, 0.64)",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
color: ['#1F7DAF']
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{name: '1月', value: 10 },
|
|
|
|
|
|
{name: '2月', value: 12 },
|
|
|
|
|
|
{name: '3月', value: 8 },
|
|
|
|
|
|
{name: '4月', value: 14 },
|
|
|
|
|
|
{name: '5月', value: 13 },
|
|
|
|
|
|
{name: '6月', value: 8 },
|
|
|
|
|
|
{name: '7月', value: 13 },
|
|
|
|
|
|
{name: '8月', value: 25 },
|
|
|
|
|
|
{name: '9月', value: 20 },
|
|
|
|
|
|
{name: '10月', value: 13 },
|
|
|
|
|
|
{name: '11月', value: 9 },
|
|
|
|
|
|
{name: '12月', value: 5 },
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
|
barGap:'100%',
|
|
|
|
|
|
itemStyle: this.setSeriesItemStyle('lan'),
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
echartObj7: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
bottom: 10,
|
|
|
|
|
|
data: ['用电量(度)','用水量(吨)','用气量(m²)'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
lineHeight: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
color: ['#2B8EF3','#F5B12D','#48E5E5'],
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
axisLabel: {//x轴文字的配置
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisLabel: {//y轴文字的配置
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
color: ['#1F7DAF']
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '用电量(度)',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{name: '用电量(度)', value: 1500},
|
|
|
|
|
|
{name: '用电量(度)', value: 2400},
|
|
|
|
|
|
{name: '用电量(度)', value: 2000},
|
|
|
|
|
|
{name: '用电量(度)', value: 2300},
|
|
|
|
|
|
{name: '用电量(度)', value: 2450},
|
|
|
|
|
|
{name: '用电量(度)', value: 1450},
|
|
|
|
|
|
{name: '用电量(度)', value: 1000},
|
|
|
|
|
|
{name: '用电量(度)', value: 2500},
|
|
|
|
|
|
{name: '用电量(度)', value: 1980},
|
|
|
|
|
|
{name: '用电量(度)', value: 2500},
|
|
|
|
|
|
{name: '用电量(度)', value: 2300},
|
|
|
|
|
|
{name: '用电量(度)', value: 1600},
|
|
|
|
|
|
],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
barGap:0.5,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// color: '#1B7EF2'
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: '#1976E2' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(25,118,226,0.30)' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '用水量(吨)',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{name: '用水量(吨)', value: 2200} ,
|
|
|
|
|
|
{name: '用水量(吨)', value: 1500},
|
|
|
|
|
|
{name: '用水量(吨)', value: 800},
|
|
|
|
|
|
{name: '用水量(吨)', value: 1500},
|
|
|
|
|
|
{name: '用水量(吨)', value: 1900},
|
|
|
|
|
|
{name: '用水量(吨)', value: 2300},
|
|
|
|
|
|
{name: '用水量(吨)', value: 1500},
|
|
|
|
|
|
{name: '用水量(吨)', value: 1500},
|
|
|
|
|
|
{name: '用水量(吨)', value: 1490},
|
|
|
|
|
|
{name: '用水量(吨)', value: 1490},
|
|
|
|
|
|
{name: '用水量(吨)', value: 1500},
|
|
|
|
|
|
{name: '用水量(吨)', value: 2300},
|
|
|
|
|
|
],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barGap:0.5,
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// color: '#1B7EF2'
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: '#FF7B00' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(255,123,0,0.30)' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '用气量(m²)',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{name: '用气量(m²)', value: 1100} ,
|
|
|
|
|
|
{name: '用气量(m²)', value: 1150},
|
|
|
|
|
|
{name: '用气量(m²)', value: 1200},
|
|
|
|
|
|
{name: '用气量(m²)', value: 1100},
|
|
|
|
|
|
{name: '用气量(m²)', value: 700},
|
|
|
|
|
|
{name: '用气量(m²)', value: 1100},
|
|
|
|
|
|
{name: '用气量(m²)', value: 2400},
|
|
|
|
|
|
{name: '用气量(m²)', value: 1200},
|
|
|
|
|
|
{name: '用气量(m²)', value: 1250},
|
|
|
|
|
|
{name: '用气量(m²)', value: 900},
|
|
|
|
|
|
{name: '用气量(m²)', value: 1200},
|
|
|
|
|
|
{name: '用气量(m²)', value: 1150}
|
|
|
|
|
|
],
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barGap:0.5,
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
//同一系列的柱间距离
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 12
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// color: '#1B7EF2'
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: '#48E5E5' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(72,228,229,0.30)' },
|
|
|
|
|
|
]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
echartObj8: {
|
|
|
|
|
|
radar: {
|
|
|
|
|
|
indicator: [
|
|
|
|
|
|
{ name: '口腔护理', max: 25,},
|
|
|
|
|
|
{ name: '食物护理', max: 50, axisLabel:{show:false}},
|
|
|
|
|
|
{ name: '修建', max: 25,axisLabel:{show:false} },
|
|
|
|
|
|
{ name: '清洗', max: 25,axisLabel:{show:false} },
|
|
|
|
|
|
{ name: '按摩', max: 25,axisLabel:{show:false}},
|
|
|
|
|
|
],
|
|
|
|
|
|
radius: '65%', // 坐标轴半径占可显示区域的比例
|
|
|
|
|
|
axisLine: { // 坐标轴样式
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#BBBBBB',
|
|
|
|
|
|
type: 'solid',
|
|
|
|
|
|
width: 1
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: { // 氪度线样式
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {// 是否展示坐标数字
|
|
|
|
|
|
show: true
|
|
|
|
|
|
},
|
|
|
|
|
|
splitArea: { // 坐标轴分隔区显示颜色:默认是一深一浅的间隔颜色，这里我们设置间隔之间是空白
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
|
color: ['#032750','rgba(25, 118, 226, 0.2)'],
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: { // 分割线样式
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(25, 118, 226, 0.2)',
|
|
|
|
|
|
type: 'solid',
|
|
|
|
|
|
width: 1
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisName: { // 指示器样式
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 16
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'radar',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: [12, 25, 3, 12, 20],
|
|
|
|
|
|
name: 'Allocated Budget'
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient( // 设置渐变色
|
|
|
|
|
|
0, 0, 0, 1,
|
|
|
|
|
|
[
|
|
|
|
|
|
{ offset: 0, color: 'rgba(245,177,45,0.73)' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(245,177,45,0.17)' }
|
|
|
|
|
|
]
|
|
|
|
|
|
)
|
|
|
|
|
|
},
|
|
|
|
|
|
areaStyle: {// 雷达图辐射区域的样式
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
0, 0, 0, 1,
|
|
|
|
|
|
[
|
|
|
|
|
|
{ offset: 0, color: 'rgba(245,177,45,0.73)' },
|
|
|
|
|
|
{ offset: 1, color: 'rgba(245,177,45,0.17)' }
|
|
|
|
|
|
]
|
|
|
|
|
|
)
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
2023-09-08 11:34:27 +08:00
|
|
|
|
echartObj9: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
top: 'middle',
|
|
|
|
|
|
right: 0,
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
data: ['被罩','洗衣液',],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
lineHeight: 18
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
color: ['#3D7DFA','#F5B12D'],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'Access From',
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
radius: [50, 70],
|
|
|
|
|
|
top: 'middle',
|
|
|
|
|
|
left: -50,
|
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'inside',
|
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{ value: 85, name: '被罩' },
|
|
|
|
|
|
{ value: 15, name: '洗衣液'},
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
2023-09-04 17:24:42 +08:00
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
|
|
|
this.init();
|
|
|
|
|
|
},
|
|
|
|
|
|
components: {
|
|
|
|
|
|
Echarts,
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
init() {
|
|
|
|
|
|
this.getData();
|
|
|
|
|
|
},
|
|
|
|
|
|
search() {
|
|
|
|
|
|
this.init();
|
|
|
|
|
|
},
|
|
|
|
|
|
getData() {
|
|
|
|
|
|
},
|
|
|
|
|
|
setSeriesItemStyle(color, obj={}){
|
|
|
|
|
|
let colors = {
|
|
|
|
|
|
qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
|
|
|
|
|
|
lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
|
|
|
|
|
|
// huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
|
|
|
|
|
|
huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
|
|
|
|
|
|
lv: ['#07F090', 'rgba(60,212,149,0.28)'],
|
|
|
|
|
|
zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
|
|
|
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 12
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
color: () => {
|
|
|
|
|
|
return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{ offset: 0, color: colors[color][0] },
|
|
|
|
|
|
{ offset: 1, color: colors[color][1] },
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
...obj,
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
/deep/ .ant-progress-circle .ant-progress-text {
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/ .ant-progress-circle-trail{
|
|
|
|
|
|
stroke:#334D60 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.main_box{
|
|
|
|
|
|
padding: 0 2rem;
|
|
|
|
|
|
> div{
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
img{
|
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.home_center {
|
2023-09-06 11:45:08 +08:00
|
|
|
|
width: 50%;
|
2023-09-04 17:24:42 +08:00
|
|
|
|
padding: 0 10px;
|
|
|
|
|
|
.inner_box{
|
|
|
|
|
|
margin-top: 1%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.center-left-title{
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/center-center1.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
.header-left-title{
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/center-top1.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
.center-left-title,
|
|
|
|
|
|
.header-left-title{
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
height: 18%;
|
|
|
|
|
|
margin: 2% auto;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.center-left,
|
|
|
|
|
|
.header-left{
|
|
|
|
|
|
width: 38%;
|
|
|
|
|
|
height: 80%;
|
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
|
border-image: linear-gradient(180deg, rgba(31,125,175,0.34) 0%, rgba(31,125,175,0.53) 100%) 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.center-right,
|
|
|
|
|
|
.header-right{
|
|
|
|
|
|
width: 59%;
|
|
|
|
|
|
height: 80%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.center-right-title{
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/center-center2.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
.header-right-title{
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/center-top2.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
.bottom-right-title{
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/center-bottom.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bottom-right-title,
|
|
|
|
|
|
.center-right-title,
|
|
|
|
|
|
.header-right-title{
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
height: 16%;
|
|
|
|
|
|
margin: 2% auto;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.inner-header {
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/top-title.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
.inner-center{
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/center-title.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
.inner-bottom{
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/bottom-title.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
.bottom-left{
|
|
|
|
|
|
width: 29%;
|
|
|
|
|
|
height: 85%;
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/bottom-left.png);
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.bottom-right{
|
|
|
|
|
|
width: 69%;
|
|
|
|
|
|
height: 80%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.inner-bottom,
|
|
|
|
|
|
.inner-center,
|
|
|
|
|
|
.inner-header{
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
height: 60px;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.inner_box{
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.home_left,
|
|
|
|
|
|
.home_right{
|
2023-09-06 11:45:08 +08:00
|
|
|
|
width: 25%;
|
2023-09-04 17:24:42 +08:00
|
|
|
|
.right-top{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 40%;
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/right.png);
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.right-center{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 24%;
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/right1.png);
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.inner_box{
|
|
|
|
|
|
width: 99%;
|
|
|
|
|
|
height: 32%;
|
|
|
|
|
|
margin-left: 1%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.home_left{
|
|
|
|
|
|
.left-top1{
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
height: 20%;
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/left-top1.png);
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.left-top2{
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
height: 40%;
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
background-image: url(../../assets/img/comprehensive/left-top2.png);
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
