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

flx：提交大屏水波球 总包柱状图自动滚动

Browse Source
This commit is contained in:
X_Rian 2024-08-22 14:27:54 +08:00
parent 2d6868a3e9
commit aef467286f
7 changed files with 603 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env.development
View File

@ -4,7 +4,8 @@ NODE_ENV = 'development'
# 本地环境接口地址(/api/index.ts文件中使用) # 本地环境接口地址(/api/index.ts文件中使用)
# 后端本地 # 后端本地
# VITE_API_URL = 'http://192.168.34.155:19111' # VITE_API_URL = 'http://192.168.34.155:19111'
VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地 # VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
VITE_API_URL = 'http://192.168.34.221:28890' #雄哥本地
# VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程 # VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
# VITE_API_URL = 'http://192.168.34.221:28889' # VITE_API_URL = 'http://192.168.34.221:28889'
# VITE_API_URL = 'http://121.196.214.246/api' # VITE_API_URL = 'http://121.196.214.246/api'
@ -46,7 +47,7 @@ VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
# 包头化工 # 包头化工
# VITE_API_URL = 'http://jxj.zhgdyun.com:18000' # VITE_API_URL = 'http://jxj.zhgdyun.com:18000'
# 大连金笔 # 大连金笔
VITE_API_URL = 'http://101.43.164.214:11126' # VITE_API_URL = 'http://101.43.164.214:11126'
# 上传 # 上传
VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url=' VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='

4
src/config/config.ts
View File

@ -30,10 +30,10 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
// export const COMPANY: string = "agjt"; //鞍钢集团 // export const COMPANY: string = "agjt"; //鞍钢集团
// export const COMPANY: string = "tj"; // 同济项目 // export const COMPANY: string = "tj"; // 同济项目
// export const COMPANY: string = "scwc"; // 四川网诚项目 // export const COMPANY: string = "scwc"; // 四川网诚项目
export const COMPANY: string = "dljb"; // 大连金笔项目 // export const COMPANY: string = "dljb"; // 大连金笔项目
// export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏 // export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
// export const COMPANY: string = "bthg"; //包头化工 // export const COMPANY: string = "bthg"; //包头化工
// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏 export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
// export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
// export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览 // export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
// export const COMPANY: string = "agjtLocationLive"; //鞍钢集团人员定位大屏 // export const COMPANY: string = "agjtLocationLive"; //鞍钢集团人员定位大屏

4
src/routers/modules/staticRouter.ts
View File

