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

fix:修改指挥部大屏劳务实名制和添加安全评分

Browse Source
This commit is contained in:
Vce 2024-07-03 16:57:56 +08:00
parent 608302251d
commit 0eb25e1b55
9 changed files with 708 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/modules/agjtLiveApi.ts
View File

@ -41,7 +41,8 @@ export const configWeekVideoListApi = (params: {}, noLoading: boolean) => {
//获取劳务实名制信息API---上
export const selectPersonTypeAndEduStatisticsApi = (params: {}, noLoading: boolean) => {
return http.post(BASEURL + `/xmgl/workerInfo/selectPersonTypeAndEduStatistics`, params, { headers: { noLoading: noLoading } });
// return http.post(BASEURL + `/xmgl/workerInfo/selectPersonTypeAndEduStatistics`, params, { headers: { noLoading: noLoading } });
return http.post(BASEURL + `/xmgl/workerAttendance/selectEnterpriseAttendanceCount`, params, { headers: { noLoading: noLoading } });
};
//获取劳务实名制信息API---下
@ -59,6 +60,11 @@ export const securityPageApi = (params: {}, noLoading: boolean) => {
return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/page`, params, { headers: { noLoading: noLoading } });
};
// 获取安全评分数据API
export const getStatScoreApi = (params: {}, showLoading: boolean) => {
return http.get(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/getStatScore`, params, { headers: { noLoading: showLoading } });
};
//获取应急记录信息API
export const emergencyPageApi = (params: {}, noLoading: boolean) => {
// return http.get(BASEURL + `/xmgl/xzEmergencyRecord/page`, params, { headers: { noLoading: noLoading } });

BIN
src/assets/images/agjtLive/top-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 MiB

22
src/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue
View File

@ -5,14 +5,14 @@
<div class="topBox">
<div class="topInner1">
<div class="innerText">
<div>今日出勤总人数</div>
<div>{{lwInfo2.presencePersonTotal || 0}}</div>
<div>今日出勤人数</div>
<div>{{lwInfo2.attendancePersonTotal || 0}}</div>
</div>
</div>
<div class="topInner2">
<div class="innerText">
<div>在册人数</div>
<div>{{lwInfo2.totalPerson || 0}}</div>
<div style="transform:translateX(20px)">实时在场人数</div>
<div>{{lwInfo2.presencePersonTotal || 0}}</div>
</div>
</div>
</div>
@ -25,7 +25,8 @@
<div style="width:50px;text-align:center">{{i + 1}}</div>
<div>{{item.name}}</div>
</div>
<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.totalPerson}}</div>
<!-- <div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.totalPerson}}</div> -->
<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.presencePersonTotal}}</div>
</div>
</el-scrollbar>
</div>
@ -46,7 +47,7 @@
<div style="width:50px;text-align:center">{{i + 1}}</div>
<div>{{item.name}}</div>
</div>
<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.totalPerson}}</div>
<div class="itemInfo2">{{item.attendancePersonTotal}}/{{item.presencePersonTotal}}</div>
</div>
</div>
</vue3-seamless-scroll>
@ -93,21 +94,20 @@ const BASEURL = import.meta.env.VITE_API_URL
const lwInfo1 = ref({} as any)
const lwInfo2 = ref({} as any)
async function getLwInfo() {
// let data = {
// projectSn: store.sn,
// }
// selectPersonTypeAndEduStatisticsApi({
// projectSn: data.projectSn,
// projectSn: store.sn,
// },true).then(res1 => {
// if(res1.success){
// if(res1.result){
// lwInfo1.value = res1.result.personType
// lwInfo1.value = res1.result
// // console.log(lwInfo1.value)
// }
// }
// })
selectWorkerTeamAndDepartmentStatisticsApi({
projectSn: store.sn,
},true).then(res2 => {
console.log(res2)
if(res2.success){
if(res2.result){
lwInfo2.value = res2.result

9
src/views/agjtLiveScreen/liveScreen/centerTop.vue
View File

@ -18,7 +18,7 @@
</el-carousel>
</div> -->
<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
<video id="myVideo" :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
</div>
</Card>
<setVideoDialog ref="partyBuildRef" @updateConfig="updateConfig"></setVideoDialog>
@ -99,6 +99,10 @@ const configWeekVideoListFn = async () => {
if(res.result.length != 0 && today == 6) projectData.value.videoUrl = res.result[0].sat
}
};
function playVideo(){
let video: any = document.getElementById("myVideo");
video.play();
}
// const getVideoList = async () => {
// let res: any = await selectLiveVideoListApi({
// projectSn: store.sn
@ -132,7 +136,8 @@ defineExpose({
onMounted(async () => {
// if (COMPANY !== "agjt") showVideo.value = 2;
// await getVideoList();
await configWeekVideoListFn(true);
await configWeekVideoListFn();
// playVideo()
});
</script>

10
src/views/agjtLiveScreen/liveScreen/index.vue
View File

@ -19,6 +19,7 @@
</div>
<div class="right">
<rightTop class="rightTop" ref="rightTopRef"></rightTop>
<rightCenter class="rightCenter" ref="rightCenterRef"></rightCenter>
<rightBottom class="rightBottom" ref="rightBottomRef"></rightBottom>
</div>
</div>
@ -32,6 +33,7 @@ import centerTop from "@/views/agjtLiveScreen/liveScreen/centerTop.vue";
import centerBottomLeft from "@/views/agjtLiveScreen/liveScreen/centerBottomLeft.vue";
import centerBottomRight from "@/views/agjtLiveScreen/liveScreen/centerBottomRight.vue";
import rightTop from "@/views/agjtLiveScreen/liveScreen/rightTop.vue";
import rightCenter from "@/views/agjtLiveScreen/liveScreen/rightCenter.vue";
import rightBottom from "@/views/agjtLiveScreen/liveScreen/rightBottom.vue";
import { GlobalStore } from "@/stores";
import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
@ -82,6 +84,7 @@ const centerTopRef = ref();
const centerBottomLeftRef = ref();
const centerBottomRightRef = ref();
const rightTopRef = ref();
const rightCenterRef = ref();
const rightBottomRef = ref();
const excuteCount = ref(0)
const callChildFn = async () => {
@ -95,6 +98,7 @@ const callChildFn = async () => {
centerBottomLeftRef.value.centerBottomLeftMethod()
centerBottomRightRef.value.centerBottomRightMethod()
rightTopRef.value.rightTopMethod()
rightCenterRef.value.rightCenterMethod()
rightBottomRef.value.rightBottomMethod()
})
}
@ -171,8 +175,12 @@ onMounted( async () => {
.rightTop {
height: 32%;
}
.rightCenter {
height: 33%;
margin: 3% 0 3% 0;
}
.rightBottom {
height: 78.636%;
height: 35.25%;
margin: 3% 0 0 0;
}
}

5
src/views/agjtLiveScreen/liveScreen/leftBottom.vue
View File

@ -46,6 +46,7 @@ async function getSpecialInfo() {
if (res.result.total) {
// innerPie.value[0].value = res.result.total.running
// innerPie.value[1].value = res.result.total.complete
innerPie.value = []
innerPie.value.push({ value: res.result.total.running, name: "进行中" });
innerPie.value.push({ value: res.result.total.complete, name: "已完成" });
}
@ -59,6 +60,10 @@ async function getSpecialInfo() {
value:item.num
})
});
// 获取你要清除的图表实例
let chart = echarts.init(document.getElementById('pieEchart'));
// 使用 clear() 方法清除已绘制的图表
chart.clear();
drawPie();
}
}

4
src/views/agjtLiveScreen/liveScreen/rightBottom.vue
View File

@ -2,7 +2,7 @@
<div class="rightBottom">
<Card title="安全待办">
<div class="mainContainer" v-if="securityData.length">
<el-scrollbar style="height:102.5%">
<el-scrollbar style="height:107%">
<div class="itemBox" v-for="(item,i) in securityData" :key="i">
<!-- <div class="itemLine1">{{item.dangerItemContent}}</div>
<div class="itemLine2">
@ -104,7 +104,7 @@ onMounted( async () => {
border: 1px solid #0c58a2;
color: #fff;
padding: 5px 10px;
margin-bottom: 10px;
margin-bottom: 12px;
box-shadow: inset 0 0 8px 2px rgba($color: #0c58a2, $alpha: 1.0); /* 使用box-shadow属性添加发光效果，参数分别代表向内扩散、水平偏移、垂直偏移、模糊半径、阴影尺寸和颜色 */
// box-shadow: inset 0 0 5px 2px rgba(255, 255, 255, 0.7); /* 向内发光效果 */
.itemLine1{

199
src/views/agjtLiveScreen/liveScreen/rightCenter.vue Normal file
View File

@ -0,0 +1,199 @@
<template>
<div class="rightCenter">
<Card title="应急记录">
<div class="mainContainer" v-if="emergencyData.length != 0">
<el-scrollbar style="height:102.5%">
<div class="itemBox" v-for="(item,i) in emergencyData" :key="i">
<div class="itemLeft">
<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
<div style="margin-left:5px">事项</div>
</div>
<div class="itemRight">
<div class="rightCenter">
<div class="overHiddenText" style="width:50%">{{item.emergencyTypeName || '--'}}</div>
<div class="overHiddenText" style="width:50%;float:right">应急责任人：{{item.emergencyManager || '--'}}</div>
</div>
<div class="rightCenter">
<div style="" class="rcInner1 overHiddenText">报警人：{{item.alarmPersonName || '--'}}</div>
<div style="" class="rcInner2 overHiddenText">所属企业：{{item.enterpriseName || '--'}}</div>
</div>
<div class="rightBottom">
<div class="rbInner1">处置状态：{{
item.dispositionStatus == 1 ? '待救援' :
item.dispositionStatus == 2 ? '救援中' :
item.dispositionStatus == 3 ? '已救援' : '--'
}}</div>
<div class="rbInner2" v-if="item.dispositionStatus == 3">处置报告：
<span style="cursor:pointer" @click="downloadReport(item.disposalReport)">下载</span>
</div>
<div class="rbInner3">{{item.updateDate || '--'}}</div>
</div>
</div>
</div>
</el-scrollbar>
</div>
<div class="not-data" v-else>
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</Card>
</div>
</template>
<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
import * as echarts from "echarts";
import { COMPANY } from "@/config/config";
//引入现场大屏API
import {
emergencyPageApi
} from "@/api/modules/agjtLiveApi";
const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL
//获取应急记录信息
const emergencyData = ref([] as any)
async function getEmergencyDataData() {
let data = {
page: 1,
pageSize: 9999,
// inDispositionStatus: '', // 数据类型：字符串，1：待救援、2：救援中、3：已救援
}
await emergencyPageApi(data,true).then(res => {
if(res.success){
emergencyData.value = res.result.records
}
});
};
function downloadReport(row){
const url = row && row != "null" && JSON.parse(row)[0].url;
const fileName = row && row != "null" && JSON.parse(row)[0].name;
if (!url) {
this.$message.warning('暂无下载文件');
return
}
fetch(url)
.then(response => response.blob())
.then(blob => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
link.click();
});
}
//测试方法，对接口时改成相应的方法注释
const rightCenterMethod = async () => {
getEmergencyDataData()
}
//将方法暴露给父组件
defineExpose({
rightCenterMethod
})
onMounted(async () => {
getEmergencyDataData()
});
</script>
<style lang="scss" scoped>
.rightCenter {
width: 100%;
height: 100%;
.mainContainer{
width: calc(100% - 20px);
height: calc(100% - 17px);
padding: 10px 10px;
.itemBox{
width: 100%;
height: 65px;
color: #fff;
display: flex;
justify-content: space-between;
margin-bottom: 12px;
.itemLeft{
width: 15%;
height: 100%;
border-left: 2px solid #f73758;
background-color: rgba($color: darkred, $alpha: 0.4);
display: flex;
justify-content: center;
align-items: center;
}
.itemRight{
height: calc(100% - 10px);
width: calc(83% - 10px);
padding: 5px 5px;
// background-color: rgba($color: #a85454, $alpha: 0.3);
background: repeating-linear-gradient(100deg, rgba(200,10,10,0.1), rgba(200,10,10,0.1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) 40px),
linear-gradient(to bottom, rgba(200,10,10,0.2), rgba(200,10,10,0.3));
background-size: 100% 100%, 100% 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.rightTop{
height: 30%;
width: 100%;
display: flex;
justify-content: space-between;
}
.rightCenter{
height: 30%;
width: 100%;
display: flex;
justify-content: flex-end;
.rcInner1{
width: 50%;
}
.rcInner2{
width: 50%;
}
}
.rightBottom{
color: #19bfef;
height: 30%;
display: flex;
align-items: center;
justify-content: space-between;
// transform: translateY(-3px);
.rbInner1{}
.rbInner2{}
.rbInner3{
font-style: italic;
}
}
}
}
}
}
.overHiddenText{
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
::v-deep .h-card .content {
height: 80%;
}
::v-deep .h-card {
position: relative;
}
.not-data {
top: 40%;
width: 30%;
left: 35%;
position: absolute;
text-align: center;
img {
width: 50%;
}
p {
color: #fff;
font-size: 14px;
}
}
</style>

593
src/views/agjtLiveScreen/liveScreen/rightTop.vue
View File

@ -1,40 +1,54 @@
<template>
<div class="rightTop">
<Card title="应急记录">
<div class="mainContainer" v-if="emergencyData.length != 0">
<el-scrollbar style="height:104.5%">
<div class="itemBox" v-for="(item,i) in emergencyData" :key="i">
<div class="itemLeft">
<div style="font-size:24px;transform:translateY(-3px)">⚠</div>
<div style="margin-left:5px">事项</div>
</div>
<div class="itemRight">
<div class="rightTop">
<div class="overHiddenText" style="width:50%">{{item.emergencyTypeName || '--'}}</div>
<div class="overHiddenText" style="width:50%;float:right">应急责任人：{{item.emergencyManager || '--'}}</div>
</div>
<div class="rightCenter">
<div style="" class="rcInner1 overHiddenText">报警人：{{item.alarmPersonName || '--'}}</div>
<div style="" class="rcInner2 overHiddenText">所属企业：{{item.enterpriseName || '--'}}</div>
</div>
<div class="rightBottom">
<div class="rbInner1">处置状态：{{
item.dispositionStatus == 1 ? '待救援' :
item.dispositionStatus == 2 ? '救援中' :
item.dispositionStatus == 3 ? '已救援' : '--'
}}</div>
<div class="rbInner2" v-if="item.dispositionStatus == 3">处置报告：
<span style="cursor:pointer" @click="downloadReport(item.disposalReport)">下载</span>
</div>
<div class="rbInner3">{{item.updateDate || '--'}}</div>
</div>
</div>
<Card title="企业安全评分">
<div class="mainContainer">
<div class="content-div aq">
<div id="waterAq" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
<span style="transform: translateY(33px)">安全隐患治理</span>
</div>
<div class="content-div wd">
<div id="waterWd" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
<span style="transform: translateY(33px)">危大工程</span>
</div>
<div class="content-div jy">
<div id="waterJy" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
<span style="transform: translateY(33px)">安全教育</span>
</div>
<div class="content-div fx">
<div id="waterFx" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
<span style="transform: translateY(33px)">风险管理</span>
</div>
<div class="content-div zn">
<div id="waterZn" style="width: 80%; height: 80%; transform: translateY(45px)"></div>
<span style="transform: translateY(33px)">AI警报</span>
</div>
<div :class="['score-div', statScore.total >= 80 ? 'scoreBg1' : statScore.total >= 60 ? 'scoreBg2' : 'scoreBg3']">
<div class="score-part">
<span>{{ statScore.total }}</span>
<span>分</span>
</div>
</el-scrollbar>
</div>
<div class="not-data" v-else>
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
<div class="scoreInner scoreTextBg1" v-if="statScore.total >= 80">
<span style="font-size: 12px;transform:translateY(20px)">安全评分</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: 12px;transform:translateY(20px)">安全评分</span>
<div class="scoreReview">一般</div>
<div class="scoreStar"></div>
</div>
<div class="scoreInner scoreTextBg3" v-if="statScore.total < 60">
<span style="font-size: 12px;transform:translateY(20px)">安全评分</span>
<div class="scoreReview">差</div>
<div class="scoreStar"></div>
</div>
</div>
</div>
</Card>
</div>
@ -45,50 +59,285 @@ import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
import * as echarts from "echarts";
import "echarts-liquidfill";
import { COMPANY } from "@/config/config";
//引入现场大屏API
import {
emergencyPageApi
emergencyPageApi,
getStatScoreApi
} from "@/api/modules/agjtLiveApi";
const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL
//获取应急记录信息
const emergencyData = ref([] as any)
async function getEmergencyDataData() {
let data = {
page: 1,
pageSize: 9999,
// inDispositionStatus: '', // 数据类型：字符串，1：待救援、2：救援中、3：已救援
}
await emergencyPageApi(data,true).then(res => {
if(res.success){
emergencyData.value = res.result.records
}
});
};
function downloadReport(row){
const url = row && row != "null" && JSON.parse(row)[0].url;
const fileName = row && row != "null" && JSON.parse(row)[0].name;
if (!url) {
this.$message.warning('暂无下载文件');
return
}
fetch(url)
.then(response => response.blob())
.then(blob => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
link.click();
});
//绘画安全隐患治理水波图
function drawAqWater() {
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterAq")!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
// 配置项
option = {
series: [
{
type: "liquidFill", //设置图表类型
data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
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: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center: ["50%", "50%"], //中心点的位置1E90FF
animationEasing: "easeOut",
outline: {
borderDistance: 4, // 外边框距离
itemStyle: {
borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色
}
},
backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色
},
label: {
normal: {
formatter: function () {
return statScore.value.hiddenDangerScore + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 12
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
}
//绘画危大工程水波图
function drawWdWater() {
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterWd")!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
// 配置项
option = {
series: [
{
type: "liquidFill", //设置图表类型
data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
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: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center: ["50%", "50%"], //中心点的位置1E90FF
animationEasing: "easeOut",
outline: {
borderDistance: 4, // 外边框距离
itemStyle: {
borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色
}
},
backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色
},
label: {
normal: {
formatter: function () {
return statScore.value.dangerEngScore + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 12
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
}
//绘画安全隐患治理水波图
function drawJyWater() {
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterJy")!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
// 配置项
option = {
series: [
{
type: "liquidFill", //设置图表类型
data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
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: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center: ["50%", "50%"], //中心点的位置1E90FF
animationEasing: "easeOut",
outline: {
borderDistance: 4, // 外边框距离
itemStyle: {
borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色
}
},
backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色
},
label: {
normal: {
formatter: function () {
// return statScore.value + "分"
return "30分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 12
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
}
//绘画安全隐患治理水波图
function drawFxWater() {
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterFx")!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
// 配置项
option = {
series: [
{
type: "liquidFill", //设置图表类型
data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
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: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center: ["50%", "50%"], //中心点的位置1E90FF
animationEasing: "easeOut",
outline: {
borderDistance: 4, // 外边框距离
itemStyle: {
borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色
}
},
backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色
},
label: {
normal: {
formatter: function () {
return statScore.value.riskScore + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 12
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
}
//绘画安全隐患治理水波图
function drawZnWater() {
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById("waterZn")!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
// 配置项
option = {
series: [
{
type: "liquidFill", //设置图表类型
data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
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: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center: ["50%", "50%"], //中心点的位置1E90FF
animationEasing: "easeOut",
outline: {
borderDistance: 4, // 外边框距离
itemStyle: {
borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色
}
},
backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色
},
label: {
normal: {
formatter: function () {
return statScore.value.aiScore + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 12
}
}
}
}
]
};
// 使用配置项设置图表
myChart.setOption(option);
}
let statScore = ref({
dangerEngScore: 0,
hiddenDangerScore: 0,
aiScore: 0,
riskScore: 0,
total: 0,
lastMonthTotal: 0
} as any);
//获取centerTop底部按钮显示数据
const getStatScore = async (showLoading: boolean) => {
const res = await getStatScoreApi({ projectSn: store.sn }, showLoading);
statScore.value = res.result;
drawAqWater();
drawWdWater();
drawJyWater();
drawFxWater();
drawZnWater();
};
//测试方法，对接口时改成相应的方法注释
const rightTopMethod = async () => {
getEmergencyDataData()
getStatScore(true)
}
//将方法暴露给父组件
defineExpose({
@ -96,11 +345,31 @@ defineExpose({
})
onMounted(async () => {
getEmergencyDataData()
getStatScore(true)
});
</script>
<style lang="scss" scoped>
.scoreBg1 {
background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 60px);
}
.scoreBg2 {
background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 60px);
}
.scoreBg3 {
background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 60px);
}
.scoreTextBg1 {
background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 30px);
}
.scoreTextBg2 {
background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 30px);
}
.scoreTextBg3 {
background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 30px);
}
.rightTop {
width: 100%;
height: 100%;
@ -108,67 +377,141 @@ onMounted(async () => {
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px 10px;
.itemBox{
width: 100%;
height: 65px;
color: #fff;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.itemLeft{
width: 15%;
height: 100%;
border-left: 2px solid #f73758;
background-color: rgba($color: darkred, $alpha: 0.4);
display: flex;
justify-content: center;
align-items: center;
background-image: url("@/assets/images/commandScreen/top-bg.png");
// background-position: center;
background-position: 49% 15%;
background-repeat: no-repeat;
background-size: auto 130%;
}
.itemRight{
height: calc(100% - 10px);
width: calc(83% - 10px);
padding: 5px 5px;
// background-color: rgba($color: #a85454, $alpha: 0.3);
background: repeating-linear-gradient(100deg, rgba(200,10,10,0.1), rgba(200,10,10,0.1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) 40px),
linear-gradient(to bottom, rgba(200,10,10,0.2), rgba(200,10,10,0.3));
background-size: 100% 100%, 100% 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.rightTop{
height: 30%;
width: 100%;
display: flex;
justify-content: space-between;
}
.rightCenter{
height: 30%;
width: 100%;
display: flex;
justify-content: flex-end;
.rcInner1{
width: 50%;
}
.rcInner2{
width: 50%;
}
}
.rightBottom{
color: #19bfef;
height: 30%;
display: flex;
align-items: center;
justify-content: space-between;
// transform: translateY(-3px);
.rbInner1{}
.rbInner2{}
.rbInner3{
font-style: italic;
}
.content-div {
width: 30%;
height: 30%;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
transform: translateX(0)
}
.aq {
// left: 40px;
// top: 180px;
left: 0%;
top: 45%;
}
.wd {
// left: 200px;
// top: 80px;
left: 12%;
top: 20%;
}
.jy {
// left: 400px;
// top: 5px;
left: 35%;
top: 0%;
}
.fx {
// right: 180px;
// top: 80px;
right: 12%;
top: 20%;
}
.zn {
// right: 40px;
// top: 180px;
right: 0%;
top: 45%;
}
.count-div {
width: 60%;
color: white;
position: absolute;
// bottom: 95px;
// left: 170px;
bottom: 19%;
left: 18%;
display: flex;
align-items: center;
justify-content: space-between;
&-item {
font-size: 14px;
> span:nth-child(2) {
color: #2983e1;
}
}
}
.score-div {
color: white;
position: absolute;
// bottom: 210px;
// left: 383px;
width: 30%;
height: 55%;
// bottom: 30%;
left: 35.5%;
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(45px) translateX(-2px);
.score-part {
margin-top: 50px;
span:nth-child(1) {
font-size: 36px;
}
span:nth-child(2) {
font-size: 18px;
}
}
> span {
color: white;
font-size: 18px;
}
.scoreInner {
text-align: center;
// margin-top: -10px;
width: 90%;
// height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(-15px);
// background-color: red;
.scoreReview {
opacity: 0.7;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
transform: translateY(5px);
// background-color: blue;
}
.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(-30px);
}
}
}
}
}
.overHiddenText{