修改样式及历史趋势样式
This commit is contained in:
zhujiyan
@@ -2,15 +2,17 @@
|
||||
<el-dialog
|
||||
class="cn-operate-dialog device-manage-popup"
|
||||
v-model="dialogVisible"
|
||||
title="设备信息"
|
||||
:title="!addFlag ? '设备信息' : '添加设备'"
|
||||
draggable
|
||||
width="85%"
|
||||
:append-to-body="true"
|
||||
width="60%"
|
||||
>
|
||||
<el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="#626AEF"
|
||||
width="200"
|
||||
title="是否确认删除所选数据？"
|
||||
@confirm="handleDelete('')"
|
||||
@cancel="cancelDelete"
|
||||
@@ -20,7 +22,7 @@
|
||||
</template>
|
||||
</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
|
||||
:showCheckbox="true"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
@@ -32,19 +34,14 @@
|
||||
<Table ref="tableRef" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="default-main device-manage"
|
||||
v-show="!addFlag"
|
||||
:style="{ height: pageHeight.height }"
|
||||
v-loading="loading"
|
||||
>
|
||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||
<div class="device-manage" v-show="!addFlag" v-loading="loading">
|
||||
<div class="device-manage-right">
|
||||
<!-- <datePicker ref="datePickerRef"></datePicker>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button> -->
|
||||
<vxe-table
|
||||
v-bind="defaultAttribute"
|
||||
:data="tableData"
|
||||
height="auto"
|
||||
height="420"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
ref="checkedTableRef"
|
||||
@checkbox-all="selectChangeEvent"
|
||||
@@ -60,15 +57,16 @@
|
||||
<vxe-column title="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-popconfirm
|
||||
width="150"
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="#626AEF"
|
||||
title="是否确认删除当前数据？"
|
||||
title="是否确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
@cancel="cancelDelete"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small">删除</el-button>
|
||||
<el-button type="danger" text size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
@@ -127,6 +125,7 @@ const addFlag = ref(false)
|
||||
const selectId: any = ref('')
|
||||
//查绑定测试项列表
|
||||
const getSelectedTable = (id: any) => {
|
||||
//新增传0已绑定传1
|
||||
getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
tableData.value = res.data.records
|
||||
})
|
||||
@@ -134,10 +133,10 @@ const getSelectedTable = (id: any) => {
|
||||
//新增设备列表
|
||||
const tableStore = new TableStore({
|
||||
url: '/cs-device-boot/wlRecord/queryPage',
|
||||
// publicHeight: 65,
|
||||
publicHeight: 310,
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{ width: '60', type: 'checkbox', fixed: 'left' },
|
||||
{ title: '序号', type: 'seq', width: 80 },
|
||||
{ field: 'devName', title: '设备名称', minWidth: 170 },
|
||||
{ field: 'devMac', title: '设备MAC', minWidth: 170 },
|
||||
@@ -149,6 +148,7 @@ const tableStore = new TableStore({
|
||||
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.id = selectId.value
|
||||
//新增传0已绑定传1
|
||||
tableStore.table.params.isTrueFlag = 0
|
||||
tableStore.table.params.treeIds = treeIds.value
|
||||
}
|
||||
@@ -168,31 +168,45 @@ const open = (id: any) => {
|
||||
//查新增列表
|
||||
tableStore.index()
|
||||
}
|
||||
const close = () => {
|
||||
addFlag.value = false
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const tableRef = ref()
|
||||
//添加设备
|
||||
const submit = () => {
|
||||
//选择的数据
|
||||
let deviceIds = []
|
||||
//新增的时候执行的逻辑
|
||||
if (addFlag.value == true) {
|
||||
tableStore.table.selection.map(item => {
|
||||
deviceIds.push(item.id)
|
||||
})
|
||||
const addForm = {
|
||||
id: selectId.value,
|
||||
list: deviceIds
|
||||
}
|
||||
addDevice(addForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('添加成功')
|
||||
getSelectedTable(selectId.value)
|
||||
addFlag.value = false
|
||||
if (addFlag.value) {
|
||||
if (tableStore.table.selection.length != 0) {
|
||||
tableStore.table.selection.map(item => {
|
||||
deviceIds.push(item.id)
|
||||
})
|
||||
const addForm = {
|
||||
id: selectId.value,
|
||||
list: deviceIds
|
||||
}
|
||||
})
|
||||
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
|
||||
}
|
||||
}
|
||||
//删除设备
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
</el-form>
|
||||
<!-- 设备信息列表 -->
|
||||
<div v-show="activeFormIndex == 6" style="height: 400px">
|
||||
<deviceInfo ref="deviceRef" />
|
||||
<!-- <deviceInfo ref="deviceRef" /> -->
|
||||
</div>
|
||||
<template #footer="">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
@@ -191,39 +191,43 @@ const voltageLevelList = dictData.getBasicData('Dev_Voltage')
|
||||
const volConTypeList = dictData.getBasicData('Dev_Connect')
|
||||
const emit = defineEmits(['onSubmit'])
|
||||
const form = ref({})
|
||||
form.value = {
|
||||
index: '',
|
||||
type: '',
|
||||
itemName: '', //方案名称
|
||||
describe: '', //方案描述
|
||||
//测试项数据
|
||||
records: [
|
||||
{
|
||||
itemName: '', //测试项名称
|
||||
statisticalInterval: '', //测量间隔
|
||||
voltageLevel: voltageLevelList[0].id, //电压等级
|
||||
volConType: volConTypeList[0].id, //接线方式
|
||||
capacitySscmin: null, //最小短路容量
|
||||
capacitySi: null, //用户协议容量
|
||||
capacitySscb: null, //基准短路容量
|
||||
capacitySt: null, //供电设备容量
|
||||
// pt1: 1, //pt变比1
|
||||
// pt2: 1, //pt变比2
|
||||
// ct1: 300, //ct变比1
|
||||
// ct2: 5, //ct变比2
|
||||
ct: 1,
|
||||
pt: 1,
|
||||
location: '' //监测位置
|
||||
}
|
||||
]
|
||||
const initForm = () => {
|
||||
form.value = {
|
||||
itemName: '', //方案名称
|
||||
describe: '', //方案描述
|
||||
//测试项数据
|
||||
records: [
|
||||
{
|
||||
itemName: '', //测试项名称
|
||||
statisticalInterval: '', //测量间隔
|
||||
voltageLevel: voltageLevelList[0].id, //电压等级
|
||||
volConType: volConTypeList[0].id, //接线方式
|
||||
capacitySscmin: null, //最小短路容量
|
||||
capacitySi: null, //用户协议容量
|
||||
capacitySscb: null, //基准短路容量
|
||||
capacitySt: null, //供电设备容量
|
||||
// pt1: 1, //pt变比1
|
||||
// pt2: 1, //pt变比2
|
||||
// ct1: 300, //ct变比1
|
||||
// ct2: 5, //ct变比2
|
||||
ct: 1,
|
||||
pt: 1,
|
||||
location: '' //监测位置
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
initForm()
|
||||
const title: any = ref('')
|
||||
const activeFormIndex: any = ref(null)
|
||||
const planId: any = ref('')
|
||||
const deviceRef: any = ref(null)
|
||||
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 设备信息
|
||||
const open = (val: any, id: any) => {
|
||||
@@ -275,8 +279,7 @@ const open = (val: any, id: any) => {
|
||||
}
|
||||
if (val == 6) {
|
||||
//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 = () => {
|
||||
dialogVisible.value = false
|
||||
form.value = {
|
||||
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: '' //监测位置
|
||||
}
|
||||
]
|
||||
}
|
||||
initForm()
|
||||
}
|
||||
//提交
|
||||
const submit = () => {
|
||||
@@ -345,11 +323,9 @@ const submit = () => {
|
||||
describe: form.value.describe
|
||||
}
|
||||
addPlan(subForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('新增方案成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
})
|
||||
}
|
||||
//修改方案
|
||||
@@ -360,11 +336,9 @@ const submit = () => {
|
||||
describe: form.value.describe
|
||||
}
|
||||
addPlan(subForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('修改方案成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
ElMessage.success('修改方案成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
})
|
||||
}
|
||||
//新增测试项
|
||||
@@ -372,11 +346,9 @@ const submit = () => {
|
||||
const subForm = form.value
|
||||
subForm.id = planId.value
|
||||
addRecord(subForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('新增测试项成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
ElMessage.success('新增测试项成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
})
|
||||
}
|
||||
//修改测试项
|
||||
@@ -384,11 +356,9 @@ const submit = () => {
|
||||
const subForm = form.value.records[0]
|
||||
subForm.id = planId.value
|
||||
updateRecord(subForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('修改测试项成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
ElMessage.success('修改测试项成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,9 +82,9 @@
|
||||
<p>历史趋势</p>
|
||||
</div>
|
||||
<div class="history_header">
|
||||
<el-form :model="form" class="history_select">
|
||||
<el-form :model="searchForm" class="history_select">
|
||||
<el-form-item label="统计指标">
|
||||
<el-select @change="init" v-model="form.index" placeholder="请选择统计指标">
|
||||
<el-select @change="init" v-model="searchForm.index" placeholder="请选择统计指标">
|
||||
<el-option
|
||||
v-for="item in indexOptions"
|
||||
:key="item.id"
|
||||
@@ -94,7 +94,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值类型">
|
||||
<el-select v-model="form.type" placeholder="请选择值类型">
|
||||
<el-select @change="init" v-model="searchForm.type" placeholder="请选择值类型">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.id"
|
||||
@@ -105,7 +105,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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> -->
|
||||
@@ -149,17 +149,13 @@ import MangePopup from './components/popup.vue'
|
||||
import schemeTree from './components/schemeTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
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 { ElMessage } from 'element-plus'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
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 { useDictData } from '@/stores/dictData'
|
||||
import device from './components/device.vue'
|
||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'govern/device/manage'
|
||||
@@ -173,7 +169,7 @@ const volConTypeList = dictData.getBasicData('Dev_Connect')
|
||||
|
||||
const pageHeight = mainHeight(20)
|
||||
const loading = ref(true)
|
||||
const form = ref({})
|
||||
const searchForm = ref({})
|
||||
// const indexOptions = [
|
||||
// {
|
||||
// id: '1',
|
||||
@@ -194,41 +190,50 @@ const form = ref({})
|
||||
// ]
|
||||
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: '',
|
||||
type: typeOptions[0].id
|
||||
}
|
||||
//统计指标
|
||||
const indexOptions: any = ref([])
|
||||
// Harmonic_Type
|
||||
// portable-harmonic
|
||||
const legendDictList: any = ref([])
|
||||
queryByCode('portable-harmonic').then(res => {
|
||||
queryByid(res.data.id).then(item => {
|
||||
queryCsDictTree(res.data.id).then(item => {
|
||||
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 deviceData: any = ref([])
|
||||
const schemeTreeRef = ref(null)
|
||||
const chartsDataList: any = ref([])
|
||||
const schemeTreeRef = ref()
|
||||
const nodeId: any = ref('')
|
||||
const nodeClick = async (e: anyObj) => {
|
||||
loading.value = true
|
||||
deviceData.value = []
|
||||
nodeId.value = e.id
|
||||
//查询测试项信息
|
||||
try {
|
||||
await getTestRecordInfo(e.id).then(res => {
|
||||
@@ -240,21 +245,7 @@ const nodeClick = async (e: anyObj) => {
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
try {
|
||||
//查询历史趋势
|
||||
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
|
||||
}
|
||||
init()
|
||||
}
|
||||
const deviceRef = ref()
|
||||
const openDevice = () => {
|
||||
@@ -267,246 +258,307 @@ const handleOpen = (val: any) => {
|
||||
|
||||
const echartsData = ref<any>(null)
|
||||
//加载echarts图表
|
||||
//历史趋势数据
|
||||
const historyDataList: any = ref([])
|
||||
const init = () => {
|
||||
echartsData.value = null
|
||||
//icon图标替换legend图例
|
||||
const iconThree =
|
||||
'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'
|
||||
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'
|
||||
try {
|
||||
//查询历史趋势
|
||||
historyDataList.value = []
|
||||
loading.value = true
|
||||
|
||||
let xAxis: any[] = []
|
||||
chartsDataList.value.map(item => {
|
||||
xAxis.push(item.time)
|
||||
})
|
||||
echartsData.value = {
|
||||
options: {
|
||||
title: [
|
||||
{
|
||||
left: 'center',
|
||||
text:
|
||||
'10KV 母线_监测点 ' +
|
||||
indexOptions.value.find(item => {
|
||||
return item.id == form.value.index
|
||||
})?.name
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '保存'
|
||||
}
|
||||
}
|
||||
},
|
||||
// backgroundColor: '#1B232E',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
// textStyle: {
|
||||
// color: 'rgba(255, 255, 255, 1)'
|
||||
// },
|
||||
// backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
// borderColor: 'rgba(219, 230, 255, 0.8)'
|
||||
},
|
||||
legend: {
|
||||
//legend使用iconfont图标
|
||||
data: [
|
||||
{
|
||||
name: 'A相',
|
||||
icon: iconThree
|
||||
},
|
||||
{
|
||||
name: 'B相',
|
||||
icon: iconThree
|
||||
},
|
||||
{
|
||||
name: 'C相',
|
||||
icon: iconThree
|
||||
},
|
||||
{
|
||||
name: '暂降',
|
||||
icon: iconDanger
|
||||
}
|
||||
],
|
||||
x: 'right',
|
||||
textStyle: {
|
||||
// color: 'white',
|
||||
fontSize: 14
|
||||
},
|
||||
top: 0,
|
||||
left: 50,
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
itemGap: 15
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
top: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '时间',
|
||||
axisLabel: {
|
||||
color: '#A9AEB2',
|
||||
fontSize: 12
|
||||
},
|
||||
data: xAxis,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#43485E'
|
||||
getHistoryTrend({
|
||||
devId: nodeId.value,
|
||||
statisticalId: searchForm.value.index,
|
||||
valueType: searchForm.value.type
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
historyDataList.value = res.data
|
||||
echartsData.value = null
|
||||
//icon图标替换legend图例
|
||||
const iconThree =
|
||||
'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'
|
||||
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[] = []
|
||||
historyDataList.value.map(item => {
|
||||
xAxis.push(item.time)
|
||||
})
|
||||
echartsData.value = {
|
||||
options: {
|
||||
title: [
|
||||
{
|
||||
left: 'center',
|
||||
text:
|
||||
'10KV 母线_监测点 ' +
|
||||
indexOptions.value.find(item => {
|
||||
return item.id == searchForm.value.index
|
||||
})?.name
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '保存'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
// textStyle: {
|
||||
// color: 'rgba(255, 255, 255, 1)'
|
||||
// },
|
||||
// backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
// borderColor: 'rgba(219, 230, 255, 0.8)'
|
||||
},
|
||||
legend: {
|
||||
//legend使用iconfont图标
|
||||
// data: [
|
||||
// {
|
||||
// name: list[0]?.name,
|
||||
// icon: iconThree
|
||||
// },
|
||||
// {
|
||||
// name: list[1]?.name,
|
||||
// icon: iconThree
|
||||
// },
|
||||
// {
|
||||
// name: list[2]?.name,
|
||||
// icon: iconThree
|
||||
// },
|
||||
// {
|
||||
// name: list[3]?.name,
|
||||
// icon: iconDanger
|
||||
// }
|
||||
// ],
|
||||
// x: 'right',
|
||||
// textStyle: {
|
||||
// // color: 'white',
|
||||
// fontSize: 14
|
||||
// },
|
||||
top: 5,
|
||||
right: 80,
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
itemGap: 15
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
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: []
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'KV',
|
||||
axisLabel: {
|
||||
color: '#A9AEB2',
|
||||
fontSize: 12
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// color: 'white'
|
||||
//选择指标的时候切换legend内容和data数据
|
||||
let list = []
|
||||
//颜色数组
|
||||
const colorList = ['#DAA521', '#2E8B58', '#A5292A', '#d81e06']
|
||||
legendDictList.value?.selectedList?.map(item => {
|
||||
if (item.dataType == searchForm.value.index) {
|
||||
list.push(item.eleEpdPqdVOS)
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#A9AEB2',
|
||||
fontSize: '12'
|
||||
},
|
||||
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 ''
|
||||
}
|
||||
})
|
||||
list.map((item, index) => {
|
||||
echartsData.value.options.legend.data.push({
|
||||
name: item.showName,
|
||||
icon: iconThree
|
||||
})
|
||||
.filter(item => item !== '')
|
||||
},
|
||||
{
|
||||
name: 'B相',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2E8B58',
|
||||
lineStyle: {
|
||||
color: '#2E8B58'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: chartsDataList.value
|
||||
.map(item => {
|
||||
if (item.statisticalName === 'Apf_ThdA_Sys') {
|
||||
return item.statisticalData
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
echartsData.value.options.series.push({
|
||||
name: item.showName,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colorList[index],
|
||||
lineStyle: {
|
||||
color: colorList[index]
|
||||
}
|
||||
}
|
||||
},
|
||||
data: historyDataList.value
|
||||
.map(vv => {
|
||||
if (vv.statisticalName === item.name) {
|
||||
return vv.statisticalData
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
.filter(vv => vv !== '')
|
||||
})
|
||||
.filter(item => item !== '')
|
||||
},
|
||||
{
|
||||
name: 'C相',
|
||||
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: []
|
||||
})
|
||||
|
||||
console.log('找到了=========》', list)
|
||||
loading.value = false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
})
|
||||
.catch(error => {
|
||||
loading.value = false
|
||||
})
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
//搜素
|
||||
const handleSearch = () => {
|
||||
console.log(form.value, '搜索')
|
||||
console.log(searchForm.value, '搜索')
|
||||
init()
|
||||
}
|
||||
//导出
|
||||
const handleExport = () => {
|
||||
console.log(form.value, '导出')
|
||||
console.log(searchForm.value, '导出')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user