@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
{ {
path: "/large", path: "/large",
name: "大屏", name: "大屏",
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版 // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏 component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏 // component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏 // component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
// component: () => import("@/views/locationLive/locationL.vue"), //人员定位大屏 // component: () => import("@/views/locationLive/locationL.vue"), //人员定位大屏

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

@ -1,6 +1,7 @@
<template> <template>
<div class="centerTop"> <div class="centerTop">
<div class="top-content"> <div class="top-content">
<!-- @click="openPeopleCountDialog(1)" -->
<div class="content-div aq"> <div class="content-div aq">
<!-- <div class="circle-box"> <!-- <div class="circle-box">
<span>{{ statScore.hiddenDangerScore }}分</span> <span>{{ statScore.hiddenDangerScore }}分</span>
@ -11,6 +12,7 @@
安全管理 安全管理
</span> </span>
</div> </div>
<!-- @click="openPeopleCountDialog(2)" -->
<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>
@ -21,18 +23,29 @@
文明施工 文明施工
</span> </span>
</div> </div>
<div class="content-div jy">
<!-- <div class="circle-box"> --> <div class="content-div zn" @click="toolInfoFn('wdgc')" v-if="toolInfo.dangerousProjectFlag">
<!-- <span>{{statScore}}分</span> --> <!-- <div class="circle-box">
<!-- <span>25分</span> <span>{{ statScore.aiScore }}分</span>
</div> --> </div> -->
<div id="waterJy" 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)"> <span style="transform: translateY(-50px)">
<!-- 安全教育 --> <!-- AI警报 -->
施工支具 危大工程
</span> </span>
</div> </div>
<div class="content-div fx"> <div class="zn content-div3" v-else>
<!-- @click="openPeopleCountDialog(item.tenType)" -->
<div class="content-div2" v-for="item in toolInfo.dangerousProjectList" :key="item.id">
<div :id="`waterZn${item.id}`" style="width: 100%; height: 100%"></div>
<span>
<!-- AI警报 -->
{{ item.title }}
</span>
</div>
</div>
<div class="content-div fx" @click="toolInfoFn('gcjx')" v-if="toolInfo.engineeringMachineryFlag">
<!-- <div class="circle-box"> <!-- <div class="circle-box">
<span>{{ statScore.riskScore }}分</span> <span>{{ statScore.riskScore }}分</span>
</div> --> </div> -->
@ -42,16 +55,29 @@
工程器械 工程器械
</span> </span>
</div> </div>
<div class="content-div zn"> <div class="content-div4" v-else>
<!-- <div class="circle-box"> <!-- @click="openPeopleCountDialog(item.tenType)" -->
<span>{{ statScore.aiScore }}分</span> <div class="content-div5" v-for="item in toolInfo.engineeringMachineryList" :key="item.id">
</div> --> <div :id="`waterFx${item.id}`" style="width: 100%; height: 100%"></div>
<div id="waterZn" style="width: 80%; height: 80%; transform: translateY(-25px)"></div> <span>
<span style="transform: translateY(-50px)">
<!-- AI警报 --> <!-- AI警报 -->
危险作业 {{ item.title }}
</span> </span>
</div> </div>
</div>
<!-- @click="openPeopleCountDialog(10)" -->
<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="count-div"> <div class="count-div">
<div class="count-div-item"> <div class="count-div-item">
<span>上月安全综合评分</span> <span>上月安全综合评分</span>
@ -59,23 +85,28 @@
<span>分</span> <span>分</span>
</div> </div>
<div class="count-div-item"> <div class="count-div-item">
<span <span>相较上月{{
>相较上月{{
statScore2.differScoreRate > 0 statScore2.differScoreRate > 0
? "上升" + (statScore2.differScoreRate ? statScore2.differScoreRate : 0) ? "上升" + (statScore2.differScoreRate ? statScore2.differScoreRate : 0)
: "下降" + (statScore2.differScoreRate ? statScore2.differScoreRate.toString().substr(1) : 0) : "下降" +
(statScore2.differScoreRate
? statScore2.differScoreRate.toString().substr(1)
: 0)
}} }}
%</span %</span>
> <span :style="statScore2.differScoreRate > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{
<span :style="statScore2.differScoreRate > 0 ? 'color:#0db027' : 'color:#f77c7d'" statScore2.differScoreRate > 0 ? "↑" : "↓" }}
>{{ statScore2.differScoreRate > 0 ? "↑" : "↓" }}
</span> </span>
</div> </div>
</div> </div>
<div <div :class="[
:class="['score-div', statScore2.monthScore >= 80 ? 'scoreBg1' : statScore2.monthScore >= 60 ? 'scoreBg2' : 'scoreBg3']" 'score-div',
@click="openDialogData({ index: 9, title: '月度安全综合评分' })" statScore2.monthScore >= 80
> ? 'scoreBg1'
: statScore2.monthScore >= 60
? 'scoreBg2'
: 'scoreBg3',
]" @click="openDialogData({ index: 9, title: '月度安全综合评分' })">
<div class="score-part"> <div class="score-part">
<span>{{ statScore2.monthScore }}</span> <span>{{ statScore2.monthScore }}</span>
<span>分</span> <span>分</span>
@ -101,25 +132,37 @@
<span style="font-size: 12px">人员总览</span> <span style="font-size: 12px">人员总览</span>
</div> </div>
<div class="classify-div-item" style="width: 250px" @click="openDialogData({ index: 1, title: '' })"> <div class="classify-div-item" style="width: 250px" @click="openDialogData({ index: 1, title: '' })">
<span style="font-size: 12px">危险特殊作业&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span> <span style="font-size: 12px">危险特殊作业&nbsp;{{
statsDirectorateBigScreen.dangerousEngineeringRecordNum
}}</span>
</div> </div>
<div class="classify-div-item" style="width: 210px" @click="openDialogData({ index: 2, title: '' })"> <div class="classify-div-item" style="width: 210px" @click="openDialogData({ index: 2, title: '' })">
<span style="font-size: 12px">安全教育&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span> <span style="font-size: 12px">安全教育&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
</div> </div>
<div class="classify-div-item" style="width: 300px" @click="openDialogData({ index: 3, title: '' })"> <div class="classify-div-item" style="width: 300px" @click="openDialogData({ index: 3, title: '' })">
<span style="font-size: 12px">影响进度计划因素&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span> <span style="font-size: 12px">影响进度计划因素&nbsp;{{
statsDirectorateBigScreen.taskProgressContentNum
}}</span>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })"> <div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })">
<span style="font-size: 12px">风险统计&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span> <span style="font-size: 12px">风险统计&nbsp;{{
statsDirectorateBigScreen.securityQualityInspectionRecordNum
}}</span>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })"> <div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })">
<span style="font-size: 12px">安全隐患&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span> <span style="font-size: 12px">安全隐患&nbsp;{{
statsDirectorateBigScreen.securityQualityInspectionRecordNum
}}</span>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 99, title: '质量管理' })"> <div class="classify-div-item" @click="openDialogData({ index: 99, title: '质量管理' })">
<span style="font-size: 12px">质量管理&nbsp;{{ statsDirectorateBigScreen.qualityInspectionRecordNum }}</span> <span style="font-size: 12px">质量管理&nbsp;{{
statsDirectorateBigScreen.qualityInspectionRecordNum
}}</span>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报', type: 4 })"> <div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报', type: 4 })">
<span style="font-size: 12px">AI警报&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span> <span style="font-size: 12px">AI警报&nbsp;{{
statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum
}}</span>
</div> </div>
</div> </div>
<div class="background-title"> <div class="background-title">
@ -131,14 +174,23 @@
<script setup lang="ts"> <script setup lang="ts">
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch, reactive, nextTick } 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 moment from "moment";
import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview"; import {
import { getStatsDirectorateBigScreenApi, getStatScoreApi, getFiveScoresApi } from "@/api/modules/agjtCommandApi"; editProjectInfo,
eidtProjectShowConfig,
queryBySnData,
} from "@/api/modules/projectOverview";
import {
getStatsDirectorateBigScreenApi,
getStatScoreApi,
getFiveScoresApi,
getScoresApi,
} from "@/api/modules/agjtCommandApi";
import { selectLiveVideoListApi } from "@/api/modules/video"; import { selectLiveVideoListApi } from "@/api/modules/video";
import ckplayerComp from "./ckplayerComp.vue"; import ckplayerComp from "./ckplayerComp.vue";
import { COMPANY } from "@/config/config"; import { COMPANY } from "@/config/config";
@ -152,17 +204,237 @@ type Props = {
}; };
// withDefaults 定义默认值(传入的数据类型同默认值) // withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
projectData: {} projectData: {},
}); });
const toolInfo = reactive({
dangerousProjectFlag: true,
dangerousProjectList: [
{
id: 1,
title: "脚手架",
tenType: 3
},
{
id: 2,
title: "基坑工程",
tenType: 5
},
{
id: 3,
title: "模版支架",
tenType: 6
},
{
id: 4,
title: "物料提升机",
tenType: 8
},
{
id: 5,
title: "塔式起重机",
tenType: 9
}
],
engineeringMachineryFlag: true,
engineeringMachineryList: [
{
id: 1,
title: "高处作业",
tenType: 4
},
{
id: 2,
title: "施工用电",
tenType: 7
}
],
toolName: ""
});
const toolInfoFn = (toolName: string) => {
toolInfo.toolName = toolName;
if (toolName == "wdgc") {
toolInfo.dangerousProjectFlag = false;
emits("openDialog", {
index: 15,
type: 6,
title: "检查评分表"
});
nextTick(() => {
drawZnWater1();
});
} else if (toolName == "gcjx") {
toolInfo.engineeringMachineryFlag = false;
emits("openDialog", {
index: 15,
type: 6,
title: "检查评分表"
});
nextTick(() => {
drawFxWater1();
});
}
};
const dangerousProjectFlagFn = () => {
console.log("dangerousProjectFlag", safetyTypeScores.value);
if (toolInfo.toolName == "wdgc") {
toolInfo.dangerousProjectFlag = true;
nextTick(() => {
drawZnWater();
});
} else if (toolInfo.toolName == "gcjx") {
toolInfo.engineeringMachineryFlag = true;
nextTick(() => {
drawFxWater();
});
}
};
function drawZnWater1() {
toolInfo.dangerousProjectList.forEach((item: any) => {
const find = safetyTypeScores.value.find((ele: any) => ele.tenType == item.tenType);
type EChartsOption = echarts.EChartsOption;
let chartDom = document.getElementById(`waterZn${item.id}`)!;
let myChart = echarts.init(chartDom);
let option: EChartsOption;
// 配置项
option = {
series: [
{
type: "liquidFill", //设置图表类型
// data: [0.6], // 设置水位，值为0到1之间
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:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center: ["50%", "50%"], //中心点的位置1E90FF
// animationEasing:'linear',
animationEasing: "easeOut",
outline: {
borderDistance: 4, // 外边框距离
itemStyle: {
borderWidth: 2, // 外边框宽度
borderColor: "#156ACF", // 外边框颜色
},
},
backgroundStyle: {
color: "rgba(0,0,0,0)", // 背景色
},
label: {
normal: {
formatter: function () {
return find.score + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 12,
},
},
},
},
],
};
// 使用配置项设置图表
myChart.setOption(option);
});
}
//绘画安全隐患治理水波图
function drawFxWater1() {
toolInfo.engineeringMachineryList.forEach((item: any) => {
const find = safetyTypeScores.value.find((ele: any) => ele.tenType == item.tenType);
type EChartsOption = echarts.EChartsOption;
let chartDom = document.getElementById(`waterFx${item.id}`)!;
let myChart = echarts.init(chartDom);
let option: EChartsOption;
// 配置项
option = {
series: [
{
type: "liquidFill", //设置图表类型
// data: [0.6], // 设置水位，值为0到1之间
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:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
center: ["50%", "50%"], //中心点的位置1E90FF
// animationEasing:'linear',
animationEasing: "easeOut",
outline: {
borderDistance: 4, // 外边框距离
itemStyle: {
borderWidth: 2, // 外边框宽度
borderColor: "#156ACF", // 外边框颜色
},
},
backgroundStyle: {
color: "rgba(0,0,0,0)", // 背景色
},
label: {
normal: {
formatter: function () {
return find.score + "分";
},
textStyle: {
color: "#fff",
insideColor: "#fff",
fontSize: 12,
},
},
},
},
],
};
// 使用配置项设置图表
myChart.setOption(option);
});
}
// 项目信息 // 项目信息
const projectData = ref({} as any); const projectData = ref({} as any);
const safetyTypeScores = ref([] as any);
// 获取月度安全综合评分（十种）
const getScores = async () => {
let requestData: any = {
projectSn: store.sn,
month: moment(new Date()).format("YYYY-MM"),
};
const res: any = await getScoresApi(requestData);
safetyTypeScores.value = res.result.safetyTypeScores;
console.log(safetyTypeScores);
};
// 弹窗
const openPeopleCountDialog = (tenType: any) => {
console.log(safetyTypeScores.value);
emits("openDialog", {
index: 14,
type: 4,
title: "检查评分表",
tableItem: {
tenType,
},
currentDate: moment(new Date()).format("YYYY-MM"),
});
// console.log(partyBuildRef.value);
};
// 打开弹窗 // 打开弹窗
const openDialogData = (obj: any) => { const openDialogData = (obj: any) => {
emits("openDialog", obj); emits("openDialog", obj);
}; };
watch( watch(
() => props.projectData, () => props.projectData,
newVal => { (newVal) => {
if (newVal) { if (newVal) {
// props.xData = newVal; // props.xData = newVal;
projectData.value = newVal; projectData.value = newVal;
@ -215,8 +487,8 @@ function drawAqWater() {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色 borderColor: "#156ACF", // 外边框颜色
} },
}, },
// // 水波样式 // // 水波样式
// itemStyle:{ // itemStyle:{
@ -228,7 +500,7 @@ function drawAqWater() {
// shadowOffsetY:10, // 阴影竖直偏移量 // shadowOffsetY:10, // 阴影竖直偏移量
// }, // },
backgroundStyle: { backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色 color: "rgba(0,0,0,0)", // 背景色
}, },
label: { label: {
normal: { normal: {
@ -239,12 +511,12 @@ function drawAqWater() {
// color: "#6495ED", //蓝色 // color: "#6495ED", //蓝色
color: "#fff", color: "#fff",
insideColor: "#fff", insideColor: "#fff",
fontSize: 16 fontSize: 16,
} },
} },
} },
} },
] ],
}; };
// 使用配置项设置图表 // 使用配置项设置图表
myChart.setOption(option); myChart.setOption(option);
@ -294,8 +566,8 @@ function drawWdWater() {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色 borderColor: "#156ACF", // 外边框颜色
} },
}, },
// // 水波样式 // // 水波样式
// itemStyle:{ // itemStyle:{
@ -307,7 +579,7 @@ function drawWdWater() {
// shadowOffsetY:10, // 阴影竖直偏移量 // shadowOffsetY:10, // 阴影竖直偏移量
// }, // },
backgroundStyle: { backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色 color: "rgba(0,0,0,0)", // 背景色
}, },
label: { label: {
normal: { normal: {
@ -317,12 +589,12 @@ function drawWdWater() {
textStyle: { textStyle: {
color: "#fff", color: "#fff",
insideColor: "#fff", insideColor: "#fff",
fontSize: 16 fontSize: 16,
} },
} },
} },
} },
] ],
}; };
// 使用配置项设置图表 // 使用配置项设置图表
myChart.setOption(option); myChart.setOption(option);
@ -372,8 +644,8 @@ function drawJyWater() {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色 borderColor: "#156ACF", // 外边框颜色
} },
}, },
// // 水波样式 // // 水波样式
// itemStyle:{ // itemStyle:{
@ -385,23 +657,23 @@ function drawJyWater() {
// shadowOffsetY:10, // 阴影竖直偏移量 // shadowOffsetY:10, // 阴影竖直偏移量
// }, // },
backgroundStyle: { backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色 color: "rgba(0,0,0,0)", // 背景色
}, },
label: { label: {
normal: { normal: {
formatter: function () { formatter: function () {
// return statScore2.value + "分" // return statScore2.value + "分"
return statScore2.value.thisMonthScores.sgzj + "分"; return statScore2.value.thisMonthScores.sgjj + "分";
}, },
textStyle: { textStyle: {
color: "#fff", color: "#fff",
insideColor: "#fff", insideColor: "#fff",
fontSize: 16 fontSize: 16,
} },
} },
} },
} },
] ],
}; };
// 使用配置项设置图表 // 使用配置项设置图表
myChart.setOption(option); myChart.setOption(option);
@ -451,8 +723,8 @@ function drawFxWater() {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色 borderColor: "#156ACF", // 外边框颜色
} },
}, },
// // 水波样式 // // 水波样式
// itemStyle:{ // itemStyle:{
@ -464,22 +736,22 @@ function drawFxWater() {
// shadowOffsetY:10, // 阴影竖直偏移量 // shadowOffsetY:10, // 阴影竖直偏移量
// }, // },
backgroundStyle: { backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色 color: "rgba(0,0,0,0)", // 背景色
}, },
label: { label: {
normal: { normal: {
formatter: function () { formatter: function () {
return statScore2.value.thisMonthScores.gcqx + "分"; return (statScore2.value.thisMonthScores.gczy + statScore2.value.thisMonthScores.sgyd) + "分";
}, },
textStyle: { textStyle: {
color: "#fff", color: "#fff",
insideColor: "#fff", insideColor: "#fff",
fontSize: 16 fontSize: 16,
} },
} },
} },
} },
] ],
}; };
// 使用配置项设置图表 // 使用配置项设置图表
myChart.setOption(option); myChart.setOption(option);
@ -529,8 +801,8 @@ function drawZnWater() {
borderDistance: 4, // 外边框距离 borderDistance: 4, // 外边框距离
itemStyle: { itemStyle: {
borderWidth: 2, // 外边框宽度 borderWidth: 2, // 外边框宽度
borderColor: "#156ACF" // 外边框颜色 borderColor: "#156ACF", // 外边框颜色
} },
}, },
// // 水波样式 // // 水波样式
// itemStyle:{ // itemStyle:{
@ -542,22 +814,22 @@ function drawZnWater() {
// shadowOffsetY:10, // 阴影竖直偏移量 // shadowOffsetY:10, // 阴影竖直偏移量
// }, // },
backgroundStyle: { backgroundStyle: {
color: "rgba(0,0,0,0)" // 背景色 color: "rgba(0,0,0,0)", // 背景色
}, },
label: { label: {
normal: { normal: {
formatter: function () { formatter: function () {
return statScore2.value.thisMonthScores.wxzy + "分"; return (statScore2.value.thisMonthScores.jsj + statScore2.value.thisMonthScores.jkgc + statScore2.value.thisMonthScores.mbzj + statScore2.value.thisMonthScores.wltsj + statScore2.value.thisMonthScores.tsqzj) + "分";
}, },
textStyle: { textStyle: {
color: "#fff", color: "#fff",
insideColor: "#fff", insideColor: "#fff",
fontSize: 16 fontSize: 16,
} },
} },
} },
} },
] ],
}; };
// 使用配置项设置图表 // 使用配置项设置图表
myChart.setOption(option); myChart.setOption(option);
@ -579,17 +851,17 @@ const showChangeVideo = ref(false as any);
let topText2 = ref([ let topText2 = ref([
{ id: 1, title: "现场视频", isActive: true }, { id: 1, title: "现场视频", isActive: true },
{ id: 2, title: "宣传视频", isActive: false }, { id: 2, title: "宣传视频", isActive: false },
{ id: 3, title: "效果图", isActive: false } { id: 3, title: "效果图", isActive: false },
]); ]);
let topText = ref([ let topText = ref([
// { id: 1, title: "现场视频", isActive: true }, // { id: 1, title: "现场视频", isActive: true },
{ id: 2, title: "宣传视频", isActive: false }, { id: 2, title: "宣传视频", isActive: false },
{ id: 3, title: "效果图", isActive: false } { id: 3, title: "效果图", isActive: false },
]); ]);
const getVideoList = async (showLoading: boolean) => { const getVideoList = async (showLoading: boolean) => {
let res: any = await selectLiveVideoListApi( let res: any = await selectLiveVideoListApi(
{ {
projectSn: store.sn projectSn: store.sn,
}, },
showLoading showLoading
); );
@ -612,7 +884,10 @@ const getVideoList = async (showLoading: boolean) => {
let statsDirectorateBigScreen = ref({} as any); let statsDirectorateBigScreen = ref({} as any);
//获取centerTop底部按钮显示数据 //获取centerTop底部按钮显示数据
const getStatsDirectorateBigScreen = async (showLoading: boolean) => { const getStatsDirectorateBigScreen = async (showLoading: boolean) => {
const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn, recordStatus: 8 }, showLoading); const res = await getStatsDirectorateBigScreenApi(
{ projectSn: store.sn, recordStatus: 8 },
showLoading
);
statsDirectorateBigScreen.value = res.result; statsDirectorateBigScreen.value = res.result;
}; };
let statScore = ref({ let statScore = ref({
@ -621,7 +896,7 @@ let statScore = ref({
aiScore: 0, aiScore: 0,
riskScore: 0, riskScore: 0,
total: 0, total: 0,
lastMonthTotal: 0 lastMonthTotal: 0,
} as any); } as any);
const statScore2 = ref({ const statScore2 = ref({
differScoreRate: 0, differScoreRate: 0,
@ -629,11 +904,16 @@ const statScore2 = ref({
monthScore: 0, monthScore: 0,
thisMonthScores: { thisMonthScores: {
aqgl: 0, aqgl: 0,
gcqx: 0, gczy: 0,
sgzj: 0, jkgc: 0,
wmsg: 0, jsj: 0,
wxzy: 0 mbzj: 0,
} sgjj: 0,
sgyd: 0,
tsqzj: 0,
wltsj: 0,
wmsg: 0
},
} as any); } as any);
//获取centerTop底部按钮显示数据 //获取centerTop底部按钮显示数据
const getStatScore = async (showLoading: boolean) => { const getStatScore = async (showLoading: boolean) => {
@ -655,7 +935,7 @@ const getStatScore = async (showLoading: boolean) => {
function boxStyle(item: any) { function boxStyle(item: any) {
if (item.isActive) { if (item.isActive) {
let choiseStyle = { let choiseStyle = {
color: "#fff" color: "#fff",
}; };
return choiseStyle; return choiseStyle;
} }
@ -665,7 +945,7 @@ let tabIndex = ref(1 as any);
function activeBtn(item: any) { function activeBtn(item: any) {
let currentState = item.isActive; let currentState = item.isActive;
if (!currentState) { if (!currentState) {
topText.value.forEach(el => { topText.value.forEach((el) => {
el.isActive = false; el.isActive = false;
}); });
item.isActive = !currentState; item.isActive = !currentState;
@ -678,7 +958,7 @@ const uploadFail = () => {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: "上传失败，请重试", message: "上传失败，请重试",
type: "warning" type: "warning",
}); });
}; };
@ -686,7 +966,7 @@ const fileTypeFail = (text: any) => {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: text, message: text,
type: "warning" type: "warning",
}); });
}; };
@ -694,7 +974,7 @@ const uploadSuccess = () => {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: "上传成功", message: "上传成功",
type: "success" type: "success",
}); });
}; };
// 查询效果图 // 查询效果图
@ -702,7 +982,7 @@ function getQueryBySnData(showLoading: boolean) {
queryBySnData( queryBySnData(
{ {
projectSn: store.sn, projectSn: store.sn,
showType: 3 showType: 3,
}, },
showLoading showLoading
).then((res: any) => { ).then((res: any) => {
@ -715,15 +995,16 @@ function getQueryBySnData(showLoading: boolean) {
function saveOrDeleteVideo(url) { function saveOrDeleteVideo(url) {
editProjectInfo({ editProjectInfo({
projectSn: store.sn, projectSn: store.sn,
videoUrl: url videoUrl: url,
}).then(res => { }).then((res) => {
uploadSuccess(); //"上传成功" uploadSuccess(); //"上传成功"
projectData.value.videoUrl = url; projectData.value.videoUrl = url;
}); });
} }
//将方法暴露给父组件 //将方法暴露给父组件
defineExpose({ defineExpose({
getQueryBySnData getQueryBySnData,
dangerousProjectFlagFn
}); });
const setIntervalFn = (showLoading: boolean) => { const setIntervalFn = (showLoading: boolean) => {
getVideoList(showLoading); getVideoList(showLoading);
@ -732,6 +1013,7 @@ const setIntervalFn = (showLoading: boolean) => {
getStatScore(showLoading); getStatScore(showLoading);
}; };
onMounted(async () => { onMounted(async () => {
getScores();
setIntervalFn(false); setIntervalFn(false);
// 定时三十秒刷新 // 定时三十秒刷新
setInterval(() => { setInterval(() => {
@ -742,24 +1024,43 @@ onMounted(async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.scoreBg1 { .scoreBg1 {
background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 115px); background-image: radial-gradient(circle,
rgb(46, 200, 49) 0px,
rgba(255, 255, 255, 0) 115px);
} }
.scoreBg2 { .scoreBg2 {
background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 115px); background-image: radial-gradient(circle,
rgb(255, 175, 0) 0px,
rgba(255, 255, 255, 0) 115px);
} }
.scoreBg3 { .scoreBg3 {
background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 115px); background-image: radial-gradient(circle,
rgb(200, 46, 56) 0px,
rgba(255, 255, 255, 0) 115px);
} }
.scoreTextBg1 { .scoreTextBg1 {
background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 40px); background-image: radial-gradient(circle,
rgb(46, 200, 49) 0px,
rgba(255, 255, 255, 0) 40px);
} }
.scoreTextBg2 { .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) 40px);
} }
.scoreTextBg3 { .scoreTextBg3 {
background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 40px); 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 {
height: 100%; height: 100%;
@ -803,6 +1104,42 @@ onMounted(async () => {
} }
} }
.content-div2 {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-div3 {
display: flex;
width: 80%;
height: 19%;
margin: 0 auto;
/* align-items: center; */
justify-content: center;
color: white;
}
.content-div4 {
display: flex;
width: 50%;
height: 19%;
align-items: center;
justify-content: center;
color: white;
position: absolute;
right: -5%;
top: 20%;
}
.content-div5 {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.aq { .aq {
// left: 40px; // left: 40px;
// top: 180px; // top: 180px;
@ -820,8 +1157,8 @@ onMounted(async () => {
.jy { .jy {
// left: 400px; // left: 400px;
// top: 5px; // top: 5px;
left: 35%; right: 0%;
top: 0%; top: 45%;
} }
.fx { .fx {
@ -834,8 +1171,8 @@ onMounted(async () => {
.zn { .zn {
// right: 40px; // right: 40px;
// top: 180px; // top: 180px;
right: 0%; left: 35%;
top: 45%; top: 0%;
} }
.count-div { .count-div {
@ -871,8 +1208,10 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.score-part { .score-part {
margin-top: 60px; margin-top: 60px;
span:nth-child(1) { span:nth-child(1) {
font-size: 72px; font-size: 72px;
} }
@ -886,6 +1225,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;
@ -905,6 +1245,7 @@ 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;

9
src/views/commandScreen/commandCenter/index.vue
View File

@ -5,13 +5,13 @@
<leftBottom class="leftBottom" @openDialog="openPeopleCountDialog"></leftBottom> <leftBottom class="leftBottom" @openDialog="openPeopleCountDialog"></leftBottom>
</div> </div>
<div class="center"> <div class="center">
<centerTop class="centerTop" @openDialog="openPeopleCountDialog"></centerTop> <centerTop class="centerTop" ref="centerTopRef" @openDialog="openPeopleCountDialog"></centerTop>
<centerBottom class="centerBottom" @openDialog="openPeopleCountDialog"></centerBottom> <centerBottom class="centerBottom" @openDialog="openPeopleCountDialog"></centerBottom>
</div> </div>
<div class="right"> <div class="right">
<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll> <rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
</div> </div>
<dataDialog ref="partyBuildRef"></dataDialog> <dataDialog ref="partyBuildRef" @openMB="openMB"></dataDialog>
<div :class="{ contentsBox: true, openDialog: show, hiddenDialog: !show }"> <div :class="{ contentsBox: true, openDialog: show, hiddenDialog: !show }">
<div class="topBox"> <div class="topBox">
<div class="expand"></div> <div class="expand"></div>
@ -46,7 +46,6 @@ import { GlobalStore } from "@/stores";
import dataDialog from "../dialogCompnnents/data-dialog.vue"; import dataDialog from "../dialogCompnnents/data-dialog.vue";
import * as mqtt from "mqtt/dist/mqtt.min"; import * as mqtt from "mqtt/dist/mqtt.min";
const BASEURL = import.meta.env.VITE_API_URL; const BASEURL = import.meta.env.VITE_API_URL;
// import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview"; // import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
const store = GlobalStore(); const store = GlobalStore();
@ -58,6 +57,10 @@ const partyBuildRef = ref();
const openPeopleCountDialog = (index: any) => { const openPeopleCountDialog = (index: any) => {
partyBuildRef.value.openDialog(index); partyBuildRef.value.openDialog(index);
}; };
const centerTopRef = ref(null as any);
const openMB = () => {
centerTopRef.value.dangerousProjectFlagFn();
};
const options = { const options = {
connectTimeout: 40000, connectTimeout: 40000,
clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8), clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),

132
src/views/commandScreen/commandCenter/leftBottom.vue
View File

@ -20,7 +20,9 @@ s
<div style="display: flex" v-if="totalPersonRhbRatio > 0"> <div style="display: flex" v-if="totalPersonRhbRatio > 0">
<div class="dayRadio">{{ totalPersonRhbRatio }}%</div> <div class="dayRadio">{{ totalPersonRhbRatio }}%</div>
<div class="iconCenter"> <div class="iconCenter">
<el-icon size="20" color="#1E90FF"><Top /></el-icon> <el-icon size="20" color="#1E90FF">
<Top />
</el-icon>
</div> </div>
</div> </div>
<div style="display: flex" v-if="totalPersonRhbRatio == 0"> <div style="display: flex" v-if="totalPersonRhbRatio == 0">
@ -30,20 +32,17 @@ s
<div style="display: flex" v-if="totalPersonRhbRatio < 0"> <div style="display: flex" v-if="totalPersonRhbRatio < 0">
<div class="dayRadio">{{ Math.abs(totalPersonRhbRatio) }}%</div> <div class="dayRadio">{{ Math.abs(totalPersonRhbRatio) }}%</div>
<div class="iconCenter"> <div class="iconCenter">
<el-icon size="20" color="#8B0000"><Bottom /></el-icon> <el-icon size="20" color="#8B0000">
<Bottom />
</el-icon>
</div> </div>
</div> </div>
</div> </div>
<div class="line2"> <div class="line2">
<!-- <div :class="['line2Item', activeIndex == 0 ? 'activeTab' : '']" @click="handleTab(0)">总包出勤情况分析</div> <!-- <div :class="['line2Item', activeIndex == 0 ? 'activeTab' : '']" @click="handleTab(0)">总包出勤情况分析</div>
<div :class="['line2Item', activeIndex === 1 ? 'activeTab' : '']" @click="handleTab(1)">人员风险趋势分析</div> --> <div :class="['line2Item', activeIndex === 1 ? 'activeTab' : '']" @click="handleTab(1)">人员风险趋势分析</div> -->
<div <div class="line2Item" :class="{ activeTab: activeIfo.activeIndex == index }"
class="line2Item" v-for="(item, index) in activeIfo.activeTitleList" :key="item.id" @click="handleTab(index)">
:class="{ activeTab: activeIfo.activeIndex == index }"
v-for="(item, index) in activeIfo.activeTitleList"
:key="item.id"
@click="handleTab(index)"
>
{{ item.title }} {{ item.title }}
</div> </div>
</div> </div>
@ -64,7 +63,9 @@ s
</div> </div>
<div class="centerBottom"> <div class="centerBottom">
<div class="cbTop"> <div class="cbTop">
<div class="header"><div class="hLeft">进度情况分析</div></div> <div class="header">
<div class="hLeft">进度情况分析</div>
</div>
<div class="content" style="backgound: black"> <div class="content" style="backgound: black">
<div class="cbLine1"> <div class="cbLine1">
<div style="display: flex"> <div style="display: flex">
@ -80,15 +81,8 @@ s
</div> </div>
<div class="cbProcess" v-if="processList.length >= 5"> <div class="cbProcess" v-if="processList.length >= 5">
<!-- v-if="listData.length>0" :list="listData" --> <!-- v-if="listData.length>0" :list="listData" -->
<vue3-seamless-scroll <vue3-seamless-scroll v-if="processList.length > 0" :list="processList" :speed="1"
v-if="processList.length > 0" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll">
:list="processList"
:speed="1"
:limitScrollNum="5"
:step="0.3"
:hover="true"
class="scroll"
>
<div class="pItem" v-for="(item, i) in processList" :key="i"> <div class="pItem" v-for="(item, i) in processList" :key="i">
<div class="pLeft"> <div class="pLeft">
<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]"> <span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
@ -103,7 +97,8 @@ s
</div> </div>
<div class="prBottom"> <div class="prBottom">
<div class="processLineBg"> <div class="processLineBg">
<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }"> <div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]"
:style="{ width: item.changeAfter + '%' }">
<div class="processLineBtn"></div> <div class="processLineBtn"></div>
</div> </div>
</div> </div>
@ -137,7 +132,8 @@ s
</div> </div>
<div class="prBottom"> <div class="prBottom">
<div class="processLineBg"> <div class="processLineBg">
<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }"> <div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]"
:style="{ width: item.changeAfter + '%' }">
<div class="processLineBtn"></div> <div class="processLineBtn"></div>
</div> </div>
</div> </div>
@ -384,8 +380,8 @@ function drawBar() {
dataZoom: [ dataZoom: [
{ {
type: "slider", type: "slider",
start: 0, startValue: -1, // 从头开始。
end: 40, endValue: 3, // 一次性展示几个。
width: "98%", width: "98%",
height: 5, height: 5,
left: "center", left: "center",
@ -413,6 +409,13 @@ function drawBar() {
// color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色 // color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色
color: "#00008B" // 设置鼠标悬浮时的颜色为深蓝色 color: "#00008B" // 设置鼠标悬浮时的颜色为深蓝色
} }
},
label: {
show: true,
position: 'top',
formatter: function (data) {
return data.value
}
} }
} }
], ],
@ -465,9 +468,34 @@ function drawBar() {
// window.addEventListener('resize',function(){ // window.addEventListener('resize',function(){
// myChart.resize() // myChart.resize()
// }) // })
dataZommY(option, myChart);
option && myChart.setOption(option); myChart.on("mouseover", function () {
console.log("移入");
clearTimeout(timechartes.value);
});
myChart.on("mouseout", function () {
console.log("鼠标移出目标元素");
dataZommY(option, myChart);
});
} }
const timechartes = ref(null as any);
const dataZommY = (option: any, myChart: any) => {
clearTimeout(timechartes.value);
if (xData.value.length > 5) {
timechartes.value = setTimeout(function () {
// 每次向后滚动一个，最后一个从头开始。
if (option.dataZoom[0].endValue == xData.value.length) {
option.dataZoom[0].endValue = 4;
option.dataZoom[0].startValue = -1;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
option && myChart.setOption(option);
dataZommY(option, myChart);
}, 3000);
}
};
//进度数据 //进度数据
let listData = ref([ let listData = ref([
@ -585,6 +613,7 @@ onMounted(async () => {
border-left: none; border-left: none;
border-right: none; border-right: none;
border-bottom: 1px solid #0059ff; border-bottom: 1px solid #0059ff;
.hLeft { .hLeft {
width: 50%; width: 50%;
font-size: 20px; font-size: 20px;
@ -599,12 +628,14 @@ onMounted(async () => {
.content { .content {
// background-color: darkred; // background-color: darkred;
height: 92.5%; height: 92.5%;
.contentTop { .contentTop {
padding: 0 10px; padding: 0 10px;
height: 50%; height: 50%;
// background-color: #fff; // background-color: #fff;
font-size: 13px; font-size: 13px;
position: relative; position: relative;
.line1 { .line1 {
color: #fff; color: #fff;
padding-top: 5px; padding-top: 5px;
@ -614,6 +645,7 @@ onMounted(async () => {
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
font-size: 15px; font-size: 15px;
.numberCard { .numberCard {
font-size: 15px; font-size: 15px;
padding: 0 8px; padding: 0 8px;
@ -623,18 +655,21 @@ onMounted(async () => {
background: url("@/assets/images/commandScreen/number-bg.png") no-repeat; background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.dayRadio { .dayRadio {
font-size: 15px; font-size: 15px;
margin-left: 15px; margin-left: 15px;
font-weight: bold; font-weight: bold;
color: #47bcec; color: #47bcec;
} }
.iconCenter { .iconCenter {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
.line2 { .line2 {
padding-top: 5px; padding-top: 5px;
display: flex; display: flex;
@ -642,6 +677,7 @@ onMounted(async () => {
align-items: center; align-items: center;
line-height: 25px; line-height: 25px;
height: 25px; height: 25px;
.line2Item { .line2Item {
color: #fff; color: #fff;
width: 140px; width: 140px;
@ -651,6 +687,7 @@ onMounted(async () => {
background: rgb(0, 33, 116); background: rgb(0, 33, 116);
background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%); background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
} }
.activeTab { .activeTab {
background: rgb(0, 33, 116); background: rgb(0, 33, 116);
background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%); background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
@ -659,6 +696,7 @@ onMounted(async () => {
.barContent1 { .barContent1 {
height: calc(100% - 65px); height: calc(100% - 65px);
.barContent { .barContent {
height: 100%; height: 100%;
} }
@ -694,6 +732,7 @@ onMounted(async () => {
.content { .content {
padding: 0 10px; padding: 0 10px;
height: 90%; height: 90%;
// background-color: rgba($color: #fff, $alpha: 0.1); // background-color: rgba($color: #fff, $alpha: 0.1);
.cbLine1 { .cbLine1 {
color: #fff; color: #fff;
@ -704,6 +743,7 @@ onMounted(async () => {
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
font-size: 15px; font-size: 15px;
.numberCard { .numberCard {
font-size: 15px; font-size: 15px;
padding: 0 8px; padding: 0 8px;
@ -714,10 +754,12 @@ onMounted(async () => {
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.cbProcess { .cbProcess {
padding-top: 5px; padding-top: 5px;
height: calc(100% - 55px); height: calc(100% - 55px);
overflow: hidden; overflow: hidden;
// background-color: #fff; // background-color: #fff;
.pItem { .pItem {
width: 100%; width: 100%;
@ -726,12 +768,14 @@ onMounted(async () => {
// background-color: #fff; // background-color: #fff;
font-size: 13px; font-size: 13px;
color: #fff; color: #fff;
.pLeft { .pLeft {
width: 20%; width: 20%;
height: 55px; height: 55px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.plInner { .plInner {
width: 80px; width: 80px;
// text-align: center; // text-align: center;
@ -740,30 +784,37 @@ onMounted(async () => {
border-radius: 100px; border-radius: 100px;
} }
} }
.pRight { .pRight {
width: 80%; width: 80%;
height: 55px; height: 55px;
.prTop { .prTop {
// background-color: darkblue; // background-color: darkblue;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 30px; height: 30px;
.prtLeft { .prtLeft {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
.prtRight { .prtRight {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
} }
} }
.prBottom { .prBottom {
// background-color: purple; // background-color: purple;
height: 15px; height: 15px;
.processLineBg { .processLineBg {
background-color: rgba(50, 50, 50, 0.5); background-color: rgba(50, 50, 50, 0.5);
// transform: scaleX(-1); // transform: scaleX(-1);
.processLine { .processLine {
margin-top: 10px; margin-top: 10px;
@ -771,6 +822,7 @@ onMounted(async () => {
height: 5px; height: 5px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.processLineBtn { .processLineBtn {
width: 3px; width: 3px;
height: 9px; height: 9px;
@ -778,6 +830,7 @@ onMounted(async () => {
transform: translateY(-2px); transform: translateY(-2px);
} }
} }
// .plBgc1{ // .plBgc1{
// background: rgb(150,0,0); // background: rgb(150,0,0);
// background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%); // background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
@ -792,11 +845,13 @@ onMounted(async () => {
} }
} }
} }
.scroll { .scroll {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.notoDta { .notoDta {
top: 38%; top: 38%;
width: 50%; width: 50%;
@ -817,100 +872,123 @@ onMounted(async () => {
margin: -6% 30%; margin: -6% 30%;
} }
} }
.plBgc1 { .plBgc1 {
background: rgb(139, 0, 0); background: rgb(139, 0, 0);
background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc1 { .plBtnBgc1 {
background: rgb(139, 0, 0); background: rgb(139, 0, 0);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%);
} }
.plBgc2 { .plBgc2 {
background: rgb(155, 155, 0); background: rgb(155, 155, 0);
background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc2 { .plBtnBgc2 {
background: rgb(155, 155, 0); background: rgb(155, 155, 0);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%);
} }
.plBgc3 { .plBgc3 {
background: rgb(0, 0, 139); background: rgb(0, 0, 139);
background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc3 { .plBtnBgc3 {
background: rgb(0, 0, 139); background: rgb(0, 0, 139);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%);
} }
.plBgc4 { .plBgc4 {
background: rgb(139, 0, 139); background: rgb(139, 0, 139);
background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc4 { .plBtnBgc4 {
background: rgb(139, 0, 139); background: rgb(139, 0, 139);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%);
} }
.plBgc5 { .plBgc5 {
background: rgb(72, 61, 139); background: rgb(72, 61, 139);
background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc5 { .plBtnBgc5 {
background: rgb(72, 61, 139); background: rgb(72, 61, 139);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%);
} }
.plBgc6 { .plBgc6 {
background: rgb(0, 206, 209); background: rgb(0, 206, 209);
background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc6 { .plBtnBgc6 {
background: rgb(0, 206, 209); background: rgb(0, 206, 209);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%);
} }
.plBgc7 { .plBgc7 {
background: rgb(47, 79, 79); background: rgb(47, 79, 79);
background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc7 { .plBtnBgc7 {
background: rgb(47, 79, 79); background: rgb(47, 79, 79);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%);
} }
.plBgc8 { .plBgc8 {
background: rgb(0, 100, 0); background: rgb(0, 100, 0);
background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc8 { .plBtnBgc8 {
background: rgb(0, 100, 0); background: rgb(0, 100, 0);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%);
} }
.plBgc9 { .plBgc9 {
background: rgb(189, 183, 107); background: rgb(189, 183, 107);
background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc9 { .plBtnBgc9 {
background: rgb(189, 183, 107); background: rgb(189, 183, 107);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%);
} }
.plBgc10 { .plBgc10 {
background: rgb(255, 140, 0); background: rgb(255, 140, 0);
background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc10 { .plBtnBgc10 {
background: rgb(255, 140, 0); background: rgb(255, 140, 0);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%);
} }
.plBgc11 { .plBgc11 {
background: rgb(233, 150, 122); background: rgb(233, 150, 122);
background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc11 { .plBtnBgc11 {
background: rgb(233, 150, 122); background: rgb(233, 150, 122);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%);
} }
.plBgc0 { .plBgc0 {
background: rgb(0, 139, 139); background: rgb(0, 139, 139);
background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
} }
.plBtnBgc0 { .plBtnBgc0 {
background: rgb(0, 139, 139); background: rgb(0, 139, 139);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%); background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%);
} }</style>
</style>

18
src/views/commandScreen/dialogCompnnents/data-dialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="list-detail" v-if="showDialog && mapsDetail.length == 0"> <div class="list-detail" :class="{'opacity_0': postData.type == 6}" @click="closeDialog2" v-if="showDialog && mapsDetail.length == 0">
<div <div
:class=" :class="
postData.type == 1 postData.type == 1
@ -12,6 +12,8 @@
? 'dialog-content-ai' ? 'dialog-content-ai'
: postData.type == 5 : postData.type == 5
? 'dialog-content-table' ? 'dialog-content-table'
: postData.type == 6
? 'dialog-content-mb'
: 'dialog-content-more' : 'dialog-content-more'
" "
:style=" :style="
@ -152,7 +154,7 @@ import memberAllShow from "./member-all-show.vue";
import memberMoreList from "./member-more-list.vue"; import memberMoreList from "./member-more-list.vue";
import monthSafeScoreDetail from "./month-safe-score-detail.vue"; import monthSafeScoreDetail from "./month-safe-score-detail.vue";
import { getAssetsFile } from "@/utils/util"; //兄弟组件传值 import { getAssetsFile } from "@/utils/util"; //兄弟组件传值
const emits = defineEmits(["openMB"]);
// import { GlobalStore } from "@/stores"; // import { GlobalStore } from "@/stores";
let showDialog = ref(false as any); let showDialog = ref(false as any);
const showIndex = ref(0); const showIndex = ref(0);
@ -190,6 +192,15 @@ const closeDialog = () => {
showDialog.value = false; showDialog.value = false;
postData.value = {}; postData.value = {};
}; };
const closeDialog2 = () => {
console.log(postData);
if (postData.value.type == 6) {
console.log(12345);
showDialog.value = false;
// postData.value = {};
emits("openMB");
}
};
const closeDialog1 = (id: string, index: number) => { const closeDialog1 = (id: string, index: number) => {
// const findIndex = mapsDetail.value.findIndex((item: any) => item.id == id); // const findIndex = mapsDetail.value.findIndex((item: any) => item.id == id);
// if (findIndex > -1) { // if (findIndex > -1) {
@ -259,6 +270,9 @@ onMounted(async () => {});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.opacity_0 {
opacity: 0;
}
audio { audio {
display: inline-block !important; display: inline-block !important;
opacity: 0 !important; opacity: 0 !important;