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

修改样式及历史趋势样式

Browse Source
This commit is contained in:
zhujiyan
2024-06-20 13:26:04 +08:00
parent e6d39fd5fa
commit a565fec416
3 changed files with 403 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/views/govern/terminal/planData/components/device.vue
View File

@@ -2,15 +2,17 @@
<el-dialog <el-dialog
class="cn-operate-dialog device-manage-popup" class="cn-operate-dialog device-manage-popup"
v-model="dialogVisible" v-model="dialogVisible"
title="设备信息" :title="!addFlag ? '设备信息' : '添加设备'"
draggable draggable
width="85%" :append-to-body="true"
width="60%"
> >
<el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button> <el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button>
<el-popconfirm <el-popconfirm
confirm-button-text="是" confirm-button-text="是"
cancel-button-text="否" cancel-button-text="否"
icon-color="#626AEF" icon-color="#626AEF"
width="200"
title="是否确认删除所选数据？" title="是否确认删除所选数据？"
@confirm="handleDelete('')" @confirm="handleDelete('')"
@cancel="cancelDelete" @cancel="cancelDelete"
@@ -20,7 +22,7 @@
</template> </template>
</el-popconfirm> </el-popconfirm>
<div class="default-main device-manage" v-show="addFlag" v-loading="loading"> <div class="device-manage" v-show="addFlag" v-loading="loading">
<deviceInfoTree <deviceInfoTree
:showCheckbox="true" :showCheckbox="true"
:default-checked-keys="defaultCheckedKeys" :default-checked-keys="defaultCheckedKeys"
@@ -32,19 +34,14 @@
<Table ref="tableRef" /> <Table ref="tableRef" />
</div> </div>
</div> </div>
<div <div class="device-manage" v-show="!addFlag" v-loading="loading">
class="default-main device-manage" <div class="device-manage-right">
v-show="!addFlag"
:style="{ height: pageHeight.height }"
v-loading="loading"
>
<div class="device-manage-right" :style="{ height: pageHeight.height }">
<!-- <datePicker ref="datePickerRef"></datePicker> <!-- <datePicker ref="datePickerRef"></datePicker>
<el-button type="primary" @click="handleSearch">查询</el-button> --> <el-button type="primary" @click="handleSearch">查询</el-button> -->
<vxe-table <vxe-table
v-bind="defaultAttribute" v-bind="defaultAttribute"
:data="tableData" :data="tableData"
height="auto" height="420"
style="width: 100%; margin-top: 10px" style="width: 100%; margin-top: 10px"
ref="checkedTableRef" ref="checkedTableRef"
@checkbox-all="selectChangeEvent" @checkbox-all="selectChangeEvent"
@@ -60,15 +57,16 @@
<vxe-column title="操作" width="120" fixed="right"> <vxe-column title="操作" width="120" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<el-popconfirm <el-popconfirm
width="150"
confirm-button-text="是" confirm-button-text="是"
cancel-button-text="否" cancel-button-text="否"
icon-color="#626AEF" icon-color="#626AEF"
title="是否确认删除当前数据？" title="是否确认删除？"
@confirm="handleDelete(row)" @confirm="handleDelete(row)"
@cancel="cancelDelete" @cancel="cancelDelete"
> >
<template #reference> <template #reference>
<el-button type="danger" size="small">删除</el-button> <el-button type="danger" text size="small">删除</el-button>
</template> </template>
</el-popconfirm> </el-popconfirm>
</template> </template>
@@ -127,6 +125,7 @@ const addFlag = ref(false)
const selectId: any = ref('') const selectId: any = ref('')
//查绑定测试项列表 //查绑定测试项列表
const getSelectedTable = (id: any) => { const getSelectedTable = (id: any) => {
//新增传0已绑定传1
getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => { getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => {
tableData.value = res.data.records tableData.value = res.data.records
}) })
@@ -134,10 +133,10 @@ const getSelectedTable = (id: any) => {
//新增设备列表 //新增设备列表
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/cs-device-boot/wlRecord/queryPage', url: '/cs-device-boot/wlRecord/queryPage',
// publicHeight: 65, publicHeight: 310,
method: 'POST', method: 'POST',
column: [ column: [
{ width: '60', type: 'checkbox' }, { width: '60', type: 'checkbox', fixed: 'left' },
{ title: '序号', type: 'seq', width: 80 }, { title: '序号', type: 'seq', width: 80 },
{ field: 'devName', title: '设备名称', minWidth: 170 }, { field: 'devName', title: '设备名称', minWidth: 170 },
{ field: 'devMac', title: '设备MAC', minWidth: 170 }, { field: 'devMac', title: '设备MAC', minWidth: 170 },
@@ -149,6 +148,7 @@ const tableStore = new TableStore({
beforeSearchFun: () => { beforeSearchFun: () => {
tableStore.table.params.id = selectId.value tableStore.table.params.id = selectId.value
//新增传0已绑定传1
tableStore.table.params.isTrueFlag = 0 tableStore.table.params.isTrueFlag = 0
tableStore.table.params.treeIds = treeIds.value tableStore.table.params.treeIds = treeIds.value
} }
@@ -168,31 +168,45 @@ const open = (id: any) => {
//查新增列表 //查新增列表
tableStore.index() tableStore.index()
} }
const close = () => {
addFlag.value = false
dialogVisible.value = false
}
const tableRef = ref() const tableRef = ref()
//添加设备 //添加设备
const submit = () => { const submit = () => {
//选择的数据 //选择的数据
let deviceIds = [] let deviceIds = []
//新增的时候执行的逻辑 //新增的时候执行的逻辑
if (addFlag.value == true) { if (addFlag.value) {
tableStore.table.selection.map(item => { if (tableStore.table.selection.length != 0) {
deviceIds.push(item.id) tableStore.table.selection.map(item => {
}) deviceIds.push(item.id)
const addForm = { })
id: selectId.value, const addForm = {
list: deviceIds id: selectId.value,
} list: deviceIds
addDevice(addForm).then(res => {
if (res.code == 'A0000') {
ElMessage.success('添加成功')
getSelectedTable(selectId.value)
addFlag.value = false
} }
}) addDevice(addForm).then(res => {
if (res.code == 'A0000') {
ElMessage.success('添加成功')
getSelectedTable(selectId.value)
//清除树节点选择状态
defaultCheckedKeys.value = []
//刷新新增列表状态
tableStore.index()
addFlag.value = false
}
})
} else {
ElMessage.warning('请选择设备信息')
}
}
}
const close = () => {
if (addFlag.value) {
addFlag.value = false
checkedList.value = []
checkedTableRef.value.clearCheckboxRow()
} else {
dialogVisible.value = false
} }
} }
//删除设备 //删除设备

116
src/views/govern/terminal/planData/components/popup.vue
View File

@@ -171,7 +171,7 @@
</el-form> </el-form>
<!-- 设备信息列表 --> <!-- 设备信息列表 -->
<div v-show="activeFormIndex == 6" style="height: 400px"> <div v-show="activeFormIndex == 6" style="height: 400px">
<deviceInfo ref="deviceRef" /> <!-- <deviceInfo ref="deviceRef" /> -->
</div> </div>
<template #footer=""> <template #footer="">
<el-button @click="close">取 消</el-button> <el-button @click="close">取 消</el-button>
@@ -191,39 +191,43 @@ const voltageLevelList = dictData.getBasicData('Dev_Voltage')
const volConTypeList = dictData.getBasicData('Dev_Connect') const volConTypeList = dictData.getBasicData('Dev_Connect')
const emit = defineEmits(['onSubmit']) const emit = defineEmits(['onSubmit'])
const form = ref({}) const form = ref({})
form.value = { const initForm = () => {
index: '', form.value = {
type: '', itemName: '', //方案名称
itemName: '', //方案名称 describe: '', //方案描述
describe: '', //方案描述 //测试项数据
//测试项数据 records: [
records: [ {
{ itemName: '', //测试项名称
itemName: '', //测试项名称 statisticalInterval: '', //测量间隔
statisticalInterval: '', //测量间隔 voltageLevel: voltageLevelList[0].id, //电压等级
voltageLevel: voltageLevelList[0].id, //电压等级 volConType: volConTypeList[0].id, //接线方式
volConType: volConTypeList[0].id, //接线方式 capacitySscmin: null, //最小短路容量
capacitySscmin: null, //最小短路容量 capacitySi: null, //用户协议容量
capacitySi: null, //用户协议容量 capacitySscb: null, //基准短路容量
capacitySscb: null, //基准短路容量 capacitySt: null, //供电设备容量
capacitySt: null, //供电设备容量 // pt1: 1, //pt变比1
// pt1: 1, //pt变比1 // pt2: 1, //pt变比2
// pt2: 1, //pt变比2 // ct1: 300, //ct变比1
// ct1: 300, //ct变比1 // ct2: 5, //ct变比2
// ct2: 5, //ct变比2 ct: 1,
ct: 1, pt: 1,
pt: 1, location: '' //监测位置
location: '' //监测位置 }
} ]
] }
} }
initForm()
const title: any = ref('') const title: any = ref('')
const activeFormIndex: any = ref(null) const activeFormIndex: any = ref(null)
const planId: any = ref('') const planId: any = ref('')
const deviceRef: any = ref(null) const deviceRef: any = ref(null)
const details = (val: any) => { const details = (val: any) => {
form.value = val if (activeFormIndex.value == 1 || activeFormIndex.value == 3) {
form.value = val
} else {
initForm()
}
} }
// 0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 删除方案 5 删除测试项 6 设备信息 // 0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 删除方案 5 删除测试项 6 设备信息
const open = (val: any, id: any) => { const open = (val: any, id: any) => {
@@ -275,8 +279,7 @@ const open = (val: any, id: any) => {
} }
if (val == 6) { if (val == 6) {
//1 列表 0树 //1 列表 0树
getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => { getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {})
})
} }
} }
//添加测试项 //添加测试项
@@ -309,32 +312,7 @@ const handleDelMointor = index => {
//关闭 //关闭
const close = () => { const close = () => {
dialogVisible.value = false dialogVisible.value = false
form.value = { initForm()
index: '',
type: '',
itemName: '', //方案名称
describe: '', //方案描述
//测试项数据
records: [
{
itemName: '', //测试项名称
statisticalInterval: '', //测量间隔
voltageLevel: voltageLevelList[0].id, //电压等级
volConType: volConTypeList[0].id, //接线方式
capacitySscmin: '', //最小短路容量
capacitySi: '', //用户协议容量
capacitySscb: '', //基准短路容量
capacitySt: '', //供电设备容量
pt: 1, //pt变比1
ct: 1, //pt变比2
// pt1: 1, //pt变比1
// pt2: 1, //pt变比2
// ct1: 300, //ct变比1
// ct2: 5, //ct变比2
location: '' //监测位置
}
]
}
} }
//提交 //提交
const submit = () => { const submit = () => {
@@ -345,11 +323,9 @@ const submit = () => {
describe: form.value.describe describe: form.value.describe
} }
addPlan(subForm).then(res => { addPlan(subForm).then(res => {
if (res.code == 'A0000') {
ElMessage.success('新增方案成功') ElMessage.success('新增方案成功')
emit('onSubmit') emit('onSubmit')
close() close()
}
}) })
} }
//修改方案 //修改方案
@@ -360,11 +336,9 @@ const submit = () => {
describe: form.value.describe describe: form.value.describe
} }
addPlan(subForm).then(res => { addPlan(subForm).then(res => {
if (res.code == 'A0000') { ElMessage.success('修改方案成功')
ElMessage.success('修改方案成功') emit('onSubmit')
emit('onSubmit') close()
close()
}
}) })
} }
//新增测试项 //新增测试项
@@ -372,11 +346,9 @@ const submit = () => {
const subForm = form.value const subForm = form.value
subForm.id = planId.value subForm.id = planId.value
addRecord(subForm).then(res => { addRecord(subForm).then(res => {
if (res.code == 'A0000') { ElMessage.success('新增测试项成功')
ElMessage.success('新增测试项成功') emit('onSubmit')
emit('onSubmit') close()
close()
}
}) })
} }
//修改测试项 //修改测试项
@@ -384,11 +356,9 @@ const submit = () => {
const subForm = form.value.records[0] const subForm = form.value.records[0]
subForm.id = planId.value subForm.id = planId.value
updateRecord(subForm).then(res => { updateRecord(subForm).then(res => {
if (res.code == 'A0000') { ElMessage.success('修改测试项成功')
ElMessage.success('修改测试项成功') emit('onSubmit')
emit('onSubmit') close()
close()
}
}) })
} }
} }

