修好页面ui

This commit is contained in:
GGJ
2025-04-10 11:29:58 +08:00
parent 9a7a1ff46a
commit 02053ac58f
17 changed files with 369 additions and 54 deletions

View File

@@ -72,12 +72,12 @@ const info = () => {
itemStyle: {
color: function (params) {
return params.value >= 90
? '#009900'
? '#00b07d'
: params.value >= 80
? '#77DA63'
? '#2b7fd3'
: params.value >= 70
? '#FFCC00'
: '#CC0000'
? '#ffcc33'
: '#97017e'
}
},
markLine: {

View File

@@ -0,0 +1,110 @@
<template>
<el-dialog v-model="dialogVisible" title="区域终端运行评价详情" width="50%" draggable>
<el-form :inline="true" :model="formInline">
<el-form-item label="所在地市">
<el-select v-model="formInline.value" style="width: 240px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="运行状态">
<el-select v-model="formInline.value1" style="width: 240px">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item style="position: absolute; right: 0">
<el-button type="primary" icon="el-icon-Search">查询</el-button>
</el-form-item>
</el-form>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
<vxe-column field="num" title="终端名称" />
<vxe-column field="num1" title="所在地市" />
<vxe-column field="num2" title="所属变电站" />
<vxe-column field="num3" title="终端型号" />
<vxe-column field="num4" title="完整率(%)" />
<vxe-column field="num4" title="在线率(%)" />
<vxe-column field="num4" title="合格率(%)" />
<vxe-column field="num5" title="运行状态">
<template #default="{ row }">
<el-tag v-if="row.num5 == 1" effect="dark" type="success">在运</el-tag>
<el-tag v-if="row.num5 == 2" effect="dark" type="error">停运</el-tag>
</template>
</vxe-column>
</vxe-table>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const dialogVisible = ref(false)
const radio1 = ref('1')
const tableData = ref([
{
num: '测试终端1',
num1: '张家口',
num2: '测试变电站1',
num3: 'npqs_571_1',
num4: '100',
num5: 1
},
{
num: '测试终端2',
num1: '张家口',
num2: '测试变电站2',
num3: 'npqs_571_2',
num4: '100',
num5: 1
},
{
num: '测试终端3',
num1: '张家口',
num2: '测试变电站3',
num3: 'npqs_571_3',
num4: '100',
num5: 1
}
])
const formInline = reactive({
value: '',
value1: '',
})
const options = [
{
value: '1',
label: '张家口'
},
{
value: '2',
label: '承德'
},
{
value: '3',
label: '唐山'
},
{
value: '4',
label: '秦皇岛'
},
{
value: '5',
label: '廊坊'
}
]
const options1 = [
{
value: '1',
label: '在运'
},
{
value: '2',
label: '停运'
},
]
const open = () => {
dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

View File

@@ -8,28 +8,28 @@
<span>完整率</span>
<span style="color: #00cc00">98</span>
<span style="color: #00cc00"></span>
<span style="color: #00b07d"></span>
</div>
<div class="appraise">
<div class="iconfont icon-zaixianshuaibaobiao0"></div>
<span>在线率</span>
<span style="color: #00cc00">98</span>
<span style="color: #00cc00"></span>
<span style="color: #00b07d"></span>
</div>
<div class="appraise">
<div class="iconfont icon-dianyahegeshuai"></div>
<span>合格率</span>
<span style="color: #00cc00">98</span>
<span style="color: #00cc00"></span>
<span style="color: #00b07d"></span>
</div>
<div class="appraise">
<div class="iconfont icon-dianyahegeshuai"></div>
<div class="iconfont icon-zonghepingjia1"></div>
<span>综合评价</span>
<span style="color: #00cc00">98</span>
<span style="color: #00cc00"></span>
<span style="color: #00b07d"></span>
<!-- <div class="right">
<span>综合评价</span>
<span></span>

View File

@@ -0,0 +1,60 @@
<template>
<el-dialog v-model="dialogVisible" title="终端统计详情" width="50%" draggable>
<el-tabs type="border-card">
<el-tab-pane label="在运">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
<vxe-column field="num" title="终端名称" />
<vxe-column field="num1" title="所在地市" />
<vxe-column field="num2" title="所属变电站" />
<vxe-column field="num3" title="终端型号" />
<vxe-column field="num4" title="在线率(%)" />
<vxe-column field="num5" title="运行状态">
<template #default="{ row }">
<el-tag v-if="row.num5 == 1" effect="dark" type="success">在运</el-tag>
<el-tag v-if="row.num5 == 2" effect="dark" type="error">停运</el-tag>
</template>
</vxe-column>
</vxe-table>
</el-tab-pane>
<el-tab-pane label="停运">Config</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const dialogVisible = ref(false)
const radio1 = ref('1')
const tableData = ref([
{
num: '测试终端1',
num1: '张家口',
num2: '测试变电站1',
num3: 'npqs_571_1',
num4: '100',
num5: 1
},
{
num: '测试终端2',
num1: '张家口',
num2: '测试变电站2',
num3: 'npqs_571_2',
num4: '100',
num5: 1
},
{
num: '测试终端3',
num1: '张家口',
num2: '测试变电站3',
num3: 'npqs_571_3',
num4: '100',
num5: 1
}
])
const open = () => {
dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>