绘制离线地图
This commit is contained in:
742
src/views/pqs/panorama/components/line/info.vue
Normal file
742
src/views/pqs/panorama/components/line/info.vue
Normal file
@@ -0,0 +1,742 @@
|
||||
<template>
|
||||
<div class="default-main lineInfo" :style="height">
|
||||
<DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
|
||||
<el-page-header :icon="ArrowLeft" @back="emit('back')">
|
||||
<template #content>
|
||||
<span style="font-size: 16px">{{ dropList.lineName }}详情 </span>
|
||||
<span style="font-weight: 500">最新数据时间：</span>
|
||||
<span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
台账信息
|
||||
</h3>
|
||||
<el-descriptions title="" border :column="2">
|
||||
<el-descriptions-item label="监测点名称" width="140px">
|
||||
{{ dropList.lineName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
|
||||
<el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
|
||||
<el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item>
|
||||
<el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="通讯状态" width="140px">
|
||||
<el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
|
||||
{{ dropList.comFlag }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
告警明细 (天)
|
||||
</h3>
|
||||
<el-descriptions title="" border :column="2" size="small">
|
||||
<el-descriptions-item width="140px" label="告警原因">
|
||||
<span style="font-weight: 550"
|
||||
:style="TargetData.info == 0 ? 'color: #0e8780;' : TargetData.info == 3 ? 'color: #000' : 'color: #ff0000;'">
|
||||
{{
|
||||
TargetData.info == 1
|
||||
? '超标告警'
|
||||
: TargetData.info == 2
|
||||
? '完整性告警'
|
||||
: TargetData.info == 0
|
||||
? '无告警'
|
||||
: '暂无数据'
|
||||
}}
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="频率偏差">{{ TargetData.freqDevOvertime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电压偏差">{{ TargetData.voltageDevOvertime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="谐波电流">{{ TargetData.iharmOvertime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="负序电流">{{ TargetData.inegOvertime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="间谐波电压">{{ TargetData.inuharmOvertime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电压总谐波畸变率">
|
||||
{{ TargetData.uaberranceOvertime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="闪变">{{ TargetData.flickerOvertime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="谐波电压">{{ TargetData.uharmOvertime }}</el-descriptions-item>
|
||||
<el-descriptions-item width="140px" label="三相电压不平衡度">
|
||||
{{ TargetData.ubalanceOvertime }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
数据质量
|
||||
</h3>
|
||||
<div style="display: flex">
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" @click="Integrity" />
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts"
|
||||
@click="OnlineRate" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
监测点总体评价结论
|
||||
</h3>
|
||||
|
||||
<div class="evaluationData">
|
||||
<el-row style="width: 96%" class="row pb5">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<span>{{ dropList.lineName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div>
|
||||
综合评估得分:
|
||||
<span class="conclusion" :class="dropList.assessData == '特质'
|
||||
? 'background1'
|
||||
: dropList.assessData == '较差'
|
||||
? 'background2'
|
||||
: dropList.assessData == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
">
|
||||
{{ dropList.assessData }}
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb4 pt3">
|
||||
<el-col :span="14" style="display: flex; align-items: center">
|
||||
<img :src="url[i]" />
|
||||
<span style="line-height: 20px">{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="10" style="display: flex; align-items: center">
|
||||
<div style="width: 100%">
|
||||
评估得分：
|
||||
<span class="conclusion" :class="item.avg == '特质'
|
||||
? 'background1'
|
||||
: item.avg == '较差'
|
||||
? 'background2'
|
||||
: item.avg == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
">
|
||||
{{ item.avg }}
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
稳态指标合格率
|
||||
</h3>
|
||||
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
暂态事件统计
|
||||
</h3>
|
||||
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="24">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
历史趋势图
|
||||
</h3>
|
||||
<history :lineId="lineId" ref="historyRef" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, provide } from 'vue'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import history from './history.vue'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
|
||||
import {
|
||||
getTotalIntegrityByLineIds,
|
||||
getTotalOnlineRates,
|
||||
lineQualifiedDetail,
|
||||
getLineAssess,
|
||||
getEventDetailByLineId,
|
||||
getGridDiagramTargetData
|
||||
} from '@/api/device-boot/panorama'
|
||||
import { formatter } from 'element-plus'
|
||||
|
||||
const emit = defineEmits(['back'])
|
||||
const dropList: any = ref({})
|
||||
const TargetData: any = ref({})
|
||||
const evaluationData: any = ref([])
|
||||
const incidentCharts: any = ref({})
|
||||
const ComCharts: any = ref({})
|
||||
const onLineCharts: any = ref({})
|
||||
const datePickerRef = ref()
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const historyRef = ref()
|
||||
const IntegrityNum = ref(0)
|
||||
const url: any = [
|
||||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const lineId: any = ref('')
|
||||
const height = mainHeight(20)
|
||||
const rowHeight = mainHeight(190, 3).height
|
||||
|
||||
// 查询
|
||||
const open = async (id: string) => {
|
||||
let form = {
|
||||
comFlag: 1,
|
||||
endTime: datePickerRef.value.timeValue[1],
|
||||
lineIds: [id],
|
||||
|
||||
ids: [id],
|
||||
searchValue: '',
|
||||
startTime: datePickerRef.value.timeValue[0]
|
||||
}
|
||||
lineId.value = id
|
||||
const { data } = await getLineDetailData({ id: id })
|
||||
dropList.value = data
|
||||
// 运行状态
|
||||
|
||||
// 完整性
|
||||
getTotalIntegrityByLineIds(form).then((res: any) => {
|
||||
let num = (res.data || 0) / 100
|
||||
IntegrityNum.value = res.data
|
||||
ComCharts.value = {
|
||||
title: {
|
||||
text: '完整性',
|
||||
bottom: '10%',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
//第二个球的填充
|
||||
type: 'liquidFill',
|
||||
radius: '65%',
|
||||
center: ['50%', '40%'], //中心点
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2aa1e3'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
],
|
||||
data: [num, num], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: '#f7f8fc'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: () => {
|
||||
return (num * 100).toFixed(2) + '%'
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
// show: false
|
||||
borderDistance: 0,
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// 稳态指标合格率
|
||||
})
|
||||
// 在线率
|
||||
getTotalOnlineRates({ ...form, id: dropList.value.devId, ids: [dropList.value.devId] }).then((res: any) => {
|
||||
let num = (res.data || 0) / 100
|
||||
onLineCharts.value = {
|
||||
title: {
|
||||
text: '在线率',
|
||||
bottom: '10%',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
//第二个球的填充
|
||||
type: 'liquidFill',
|
||||
radius: '65%',
|
||||
center: ['50%', '40%'], //中心点
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#67c23a'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
],
|
||||
data: [num, num], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
color: '#f7f8fc'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: () => {
|
||||
return (num * 100).toFixed(2) + '%'
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
// show: false
|
||||
borderDistance: 0,
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 监测点总体评价结论
|
||||
getLineAssess({
|
||||
lineId: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1]
|
||||
}).then((res: any) => {
|
||||
dropList.value.assessData = res.data.assessLevel
|
||||
evaluationData.value = [
|
||||
{
|
||||
targetName: '频率偏差(Hz)',
|
||||
avg: res.data.freqAssessLevel,
|
||||
sd: res.data.freqQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '电压偏差(%)',
|
||||
avg: res.data.vdevAssessLevel,
|
||||
sd: res.data.vdevQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '电压总谐波畸变率(%)',
|
||||
avg: res.data.harmAssessLevel,
|
||||
sd: res.data.harmQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '三相电压不平衡度(%)',
|
||||
avg: res.data.unbalanceAssessLevel,
|
||||
sd: res.data.unbalanceQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '闪变',
|
||||
avg: res.data.flickerAssessLevel,
|
||||
sd: res.data.flickerQualifyData
|
||||
}
|
||||
]
|
||||
})
|
||||
// 稳态指标合格率
|
||||
|
||||
lineQualifiedDetail({
|
||||
lineId: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1]
|
||||
}).then(res => {
|
||||
echart([
|
||||
{
|
||||
time: datePickerRef.value.timeValue[0].substring(0, 7),
|
||||
targetList: [
|
||||
'频率偏差(Hz)',
|
||||
'电压偏差(%)',
|
||||
'电压总谐波畸变率(%)',
|
||||
'三相电压不平衡度(%)',
|
||||
'闪变',
|
||||
'谐波电压(%)',
|
||||
'谐波电流(%)',
|
||||
'间谐波电压(%)',
|
||||
'负序电流(A)'
|
||||
],
|
||||
ratioList: [
|
||||
res.data.freqDev == 3.14159 ? null : res.data.freqDev,
|
||||
res.data.vdev == 3.14159 ? null : res.data.vdev,
|
||||
res.data.vthd == 3.14159 ? null : res.data.vthd,
|
||||
res.data.ubalance == 3.14159 ? null : res.data.ubalance,
|
||||
res.data.plt == 3.14159 ? null : res.data.plt,
|
||||
|
||||
res.data.uharm == 3.14159 ? null : res.data.uharm,
|
||||
res.data.iharm == 3.14159 ? null : res.data.iharm,
|
||||
res.data.inuHarm == 3.14159 ? null : res.data.inuHarm,
|
||||
res.data.ineg == 3.14159 ? null : res.data.ineg
|
||||
]
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
// 暂态事件统计
|
||||
getEventDetailByLineId({
|
||||
id: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1],
|
||||
type: datePickerRef.value.interval
|
||||
}).then((res: any) => {
|
||||
let data = [
|
||||
{
|
||||
name: '电压暂升',
|
||||
value: res.data?.swellTimes || 0
|
||||
},
|
||||
{
|
||||
name: '电压暂降',
|
||||
value: res.data?.sagTimes || 0
|
||||
},
|
||||
{
|
||||
name: '电压中断',
|
||||
value: res.data?.interruptTimes || 0
|
||||
}
|
||||
]
|
||||
incidentCharts.value = {
|
||||
title: {
|
||||
text: '总数：' + (data[0].value + data[1].value + data[2].value),
|
||||
left: '40%',
|
||||
top: '45%',
|
||||
textStyle: {
|
||||
// fontWeight: 600,
|
||||
fontSize: 12
|
||||
}
|
||||
// subtext: '总数',
|
||||
// subtextStyle: {
|
||||
// fontWeight: 550,
|
||||
// fontSize: 14
|
||||
// }
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '10%',
|
||||
formatter: function (e: any) {
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '条'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['45%', '50%'],
|
||||
radius: ['60%', '80%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 告警明细
|
||||
getGridDiagramTargetData({ ...form, id: id, type: 3 }).then(res => {
|
||||
TargetData.value = res.data
|
||||
let num = 0
|
||||
let flag = 0
|
||||
let judgment = true
|
||||
for (let k in res.data) {
|
||||
if (k != 'lineId') {
|
||||
if (res.data[k] != '/') {
|
||||
judgment = false
|
||||
}
|
||||
flag += (res.data[k] == '/' ? 0 : res.data[k])
|
||||
}
|
||||
}
|
||||
|
||||
if (IntegrityNum.value == 0) {
|
||||
num = 2 //完整性告警
|
||||
} else {
|
||||
if (flag > 0) {
|
||||
num = 1 //超标告警
|
||||
} else {
|
||||
num = 0 //无告警
|
||||
}
|
||||
if (judgment) {
|
||||
num = 3
|
||||
}
|
||||
}
|
||||
|
||||
TargetData.value.info = num
|
||||
})
|
||||
}
|
||||
const echart = (row: any) => {
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = [
|
||||
'频率偏差(Hz)',
|
||||
'电压偏差(%)',
|
||||
'电压总谐波畸变率(%)',
|
||||
'三相电压不平衡度(%)',
|
||||
'闪变',
|
||||
'谐波电压(%)',
|
||||
'谐波电流(%)',
|
||||
'间谐波电压(%)',
|
||||
'负序电流(A)'
|
||||
]
|
||||
let datamax = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: datamax[i]
|
||||
})
|
||||
}
|
||||
|
||||
let option: any = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
data: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '65%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#2a9fe069'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2a9fe0'
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
// 跳转
|
||||
const Integrity = () => {
|
||||
router.push({
|
||||
name: 'harmonic-boot/harmonic/getIntegrityData'
|
||||
})
|
||||
}
|
||||
const OnlineRate = () => {
|
||||
router.push({
|
||||
name: 'harmonic-boot/area/OnlineRate'
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// open('4c87b7dff2281254fc55c25a4da31506')
|
||||
})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lineInfo {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
:deep(.el-page-header__header) {
|
||||
height: 45px;
|
||||
border-bottom: 1px solid #f1eded;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__header) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.evaluationData {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
height: 87%;
|
||||
|
||||
.row {
|
||||
margin: 4px 2% 0;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 6%;
|
||||
margin: 0px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
background: var(--el-color-primary);
|
||||
margin-right: 5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.conclusion {
|
||||
display: inline-block;
|
||||
padding: 2px 5px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.background1 {
|
||||
background-color: #339966;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.background2 {
|
||||
background-color: #97017e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.background3 {
|
||||
background-color: #cc0000;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user