admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'bjxz-rain' of http://139.9.66.234:18023/yjlHub/zhgdlarge into bjxz-rain

Browse Source
This commit is contained in:
”Rain“ 2024-06-15 17:59:55 +08:00
commit ac9ba34758
2 changed files with 403 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/commandScreen/commandCenter/centerBottom.vue
View File

@ -300,7 +300,7 @@ function getMessEchart() {
itemHeight: 8, itemHeight: 8,
itemWidth: 8, itemWidth: 8,
icon: "rect", icon: "rect",
data: dataList.map((item: any) => item.name), data: dataList && dataList.map((item: any) => item.name),
formatter: function (params: any) { formatter: function (params: any) {
let val = ""; let val = "";
if (params.length > 4) { if (params.length > 4) {

791
src/views/commandScreen/commandCenter/centerTop.vue
View File

@ -5,37 +5,37 @@
<!-- <div class="circle-box"> <!-- <div class="circle-box">
<span>{{ statScore.hiddenDangerScore }}分</span> <span>{{ statScore.hiddenDangerScore }}分</span>
</div> --> </div> -->
<div id="waterAq" style="width:80%;height:80%;transform:translateY(-25px)"></div> <div id="waterAq" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
<span style="transform:translateY(-50px)">安全隐患治理</span> <span style="transform: translateY(-50px)">安全隐患治理</span>
</div> </div>
<div class="content-div wd"> <div class="content-div wd">
<!-- <div class="circle-box"> <!-- <div class="circle-box">
<span>{{ statScore.dangerEngScore }}分</span> <span>{{ statScore.dangerEngScore }}分</span>
</div> --> </div> -->
<div id="waterWd" style="width:80%;height:80%;transform:translateY(-25px)"></div> <div id="waterWd" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
<span style="transform:translateY(-50px)">危大工程</span> <span style="transform: translateY(-50px)">危大工程</span>
</div> </div>
<div class="content-div jy"> <div class="content-div jy">
<!-- <div class="circle-box"> --> <!-- <div class="circle-box"> -->
<!-- <span>{{statScore}}分</span> --> <!-- <span>{{statScore}}分</span> -->
<!-- <span>25分</span> <!-- <span>25分</span>
</div> --> </div> -->
<div id="waterJy" style="width:80%;height:80%;transform:translateY(-25px)"></div> <div id="waterJy" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
<span style="transform:translateY(-50px)">安全教育</span> <span style="transform: translateY(-50px)">安全教育</span>
</div> </div>
<div class="content-div fx"> <div class="content-div fx">
<!-- <div class="circle-box"> <!-- <div class="circle-box">
<span>{{ statScore.riskScore }}分</span> <span>{{ statScore.riskScore }}分</span>
</div> --> </div> -->
<div id="waterFx" style="width:80%;height:80%;transform:translateY(-25px)"></div> <div id="waterFx" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
<span style="transform:translateY(-50px)">风险管理</span> <span style="transform: translateY(-50px)">风险管理</span>
</div> </div>
<div class="content-div zn"> <div class="content-div zn">
<!-- <div class="circle-box"> <!-- <div class="circle-box">
<span>{{ statScore.aiScore }}分</span> <span>{{ statScore.aiScore }}分</span>
</div> --> </div> -->
<div id="waterZn" style="width:80%;height:80%;transform:translateY(-25px)"></div> <div id="waterZn" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
<span style="transform:translateY(-50px)">AI警报</span> <span style="transform: translateY(-50px)">AI警报</span>
</div> </div>
<div class="count-div"> <div class="count-div">
<div class="count-div-item"> <div class="count-div-item">
@ -55,23 +55,26 @@
<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? "↑" : "↓" }} </span> <span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? "↑" : "↓" }} </span>
</div> </div>
</div> </div>
<div :class="['score-div', statScore.total >= 80 ? 'scoreBg1':statScore.total >= 60 ? 'scoreBg2':'scoreBg3']" @click="openDialogData({ index: 9, title: '月度安全综合评分' })"> <div
:class="['score-div', statScore.total >= 80 ? 'scoreBg1' : statScore.total >= 60 ? 'scoreBg2' : 'scoreBg3']"
@click="openDialogData({ index: 9, title: '月度安全综合评分' })"
>
<div class="score-part"> <div class="score-part">
<span>{{ statScore.total }}</span> <span>{{ statScore.total }}</span>
<span>分</span> <span>分</span>
</div> </div>
<div class="scoreInner scoreTextBg1" v-if="statScore.total >= 80"> <div class="scoreInner scoreTextBg1" v-if="statScore.total >= 80">
<span style="font-size:18px">安全评分</span> <span style="font-size: 18px">安全评分</span>
<div class="scoreReview" >优秀</div> <div class="scoreReview">优秀</div>
<div class="scoreStar"></div> <div class="scoreStar"></div>
</div> </div>
<div class="scoreInner scoreTextBg2" v-if="statScore.total >= 60 && statScore.total < 80"> <div class="scoreInner scoreTextBg2" v-if="statScore.total >= 60 && statScore.total < 80">
<span style="font-size:18px">安全评分</span> <span style="font-size: 18px">安全评分</span>
<div class="scoreReview">一般</div> <div class="scoreReview">一般</div>
<div class="scoreStar"></div> <div class="scoreStar"></div>
</div> </div>
<div class="scoreInner scoreTextBg3" v-if="statScore.total < 60"> <div class="scoreInner scoreTextBg3" v-if="statScore.total < 60">
<span style="font-size:18px">安全评分</span> <span style="font-size: 18px">安全评分</span>
<div class="scoreReview">差</div> <div class="scoreReview">差</div>
<div class="scoreStar"></div> <div class="scoreStar"></div>
</div> </div>
@ -113,7 +116,7 @@ import { ref, onMounted, watch } from "vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import * as echarts from "echarts"; import * as echarts from "echarts";
import 'echarts-liquidfill'; import "echarts-liquidfill";
import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview"; import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
import { getStatsDirectorateBigScreenApi, getStatScoreApi } from "@/api/modules/agjtCommandApi"; import { getStatsDirectorateBigScreenApi, getStatScoreApi } from "@/api/modules/agjtCommandApi";
@ -149,397 +152,396 @@ watch(
); );
//绘画安全隐患治理水波图 //绘画安全隐患治理水波图
function drawAqWater(){ function drawAqWater() {
type EChartsOption = echarts.EChartsOption; type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterAq")!; var chartDom = document.getElementById("waterAq")!;
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option: EChartsOption; var option: EChartsOption;
// 配置项 // 配置项
option = { option = {
series: [ series: [
{ {
type: "liquidFill", //设置图表类型 type: "liquidFill", //设置图表类型
// data: [0.6], // 设置水位，值为0到1之间 // data: [0.6], // 设置水位，值为0到1之间
data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
// data: [ // data: [
// 0.2, // 0.2,
// { // {
// value: 0.3, // 图形数据写法二 // value: 0.3, // 图形数据写法二
// direction: "left", // 水波运动方向 // direction: "left", // 水波运动方向
// itemStyle: { // itemStyle: {
// color: "blue", // 水波颜色 // color: "blue", // 水波颜色
// opacity: 0.8, // 透明度 // opacity: 0.8, // 透明度
// }, // },
// emphasis: { // emphasis: {
// itemStyle: { // itemStyle: {
// color: "lightblue", // 鼠标移入时的水波颜色 // color: "lightblue", // 鼠标移入时的水波颜色
// opacity: 1, // 鼠标移入时的透明度 // opacity: 1, // 鼠标移入时的透明度
// }, // },
// }, // },
// }, // },
// ], // ],
waveAnimation:true,//是否开启水波动画, waveAnimation: true, //是否开启水波动画,
amplitude: 15, // 设置振幅，值越大波形越尖 amplitude: 15, // 设置振幅，值越大波形越尖
waveLength:150,//水波的长度，值越大水波越长 waveLength: 150, //水波的长度，值越大水波越长
shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
radius: "60%", // 设置图的大小 默认为50% radius: "60%", // 设置图的大小 默认为50%
// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center:['50%','50%'],//中心点的位置1E90FF center: ["50%", "50%"], //中心点的位置1E90FF
// animationEasing:'linear', // animationEasing:'linear',
animationEasing:'easeOut', animationEasing: "easeOut",
outline: { outline: {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF", // 外边框颜色 borderColor: "#156ACF" // 外边框颜色
}, }
},
// // 水波样式
// itemStyle:{
// opacity:0.5, // 透明度
// color:'red', // 统一配置水波的颜色
// shadowBlur:10, // 水波阴影大小
// shadowColor:'red', // 阴影颜色
// shadowOffsetX:10, // 阴影水平偏移量
// shadowOffsetY:10, // 阴影竖直偏移量
// },
backgroundStyle: {
color: "rgba(0,0,0,0)", // 背景色
},
label: {
normal: {
formatter: function(){
return statScore.value.hiddenDangerScore + "分"
}, },
textStyle: { // // 水波样式
// color: "#6495ED", //蓝色 // itemStyle:{
color: "#fff", // opacity:0.5, // 透明度
insideColor: "#fff", // color:'red', // 统一配置水波的颜色
fontSize: 16, // shadowBlur:10, // 水波阴影大小
// shadowColor:'red', // 阴影颜色
}, // shadowOffsetX:10, // 阴影水平偏移量
}, // shadowOffsetY:10, // 阴影竖直偏移量
}, // },
}, backgroundStyle: {
], color: "rgba(0,0,0,0)" // 背景色
}; },
// 使用配置项设置图表 label: {
myChart.setOption(option); normal: {
formatter: function () {
return statScore.value.hiddenDangerScore + "分";
},
textStyle: {
// color: "#6495ED", //蓝色
color: "#fff",
insideColor: "#fff",
fontSize: 16
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
} }
//绘画危大工程水波图 //绘画危大工程水波图
function drawWdWater(){ function drawWdWater() {
type EChartsOption = echarts.EChartsOption; type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterWd")!; var chartDom = document.getElementById("waterWd")!;
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option: EChartsOption; var option: EChartsOption;
// 配置项 // 配置项
option = { option = {
series: [ series: [
{ {
type: "liquidFill", //设置图表类型 type: "liquidFill", //设置图表类型
// data: [0.6], // 设置水位，值为0到1之间 // data: [0.6], // 设置水位，值为0到1之间
data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
// data: [ // data: [
// 0.2, // 0.2,
// { // {
// value: 0.3, // 图形数据写法二 // value: 0.3, // 图形数据写法二
// direction: "left", // 水波运动方向 // direction: "left", // 水波运动方向
// itemStyle: { // itemStyle: {
// color: "blue", // 水波颜色 // color: "blue", // 水波颜色
// opacity: 0.8, // 透明度 // opacity: 0.8, // 透明度
// }, // },
// emphasis: { // emphasis: {
// itemStyle: { // itemStyle: {
// color: "lightblue", // 鼠标移入时的水波颜色 // color: "lightblue", // 鼠标移入时的水波颜色
// opacity: 1, // 鼠标移入时的透明度 // opacity: 1, // 鼠标移入时的透明度
// }, // },
// }, // },
// }, // },
// ], // ],
waveAnimation:true,//是否开启水波动画, waveAnimation: true, //是否开启水波动画,
amplitude: 15, // 设置振幅，值越大波形越尖 amplitude: 15, // 设置振幅，值越大波形越尖
waveLength:150,//水波的长度，值越大水波越长 waveLength: 150, //水波的长度，值越大水波越长
shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
radius: "60%", // 设置图的大小 默认为50% radius: "60%", // 设置图的大小 默认为50%
// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center:['50%','50%'],//中心点的位置1E90FF center: ["50%", "50%"], //中心点的位置1E90FF
// animationEasing:'linear', // animationEasing:'linear',
animationEasing:'easeOut', animationEasing: "easeOut",
outline: { outline: {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF", // 外边框颜色 borderColor: "#156ACF" // 外边框颜色
}, }
},
// // 水波样式
// itemStyle:{
// opacity:0.5, // 透明度
// color:'red', // 统一配置水波的颜色
// shadowBlur:10, // 水波阴影大小
// shadowColor:'red', // 阴影颜色
// shadowOffsetX:10, // 阴影水平偏移量
// shadowOffsetY:10, // 阴影竖直偏移量
// },
backgroundStyle: {
color: "rgba(0,0,0,0)", // 背景色
},
label: {
normal: {
formatter: function(){
return statScore.value.dangerEngScore + "分"
}, },
textStyle: { // // 水波样式
color: "#fff", // itemStyle:{
insideColor: "#fff", // opacity:0.5, // 透明度
fontSize: 16, // color:'red', // 统一配置水波的颜色
}, // shadowBlur:10, // 水波阴影大小
}, // shadowColor:'red', // 阴影颜色
}, // shadowOffsetX:10, // 阴影水平偏移量
}, // shadowOffsetY:10, // 阴影竖直偏移量
], // },
}; backgroundStyle: {
// 使用配置项设置图表 color: "rgba(0,0,0,0)" // 背景色
myChart.setOption(option); },
label: {
normal: {
formatter: function () {
return statScore.value.dangerEngScore + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 16
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
} }
//绘画安全隐患治理水波图 //绘画安全隐患治理水波图
function drawJyWater(){ function drawJyWater() {
type EChartsOption = echarts.EChartsOption; type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterJy")!; var chartDom = document.getElementById("waterJy")!;
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option: EChartsOption; var option: EChartsOption;
// 配置项 // 配置项
option = { option = {
series: [ series: [
{ {
type: "liquidFill", //设置图表类型 type: "liquidFill", //设置图表类型
// data: [0.6], // 设置水位，值为0到1之间 // data: [0.6], // 设置水位，值为0到1之间
data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
// data: [ // data: [
// 0.2, // 0.2,
// { // {
// value: 0.3, // 图形数据写法二 // value: 0.3, // 图形数据写法二
// direction: "left", // 水波运动方向 // direction: "left", // 水波运动方向
// itemStyle: { // itemStyle: {
// color: "blue", // 水波颜色 // color: "blue", // 水波颜色
// opacity: 0.8, // 透明度 // opacity: 0.8, // 透明度
// }, // },
// emphasis: { // emphasis: {
// itemStyle: { // itemStyle: {
// color: "lightblue", // 鼠标移入时的水波颜色 // color: "lightblue", // 鼠标移入时的水波颜色
// opacity: 1, // 鼠标移入时的透明度 // opacity: 1, // 鼠标移入时的透明度
// }, // },
// }, // },
// }, // },
// ], // ],
waveAnimation:true,//是否开启水波动画, waveAnimation: true, //是否开启水波动画,
amplitude: 15, // 设置振幅，值越大波形越尖 amplitude: 15, // 设置振幅，值越大波形越尖
waveLength:150,//水波的长度，值越大水波越长 waveLength: 150, //水波的长度，值越大水波越长
shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
radius: "60%", // 设置图的大小 默认为50% radius: "60%", // 设置图的大小 默认为50%
// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center:['50%','50%'],//中心点的位置1E90FF center: ["50%", "50%"], //中心点的位置1E90FF
// animationEasing:'linear', // animationEasing:'linear',
animationEasing:'easeOut', animationEasing: "easeOut",
outline: { outline: {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF", // 外边框颜色 borderColor: "#156ACF" // 外边框颜色
}, }
},
// // 水波样式
// itemStyle:{
// opacity:0.5, // 透明度
// color:'red', // 统一配置水波的颜色
// shadowBlur:10, // 水波阴影大小
// shadowColor:'red', // 阴影颜色
// shadowOffsetX:10, // 阴影水平偏移量
// shadowOffsetY:10, // 阴影竖直偏移量
// },
backgroundStyle: {
color: "rgba(0,0,0,0)", // 背景色
},
label: {
normal: {
formatter: function(){
// return statScore.value + "分"
return "25分"
}, },
textStyle: { // // 水波样式
color: "#fff", // itemStyle:{
insideColor: "#fff", // opacity:0.5, // 透明度
fontSize: 16, // color:'red', // 统一配置水波的颜色
}, // shadowBlur:10, // 水波阴影大小
}, // shadowColor:'red', // 阴影颜色
}, // shadowOffsetX:10, // 阴影水平偏移量
}, // shadowOffsetY:10, // 阴影竖直偏移量
], // },
}; backgroundStyle: {
// 使用配置项设置图表 color: "rgba(0,0,0,0)" // 背景色
myChart.setOption(option); },
label: {
normal: {
formatter: function () {
// return statScore.value + "分"
return "25分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 16
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
} }
//绘画安全隐患治理水波图 //绘画安全隐患治理水波图
function drawFxWater(){ function drawFxWater() {
type EChartsOption = echarts.EChartsOption; type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterFx")!; var chartDom = document.getElementById("waterFx")!;
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option: EChartsOption; var option: EChartsOption;
// 配置项 // 配置项
option = { option = {
series: [ series: [
{ {
type: "liquidFill", //设置图表类型 type: "liquidFill", //设置图表类型
// data: [0.6], // 设置水位，值为0到1之间 // data: [0.6], // 设置水位，值为0到1之间
data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
// data: [ // data: [
// 0.2, // 0.2,
// { // {
// value: 0.3, // 图形数据写法二 // value: 0.3, // 图形数据写法二
// direction: "left", // 水波运动方向 // direction: "left", // 水波运动方向
// itemStyle: { // itemStyle: {
// color: "blue", // 水波颜色 // color: "blue", // 水波颜色
// opacity: 0.8, // 透明度 // opacity: 0.8, // 透明度
// }, // },
// emphasis: { // emphasis: {
// itemStyle: { // itemStyle: {
// color: "lightblue", // 鼠标移入时的水波颜色 // color: "lightblue", // 鼠标移入时的水波颜色
// opacity: 1, // 鼠标移入时的透明度 // opacity: 1, // 鼠标移入时的透明度
// }, // },
// }, // },
// }, // },
// ], // ],
waveAnimation:true,//是否开启水波动画, waveAnimation: true, //是否开启水波动画,
amplitude: 15, // 设置振幅，值越大波形越尖 amplitude: 15, // 设置振幅，值越大波形越尖
waveLength:150,//水波的长度，值越大水波越长 waveLength: 150, //水波的长度，值越大水波越长
shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
radius: "60%", // 设置图的大小 默认为50% radius: "60%", // 设置图的大小 默认为50%
// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center:['50%','50%'],//中心点的位置1E90FF center: ["50%", "50%"], //中心点的位置1E90FF
// animationEasing:'linear', // animationEasing:'linear',
animationEasing:'easeOut', animationEasing: "easeOut",
outline: { outline: {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF", // 外边框颜色 borderColor: "#156ACF" // 外边框颜色
}, }
},
// // 水波样式
// itemStyle:{
// opacity:0.5, // 透明度
// color:'red', // 统一配置水波的颜色
// shadowBlur:10, // 水波阴影大小
// shadowColor:'red', // 阴影颜色
// shadowOffsetX:10, // 阴影水平偏移量
// shadowOffsetY:10, // 阴影竖直偏移量
// },
backgroundStyle: {
color: "rgba(0,0,0,0)", // 背景色
},
label: {
normal: {
formatter: function(){
return statScore.value.riskScore + "分"
}, },
textStyle: { // // 水波样式
color: "#fff", // itemStyle:{
insideColor: "#fff", // opacity:0.5, // 透明度
fontSize: 16, // color:'red', // 统一配置水波的颜色
}, // shadowBlur:10, // 水波阴影大小
}, // shadowColor:'red', // 阴影颜色
}, // shadowOffsetX:10, // 阴影水平偏移量
}, // shadowOffsetY:10, // 阴影竖直偏移量
], // },
}; backgroundStyle: {
// 使用配置项设置图表 color: "rgba(0,0,0,0)" // 背景色
myChart.setOption(option); },
label: {
normal: {
formatter: function () {
return statScore.value.riskScore + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 16
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
} }
//绘画安全隐患治理水波图 //绘画安全隐患治理水波图
function drawZnWater(){ function drawZnWater() {
type EChartsOption = echarts.EChartsOption; type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterZn")!; var chartDom = document.getElementById("waterZn")!;
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option: EChartsOption; var option: EChartsOption;
// 配置项 // 配置项
option = { option = {
series: [ series: [
{ {
type: "liquidFill", //设置图表类型 type: "liquidFill", //设置图表类型
// data: [0.6], // 设置水位，值为0到1之间 // data: [0.6], // 设置水位，值为0到1之间
data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
// data: [ // data: [
// 0.2, // 0.2,
// { // {
// value: 0.3, // 图形数据写法二 // value: 0.3, // 图形数据写法二
// direction: "left", // 水波运动方向 // direction: "left", // 水波运动方向
// itemStyle: { // itemStyle: {
// color: "blue", // 水波颜色 // color: "blue", // 水波颜色
// opacity: 0.8, // 透明度 // opacity: 0.8, // 透明度
// }, // },
// emphasis: { // emphasis: {
// itemStyle: { // itemStyle: {
// color: "lightblue", // 鼠标移入时的水波颜色 // color: "lightblue", // 鼠标移入时的水波颜色
// opacity: 1, // 鼠标移入时的透明度 // opacity: 1, // 鼠标移入时的透明度
// }, // },
// }, // },
// }, // },
// ], // ],
waveAnimation:true,//是否开启水波动画, waveAnimation: true, //是否开启水波动画,
amplitude: 15, // 设置振幅，值越大波形越尖 amplitude: 15, // 设置振幅，值越大波形越尖
waveLength:150,//水波的长度，值越大水波越长 waveLength: 150, //水波的长度，值越大水波越长
shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
radius: "60%", // 设置图的大小 默认为50% radius: "60%", // 设置图的大小 默认为50%
// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center:['50%','50%'],//中心点的位置1E90FF center: ["50%", "50%"], //中心点的位置1E90FF
// animationEasing:'linear', // animationEasing:'linear',
animationEasing:'easeOut', animationEasing: "easeOut",
outline: { outline: {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF", // 外边框颜色 borderColor: "#156ACF" // 外边框颜色
}, }
},
// // 水波样式
// itemStyle:{
// opacity:0.5, // 透明度
// color:'red', // 统一配置水波的颜色
// shadowBlur:10, // 水波阴影大小
// shadowColor:'red', // 阴影颜色
// shadowOffsetX:10, // 阴影水平偏移量
// shadowOffsetY:10, // 阴影竖直偏移量
// },
backgroundStyle: {
color: "rgba(0,0,0,0)", // 背景色
},
label: {
normal: {
formatter: function(){
return statScore.value.aiScore + "分"
}, },
textStyle: { // // 水波样式
color: "#fff", // itemStyle:{
insideColor: "#fff", // opacity:0.5, // 透明度
fontSize: 16, // color:'red', // 统一配置水波的颜色
}, // shadowBlur:10, // 水波阴影大小
}, // shadowColor:'red', // 阴影颜色
}, // shadowOffsetX:10, // 阴影水平偏移量
}, // shadowOffsetY:10, // 阴影竖直偏移量
], // },
}; backgroundStyle: {
// 使用配置项设置图表 color: "rgba(0,0,0,0)" // 背景色
myChart.setOption(option); },
label: {
normal: {
formatter: function () {
return statScore.value.aiScore + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 16
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
} }
//效果图 //效果图
@ -607,11 +609,11 @@ const getStatScore = async (showLoading: boolean) => {
const res = await getStatScoreApi({ projectSn: store.sn }, showLoading); const res = await getStatScoreApi({ projectSn: store.sn }, showLoading);
statScore.value = res.result; statScore.value = res.result;
drawAqWater() drawAqWater();
drawWdWater() drawWdWater();
drawJyWater() drawJyWater();
drawFxWater() drawFxWater();
drawZnWater() drawZnWater();
}; };
function boxStyle(item: any) { function boxStyle(item: any) {
@ -703,12 +705,24 @@ onMounted(async () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scoreBg1{background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 115px);} .scoreBg1 {
.scoreBg2{background-image: radial-gradient(circle, rgb(255,175,0) 0px, rgba(255, 255, 255, 0) 115px);} background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 115px);
.scoreBg3{background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 115px);} }
.scoreTextBg1{background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 40px);} .scoreBg2 {
.scoreTextBg2{background-image: radial-gradient(circle, rgb(255,175,0) 0px, rgba(255, 255, 255, 0) 40px);} background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 115px);
.scoreTextBg3{background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 40px);} }
.scoreBg3 {
background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 115px);
}
.scoreTextBg1 {
background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 40px);
}
.scoreTextBg2 {
background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 40px);
}
.scoreTextBg3 {
background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 40px);
}
.centerTop { .centerTop {
// background-color: darkred; // background-color: darkred;
.top-content { .top-content {
@ -808,9 +822,8 @@ onMounted(async () => {
} }
} }
} }
.score-div { .score-div {
color: white; color: white;
position: absolute; position: absolute;
// bottom: 210px; // bottom: 210px;
@ -837,7 +850,7 @@ onMounted(async () => {
color: white; color: white;
font-size: 18px; font-size: 18px;
} }
.scoreInner{ .scoreInner {
text-align: center; text-align: center;
margin-top: -10px; margin-top: -10px;
width: 90%; width: 90%;
@ -846,9 +859,9 @@ onMounted(async () => {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// background-color: red; // background-color: red;
.scoreReview{ .scoreReview {
opacity: 0.7; opacity: 0.7;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -856,14 +869,14 @@ onMounted(async () => {
height: 50px; height: 50px;
// background-color: blue; // background-color: blue;
} }
.scoreStar{ .scoreStar {
// background-color: purple; // background-color: purple;
// margin-top: 20px; // margin-top: 20px;
width: 28%; width: 28%;
height: 40px; height: 40px;
background: url("@/assets/images/green_flag_bg.png") no-repeat; background: url("@/assets/images/green_flag_bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
transform: translateY(-20px); transform: translateY(-20px);
} }
} }