From b6cacf34f55a6d53e3019ff0c886ff3a2335c066 Mon Sep 17 00:00:00 2001
From: batman <978517621@qq.com>
Date: 星期四, 16 三月 2023 10:30:55 +0800
Subject: [PATCH] 新修改添加页面
---
src/views/intellectInspect/inspectIndex/index.vue | 99 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 70 insertions(+), 29 deletions(-)
diff --git a/src/views/intellectInspect/inspectIndex/index.vue b/src/views/intellectInspect/inspectIndex/index.vue
index 7b9a78b..668f6f7 100644
--- a/src/views/intellectInspect/inspectIndex/index.vue
+++ b/src/views/intellectInspect/inspectIndex/index.vue
@@ -17,12 +17,14 @@
<div style="height: 100%">
<div class="topChart">
<div class="chart-item">
+ <dv-border-box10 v-if="isFull==true" class="item-bg" :color="['rgba(8, 109, 209, 0.2)']"></dv-border-box10>
<div class="chart-tit">
<span class="tit">年度巡检异常趋势</span>
</div>
<div class="chart" :id="xjLine"></div>
</div>
<div class="chart-item">
+ <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
<div class="chart-tit">
<span class="tit">异常区域设备统计</span>
<div class="filter-part">
@@ -45,6 +47,7 @@
</div>
</div>
<div class="midChart">
+ <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
<div class="chart-item">
<div class="chart-tit">
<div style="display: flex;align-items: center">
@@ -106,6 +109,7 @@
</div>
</div>
<div class="midChart">
+ <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
<div class="chart-item">
<div class="chart-tit">
<span class="tit">巡检异常清单</span>
@@ -134,7 +138,7 @@
<el-table-column prop="hiddenDangerHandlerPhone" label="电话" align="center"/>
<el-table-column prop="handlerStatus" label="处置状态" align="center">
<template #default="scope">
- <el-tag :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag>
+ <el-tag size="small" :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="handlerDesc" label="处置描述反馈" align="center"/>
@@ -164,7 +168,7 @@
<div style="margin-bottom: 20px">
<div style="margin-bottom: 10px">处置前：</div>
<div v-if="beImgs && beImgs.length>0">
- <el-image v-for="(item,index) in beImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
+ <el-image v-for="(item,index) in beImgs" :key="index" style="width: 200px; height: 200px;margin-right: 10px" :src="item" fit="fill" />
</div>
<div v-else>
无照片信息
@@ -173,7 +177,7 @@
<div>
<div style="margin-bottom: 10px">处置后</div>
<div v-if="afImgs && beImgs.length>0">
- <el-image v-for="(item,index) in afImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
+ <el-image v-for="(item,index) in afImgs" :key="index" style="width: 200px; height: 200px;margin-right: 10px" :src="item" fit="fill" />
</div>
<div v-else>
无照片信息
@@ -211,6 +215,7 @@
import unusualList from './components/unusualList.vue';
import { departmentApi } from '/@/api/systemManage/department';
import screenfull from "screenfull";
+import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3'
// 定义接口来定义对象的类型
interface stateType {
tableData: Array<string>;
@@ -428,8 +433,7 @@
padding:[1,1,1,0],
textStyle: {
// 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
+ color: state.themeColor
},
},
grid: {
@@ -453,7 +457,17 @@
}
},
yAxis: {
- type: 'value'
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#fafafa',
+ width: 1,
+ type: 'dashed'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ }
},
series: [
{
@@ -519,7 +533,7 @@
textStyle: {
// 设置默认的文字颜色
color: state.themeColor,
- fontSize: 12
+ // fontSize: 12
},
itemStyle: {
borderWidth: 0 // 设置图例边框宽度为0
@@ -534,21 +548,29 @@
itemStyle: {
borderRadius: 1,
borderColor: '#fff',
- borderWidth: 2
+ borderWidth: 1
},
label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
+ show: true,
+ position: 'outside',
+ overflow: 'truncate',
+ borderWidth: 0,
+ color: state.themeColor
},
labelLine: {
- show: true
+ show: true, // 显示指示线
+ lineStyle: {
+ color: '#ccc',
+ width: 1,
+ type: 'solid'
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
},
data: [
{ value: 1048, name: '区域1' },
@@ -704,7 +726,7 @@
line-height: 34px;
top: 80px;
right: 20px;
- z-index: 99999;
+ z-index: 9;
}
.topChart{
width: 100%;
@@ -938,25 +960,37 @@
.full{
position:fixed;
- background: #fff;
- border-radius: 17px;
+ background: rgba(0,0,0,.2);
+ border: 1px solid rgba(54, 252, 252, .6);
+ border-radius: 17px 1px 1px 17px;
box-shadow: 3px 3px 12px rgba(0,0,0,.2);
- height: 34px;
- line-height: 34px;
- top: 0;
- right: 20px;
+ height: 32px;
+ line-height: 30px;
+ top: 10px;
+ right: 2px;
+ display: flex;
+ justify-content: center;
+ backdrop-filter: blur(2px);
+ z-index: 99999;
}
.topChart{
.chart-item{
border-radius: 4px;
- background: rgba(8, 109, 209, 0.2);
- border: 1px solid rgba(54, 252, 252, .6);
+ background: rgba(0, 61, 121, 0.2);
backdrop-filter: blur(5px);
position: relative;
z-index: 2;
&:last-of-type{
position: relative;
z-index: 1;
+ }
+ .item-bg{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
}
.el-radio.is-bordered.is-checked{
border-color: #11FEEE !important;
@@ -1038,11 +1072,18 @@
}
.midChart{
border-radius: 4px;
- background: rgba(8, 109, 209, 0.2);
- border: 1px solid rgba(54, 252, 252, .6);
+ background: rgba(0, 61, 121, 0.2);
backdrop-filter: blur(5px);
position: relative;
z-index: 3;
+ .item-bg {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
.tit{
color: #11FEEE;
}
--
Gitblit v1.9.2