Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

同步现场代码

Browse Source
This commit is contained in:
GGJ
2024-05-09 18:00:04 +08:00
parent 06611f527a
commit 6d7f1bca56
46 changed files with 44063 additions and 1586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
src/views/pqs/qualityInspeection/panorama/components/mapR.vue
View File

@@ -2,7 +2,7 @@
<div :class="show ? 'show' : 'noshow'">
<div class="boxLeft" :style="height">
<!-- 综合评估 -->
<div>
<div style="height: 110px">
<div class="title">
<span>综合评估</span>
<span class="info" @click="open(0)">
@@ -10,9 +10,35 @@
<ArrowRight style="width: 12px" />
</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div class="mt10 TJTop">
<img src="@/assets/img/TJ.png" />
综合评估得分：
<span :style="{
color:
assessList.score == 3.14159
? ''
:assessList.score > 4.5
? '#339966'
:assessList.score > 4
? '#3399ff'
:assessList.score > 3
? '#ffcc33'
:assessList.score > 2
? '#ff9900'
:assessList.score > 0
? '#cc0000'
: ''
}">{{assessList.score}}</span>
</div>
<div class="evaluate">
<div v-for="item in assessList" style="min-width: 50px">
<div>{{ item.name }}</div>
<div v-for="item in assessList.children" style="min-width: 50px">
<div>
<span class="line"></span>
{{ item.name }}
</div>
<div
style="margin-top: 5px"
:style="{
@@ -46,14 +72,19 @@
<ArrowRight style="width: 12px" />
</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="boxHeight" class="boxR">
<div class="top">
<span>
<div class="TJTop">
<img src="@/assets/img/TJ.png" />
监测点越限占比:
<span class="num">
{{ harmonicLineRatio == 3.14159 ? '暂无数据' : harmonicLineRatio + '%' }}
{{ harmonicLineRatio == 3.14159 ? '0' : harmonicLineRatio + '%' }}
</span>
</span>
</div>
<el-select v-model="harmonicType" style="width: 120px" @change="harmonicChange" size="small">
<el-option
v-for="item in options"
@@ -63,7 +94,13 @@
/>
</el-select>
</div>
<MyEChart :style="EchHeight" :options="harmonicCharts" />
<!-- <MyEChart :style="EchHeight" :options="harmonicList" /> -->
<div :style="EchHeight" class="harmonic mt5">
<div class="progress" v-for="item in harmonicList">
<span class="text">{{ item.deptName }}</span>
<el-progress :percentage="item.ratio" />
</div>
</div>
</div>
</div>
<!-- 暂态电能质量水平评估 -->
@@ -75,37 +112,55 @@
<ArrowRight style="width: 12px" />
</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="boxHeight" class="boxR">
<div class="top">
<span>
暂态事件严重度:
<span class="num">{{ transientNum }}%</span>
</span>
<div class="TJTop">
<img src="@/assets/img/TJ.png" />
<span>
暂态事件严重度：
<span class="num">{{ transientNum }}%</span>
</span>
</div>
<el-select v-model="value" style="width: 120px" size="small" @change="transientChange">
<el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
<MyEChart :style="EchHeight" :options="WTCharts" />
<!-- <MyEChart :style="EchHeight" :options="WTList" /> -->
<div :style="EchHeight" class="harmonic mt5">
<div class="progress" v-for="item in WTList">
<span class="text">{{ item.orgName }}</span>
<el-progress :percentage="item.count" />
</div>
</div>
</div>
</div>
<!-- 技术监督管理 -->
<div>
<div class="title">
<span>技术监督管理(问题数)</span>
<span>技术监督管理</span>
<span class="info" @click="open(3)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div :style="boxHeight" class="boxR">
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div style="height: 150px" class="boxR">
<div class="evaluate bottom">
<div v-for="item in JDlist" style="width: 80px">
<div>{{ item.name }}</div>
<div style="margin-top: 5px">{{ item.value }}</div>
<div style="margin-top: 5px; font-weight: 550">{{ item.value }}</div>
</div>
</div>
<el-row style="height: calc(100% - 62px)">
<el-col :span="12" class="col" style="border-right: 1px solid #ccc">
<el-row
style="height: calc(100% - 45px); display: flex; justify-content: space-around"
class="ml10 mr10 mt5"
>
<el-col :span="11" class="col pt10">
<div>
<span>异常问题总数：</span>
<span style="color: #2dcd28">60个</span>
@@ -119,7 +174,7 @@
<span style="color: #338dff">60%</span>
</div>
</el-col>
<el-col :span="12" class="col">
<el-col :span="11" class="col pt10" :offset="0.5">
<div>
<span>异常问题总数：</span>
<span style="color: #2dcd28">60个</span>
@@ -168,8 +223,8 @@ import { getAssessOverview, getEvaluationOverview, getEventLevelEvaluation } fro
const dictData = useDictData()
const show = ref(false)
const height = mainHeight(30)
const boxHeight: any = mainHeight(270, 3)
const EchHeight: any = mainHeight(370, 3)
const boxHeight: any = mainHeight(420, 2)
const EchHeight: any = mainHeight(490, 2)
const evaluateRef = ref()
const steadyStateRef = ref()
const formRow: any = ref({})
@@ -214,6 +269,10 @@ const JDlist = ref([
name: '技术监督计划',
value: 5
},
{
name: '在线监测',
value: 5
},
{
name: '用户投诉',
value: 5
@@ -221,15 +280,11 @@ const JDlist = ref([
{
name: '谐波普测',
value: 5
},
{
name: '在线系统',
value: 5
}
])
const harmonicCharts = ref()
const harmonicList: any = ref([])
const harmonicLineRatio: any = ref(0)
const WTCharts = ref({})
const WTList: any = ref([])
const value = ref(options1[0].id)
const open = (e: number) => {
@@ -252,7 +307,7 @@ const info = (row: any) => {
ids: [],
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
isUpToGrid: row.isUpToGrid,
monitorFlag: row.isUpToGrid
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
}
formRow.value = form
// 综合评估
@@ -267,51 +322,55 @@ const info = (row: any) => {
const harmonicChange = () => {
getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {
harmonicLineRatio.value = res.data.lineRatio
harmonicList.value = res.data.childrenList.map((item: any) => {
item.ratio = item.ratio == 3.14159 ? 0 : item.ratio
return item
})
harmonicCharts.value = {
tooltip: {
formatter: function (params: any) {
return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
}
},
xAxis: {
name: '%',
type: 'value',
max: 100
},
legend: {
show: false
},
yAxis: {
type: 'category',
data: res.data.childrenList.map((item: any) => item.deptName)
},
grid: {
top: '10px',
left: '30px',
right: '30px',
bottom: '0px'
},
// harmonicList.value = {
// tooltip: {
// formatter: function (params: any) {
// return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
// }
// },
// xAxis: {
// name: '%',
// type: 'value',
// max: 100
// },
// legend: {
// show: false
// },
// yAxis: {
// type: 'category',
// data: res.data.childrenList.map((item: any) => item.deptName)
// },
// grid: {
// top: '10px',
// left: '30px',
// right: '30px',
// bottom: '0px'
// },
options: {
dataZoom: null,
series: [
{
name: '占比',
type: 'bar',
data: res.data.childrenList.map((item: any) => item.ratio),
label: {
show: true,
position: 'right',
fontSize: 12,
formatter: function (params: any) {
return `${params.value == 3.14159 ? '' : params.value}`
}
}
}
]
}
}
// options: {
// dataZoom: null,
// series: [
// {
// name: '占比',
// type: 'bar',
// data: res.data.childrenList.map((item: any) => item.ratio),
// label: {
// show: true,
// position: 'right',
// fontSize: 12,
// formatter: function (params: any) {
// return `${params.value == 3.14159 ? '' : params.value}`
// }
// }
// }
// ]
// }
// }
})
}
const transientChange = () => {
@@ -325,54 +384,54 @@ const transientChange = () => {
transientNum.value = res.data.gwData
data = res.data.gwInfo
}
WTList.value = data
// WTList.value = {
// tooltip: {
// formatter: function (params: any) {
// return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
// }
// },
// xAxis: {
// name: '%',
// type: 'value',
// max: 100
// },
// legend: {
// show: false
// },
// yAxis: {
// type: 'category',
// data: data.map((item: any) => item.orgName)
// },
// grid: {
// top: '10px',
// left: '30px',
// right: '30px',
// bottom: '0px'
// },
WTCharts.value = {
tooltip: {
formatter: function (params: any) {
return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
}
},
xAxis: {
name: '%',
type: 'value',
max: 100
},
legend: {
show: false
},
yAxis: {
type: 'category',
data: data.map((item: any) => item.orgName)
},
grid: {
top: '10px',
left: '30px',
right: '30px',
bottom: '0px'
},
options: {
dataZoom: null,
series: [
{
name: '占比',
type: 'bar',
data: data.map((item: any) => item.count),
label: {
show: true,
position: 'right',
fontSize: 12,
formatter: function (params: any) {
return `${params.value}`
}
}
}
]
}
}
// options: {
// dataZoom: null,
// series: [
// {
// name: '占比',
// type: 'bar',
// data: data.map((item: any) => item.count),
// label: {
// show: true,
// position: 'right',
// fontSize: 12,
// formatter: function (params: any) {
// return `${params.value}`
// }
// }
// }
// ]
// }
// }
})
}
defineExpose({ info })
defineExpose({ info, show })
</script>
<style lang="scss" scoped>
@@ -382,41 +441,55 @@ defineExpose({ info })
padding: 10px 10px 10px 10px;
font-size: 13px;
overflow: hidden;
border-radius: 5px;
}
.title {
// height: ;
display: flex;
justify-content: space-between;
font-size: 16px;
height: 22px;
font-size: 15px;
line-height: 23px;
padding-left: 5px;
width: 100%;
background-image: linear-gradient(to right, #a4e5da, #fff);
font-weight: 550;
.info {
font-weight: normal;
display: flex;
font-size: 12px;
cursor: pointer;
color: #757575;
}
}
.TJTop {
display: flex;
img {
height: 1.2rem;
width: 1.2rem;
margin-right: 5px;
}
}
.evaluate {
height: 60px;
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px 0;
display: flex;
justify-content: space-around;
text-align: center;
overflow-x: auto;
overflow-y: hidden;
.line {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
background: var(--el-color-primary);
margin-right: 2px;
margin-bottom: 1px;
}
}
.boxR {
border: 1px solid #ccc;
margin: 10px 0;
padding: 5px;
margin: 10px 0 0 0;
.num {
color: #2478f2;
}
@@ -428,6 +501,21 @@ defineExpose({ info })
margin: 0;
border: 0px;
}
.harmonic {
display: grid;
.progress {
display: flex;
align-items: center;
.text {
width: 50px;
font-size: 12px;
}
.el-progress {
flex: 1;
}
}
}
}
:deep(.el-select) {
min-width: 120px;
@@ -435,14 +523,16 @@ defineExpose({ info })
.col {
display: grid;
grid-template-columns: 1fr;
border-radius: 10px;
text-align: center;
background-color: #edededc0;
}
.imgR {
position: absolute;
padding: 10px;
top: calc(50% - 80px);
left: -23px;
z-index: 1;
height: 200px;
cursor: pointer;
}
@@ -460,4 +550,7 @@ defineExpose({ info })
padding: 10px 10px 10px 10px;
}
}
:deep(.el-progress__text) {
font-size: 0.8rem !important ;
}
</style>