574
src/views/govern/terminal/planData/index.vue
View File

@@ -82,9 +82,9 @@
<p>历史趋势</p> <p>历史趋势</p>
</div> </div>
<div class="history_header"> <div class="history_header">
<el-form :model="form" class="history_select"> <el-form :model="searchForm" class="history_select">
<el-form-item label="统计指标"> <el-form-item label="统计指标">
<el-select @change="init" v-model="form.index" placeholder="请选择统计指标"> <el-select @change="init" v-model="searchForm.index" placeholder="请选择统计指标">
<el-option <el-option
v-for="item in indexOptions" v-for="item in indexOptions"
:key="item.id" :key="item.id"
@@ -94,7 +94,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="值类型"> <el-form-item label="值类型">
<el-select v-model="form.type" placeholder="请选择值类型"> <el-select @change="init" v-model="searchForm.type" placeholder="请选择值类型">
<el-option <el-option
v-for="item in typeOptions" v-for="item in typeOptions"
:key="item.id" :key="item.id"
@@ -105,7 +105,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="history_searchBtn"> <div class="history_searchBtn">
<el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button> <!-- <el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button> -->
<!-- <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport"> <!-- <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
报表导出 报表导出
</el-button> --> </el-button> -->
@@ -149,17 +149,13 @@ import MangePopup from './components/popup.vue'
import schemeTree from './components/schemeTree.vue' import schemeTree from './components/schemeTree.vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree' import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
// import { getTargetById } from '@/api/cs-device-boot/csDatalistay'
import { getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, onMounted, provide, nextTick } from 'vue' import { ref, reactive, onMounted, provide, nextTick } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData' import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import device from './components/device.vue' import device from './components/device.vue'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
const dictData = useDictData() const dictData = useDictData()
defineOptions({ defineOptions({
name: 'govern/device/manage' name: 'govern/device/manage'
@@ -173,7 +169,7 @@ const volConTypeList = dictData.getBasicData('Dev_Connect')
const pageHeight = mainHeight(20) const pageHeight = mainHeight(20)
const loading = ref(true) const loading = ref(true)
const form = ref({}) const searchForm = ref({})
// const indexOptions = [ // const indexOptions = [
// { // {
// id: '1', // id: '1',
@@ -194,41 +190,50 @@ const form = ref({})
// ] // ]
const typeOptions = [ const typeOptions = [
{ {
id: '1', name: '平均值',
name: '最大值' id: 'avg'
}, },
{ {
id: '2', name: '最大值',
name: '最小值' id: 'max'
}, },
{ {
id: '3', name: '最小值',
name: '平均值' id: 'min'
}, },
{ {
id: '4', name: 'CP95值',
name: 'CP95' id: 'cp95'
} }
] ]
form.value = { searchForm.value = {
index: '', index: '',
type: typeOptions[0].id type: typeOptions[0].id
} }
//统计指标 //统计指标
const indexOptions: any = ref([]) const indexOptions: any = ref([])
// Harmonic_Type
// portable-harmonic
const legendDictList: any = ref([])
queryByCode('portable-harmonic').then(res => { queryByCode('portable-harmonic').then(res => {
queryByid(res.data.id).then(item => { queryCsDictTree(res.data.id).then(item => {
indexOptions.value = item.data indexOptions.value = item.data
form.value.index=indexOptions.value[0].id console.log(indexOptions.value, '88888888888')
searchForm.value.index = indexOptions.value[0].id
})
queryStatistical(res.data.id).then(vv => {
console.log(vv, res.data.id)
legendDictList.value = vv.data
}) })
}) })
const activeName: any = ref() const activeName: any = ref()
const deviceData: any = ref([]) const deviceData: any = ref([])
const schemeTreeRef = ref(null) const schemeTreeRef = ref()
const chartsDataList: any = ref([]) const nodeId: any = ref('')
const nodeClick = async (e: anyObj) => { const nodeClick = async (e: anyObj) => {
loading.value = true loading.value = true
deviceData.value = [] deviceData.value = []
nodeId.value = e.id
//查询测试项信息 //查询测试项信息
try { try {
await getTestRecordInfo(e.id).then(res => { await getTestRecordInfo(e.id).then(res => {
@@ -240,21 +245,7 @@ const nodeClick = async (e: anyObj) => {
} catch (error) { } catch (error) {
loading.value = false loading.value = false
} }
try { init()
//查询历史趋势
const historyData = {
devId: e.id,
statisticalId: '11aaa206ba82c5b68b7339fe60e22945',
valueType: 'avg'
}
chartsDataList.value = []
await getHistoryTrend(historyData).then(res => {
chartsDataList.value = res.data
init()
})
} catch (error) {
loading.value = false
}
} }
const deviceRef = ref() const deviceRef = ref()
const openDevice = () => { const openDevice = () => {
@@ -267,246 +258,307 @@ const handleOpen = (val: any) => {
const echartsData = ref<any>(null) const echartsData = ref<any>(null)
//加载echarts图表 //加载echarts图表
//历史趋势数据
const historyDataList: any = ref([])
const init = () => { const init = () => {
echartsData.value = null try {
//icon图标替换legend图例 //查询历史趋势
const iconThree = historyDataList.value = []
'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z' loading.value = true
const iconDanger =
'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
let xAxis: any[] = [] getHistoryTrend({
chartsDataList.value.map(item => { devId: nodeId.value,
xAxis.push(item.time) statisticalId: searchForm.value.index,
}) valueType: searchForm.value.type
echartsData.value = { })
options: { .then(res => {
title: [ if (res.code == 'A0000') {
{ historyDataList.value = res.data
left: 'center', echartsData.value = null
text: //icon图标替换legend图例
'10KV 母线_监测点 ' + const iconThree =
indexOptions.value.find(item => { 'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
return item.id == form.value.index const iconDanger =
})?.name 'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
}
], let xAxis: any[] = []
toolbox: { historyDataList.value.map(item => {
feature: { xAxis.push(item.time)
saveAsImage: { })
title: '保存' echartsData.value = {
} options: {
} title: [
}, {
// backgroundColor: '#1B232E', left: 'center',
tooltip: { text:
trigger: 'axis', '10KV 母线_监测点 ' +
axisPointer: { indexOptions.value.find(item => {
type: 'shadow' return item.id == searchForm.value.index
} })?.name
// textStyle: { }
// color: 'rgba(255, 255, 255, 1)' ],
// }, toolbox: {
// backgroundColor: 'rgba(0, 0, 0, 0.8)', feature: {
// borderColor: 'rgba(219, 230, 255, 0.8)' saveAsImage: {
}, title: '保存'
legend: { }
//legend使用iconfont图标 }
data: [ },
{ tooltip: {
name: 'A相', trigger: 'axis',
icon: iconThree axisPointer: {
}, type: 'shadow'
{ }
name: 'B相', // textStyle: {
icon: iconThree // color: 'rgba(255, 255, 255, 1)'
}, // },
{ // backgroundColor: 'rgba(0, 0, 0, 0.8)',
name: 'C相', // borderColor: 'rgba(219, 230, 255, 0.8)'
icon: iconThree },
}, legend: {
{ //legend使用iconfont图标
name: '暂降', // data: [
icon: iconDanger // {
} // name: list[0]?.name,
], // icon: iconThree
x: 'right', // },
textStyle: { // {
// color: 'white', // name: list[1]?.name,
fontSize: 14 // icon: iconThree
}, // },
top: 0, // {
left: 50, // name: list[2]?.name,
itemWidth: 20, // icon: iconThree
itemHeight: 10, // },
itemGap: 15 // {
}, // name: list[3]?.name,
grid: { // icon: iconDanger
left: '1%', // }
right: '5%', // ],
bottom: '5%', // x: 'right',
top: '5%', // textStyle: {
containLabel: true // // color: 'white',
}, // fontSize: 14
xAxis: [ // },
{ top: 5,
type: 'category', right: 80,
name: '时间', itemWidth: 20,
axisLabel: { itemHeight: 10,
color: '#A9AEB2', itemGap: 15
fontSize: 12 },
}, grid: {
data: xAxis, left: '1%',
axisLine: { right: '5%',
lineStyle: { bottom: '5%',
color: '#43485E' top: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12
},
data: xAxis,
axisLine: {
lineStyle: {
color: '#43485E'
}
}
}
],
yAxis: [
{
type: 'value',
name: 'KV',
axisLabel: {
color: '#A9AEB2',
fontSize: 12
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
// color: 'white'
}
},
nameTextStyle: {
color: '#A9AEB2',
fontSize: '12'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
}
]
// series: [
// {
// name: list[0]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#DAA521',
// lineStyle: {
// color: '#DAA521'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_ThdA_Load') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[1]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#2E8B58',
// lineStyle: {
// color: '#2E8B58'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_ThdA_Sys') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[2]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#A5292A',
// lineStyle: {
// color: '#A5292A'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_RmsI_TolOut') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[3]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#d81e06',
// lineStyle: {
// color: '#d81e06'
// }
// }
// },
// data: []
// }
// ]
} }
} }
} //选择指标的时候切换legend内容和data数据
], let list = []
yAxis: [ //颜色数组
{ const colorList = ['#DAA521', '#2E8B58', '#A5292A', '#d81e06']
type: 'value', legendDictList.value?.selectedList?.map(item => {
name: 'KV', if (item.dataType == searchForm.value.index) {
axisLabel: { list.push(item.eleEpdPqdVOS)
color: '#A9AEB2',
fontSize: 12
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
// color: 'white'
} }
}, })
nameTextStyle: { list.map((item, index) => {
color: '#A9AEB2', echartsData.value.options.legend.data.push({
fontSize: '12' name: item.showName,
}, icon: iconThree
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: '#DAA521',
lineStyle: {
color: '#DAA521'
}
}
},
data: chartsDataList.value
.map(item => {
if (item.statisticalName === 'Apf_ThdA_Load') {
return item.statisticalData
} else {
return ''
}
}) })
.filter(item => item !== '') echartsData.value.options.series.push({
}, name: item.showName,
{ type: 'line',
name: 'B相', smooth: true,
type: 'line', emphasis: {
smooth: true, focus: 'series'
emphasis: { },
focus: 'series' itemStyle: {
}, normal: {
itemStyle: { color: colorList[index],
normal: { lineStyle: {
color: '#2E8B58', color: colorList[index]
lineStyle: { }
color: '#2E8B58' }
} },
} data: historyDataList.value
}, .map(vv => {
data: chartsDataList.value if (vv.statisticalName === item.name) {
.map(item => { return vv.statisticalData
if (item.statisticalName === 'Apf_ThdA_Sys') { } else {
return item.statisticalData return ''
} else { }
return '' })
} .filter(vv => vv !== '')
}) })
.filter(item => item !== '') })
},
{ console.log('找到了=========》', list)
name: 'C相', loading.value = false
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: '#A5292A',
lineStyle: {
color: '#A5292A'
}
}
},
data: chartsDataList.value
.map(item => {
if (item.statisticalName === 'Apf_RmsI_TolOut') {
return item.statisticalData
} else {
return ''
}
})
.filter(item => item !== '')
},
{
name: '暂降',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: '#d81e06',
lineStyle: {
color: '#d81e06'
}
}
},
data: []
} }
] })
} .catch(error => {
} loading.value = false
setTimeout(() => { })
} catch (error) {
loading.value = false loading.value = false
}, 1500) }
} }
//搜素 //搜素
const handleSearch = () => { const handleSearch = () => {
console.log(form.value, '搜索') console.log(searchForm.value, '搜索')
init()
} }
//导出 //导出
const handleExport = () => { const handleExport = () => {
console.log(form.value, '导出') console.log(searchForm.value, '导出')
} }
onMounted(() => { onMounted(() => {})
init()
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>