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

dev:调整指挥部大屏布局

Browse Source
This commit is contained in:
Vce 2024-04-27 13:41:13 +08:00
parent c67c9878d0
commit 7abfa01a06
4 changed files with 415 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,7 +59,7 @@ let listData = ref([
])
let questionTotal = ref(0 as any);
let dataList = ref([
let dataList2 = ref([
{
value: 30,
show: true,
@ -94,6 +94,7 @@ let dataList = ref([
}
}
]);
function Pie() {
let dataArr = [];
for (var i = 0; i < 150; i++) {
@ -126,7 +127,7 @@ function Pie() {
return dataArr;
}
function drawEchart() {
function drawEchart2() {
let echartsTest = echarts.init(document.getElementById("echartsEdu"));
let option = {
tooltip: {
@ -182,16 +183,16 @@ function drawEchart() {
}
}
},
data: dataList.value.map(item => {
data: dataList2.value.map(item => {
if (item.show) {
return item.name;
}
}),
formatter: function (data) {
if (dataList.value && dataList.value.length) {
for (var i = 0; i < dataList.value.length; i++) {
if (data === dataList.value[i].name) {
var value = dataList.value[i].value;
if (dataList2.value && dataList2.value.length) {
for (var i = 0; i < dataList2.value.length; i++) {
if (data === dataList2.value[i].name) {
var value = dataList2.value[i].value;
var percentage = value + "%";
return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}";
}
@ -327,7 +328,7 @@ function drawEchart() {
labelLine: {
show: false
},
data: dataList.value
data: dataList2.value
},
{
type: "pie",
@ -351,10 +352,10 @@ function drawEchart() {
// const safeData = ref(null as any);
const qualityInfo = async () => {
const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
dataList.value[0].value = res.result.total.rectificationNum;
dataList.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
dataList2.value[0].value = res.result.total.rectificationNum;
dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
questionTotal.value = res.result.total.totalNum;
drawEchart();
drawEchart2();
};
//将方法暴露给父组件
defineExpose({

22
src/views/commandScreen/commandCenter/leftTop.vue
View File

@ -10,14 +10,16 @@
</div>
<div class="content">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="整改人" name="first"></el-tab-pane>
<el-tab-pane label="检查人" name="second"></el-tab-pane>
<el-tab-pane label="按分包单位分析" name="third"></el-tab-pane>
<el-tab-pane :label="'整改人'" name="first"></el-tab-pane>
<el-tab-pane :label="'检查人'" name="second"></el-tab-pane>
<el-tab-pane :label="'按分包单位分析'" name="third"></el-tab-pane>
</el-tabs>
<div class="tabList">
<div>排名</div>
<div>姓名</div>
<div>整改数量</div>
<div v-if="activeIndex === '0' || activeIndex === '1'">姓名</div>
<div v-if="activeIndex === '2'">分组单位</div>
<div v-if="activeIndex === '0' || activeIndex === '2'">整改数量</div>
<div v-if="activeIndex === '1'">发起隐患处</div>
<div>整改率</div>
<div>及时整改率</div>
</div>
@ -47,10 +49,18 @@ import { getStageOption } from "@/api/modules/projectOverview";
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
const activeIndex = ref('1' as any)
let dateRange = ref([] as any)
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
// console.log(tab, event)
// console.log('tab',tab.index)
// console.log('activeName',activeName.value)
// if(activeName.value === 'first') console.log('1')
// if(activeName.value === 'second') console.log('2')
// if(activeName.value === 'third') console.log('3')
activeIndex.value = tab.index
console.log('activeIndex',activeIndex.value)
}
const tabList = [
{ sortLine: '1', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},

317
src/views/commandScreen/commandCenter/rightAll.vue
View File

@ -23,7 +23,8 @@
<div>重大隐患未销项<text>{{majorDangerCount}}</text>个，占比<text>{{majorDangerRate}}%</text></div>
</div>
<div class="cmContent">
<div id="echartsMajorDanger" style="width: 100%; height: 100%"></div>
<div id="echarts2" style="width: 100%; height: 100%"></div>
<!-- <div id="echartsMajorDanger" style="width: 100%; height: 100%"></div> -->
</div>
</div>
@ -59,10 +60,11 @@
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
import rightTop from "@/views/commandScreen/commandCenter/rightTop.vue";
import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
// import rightTop from "@/views/commandScreen/commandCenter/rightTop.vue";
// import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
const store = GlobalStore();
import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
import * as echarts from "echarts";
const echartsTest = ref();
let questionTotal = ref(0 as any);
@ -99,8 +101,7 @@ let dataList = ref([
{
value: 30,
show: true,
name: "未整改安全问题",
name: "重大隐患",
itemStyle: {
normal: {
color: "#EC6266",
@ -111,7 +112,7 @@ let dataList = ref([
{
value: 70,
show: true,
name: "已整改安全问题",
name: "一般隐患",
itemStyle: {
normal: {
color: "#6375C7",
@ -120,6 +121,7 @@ let dataList = ref([
}
}
]);
function Pie() {
let dataArr = [];
for (var i = 0; i < 150; i++) {
@ -160,7 +162,7 @@ function drawEchart() {
},
title: {
text: questionTotal.value,
subtext: "安全问题数",
subtext: "超期未整改数",
x: "24%",
y: "center",
textAlign: "center",
@ -183,8 +185,8 @@ function drawEchart() {
icon: "rect",
type: "plain",
orient: "vertical",
left: "50%",
top: "40%",
left: "55%",
top: "35%",
align: "left",
itemGap: 30,
itemWidth: 8, // 设置宽度
@ -364,53 +366,13 @@ function drawEchart() {
}
]
};
// let option = {
// tooltip: {
// trigger: 'item'
// },
// legend: {
// top: '5%',
// left: 'center'
// },
// series: [
// {
// name: 'Access From',
// type: 'pie',
// radius: ['40%', '70%'],
// avoidLabelOverlap: false,
// label: {
// show: false,
// position: 'center'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: 40,
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: false
// },
// data: [
// { value: 1048, name: 'Search Engine' },
// { value: 735, name: 'Direct' },
// { value: 580, name: 'Email' },
// { value: 484, name: 'Union Ads' },
// { value: 300, name: 'Video Ads' }
// ]
// }
// ]
// };
echartsTest.value.setOption(option, true);
window.addEventListener("resize", () => {
console.log(echartsTest)
echartsTest.value.resize();
})
}
//获取安全管理
// const safeData = ref(null as any);
const getSafeInfo = async () => {
const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
// console.log("获取安全管理", res);
@ -420,12 +382,269 @@ const getSafeInfo = async () => {
questionTotal.value = res.result.totalNum;
drawEchart();
};
let dataList2 = ref([
{
value: 30,
show: true,
name: "重大隐患",
itemStyle: {
normal: {
color: "#038cf5",
borderWidth: 20
}
}
},
{
value: 70,
show: true,
name: "一般隐患",
itemStyle: {
normal: {
color: "#01d6f4",
borderWidth: 20
}
}
},
]);
function drawEchart2() {
let echartsTest = echarts.init(document.getElementById("echarts2"));
let option = {
tooltip: {
trigger: "item"
},
title: {
text: questionTotal.value,
// text: '100%',
subtext: "入场三级教育\n完成率",
x: "24%",
y: "center",
textAlign: "center",
textStyle: {
color: "#fff",
fontSize: 26,
fontWeight: "normal",
// align: "center",
// width: "200px",
fontFamily: "sadigitalNumber"
},
subtextStyle: {
color: "#ccc",
fontSize: 12,
fontWeight: "normal"
// align: "center",
}
},
legend: {
selectedMode: false, // 取消图例上的点击事件
icon: "rect",
type: "plain",
orient: "vertical",
left: "55%",
top: "35%",
align: "left",
itemGap: 30,
itemWidth: 8, // 设置宽度
itemHeight: 7, // 设置高度
symbolKeepAspect: false,
textStyle: {
color: "#000",
rich: {
name: {
verticalAlign: "right",
align: "left",
fontSize: 14,
color: "#FFFFFF"
},
value: {
align: "left",
fontSize: 14,
color: "#FFFFFF"
}
}
},
data: dataList2.value.map(item => {
if (item.show) {
return item.name;
}
}),
formatter: function (data) {
if (dataList2.value && dataList2.value.length) {
for (var i = 0; i < dataList2.value.length; i++) {
if (data === dataList2.value[i].name) {
var value = dataList2.value[i].value;
var percentage = value + "%";
return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}";
}
}
}
}
},
series: [
// 外侧光线
{
name: "",
type: "gauge",
center: ["25%", "55%"],
radius: "90%",
startAngle: 235,
endAngle: -50,
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
width: 2,
color: [
[
100 / 100,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#526277"
},
{
offset: 0.25,
color: "rgba(4, 14, 54,0.4)"
},
{
offset: 0.7,
color: "rgba(4, 14, 54,0.4)"
},
{
offset: 1,
color: "#526277"
}
])
],
[1, "rgba(255,255,255,0)"]
]
}
},
axisTick: {
show: 0
},
splitLine: {
show: 0
},
axisLabel: {
show: 0
},
pointer: {
show: 0
},
detail: {
show: 0
}
},
{
name: "",
type: "gauge",
center: ["25%", "55%"],
radius: "80%",
startAngle: 245,
endAngle: -115,
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
width: 2,
color: [
[
200 / 100,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.8,
color: "#52bef0"
},
{
offset: 0.5,
color: "#13356b"
}
])
],
[1, "rgba(255,255,255,0)"]
]
}
},
axisTick: {
show: 0
},
splitLine: {
show: 0
},
axisLabel: {
show: 0
},
pointer: {
show: 0
},
detail: {
show: 0
}
},
{
name: "",
type: "pie",
radius: [65, 75],
center: ["25%", "55%"],
hoverAnimation: true,
itemStyle: {
borderRadius: 10,
borderWidth: 10
},
label: {
show: false,
position: "center"
},
emphasis: {
label: {
show: false
}
},
labelLine: {
show: false
},
data: dataList2.value
},
{
type: "pie",
radius: ["57", "60"],
center: ["25%", "55%"],
label: {
show: false
},
data: Pie()
}
]
};
echartsTest.setOption(option, true);
// window.addEventListener("resize", () => {
// console.log(666)
// echartsTest.resize();
// })
}
//获取质量管理
const qualityInfo = async () => {
const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
dataList2.value[0].value = res.result.total.rectificationNum;
dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
questionTotal.value = res.result.total.totalNum;
drawEchart2();
};
//将方法暴露给父组件
defineExpose({
getSafeInfo
})
onMounted(async () => {
await getSafeInfo();
await qualityInfo();
// window.onresize = function(){
// if(echartsTest.value){
// echartsTest.value.resize();

126
src/views/commandScreen/commandCenter/rightPage/rightTop.vue
View File

@ -1,22 +1,134 @@
<template>
<div class="rightTop">
<div class="ctHead">
<div>重大隐患超期未整改<text>{{overdueMajorDangerCount}}</text>个，占比<text>{{overdueMajorDangerRate}}%</text></div>
</div>
<div class="ctContent">
<div id="echartsSafe" style="width: 100%; height: 100%"></div>
</div>
</div>
</template>
<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
import type { TabsPaneContext } from 'element-plus'
import rightTop from "@/views/commandScreen/commandCenter/rightPage/rightTop.vue";
// import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
const store = GlobalStore();
import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
import * as echarts from "echarts";
const echartsTest = ref();
let questionTotal = ref(0 as any);
let dateRange = ref([] as any);
let majorDangerCount = ref(20 as any);
let majorDangerRate = ref(50 as any);
let overdueMajorDangerCount = ref(20 as any);
let overdueMajorDangerRate = ref(50 as any);
let listData = ref([
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
])
let dataList = ref([
{
value: 30,
show: true,
name: "未整改安全问题",
itemStyle: {
normal: {
color: "#EC6266",
borderWidth: 20
}
}
},
{
value: 70,
show: true,
name: "已整改安全问题",
itemStyle: {
normal: {
color: "#6375C7",
borderWidth: 20
}
}
}
]);
function Pie() {
let dataArr = [];
for (var i = 0; i < 150; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 10,
itemStyle: {
normal: {
color: "#7cf4f1",
borderWidth: 0,
borderColor: "#7f6546"
}
}
});
} else {
dataArr.push({
name: (i + 1).toString(),
value: 10,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
});
}
}
return dataArr;
}
onMounted( async () => {
//获取安全管理
// const safeData = ref(null as any);
const getSafeInfo = async () => {
const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
// console.log("获取安全管理", res);
// safeData.value = res.result;
dataList.value[0].value = res.result.rectificationNum;
dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
questionTotal.value = res.result.totalNum;
drawEchart();
};
//将方法暴露给父组件
defineExpose({
getSafeInfo
})
onMounted(async () => {
await getSafeInfo();
});
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.rightTop {
margin-top: 10px;
width: 100%;