937 lines
28 KiB
Vue
937 lines
28 KiB
Vue
<template>
|
||
<div class="centerTop">
|
||
<div class="top-content">
|
||
<div class="content-div aq">
|
||
<!-- <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>
|
||
<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>
|
||
<div class="content-div jy">
|
||
<!-- <div class="circle-box"> -->
|
||
<!-- <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>
|
||
<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>
|
||
<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>
|
||
<div class="count-div">
|
||
<div class="count-div-item">
|
||
<span>上月安全综合评分</span>
|
||
<span>{{ statScore.lastMonthTotal }}</span>
|
||
<span>分</span>
|
||
</div>
|
||
<div class="count-div-item">
|
||
<span
|
||
>相较上月{{
|
||
statScore.radio > 0
|
||
? "上升" + (statScore.radio ? statScore.radio : 0)
|
||
: "下降" + (statScore.radio ? statScore.radio.toString().substr(1) : 0)
|
||
}}
|
||
%</span
|
||
>
|
||
<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-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>
|
||
<div class="scoreStar"></div>
|
||
</div>
|
||
<div class="scoreInner scoreTextBg2" v-if="statScore.total >= 60 && statScore.total < 80">
|
||
<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>
|
||
<div class="scoreReview">差</div>
|
||
<div class="scoreStar"></div>
|
||
</div>
|
||
</div>
|
||
<div class="classify-div">
|
||
<div class="classify-div-item" @click="openDialogData({ index: 12, title: '人员总览', type: 2 })">
|
||
<span style="font-size: 12px">人员总览</span>
|
||
</div>
|
||
<div class="classify-div-item" style="width: 250px" @click="openDialogData({ index: 1, title: '' })">
|
||
<span style="font-size: 12px">危险特殊作业 {{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
|
||
</div>
|
||
<div class="classify-div-item" style="width: 210px" @click="openDialogData({ index: 2, title: '安全教育' })">
|
||
<span style="font-size: 12px">安全教育 {{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
|
||
</div>
|
||
<div class="classify-div-item" style="width: 300px" @click="openDialogData({ index: 3, title: '影响进度计划因素' })">
|
||
<span style="font-size: 12px">影响进度计划因素 {{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
|
||
</div>
|
||
<div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })">
|
||
<span style="font-size: 12px">风险统计 {{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
|
||
</div>
|
||
<div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })">
|
||
<span style="font-size: 12px">安全隐患 {{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
|
||
</div>
|
||
<div class="classify-div-item" @click="openDialogData({ index: 99, title: '质量管理' })">
|
||
<span style="font-size: 12px">质量管理 {{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span>
|
||
</div>
|
||
<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })">
|
||
<span style="font-size: 12px">AI警报 {{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="background-title">
|
||
<span @click="openDialogData({ index: 9, title: '月度安全综合评分' })">查看月度安全评分报告详情</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Card from "@/components/card.vue";
|
||
import { ref, onMounted, watch } from "vue";
|
||
import { GlobalStore } from "@/stores";
|
||
import { ElMessage } from "element-plus";
|
||
import * as echarts from "echarts";
|
||
import "echarts-liquidfill";
|
||
|
||
import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
|
||
import { getStatsDirectorateBigScreenApi, getStatScoreApi } from "@/api/modules/agjtCommandApi";
|
||
import { selectLiveVideoListApi } from "@/api/modules/video";
|
||
import ckplayerComp from "./ckplayerComp.vue";
|
||
import { COMPANY } from "@/config/config";
|
||
|
||
const emits = defineEmits(["openDialog"]);
|
||
const store = GlobalStore();
|
||
const videoList = ref([] as any);
|
||
// ts
|
||
type Props = {
|
||
projectData?: any; // 传入项目信息
|
||
};
|
||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
projectData: {}
|
||
});
|
||
// 项目信息
|
||
const projectData = ref({} as any);
|
||
// 打开弹窗
|
||
const openDialogData = (obj: any) => {
|
||
emits("openDialog", obj);
|
||
};
|
||
watch(
|
||
() => props.projectData,
|
||
newVal => {
|
||
if (newVal) {
|
||
// props.xData = newVal;
|
||
projectData.value = newVal;
|
||
}
|
||
}
|
||
);
|
||
|
||
//绘画安全隐患治理水波图
|
||
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.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 + "分";
|
||
},
|
||
textStyle: {
|
||
// color: "#6495ED", //蓝色
|
||
color: "#fff",
|
||
insideColor: "#fff",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用配置项设置图表
|
||
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.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 + "分";
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
insideColor: "#fff",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用配置项设置图表
|
||
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.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 "30分";
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
insideColor: "#fff",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用配置项设置图表
|
||
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.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 + "分";
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
insideColor: "#fff",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用配置项设置图表
|
||
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.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 + "分";
|
||
},
|
||
textStyle: {
|
||
color: "#fff",
|
||
insideColor: "#fff",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用配置项设置图表
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
//效果图
|
||
const picUrl = ref("" as any);
|
||
|
||
const BASEURL = import.meta.env.VITE_API_URL;
|
||
// 显示视频
|
||
const showVideo = ref(1 as any);
|
||
|
||
// 显示更换图片
|
||
const showChangeImg = ref(false as any);
|
||
|
||
// 显示更换视频
|
||
const showChangeVideo = ref(false as any);
|
||
|
||
let topText2 = ref([
|
||
{ id: 1, title: "现场视频", isActive: true },
|
||
{ id: 2, title: "宣传视频", isActive: false },
|
||
{ id: 3, title: "效果图", isActive: false }
|
||
]);
|
||
let topText = ref([
|
||
// { id: 1, title: "现场视频", isActive: true },
|
||
{ id: 2, title: "宣传视频", isActive: false },
|
||
{ id: 3, title: "效果图", isActive: false }
|
||
]);
|
||
const getVideoList = async (showLoading: boolean) => {
|
||
let res: any = await selectLiveVideoListApi(
|
||
{
|
||
projectSn: store.sn
|
||
},
|
||
showLoading
|
||
);
|
||
if (res.result && res.result.extend1) {
|
||
videoList.value = JSON.parse(res.result.extend1).result.videoList;
|
||
// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
|
||
setTimeout(() => {
|
||
// 获取所有的 video 元素
|
||
var videos = document.querySelectorAll(".href-content video");
|
||
// var videos = document.getElementsByTagName("video");
|
||
// 遍历所有的 video 元素
|
||
for (var i = 0; i < videos.length; i++) {
|
||
// 修改视频元素的样式
|
||
videos[i].style.width = "99.9%";
|
||
videos[i].style.height = "99.9%";
|
||
}
|
||
}, 2000);
|
||
}
|
||
};
|
||
let statsDirectorateBigScreen = ref({} as any);
|
||
//获取centerTop底部按钮显示数据
|
||
const getStatsDirectorateBigScreen = async (showLoading: boolean) => {
|
||
const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn }, showLoading);
|
||
statsDirectorateBigScreen.value = res.result;
|
||
};
|
||
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();
|
||
};
|
||
|
||
function boxStyle(item: any) {
|
||
if (item.isActive) {
|
||
let choiseStyle = {
|
||
color: "#fff"
|
||
};
|
||
return choiseStyle;
|
||
}
|
||
return {};
|
||
}
|
||
let tabIndex = ref(1 as any);
|
||
function activeBtn(item: any) {
|
||
let currentState = item.isActive;
|
||
if (!currentState) {
|
||
topText.value.forEach(el => {
|
||
el.isActive = false;
|
||
});
|
||
item.isActive = !currentState;
|
||
tabIndex.value = item.id;
|
||
}
|
||
showVideo.value = item.id;
|
||
}
|
||
|
||
const uploadFail = () => {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传失败，请重试",
|
||
type: "warning"
|
||
});
|
||
};
|
||
|
||
const fileTypeFail = (text: any) => {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: text,
|
||
type: "warning"
|
||
});
|
||
};
|
||
|
||
const uploadSuccess = () => {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传成功",
|
||
type: "success"
|
||
});
|
||
};
|
||
// 查询效果图
|
||
function getQueryBySnData(showLoading: boolean) {
|
||
queryBySnData(
|
||
{
|
||
projectSn: store.sn,
|
||
showType: 3
|
||
},
|
||
showLoading
|
||
).then((res: any) => {
|
||
if (res.result) {
|
||
picUrl.value = res.result.configValue;
|
||
}
|
||
});
|
||
}
|
||
// //保存或删除宣传视频
|
||
function saveOrDeleteVideo(url) {
|
||
editProjectInfo({
|
||
projectSn: store.sn,
|
||
videoUrl: url
|
||
}).then(res => {
|
||
uploadSuccess(); //"上传成功"
|
||
projectData.value.videoUrl = url;
|
||
});
|
||
}
|
||
//将方法暴露给父组件
|
||
defineExpose({
|
||
getQueryBySnData
|
||
});
|
||
const setIntervalFn = (showLoading: boolean) => {
|
||
getVideoList(showLoading);
|
||
getQueryBySnData(showLoading);
|
||
getStatsDirectorateBigScreen(showLoading);
|
||
getStatScore(showLoading);
|
||
};
|
||
onMounted(async () => {
|
||
setIntervalFn(false);
|
||
// 定时三十秒刷新
|
||
setInterval(() => {
|
||
setIntervalFn(true);
|
||
}, 30000);
|
||
});
|
||
</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);
|
||
}
|
||
.centerTop {
|
||
// background-color: darkred;
|
||
.top-content {
|
||
height: 100%;
|
||
position: relative;
|
||
background-image: url("@/assets/images/commandScreen/top-bg.png");
|
||
// background-position: center;
|
||
background-position: -28px;
|
||
background-repeat: no-repeat;
|
||
|
||
.content-div {
|
||
width: 30%;
|
||
height: 30%;
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.circle-box {
|
||
width: 70px;
|
||
height: 70px;
|
||
color: white;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
|
||
// padding: 23px 20px;
|
||
// border: 2px solid #318FF7;
|
||
background: url("@/assets/images/commandScreen/bg10.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
span {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
> span {
|
||
margin-top: 10px;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.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: 45%;
|
||
bottom: 30%;
|
||
left: 35.5%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.score-part {
|
||
margin-top: 60px;
|
||
span:nth-child(1) {
|
||
font-size: 72px;
|
||
}
|
||
|
||
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;
|
||
|
||
// background-color: red;
|
||
.scoreReview {
|
||
opacity: 0.7;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 50px;
|
||
// 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(-20px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.classify-div {
|
||
width: 100%;
|
||
color: white;
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 0px;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: space-between;
|
||
// justify-content: space-around;
|
||
|
||
&-item {
|
||
// width: 180px;
|
||
width: 180px;
|
||
height: 75px;
|
||
// background-color: #0090D8;
|
||
// padding: 10px 20px;
|
||
// border-radius: 24px;
|
||
background: url("@/assets/images/commandScreen/bg9.png") no-repeat;
|
||
background-size: 120% 100%;
|
||
background-position: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// padding: 0 5px;
|
||
|
||
span {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.background-title {
|
||
width: 100%;
|
||
height: 40px;
|
||
position: absolute;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
color: #00e2f9;
|
||
font-size: 14px;
|
||
bottom: -10px;
|
||
left: 0px;
|
||
background-image: url("@/assets/images/commandScreen/title-bg.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
}
|
||
</style>
|