Merge branch 'yjl_dev' into 'shenzhen-dev'
新建综合管理-工程概况/智慧党建页面 See merge request !14
This commit is contained in:
袁晶琳
commit
03831e7407
@ -76,7 +76,22 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/safetyManagement/securityManagement",
|
||||
name: "安全管理",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/securityManagement/index.vue")
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/securityManagement/indexSafe.vue")
|
||||
},
|
||||
{
|
||||
path: "/qualityControl/qualityManagement",
|
||||
name: "质量管理",
|
||||
component: () => import("@/views/sevenLargeScreen/qualityControl/qualityManagement/indexQuality.vue")
|
||||
},
|
||||
{
|
||||
path: "/comprehensiveManage/projectOverview",
|
||||
name: "工程概况",
|
||||
component: () => import("@/views/sevenLargeScreen/comprehensiveManage/projectOverview/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/comprehensiveManage/smartPartyBuilding",
|
||||
name: "智慧党建",
|
||||
component: () => import("@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/index.vue")
|
||||
},
|
||||
],
|
||||
meta: {
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
5
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
4
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
工程概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
3
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
2
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
1
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
8
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
7
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
6
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
智慧党建
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -51,7 +51,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuList">
|
||||
<div class="menuList" style="overflow-x: auto; white-space: nowrap">
|
||||
<div v-for="(item, index) in menuList" :key="index">
|
||||
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
|
||||
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
|
||||
@ -83,6 +83,20 @@ let nowTime = ref("2023-04-16 09:22:12" as any);
|
||||
let showUserBox = ref(false as any);
|
||||
let adminName = ref("" as any);
|
||||
let menuList = ref([
|
||||
{
|
||||
moduleName: "综合管理",
|
||||
modulePath: "/comprehensiveManage/projectOverview",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "工程概况",
|
||||
companyPath: "/comprehensiveManage/projectOverview"
|
||||
},
|
||||
{
|
||||
menuName: "智慧党建",
|
||||
companyPath: "/comprehensiveManage/smartPartyBuilding"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "安全管理",
|
||||
modulePath: "/safetyManagement/securityManagement",
|
||||
@ -93,6 +107,16 @@ let menuList = ref([
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "质量管理",
|
||||
modulePath: "/qualityControl/qualityManagement",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "质量管理",
|
||||
companyPath: "/qualityControl/qualityManagement"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "扬尘噪声",
|
||||
modulePath: "/headNoise"
|
||||
@ -318,7 +342,7 @@ function jumpBgd() {
|
||||
float: right;
|
||||
margin-right: 2%;
|
||||
font-size: 14px;
|
||||
.numColor{
|
||||
.numColor {
|
||||
color: #82fbea;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
|
||||
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<Card title="责任区域分析">
|
||||
<div class="centerBottom">
|
||||
<div id="echartsCenterBottom" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
function draw() {
|
||||
let chartDom = document.getElementById("echartsCenterBottom");
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let echartsTest = echarts.init(document.getElementById("echartsCenterBottom"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
borderRadius: 5,
|
||||
borderWidth: 5,
|
||||
formatter: function (params) {
|
||||
let dot =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
|
||||
return params[0].name + "<br>" + params[0].value;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "4%",
|
||||
right: "4%",
|
||||
bottom: "5%",
|
||||
top: "15%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
data: ['责任区域','责任区域','责任区域','责任区域','责任区域','责任区域','责任区域'],
|
||||
triggerEvent: true,
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "red"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
rotate: 0,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
padding: [0, 0, 0, 0],
|
||||
fontSize: 12,
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: "隐患数",
|
||||
triggerEvent: true,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
padding: [0, 0, 10, 0]
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
// color: ["#e54035"],
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
barMinHeight: 10,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "5%",
|
||||
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//barBorderRadius: 5,
|
||||
//渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#071b34"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#7bf0e1"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3a787f"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [100,200,300,100,20,60,120],
|
||||
z: 10
|
||||
},
|
||||
{
|
||||
name: "hill",
|
||||
type: "bar",
|
||||
barWidth: "60%",
|
||||
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(11,47,68,.8)"
|
||||
}
|
||||
},
|
||||
// data: 200,
|
||||
z: 9
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
draw();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.centerBottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<Card title="质量检查统计">
|
||||
<div class="centerTopBox">
|
||||
<div class="line"></div>
|
||||
<div class="lineDate1 data">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/securityManagement/safeImg9.png" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="text"><i>已整改数</i></div>
|
||||
<div class="numStyle"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineDate2 data">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/securityManagement/safeImg6.png" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="text"><i>累积通过</i></div>
|
||||
<div class="numStyle"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineDate3 data">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/securityManagement/safeImg7.png" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="text"><i>未经改数</i></div>
|
||||
<div class="numStyle"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineDate4 data">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/securityManagement/safeImg10.png" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="text"><i>隐患总数</i></div>
|
||||
<div class="numStyle"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineDate5 data">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/securityManagement/safeImg8.png" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="text"><i>已逾期数</i></div>
|
||||
<div class="numStyle"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineDate6 data">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/securityManagement/safeImg5.png" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="text"><i>累计闭合</i></div>
|
||||
<div class="numStyle"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.centerTopBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/securityManagement/safeImg1.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
height: 85%;
|
||||
left: 10%;
|
||||
background: url("@/assets/images/securityManagement/safeImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
}
|
||||
.data {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
width: 25%;
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
}
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
.num {
|
||||
width: 50%;
|
||||
margin-left: -25%;
|
||||
.text {
|
||||
font-size: 14px;
|
||||
background: url("@/assets/images/securityManagement/safeImg3.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.numStyle {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 15%;
|
||||
background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.lineDate1 {
|
||||
left: 5%;
|
||||
top: 10%;
|
||||
}
|
||||
.lineDate2 {
|
||||
left: 2%;
|
||||
top: 45%;
|
||||
}
|
||||
.lineDate3 {
|
||||
left: 5%;
|
||||
top: 80%;
|
||||
}
|
||||
.lineDate4 {
|
||||
left: 71%;
|
||||
top: 10%;
|
||||
}
|
||||
.lineDate5 {
|
||||
left: 75%;
|
||||
top: 45%;
|
||||
}
|
||||
.lineDate6 {
|
||||
left: 71%;
|
||||
top: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="safeContent">
|
||||
<div class="left">
|
||||
<leftTop class="leftTop"></leftTop>
|
||||
<leftBottom class="leftBottom"></leftBottom>
|
||||
</div>
|
||||
<div class="center">
|
||||
<centerTop class="centerTop"></centerTop>
|
||||
<centerBottom class="centerBottom"></centerBottom>
|
||||
</div>
|
||||
<div class="right">
|
||||
<rightBoxQ class="rightBox"></rightBoxQ>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import leftTop from '@/views/sevenLargeScreen/qualityControl/qualityManagement/leftTop.vue'
|
||||
import leftBottom from '@/views/sevenLargeScreen/qualityControl/qualityManagement/leftBottom.vue'
|
||||
import centerTop from '@/views/sevenLargeScreen/qualityControl/qualityManagement/centerTop.vue'
|
||||
import centerBottom from '@/views/sevenLargeScreen/qualityControl/qualityManagement/centerBottom.vue'
|
||||
import rightBoxQ from '@/views/sevenLargeScreen/qualityControl/qualityManagement/rightBoxQ.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.safeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display:flex;
|
||||
.left{
|
||||
width: 32%;
|
||||
.leftTop{
|
||||
height: 49%;
|
||||
margin-bottom: 1.5%;
|
||||
}
|
||||
.leftBottom{
|
||||
height: 49%;
|
||||
margin-top: 3%;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
width: 34%;
|
||||
margin: 0 1%;
|
||||
.centerTop{
|
||||
height: 49%;
|
||||
margin-bottom: 1.5%;
|
||||
}
|
||||
.centerBottom{
|
||||
height: 49%;
|
||||
margin-top: 3%;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 32%;
|
||||
.rightBox{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<Card title="隐患等级分析">
|
||||
<div class="leftBottomBox">
|
||||
<div class="rightHeader">
|
||||
<div class="day" :class="airType == 1 ? 'active' : ''" @click="airType = 1">近7天</div>
|
||||
<div class="year" :class="airType == 2 ? 'active' : ''" @click="airType = 2">近30天</div>
|
||||
<div class="time">
|
||||
<el-date-picker
|
||||
v-model="rangeTime"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styleImg"></div>
|
||||
<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
let rangeTime = ref("" as any);
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 75,
|
||||
show: true,
|
||||
name: "一般隐患",
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4bc3f9",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 63,
|
||||
show: true,
|
||||
name: "严重隐患",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#ec6266",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "重大隐患",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#eeaa59"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "底线问题",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#81f279"
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
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(() => {
|
||||
drawEchart();
|
||||
});
|
||||
|
||||
function drawEchart() {
|
||||
let echartsTest = echarts.init(document.getElementById("echartsLeftCenter"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: 18,
|
||||
subtext: "问题总数",
|
||||
x: "18%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 30,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
width: "200px",
|
||||
fontFamily: "sadigitalNumber"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 14,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "50%",
|
||||
top: "30%",
|
||||
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: dataList.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;
|
||||
var percentage = value + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value| " + value + " " + percentage + "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "65%",
|
||||
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: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(54, 128, 174,0.4)"
|
||||
}
|
||||
])
|
||||
],
|
||||
[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: "56%",
|
||||
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: [80, 90],
|
||||
center: ["25%", "55%"],
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["70", "75"],
|
||||
center: ["25%", "55%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftBottomBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.num {
|
||||
width: 66px;
|
||||
text-align: center;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: calc(100vw * 24 / 1920);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 18%;
|
||||
z-index: 9;
|
||||
}
|
||||
// .styleImg {
|
||||
// left: 6%;
|
||||
// top: 17%;
|
||||
// width: 40%;
|
||||
// position: absolute;
|
||||
// height: 60%;
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// background-size: cover;
|
||||
// }
|
||||
.rightHeader {
|
||||
width: 65%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 2.5vh;
|
||||
left: 34%;
|
||||
top: 23%;
|
||||
.Selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
height: 5%;
|
||||
width: 15%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
margin-top: -17%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.year {
|
||||
height: 5%;
|
||||
width: 15%;
|
||||
margin-right: 8%;
|
||||
z-index: 99;
|
||||
margin-top: -17%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
background: #0d2956;
|
||||
}
|
||||
::v-deep .el-range-separator {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
::v-deep .el-range-input {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<Card title="责任单位分析">
|
||||
<div class="leftBox">
|
||||
<div id="echartsLeftBottom" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
function draw() {
|
||||
let chartDom = document.getElementById("echartsLeftBottom");
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let echartsTest = echarts.init(document.getElementById("echartsLeftBottom"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
borderRadius: 5,
|
||||
borderWidth: 5,
|
||||
formatter: function (params) {
|
||||
let dot =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
|
||||
return params[0].name + "<br>" + params[0].value;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "4%",
|
||||
right: "4%",
|
||||
bottom: "5%",
|
||||
top: "15%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
data: ['责任单位','责任单位','责任单位','责任单位','责任单位','责任单位','责任单位'],
|
||||
triggerEvent: true,
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "red"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
rotate: 0,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
padding: [0, 0, 0, 0],
|
||||
fontSize: 12,
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: "隐患数",
|
||||
triggerEvent: true,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
padding: [0, 0, 10, 0]
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
// color: ["#e54035"],
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
barMinHeight: 10,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "5%",
|
||||
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//barBorderRadius: 5,
|
||||
//渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#071b34"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#7bf0e1"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3a787f"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [100,200,300,100,20,60,120],
|
||||
z: 10
|
||||
},
|
||||
{
|
||||
name: "hill",
|
||||
type: "bar",
|
||||
barWidth: "60%",
|
||||
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(11,47,68,.8)"
|
||||
}
|
||||
},
|
||||
// data: 200,
|
||||
z: 9
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
draw();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.leftBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="rightBigBox">
|
||||
<Card title="质量管理记录">
|
||||
<div class="rightHeader">
|
||||
<div class="tab" :class="{ active: airType === 1 }">安全检查</div>
|
||||
<div class="tab" :class="{ active: airType === 2 }">安全整改</div>
|
||||
<div class="tab" :class="{ active: airType === 3 }">随手拍</div>
|
||||
</div>
|
||||
<div class="menuD">
|
||||
<el-scrollbar style="height: 100%">
|
||||
<div class="menuL" v-for="item in 10">
|
||||
<div class="leftNum">
|
||||
<div class="name" style="font-size: 18px">测试</div>
|
||||
<div class="name">整改结果：<span style="color: #e25f64">已逾期</span></div>
|
||||
<div class="name">编号：ZLJC20230608001</div>
|
||||
</div>
|
||||
<div class="rightDate">
|
||||
<div class="date">
|
||||
检查结果：<span>通过<span style="color: #6dc86f; margin-left: 2%">1</span></span>
|
||||
<span style="margin-left: 10%">整改 <span style="color: #da9d56; margin-left: 2%">2</span></span>
|
||||
</div>
|
||||
<div class="date">发起日期：2023.06.08</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { ref } from "vue";
|
||||
let airType = ref(1);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.rightBigBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.rightHeader {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
cursor: pointer;
|
||||
margin-left: 60%;
|
||||
height: 5%;
|
||||
|
||||
.tab {
|
||||
width: 80%;
|
||||
margin-right: 8%;
|
||||
z-index: 99;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
.menuD {
|
||||
width: 92%;
|
||||
height: 90%;
|
||||
margin: 2% 5% 0 5%;
|
||||
font-size: 14px;
|
||||
.menuL {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
background: url("@/assets/images/securityManagement/menImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 4%;
|
||||
display: flex;
|
||||
.leftNum {
|
||||
width: 40%;
|
||||
height: 90%;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
margin: 2% 0 0 4%;
|
||||
padding-bottom: 2%;
|
||||
.name {
|
||||
margin-top: 4%;
|
||||
}
|
||||
}
|
||||
.rightDate {
|
||||
width: 40%;
|
||||
height: 90%;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
margin: 8% 0 0 8%;
|
||||
.date {
|
||||
margin-top: 4%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
height: 60%;
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
::v-deep .h-card .content {
|
||||
height: 94.2% !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user