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",
|
path: "/safetyManagement/securityManagement",
|
||||||
name: "安全管理",
|
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: {
|
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>
|
||||||
</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 v-for="(item, index) in menuList" :key="index">
|
||||||
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
|
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
|
||||||
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
|
<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 showUserBox = ref(false as any);
|
||||||
let adminName = ref("" as any);
|
let adminName = ref("" as any);
|
||||||
let menuList = ref([
|
let menuList = ref([
|
||||||
|
{
|
||||||
|
moduleName: "综合管理",
|
||||||
|
modulePath: "/comprehensiveManage/projectOverview",
|
||||||
|
menuList: [
|
||||||
|
{
|
||||||
|
menuName: "工程概况",
|
||||||
|
companyPath: "/comprehensiveManage/projectOverview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: "智慧党建",
|
||||||
|
companyPath: "/comprehensiveManage/smartPartyBuilding"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
moduleName: "安全管理",
|
moduleName: "安全管理",
|
||||||
modulePath: "/safetyManagement/securityManagement",
|
modulePath: "/safetyManagement/securityManagement",
|
||||||
@ -93,6 +107,16 @@ let menuList = ref([
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
moduleName: "质量管理",
|
||||||
|
modulePath: "/qualityControl/qualityManagement",
|
||||||
|
menuList: [
|
||||||
|
{
|
||||||
|
menuName: "质量管理",
|
||||||
|
companyPath: "/qualityControl/qualityManagement"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
moduleName: "扬尘噪声",
|
moduleName: "扬尘噪声",
|
||||||
modulePath: "/headNoise"
|
modulePath: "/headNoise"
|
||||||
@ -318,7 +342,7 @@ function jumpBgd() {
|
|||||||
float: right;
|
float: right;
|
||||||
margin-right: 2%;
|
margin-right: 2%;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
.numColor{
|
.numColor {
|
||||||
color: #82fbea;
|
color: #82fbea;
|
||||||
font-family: sadigitalNumber;
|
font-family: sadigitalNumber;
|
||||||
font-size: 24px;
|
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