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,
itemWidth: 8,
icon: "rect",
data: dataList.map((item: any) => item.name),
data: dataList && dataList.map((item: any) => item.name),
formatter: function (params: any) {
let val = "";
if (params.length > 4) {

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

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