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-09-25 16:31:45 +08:00
parent 470c8f5bd6
commit 96602ffe04
15 changed files with 467 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/table/header/index.vue
View File

@@ -91,12 +91,12 @@ const headerFormSecondStyleClose = {
padding: '0'
}
onMounted(() => {
if (props.datePicker) {
tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
if (props.datePicker && tableStore) {
tableStore.table.params.searchBeginTime = datePickerRef.value?.timeValue[0]
tableStore.table.params.searchEndTime = datePickerRef.value?.timeValue[1]
tableStore.table.params.startTime = datePickerRef.value?.timeValue[0]
tableStore.table.params.endTime = datePickerRef.value?.timeValue[1]
tableStore.table.params.timeFlag = datePickerRef.value?.timeFlag
}
if (props.area) {
tableStore.table.params.deptIndex = dictData.state.area[0].id
@@ -111,9 +111,11 @@ onUnmounted(() => {
})
const handlerHeight = () => {
tableStore.table.height = mainHeight(
tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
).height as string
if (tableStore && tableStore.table) {
tableStore.table.height = mainHeight(
tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
).height as string
}
}
const computedSearchRow = () => {
if (!headerForm.value.$el) return
@@ -169,7 +171,7 @@ const setInterval = (val: any) => {
datePickerRef.value.setInterval(val)
}
defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef, showSelectChange})
defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef, showSelectChange })
</script>
<style scoped lang="scss">

46
src/components/tree/device.vue
View File

@@ -15,11 +15,14 @@
/>
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10">
<el-input v-model="filterText" placeholder="请输入内容" clearable>
<!-- <el-form-item> -->
<el-input v-model="filterText"
autocomplete="off" placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<!-- </el-form-item> -->
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
@@ -30,11 +33,10 @@
v-if="props.canExpand"
/>
</div>
<el-collapse accordion v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
<el-collapse-item title="治理设备" :name="0">
<el-collapse :accordion="true" v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-tree
style="height: calc(100vh - 350px); overflow: auto"
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
ref="treeRef1"
:props="defaultProps"
highlight-current
@@ -57,9 +59,9 @@
</template>
</el-tree>
</el-collapse-item>
<el-collapse-item title="便携式设备" :name="1">
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree
style="height: calc(100vh - 290px); overflow: auto"
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
ref="treeRef2"
:props="defaultProps"
highlight-current
@@ -90,12 +92,12 @@
<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { ref, watch } from 'vue'
import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
defineOptions({
name: 'govern/tree'
})
const emit = defineEmits(['changeDeviceType'])
interface Props {
width?: string
canExpand?: boolean
@@ -111,7 +113,7 @@ const props = withDefaults(defineProps<Props>(), {
})
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const activeName = ref(0)
const activeName = ref('0')
const filterText = ref('')
const defaultProps = {
label: 'name',
@@ -136,6 +138,13 @@ watch(
})
}
})
if (zlDeviceData.value.length != 0) {
activeName.value = '0'
} else if (bxsDeviceData.value.length != 0) {
activeName.value = '1'
} else {
activeName.value = ''
}
}
},
{
@@ -145,7 +154,7 @@ watch(
)
watch(filterText, val => {
if (activeName.value == 0) {
if (activeName.value == '0') {
treeRef1.value!.filter(val)
} else {
treeRef2.value!.filter(val)
@@ -175,16 +184,18 @@ const changeDevice = (val: any) => {
arr2.push(item)
// })
})
if (val == 0) {
arr2.map(item => {
if (val == '0') {
arr2.map((item: any) => {
item.checked = false
})
treeRef1.value.setCurrentKey(arr1[0].id)
treeRef1.value && treeRef1.value.setCurrentKey(arr1[0].id)
emit('changeDeviceType', activeName.value, arr1[0])
} else {
arr1.map(item => {
arr1.map((item: any) => {
item.checked = false
})
treeRef2.value.setCurrentKey(arr2[0].id)
treeRef2.value && treeRef2.value.setCurrentKey(arr2[0].id)
emit('changeDeviceType', activeName.value, arr2[0])
}
}
//治理
@@ -192,6 +203,9 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
//便携式
const treeRef2 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 })
onMounted(() => {
changeDevice(activeName.value)
})
</script>
<style lang="scss" scoped>

11
src/components/tree/govern/deviceTree.vue
View File

@@ -5,11 +5,12 @@
:default-checked-keys="defaultCheckedKeys"
:show-checkbox="props.showCheckbox"
:data="tree"
@changeDeviceType="changeDeviceType"
/>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import { ref, nextTick, defineEmits } from 'vue'
import Tree from '../device.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
@@ -26,13 +27,14 @@ const props = withDefaults(
defaultCheckedKeys: []
}
)
const emit = defineEmits(['init', 'checkChange'])
const emit = defineEmits(['init', 'checkChange','deviceTypeChange'])
const config = useConfig()
const tree = ref()
const treRef = ref()
const changeDeviceType = (val: any, obj: any) => {
emit('deviceTypeChange', val, obj)
}
getDeviceTree().then(res => {
console.log(res, '000000')
let arr: any[] = []
//治理设备
res.data.map((item: any) => {
@@ -77,7 +79,6 @@ getDeviceTree().then(res => {
tree.value = res.data
nextTick(() => {
if (arr.length) {
console.log(treRef.value.treeRef1, '99999999')
treRef.value.treeRef1.setCurrentKey(arr[0].id)
// 注册父组件事件
emit('init', {

26
src/components/tree/point.vue
View File

@@ -31,10 +31,10 @@
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
/>
</div>
<el-collapse accordion v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
<el-collapse-item title="治理设备" name="0">
<el-collapse :accordion="true" v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-tree
style="height: calc(100vh - 350px); overflow: auto"
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
ref="treeRef1"
:props="defaultProps"
highlight-current
@@ -57,9 +57,9 @@
</template>
</el-tree>
</el-collapse-item>
<el-collapse-item title="便携式设备" name="1">
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree
style="height: calc(100vh - 270px); overflow: auto"
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
ref="treeRef2"
:props="defaultProps"
highlight-current
@@ -90,7 +90,7 @@
<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { ref, watch, defineEmits } from 'vue'
import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
defineOptions({
name: 'govern/tree'
@@ -138,6 +138,13 @@ watch(
})
}
})
if (zlDeviceData.value.length != 0) {
activeName.value = '0'
} else if (bxsDeviceData.value.length != 0) {
activeName.value = '1'
} else {
activeName.value = ''
}
}
},
{
@@ -174,13 +181,13 @@ const changeDevice = (val: any) => {
arr2.map((item: any) => {
item.checked = false
})
treeRef1?.value.setCurrentKey(arr1[0]?.id)
treeRef1?.value && treeRef1.value.setCurrentKey(arr1[0]?.id)
emit('changePointType', activeName.value, arr1[0])
} else {
arr1.map((item: any) => {
item.checked = false
})
treeRef2?.value.setCurrentKey(arr2[0]?.id)
treeRef2?.value && treeRef2.value.setCurrentKey(arr2[0]?.id)
emit('changePointType', activeName.value, arr2[0])
}
// if(activeName.value){
@@ -200,6 +207,9 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
//便携式
const treeRef2 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 })
onMounted(() => {
changeDevice(activeName.value)
})
</script>
<style lang="scss" scoped>

1
src/styles/element.scss
View File

@@ -213,7 +213,6 @@
.el-drawer__header {
margin-bottom: 0 !important;
}
//tabs 添加icon样式
.custom-tabs-label{
display: flex;

46
src/views/govern/device/control/index.vue
View File

@@ -9,18 +9,12 @@
<div class="device-control-right" v-if="deviceData">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
<template #extra>
<!-- <el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleDownLoadTemplate">
<!-- <el-button v-if="deviceType == '1'" type="primary" @click="handleDownLoadTemplate">
模版下载
</el-button> -->
<el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleImport">
离线数据导入
</el-button>
<el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleaddDevice">
设备补招
</el-button>
<el-button v-if="deviceType == '1'" size="small" type="primary" @click="handleAnalysisList">
解析列表
</el-button>
<el-button v-if="deviceType == '1'" type="primary" @click="handleImport">离线数据导入</el-button>
<el-button v-if="deviceType == '1'" type="primary" @click="handleaddDevice">设备补招</el-button>
<el-button v-if="deviceType == '1'" type="primary" @click="handleAnalysisList">解析列表</el-button>
</template>
<el-descriptions-item label="名称">
{{ deviceData.name ? deviceData.name : '/' }}
@@ -94,7 +88,7 @@
>
<el-form-item label="指标">
<el-input
style="width: 240px"
style="width: 160px"
v-model="formInline.searchValue"
autocomplete="off"
clearable
@@ -232,24 +226,24 @@
></el-pagination>
<!-- 趋势数据 -->
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_trenddata') != -1" v-loading="tableLoading">
<div style="height:calc(100vh - 340px)" v-if="dataSet.indexOf('_trenddata') != -1" v-loading="tableLoading">
<Trend ref="trendRef"></Trend>
</div>
<!-- 实时数据 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1" v-loading="tableLoading">
<div
style="height: calc(100vh - 340px)"
v-if="dataSet.indexOf('_realtimedata') != -1"
v-loading="tableLoading"
>
<div class="view_top_btn" v-if="realTimeFlag">
<!-- <el-button type="primary" size="small" :icon="Platform" @click="handleRecordWaves">
<!-- <el-button type="primary" :icon="Platform" @click="handleRecordWaves">
实时录波
</el-button> -->
<el-button type="primary" size="small" :icon="TrendCharts" @click="handleTrend">
实时趋势
</el-button>
<el-button type="primary" size="small" :icon="DataLine" @click="handleHarmonicSpectrum">
谐波频谱
</el-button>
<el-button type="primary" :icon="TrendCharts" @click="handleTrend">实时趋势</el-button>
<el-button type="primary" :icon="DataLine" @click="handleHarmonicSpectrum">谐波频谱</el-button>
</div>
<div class="view_top_btn" v-if="!realTimeFlag">
<el-button type="primary" :icon="ArrowLeft" size="small" @click="handleReturn">返回</el-button>
<el-button type="primary" :icon="ArrowLeft" @click="handleReturn">返回</el-button>
</div>
<!-- 实时数据主界面组件 -->
<realTime v-if="realTimeFlag" ref="realTimeRef"></realTime>
@@ -264,7 +258,7 @@
></harmonicSpectrum>
</div>
<!-- 暂态事件 -->
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1" v-loading="tableLoading">
<div style="height:calc(100vh - 340px)" v-if="dataSet.indexOf('_event') != -1" v-loading="tableLoading">
<Event ref="eventRef"></Event>
</div>
<div v-if="!tableData" style="height: 42px"></div>
@@ -334,7 +328,7 @@ const formInline = reactive({
endTime: '',
id: '',
lineId: '',
dataLevel: ''
dataLevel: 'dataLevel'
})
const detail = ref<any>(null)
//是否显示实时数据默认内容
@@ -480,6 +474,7 @@ const timer: any = ref()
//tab点击事件
const handleClick = async (tab?: any) => {
tableLoading.value = true
formInline.dataLevel = 'Secondary'
// loading.value = true
//点击tab时更新dataSet最新值
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
@@ -498,7 +493,6 @@ const handleClick = async (tab?: any) => {
window.clearInterval(timer.value)
}
// setTimeout(async () => {
//查询历史指标
if (dataSet.value.includes('_history')) {
formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
@@ -531,8 +525,8 @@ const handleClick = async (tab?: any) => {
}
]
}
trendRef.value && trendRef.value.getTrendRequest(obj)
setTimeout(() => {
trendRef.value && trendRef.value.getTrendRequest(obj)
tableLoading.value = false
}, 1500)
}
@@ -587,8 +581,6 @@ const handleClick = async (tab?: any) => {
}, 1500)
})
}
// }, 100)
}
//模版下载
const handleDownLoadTemplate = () => {}

80
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -1,6 +1,7 @@
<!-- 实时数据 - 实时趋势 -->
<template>
<div class="realtrend">
qwww
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div v-loading="loading">
@@ -29,48 +30,6 @@
</div>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="谐波电压含有率" name="0">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
谐波电压含有率
</span>
</template>
<div class="tab_info">
<vxe-grid v-if="activeName == '0'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
<div class="charts">
<MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="间谐波电压含有率" name="1">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
间谐波电压含有率
</span>
</template>
<div class="tab_info">
<vxe-grid v-if="activeName == '1'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
<div class="charts">
<MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="谐波电流幅值" name="2">
<template #label>
<span class="custom-tabs-label">
<el-icon><DataLine /></el-icon>
谐波电流幅值
</span>
</template>
<div class="tab_info">
<vxe-grid v-if="activeName == '2'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
<div class="charts">
<MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
</div>
</div>
</el-tab-pane> -->
</el-tabs>
</div>
</template>
@@ -107,19 +66,6 @@ const myColumns: any = ref([
])
const yAxisUnit: any = ref('')
// myColumns.value.map(item => {
// if (item.field == 'value') {
// item.title =
// activeName.value == '0'
// ? '谐波电压含有率(%)'
// : activeName.value == '1'
// ? '间谐波电压含有率(%)'
// : activeName.value == '2'
// ? '谐波电流幅值(A)'
// : ''
// yAxisUnit.value = item.title.split('(')[0]
// }
// })
const myData = tableList
const tabsList = ref([])
@@ -239,13 +185,7 @@ const reverseTable = () => {
reverseTable()
const echartsData: any = ref([]),
echartsData1: any = ref([]),
echartsData2: any = ref([]),
echartsData3: any = ref([]),
barCharts = ref(),
barCharts1 = ref(),
barCharts2 = ref(),
barCharts3 = ref()
barCharts = ref()
//加载echarts
const init = () => {
@@ -330,7 +270,7 @@ const init = () => {
yAxis: [
{
type: 'value',
name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit+ ')' : '' ,
name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit + ')' : '',
splitLine: {
show: false
},
@@ -359,7 +299,7 @@ const init = () => {
list.push({ phase: item.phase, title: item.title, list: item.phaseList })
}
})
const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000', ]
const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000']
list.map((item: any, index: any) => {
echartsData.value.options.legend.data.push(item.title)
echartsData.value.options.series.push({
@@ -383,16 +323,11 @@ const init = () => {
}
const handleClick = (tab: any, event: any) => {
// activeName.value = tabsList.value[tab.index].id
// activeName.value = tab.index
params.value.groupId = tabsList.value[tab.index].id
findRealTrendDataByGroupId(params.value)
// reverseTable()
init()
}
onMounted(() => {
// init()
})
onMounted(() => {})
defineExpose({ open })
</script>
<style lang="scss" scoped>
@@ -494,8 +429,5 @@ defineExpose({ open })
height: calc(100vh - 550px);
}
}
.custom-tabs-label {
display: flex;
align-items: center;
}
</style>

5
src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
View File

@@ -561,10 +561,7 @@ defineExpose({ getWpData })
height: calc(100vh - 450px);
}
}
.custom-tabs-label {
display: flex;
align-items: center;
}
.waveFormAnalysis {
width: 100%;
height: 100%;

19
src/views/govern/device/control/tabs/event.vue
View File

@@ -1,13 +1,16 @@
<template>
<div class="header_btn">
<div class="header_btn" style="display: none">
<!-- <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">
波形解析
</el-button> -->
<el-button type="primary" size="small" @click="handleBack" v-if="isWaveCharts" :icon="ArrowLeft">
返回
</el-button>
</div>
<div class="view">
<div class="view" >
<TableHeader datePicker ref="headerRef">
<template #operation>
<el-button v-if="isWaveCharts" type="primary" @click="handleBack" :icon="ArrowLeft">返回</el-button>
</template>
</TableHeader>
<Table ref="tableRef" v-if="!isWaveCharts" />
<waveFormAnalysis v-if="isWaveCharts" ref="waveFormAnalysisRef" :wp="wp" />
</div>
@@ -17,6 +20,7 @@ import { ref, onMounted, provide, nextTick } from 'vue'
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import waveFormAnalysis from './components/waveFormAnalysis.vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { analyseWave } from '@/api/common'
@@ -26,10 +30,11 @@ const view = ref(true)
const view2 = ref(false)
const showBoxi = ref(true)
const bxactiveName = ref('ssbx')
const boxoList:any = ref([])
const boxoList: any = ref([])
const wp = ref({})
const value = ref(1)
const waveFormAnalysisRef = ref()
const headerRef = ref()
const tableStore: any = new TableStore({
url: '/cs-device-boot/csGroup/deviceDataByType',
publicHeight: 210,
@@ -111,6 +116,8 @@ const tableStore: any = new TableStore({
tableStore.table.params.lineId = tableParams.value.lineId
tableStore.table.params.list = tableParams.value.list
tableStore.table.params.type = 3
// tableStore.table.params.searchBeginTime = headerRef.value ? headerRef.value.timeValue[0] : ''
// tableStore.table.params.searchEndTime = headerRef.value ? headerRef.value.timeValue[1] : ''
},
loadCallback: () => {}
})

3
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -466,6 +466,7 @@ const iRadioList: any = ref([]),
const getRealTimeData = async (val: any) => {
iRadioList.value = []
vRadioList.value = []
console.log(val, '999999999')
val.map((item: any) => {
//基波电流相角
if (item.statisticalName == 'Pq_FundIAng') {
@@ -490,7 +491,7 @@ const getRealTimeData = async (val: any) => {
listA.value.push(item)
}
})
console.log(listA.value, listV.value, '++++++++++++494')
echartsDataV1.value.options.series[0].data = [
{
name: 'A相',

73
src/views/govern/device/control/tabs/trend.vue
View File

@@ -2,6 +2,9 @@
<div>
<div class="history_header">
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item>
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select
multiple
@@ -36,19 +39,9 @@
</el-select>
</el-form-item>
</div>
<el-form-item label="值类型" label-width="80px">
<el-select v-model="searchForm.type" placeholder="请选择值类型">
<el-option
v-for="item in typeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="history_searchBtn">
<el-button type="primary" size="small" icon="el-icon-Search" @click="init()">查询</el-button>
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</div>
</div>
<div class="history_chart" v-loading="loading">
@@ -71,15 +64,20 @@ import * as echarts from 'echarts'
import { isNonNullChain } from 'typescript'
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
import { read, writeFile, utils } from 'xlsx'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import DatePicker from '@/components/form/datePicker/index.vue'
const dictData = useDictData()
defineOptions({
name: 'govern/device/manage'
name: 'govern/device/control'
})
//电压等级
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
//接线方式
const volConTypeList = dictData.getBasicData('Dev_Connect')
//值类型
const pageHeight = mainHeight(20)
const loading = ref(true)
@@ -105,7 +103,9 @@ const typeOptions = [
searchForm.value = {
index: [],
type: typeOptions[0].id,
count: []
count: [],
searchBeginTime: '',
searchEndTime: ''
}
//统计指标
const indexOptions: any = ref([])
@@ -137,12 +137,13 @@ const range = (start: any, end: any, step: any) => {
}
//获取请求趋势数据参数
const trendRequestData = ref()
const getTrendRequest = async (val: any) => {
console.log(val, '拿到的请求参数')
const getTrendRequest = (val: any) => {
trendRequestData.value = val
init()
}
//初始化趋势图
const headerRef = ref()
const datePickerRef = ref()
const init = async () => {
loading.value = true
// 选择指标的时候切换legend内容和data数据
@@ -193,14 +194,15 @@ const init = async () => {
let obj = {
...trendRequestData.value,
list: lists,
valueType: searchForm.value.type
valueType: searchForm.value.type,
searchBeginTime: datePickerRef.value && datePickerRef.value.timeValue[0],
searchEndTime: datePickerRef.value && datePickerRef.value.timeValue[0]
}
if (obj.devId && obj.list.length != 0) {
try {
await getTabsDataByType(obj)
.then(res => {
console.log(res, '打印趋势图')
.then((res: any) => {
if (res.code == 'A0000') {
historyDataList.value = res.data
echartsData.value = null
@@ -220,17 +222,7 @@ const init = async () => {
}
})
xAxis = timeList.sort((a: any, b: any) => {
return (
a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
0 -
(b
.replace('-', '')
.replace('-', '')
.replace(' ', '')
.replace(':', '')
.replace(':', '') -
0)
)
return new Date(a).getTime() - new Date(b).getTime()
})
echartsData.value = {
options: {
@@ -279,7 +271,7 @@ const init = async () => {
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
right: '13%', // 位置调整
right: '3%', // 位置调整
top: 0,
bottom: 20,
width: 400,
@@ -287,9 +279,9 @@ const init = async () => {
},
grid: {
left: '3%',
right: '4%',
right: '5%',
bottom: '5%',
top: '5%',
top: '8%',
containLabel: true
},
xAxis: [
@@ -384,7 +376,6 @@ const init = async () => {
type: 'solid'
}
}
// yAxisIndex: index + 1
})
}
})
@@ -663,15 +654,15 @@ defineExpose({ getTrendRequest })
display: flex;
// flex-wrap: wrap;
#history_select {
width: 95%;
width: 100%;
display: flex;
justify-content: flex-start;
overflow-x: auto;
height: 45px;
// flex-wrap: wrap;
// justify-content: flex-start;
// overflow-x: auto;
height: auto;
flex-wrap: wrap;
.el-form-item {
flex: none;
max-width: 380px !important;
flex: none !important;
// max-width: 380px;
}
.el-select {
margin-right: 10px;
@@ -693,7 +684,7 @@ defineExpose({ getTrendRequest })
.history_chart {
width: 100%;
height: calc(100vh - 400px) !important;
height: calc(100vh - 450px) !important;
// flex: 1;
margin-top: 10px;
}

11
src/views/govern/device/manage/index.vue
View File

@@ -1,7 +1,7 @@
<!-- 设备管理 -->
<template>
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
<DeviceTree @node-click="nodeClick" @init="nodeClick" @deviceTypeChange="deviceTypeChange"></DeviceTree>
<div class="device-manage-right" v-if="deviceData">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
<template #extra>
@@ -95,13 +95,20 @@ const tableData = ref([])
const tableHeight = mainHeight(260).height
const mangePopup = ref()
const activeName = ref(0)
//治理设备和便携式设备切换判断
const deviceType = ref('0')
const deviceTypeChange=(val: any, obj: any)=>{
deviceType.value = val
nodeClick(obj)
}
// 树节点点击
const nodeClick = (e: anyObj) => {
if (!e) {
loading.value = false
return
}
console.log(e.level);
console.log(deviceType.value,"++++++++++11111");
// console.log(e.level,e.id);
if (e.level == 2) {
loading.value = true
getDeviceData(e.id, 'rt','').then((res: any) => {

39
src/views/govern/device/planData/components/popup.vue
View File

@@ -3,7 +3,7 @@
v-model="dialogVisible"
:title="title"
draggable
:style="{ width: activeFormIndex == 0 || activeFormIndex == 1 ? '500px' : '1100px' }"
:style="{ width: popupType == 0 || popupType == 1 ? '500px' : '1100px' }"
>
<!-- 新增方案数据 -->
<el-form
@@ -12,7 +12,7 @@
label-width="140px"
:rules="rules1"
ref="ruleFormRef1"
v-if="activeFormIndex == 0 || activeFormIndex == 1"
v-if="popupType == 0 || popupType == 1"
>
<el-form-item label="方案名称：" prop="itemName">
<el-input v-model="form.itemName" placeholder="请输入方案名称" />
@@ -22,7 +22,8 @@
</el-form-item>
</el-form>
<!-- 测试项信息&数据绑定页面 -->
<el-tabs type="border-card" v-model="activeName" v-if="activeFormIndex != 0 && activeFormIndex != 1">
{{ popupType }}
<el-tabs type="border-card" v-model="activeName" v-if="popupType != 0 && popupType != 1">
<el-tab-pane label="测试项信息" :name="0">
<el-form
:model="form1"
@@ -386,24 +387,24 @@ const rules2 = ref({
//弹框标题
const title: any = ref('')
//判断页面显示条件
const activeFormIndex: any = ref(null)
const popupType: any = ref(null)
//方案/测试项id
const planId: any = ref('')
//回显方案、测试项操作
const details = (val: any) => {
//修改方案回显
if (activeFormIndex.value == 1) {
if (popupType.value == 1) {
form.value = JSON.parse(JSON.stringify(val))
}
//修改测试项回显
if (activeFormIndex.value == 3) {
if (popupType.value == 3) {
if (val.records[0] && val.records.length != 0) {
form1.value = JSON.parse(JSON.stringify(val.records[0]))
} else {
initForm()
}
}
if (activeFormIndex.value != 1 && activeFormIndex.value != 3) {
if (popupType.value != 1 && popupType.value != 3) {
initForm()
}
}
@@ -413,10 +414,11 @@ const unBindList = ref([])
const bindList = ref([])
//0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 设备信息
const open = async (val: any, id: any) => {
activeFormIndex.value = val
popupType.value = val
title.value = val == 0 ? '新增方案' : val == 1 ? '修改方案' : val == 2 ? '新增测试项' : '修改测试项'
dialogVisible.value = true
planId.value = id
console.log(11111, val, '==============>>>>>>>>')
//新增方案或者测试项数据
if (val == 0 || val == 2) {
initForm()
@@ -429,12 +431,10 @@ const open = async (val: any, id: any) => {
//0未绑定数据 1 已绑定数据
//获取未绑定树形数据
getDeviceList({ id: id, isTrueFlag: 0 }).then(res => {
// deviceInfoTreeRef1.value.getTreeList(res.data)
unBindList.value = res.data
})
//获取已绑定树形数据
getDeviceList({ id: id, isTrueFlag: 1 }).then(res => {
// deviceInfoTreeRef2.value.getTreeList(res.data)
bindList.value = res.data
})
activeName.value = 0
@@ -476,7 +476,7 @@ const close = () => {
}
//取消表单校验状态
if (activeFormIndex.value == 0 || activeFormIndex.value == 1) {
if (popupType.value == 0 || popupType.value == 1) {
ruleFormRef1.value && ruleFormRef1.value.resetFields()
} else {
ruleFormRef2.value && ruleFormRef2.value?.resetFields()
@@ -490,7 +490,7 @@ const close = () => {
//提交
const submit = () => {
//新增方案
if (activeFormIndex.value == 0) {
if (popupType.value == 0) {
ruleFormRef1.value.validate(valid => {
if (valid) {
const subForm = {
@@ -512,7 +512,7 @@ const submit = () => {
})
}
//修改方案
if (activeFormIndex.value == 1) {
if (popupType.value == 1) {
ruleFormRef1.value.validate((valid: boolean) => {
if (valid) {
const subForm = {
@@ -529,7 +529,7 @@ const submit = () => {
})
}
//新增测试项
if (activeFormIndex.value == 2) {
if (popupType.value == 2) {
ruleFormRef2.value.validate((valid: boolean) => {
if (valid) {
let subForm = {
@@ -550,19 +550,12 @@ const submit = () => {
})
}
//修改测试项
if (activeFormIndex.value == 3) {
if (popupType.value == 3) {
ruleFormRef2.value.validate((valid: any) => {
if (valid) {
// const subForm = {
// id: planId.value,
// ...form1.value
// }
let subForm = JSON.parse(JSON.stringify(form1.value))
// subForm.list = tableData.value.map(item => {
// return item.id
// })
subForm.list = checkedIdList.value
updateRecord(subForm).then((res:any) => {
updateRecord(subForm).then((res: any) => {
if (res.code == 'A0000') {
ElMessage.success('修改测试项成功')
initForm()

17
src/views/govern/device/planData/components/schemeTree.vue
View File

@@ -27,7 +27,6 @@
size="18"
class="fold ml10 menu-collapse"
style="cursor: pointer"
v-if="true"
/>
</div>
<el-tree
@@ -42,7 +41,6 @@
ref="treRef"
@node-click="clickNode"
:expand-on-click-node="false"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
@@ -211,7 +209,7 @@ const del = (node: Node, data: any) => {
type: 'warning'
})
.then(() => {
delRecord({ id: data.id }).then(res => {
delRecord({ id: data.id }).then((res: any) => {
if (res.code == 'A0000') {
ElMessage.success('删除成功')
getTreeList()
@@ -231,6 +229,9 @@ const clickNode = (e: anyObj) => {
e.children ? (planId.value = e.id) : (planId.value = e.pid)
emit('nodeChange', e)
}
const setCheckedNode = (e: anyObj) => {
treRef.value.setCurrentKey(e)
}
watch(
() => planData.value,
(val, oldVal) => {
@@ -249,7 +250,7 @@ watch(
deep: true
}
)
defineExpose({ treeRef, getPlanData, getTreeList })
defineExpose({ treeRef, getPlanData, getTreeList, setCheckedNode })
</script>
<style lang="scss" scoped>
.cn-tree {
@@ -294,13 +295,13 @@ defineExpose({ treeRef, getPlanData, getTreeList })
display: flex;
align-items: center;
}
.left{
span{
.left {
span {
margin-left: 2px;
}
}
.right{
a{
.right {
a {
margin-left: 2px;
}
}

599
src/views/govern/device/planData/index.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="default-main device-manage" :style="{ height: pageHeight.height }">
<!-- @node-change="nodeClick" -->
<schemeTree @node-click="nodeClick" @init="nodeClick" ref="schemeTreeRef"></schemeTree>
<!-- @node-change="nodeClick" -->
<schemeTree @node-change="nodeClick" @node-click="nodeClick" @init="nodeClick" ref="schemeTreeRef"></schemeTree>
<div class="device-manage-right" v-if="deviceData">
<el-descriptions size="small" title="方案信息" class="mb10" :column="2" border>
<el-descriptions title="方案信息" :column="2" border>
<template #extra>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0, '')">新增方案</el-button>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0)">新增方案</el-button>
<el-button type="primary" icon="el-icon-Download" @click="handleExport">数据导出</el-button>
</template>
<el-descriptions-item label="方案名称" width="60">
@@ -19,7 +19,7 @@
<div class="history_title">
<p>测试项信息</p>
</div>
<el-tabs v-model="activeName" type="border-card" @click="init()">
<el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
<el-tab-pane
v-for="(item, index) in deviceData.records"
:label="item.itemName"
@@ -32,7 +32,7 @@
<span>{{ item.itemName }}</span>
</span>
</template>
<el-descriptions size="small" class="mb10" width="180" :column="4" border>
<el-descriptions size="small" width="180" :column="4" border>
<el-descriptions-item label="测试项名称" width="160">
{{ item.itemName }}
</el-descriptions-item>
@@ -84,14 +84,11 @@
<el-descriptions-item label="监测位置" width="160">
{{ item.location }}
</el-descriptions-item>
<!-- <el-descriptions-item label="操作" width="160"> -->
<!-- <el-button type="primary" icon="el-icon-EditPen" @click="handleOpen(3)">
修改
</el-button> -->
<!-- <el-button type="primary" icon="el-icon-InfoFilled" @click="openDevice">
<el-descriptions-item label="操作" width="160">
<el-button type="primary" icon="el-icon-Tools" @click="handleOpen(3)">
数据绑定
</el-button> -->
<!-- </el-descriptions-item> -->
</el-button>
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
@@ -155,8 +152,11 @@
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</div>
</div>
<div class="history_title">
<p>{{ chartTitle }}</p>
</div>
<div class="history_chart" v-loading="loading">
<MyEchart ref="historyChart" v-show="echartsData" :isExport="true" :options="echartsData" />
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
</div>
</div>
<el-empty v-else description="请选择设备" class="device-manage-right" />
@@ -168,14 +168,14 @@
import popup 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 { ref, reactive, onMounted, provide, nextTick, watch } from 'vue'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import { TrendCharts, Plus } from '@element-plus/icons-vue'
import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue'
const dictData = useDictData()
defineOptions({
name: 'govern/device/manage'
@@ -226,7 +226,6 @@ queryByCode('portable-harmonic').then(res => {
})
queryStatistical(res.data.id).then(vv => {
legendDictList.value = vv.data
console.log(legendDictList.value, '2362636236636366263636', vv)
})
})
const activeName: any = ref()
@@ -235,16 +234,21 @@ const schemeTreeRef = ref()
//历史趋势devId
const historyDevId: any = ref('')
const chartTitle: any = ref('')
//点击测试项切换树节点
const handleClickTabs = async () => {
historyDevId.value = activeName.value
schemeTreeRef.value.setCheckedNode(activeName.value)
await init()
}
const nodeClick = async (e: anyObj) => {
loading.value = true
deviceData.value = []
historyDevId.value = e.children && e.children.length != 0 ? e.children[0].id : e.id
let id = e.pid ? e.pid : e.id
//查询测试项信息
try {
getTestRecordInfo(id).then(res => {
await getTestRecordInfo(id)
.then(res => {
deviceData.value = res.data
loading.value = false
if (res.data.records.length == 1) {
activeName.value = res.data.records[0].id
} else {
@@ -257,16 +261,25 @@ const nodeClick = async (e: anyObj) => {
})
}
schemeTreeRef.value.getPlanData(deviceData.value)
init()
loading.value = false
})
.catch(e => {
loading.value = false
})
} catch (error) {
loading.value = false
}
await init()
}
const dialogRef = ref()
const handleOpen = (val: any, id: any) => {
const handleOpen = (val: any) => {
// deviceData.value.records[0].id
dialogRef.value.open(val, '')
let ids = ''
if (val == 3) {
ids = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})?.id
} else {
ids = ''
}
dialogRef.value.open(val, ids)
}
const echartsData = ref<any>(null)
//加载echarts图表
@@ -278,8 +291,11 @@ const refreshTree = () => {
const range = (start: any, end: any, step: any) => {
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
}
const init = () => {
const init = async () => {
//调用子组件的方法切换的时候tree的节点也变化
console.log(activeName.value, '000000')
let list: any = []
loading.value = true
//颜色数组
const colorList = [
'#DAA521',
@@ -296,18 +312,18 @@ const init = () => {
'cadetblue'
]
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
loading.value = true
// 选择指标的时候切换legend内容和data数据
legendDictList.value?.selectedList?.map((item: any) => {
if (item.dataType == searchForm.value.index) {
list.push(item.eleEpdPqdVOS)
}
})
console.log(legendDictList.value, '2362636236636366263636')
//选择的指标使用方法处理
initSearchFormIndexAndCount([searchForm.value.index])
await formatCountOptions([searchForm.value.index])
//查询历史趋势
historyDataList.value = []
loading.value = true
let middleTitle = ''
if (
deviceData.value.records &&
@@ -334,7 +350,6 @@ const init = () => {
})
let lists: any = []
countData.value.map((item: any, index: any) => {
console.log(item.count, '878888888')
lists[index] = {
statisticalId: item.index,
frequencys: item.count && item.count.length != 0 ? [item.count] : []
@@ -345,278 +360,262 @@ const init = () => {
list: lists,
valueType: searchForm.value.type
}
try {
getHistoryTrend(obj)
.then((res: any) => {
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 = [],
timeList: any = [],
unitList: any = []
historyDataList.value.map((item: any) => {
timeList.push(item.time)
if (unitList.indexOf(item.unit) == -1) {
unitList.push(item.unit)
}
})
xAxis = timeList.sort((a: any, b: any) => {
return (
a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
0 -
(b
.replace('-', '')
.replace('-', '')
.replace(' ', '')
.replace(':', '')
.replace(':', '') -
0)
)
})
echartsData.value = {
options: {
title: [
{
left: '10%',
top: 0,
text: chartTitle.value
}
],
toolbox: {
feature: {
// saveAsImage: {
// title: '保存'
// },
// dataView: { readOnly: false },
// }
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params: any) {
var res = params[0].name + '<br/>'
for (var i = 0, l = params.length; i < l; i++) {
params[i].unit =
echartsData.value.options.yAxis[
echartsData.value.options.series[params[i].seriesIndex].yAxisIndex
]?.name
res +=
params[i].seriesName +
' ' +
`<div style="width:16px;height:16px;float:left;background:${params[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
`<div style='float:right;min-width:120px;padding-left:20px;'>${params[i].value} ${params[i].unit}</div><br/>`
}
return res
}
},
legend: {
//legend使用iconfont图标
data: [],
itemWidth: 20,
itemHeight: 10,
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
right: '13%', // 位置调整
top: 0,
bottom: 20,
width: 400,
height: 50
},
grid: {
left: '3%',
right: '3%',
bottom: '10%',
top: '8%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '\n\n\n\n\n时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12,
show: function (index: any, value: any) {
// 检查数据中是否存在这个时间点
// return data.some(item:any => item[0] === value)
}
},
nameTextStyle: {
right: 0
},
data: Array.from(new Set(xAxis)),
axisLine: {
lineStyle: {
color: '#43485E'
}
}
}
],
yAxis: [
{
type: 'value',
name: unitList[0],
axisLabel: {
color: '#000',
fontSize: 14
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: colorList[0]
}
},
nameTextStyle: {
color: '#000',
fontSize: '14'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
}
],
series: []
}
getHistoryTrend(obj)
.then((res: any) => {
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'
let xAxis: any = [],
timeList: any = [],
unitList: any = []
historyDataList.value.map((item: any) => {
timeList.push(item.time)
if (unitList.indexOf(item.unit) == -1) {
unitList.push(item.unit)
}
//处理多y轴
if (unitList.length != 0 && unitList.length > 1) {
// echartsData.value.options.yAxis[0].yAxisIndex = 0
unitList.map((item: any, index: any) => {
if (index != unitList.length - 1) {
echartsData.value.options.yAxis.push({
type: 'value',
position: 'right',
offset: index * 80, // y轴位置的偏移量
name: unitList[index + 1],
axisLabel: {
color: '#000',
fontSize: 14
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: colorList[index + 1]
}
},
nameTextStyle: {
color: '#000',
fontSize: '14'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
})
xAxis = timeList.sort((a: any, b: any) => {
return new Date(a).getTime() - new Date(b).getTime()
})
// xAxis.map((item:any)=>{
// item=item.replace(" ","\n")
// })
echartsData.value = {
options: {
title: [
{
left: '10%',
top: 0
// text: chartTitle.value
}
],
toolbox: {
feature: {
// saveAsImage: {
// title: '保存'
// },
// dataView: { readOnly: false },
// }
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params: any) {
var res = params[0].name + '<br/>'
for (var i = 0, l = params.length; i < l; i++) {
params[i].unit =
echartsData.value.options.yAxis[
echartsData.value.options.series[params[i].seriesIndex].yAxisIndex
]?.name
res +=
params[i].seriesName +
' ' +
`<div style="width:16px;height:16px;float:left;background:${params[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
`<div style='float:right;min-width:120px;padding-left:20px;'>${params[i].value} ${params[i].unit}</div><br/>`
}
return res
}
},
legend: {
//legend使用iconfont图标
data: [],
itemWidth: 20,
itemHeight: 10,
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
right: '3%', // 位置调整
top: 0,
bottom: 20,
width: 400,
height: 50
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
top: '8%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '\n\n\n\n\n时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12,
show: function (index: any, value: any) {
// 检查数据中是否存在这个时间点
// return data.some(item:any => item[0] === value)
}
// yAxisIndex: index + 1
})
}
})
}
list.map((item: any, index: any) => {
item.map((vv: any, indexs: any) => {
//处理legend
if (historyDataList.value.length != 0) {
echartsData.value.options.legend.data.push({
name: vv.phase + '相' + vv.showName,
icon: iconThree
})
}
if (
unitList.findIndex((item: any) => {
return item == vv.unit
}) != -1
) {
vv.yAxisIndex = unitList.findIndex((item: any) => {
return item == vv.unit
})
} else {
vv.yAxisIndex = 0
}
//series数据
echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName,
type: 'line',
smooth: true,
symbol: 'none',
emphasis: {
focus: 'series'
},
itemStyle: {},
//数据
data: historyDataList.value
.map((kk: any) => {
if (kk.statisticalName == vv.name) {
return kk.statisticalData
} else {
return ''
}
})
.filter((kk: any) => kk !== ''),
//数据对应的y轴
// yAxisIndex:0,
yAxisIndex: vv.yAxisIndex
})
})
})
//设置数据项颜色
echartsData.value.options.series.map((item: any, index: any) => {
item.itemStyle = {
normal: {
color: colorList[index],
lineStyle: {
color: colorList[index]
nameTextStyle: {
right: 0
},
data: Array.from(new Set(xAxis)),
axisLine: {
lineStyle: {
color: '#43485E'
}
}
}
}
})
loading.value = false
],
yAxis: [
{
type: 'value',
name: unitList[0],
axisLabel: {
color: '#000',
fontSize: 14
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
// color: colorList[0]
}
},
nameTextStyle: {
color: '#000',
fontSize: '14'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
}
],
series: []
}
}
})
.catch(error => {
//处理多y轴
if (unitList.length != 0 && unitList.length > 1) {
// echartsData.value.options.yAxis[0].yAxisIndex = 0
unitList.map((item: any, index: any) => {
if (index != unitList.length - 1) {
echartsData.value.options.yAxis.push({
type: 'value',
position: 'right',
offset: index * 80, // y轴位置的偏移量
name: unitList[index + 1],
axisLabel: {
color: '#000',
fontSize: 14
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: colorList[index + 1]
}
},
nameTextStyle: {
color: '#000',
fontSize: '14'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
// yAxisIndex: index + 1
})
}
})
}
list.map((item: any, index: any) => {
item.map((vv: any, indexs: any) => {
//处理legend
if (historyDataList.value.length != 0) {
echartsData.value.options.legend.data.push({
name: vv.phase + '相' + vv.showName,
icon: iconThree
})
}
if (
unitList.findIndex((item: any) => {
return item == vv.unit
}) != -1
) {
vv.yAxisIndex = unitList.findIndex((item: any) => {
return item == vv.unit
})
} else {
vv.yAxisIndex = 0
}
//series数据
echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName,
type: 'line',
smooth: true,
symbol: 'none',
emphasis: {
focus: 'series'
},
itemStyle: {},
//数据
data: historyDataList.value
.map((kk: any) => {
if (kk.statisticalName == vv.name) {
return kk.statisticalData
} else {
return ''
}
})
.filter((kk: any) => kk !== ''),
//数据对应的y轴
// yAxisIndex:0,
yAxisIndex: vv.yAxisIndex
})
})
})
//设置数据项颜色
echartsData.value.options.series.map((item: any, index: any) => {
item.itemStyle = {
normal: {
color: colorList[index],
lineStyle: {
color: colorList[index]
}
}
}
})
loading.value = false
})
} catch (error) {
loading.value = false
}
}
})
.catch(error => {
loading.value = false
})
}
}
//导出
const historyChart = ref()
// const chart: any = ref(null)
// chart.value = echarts.init(historyChart.value)
const handleExport = async () => {
const planCsv = ref('')
const chartsCsv = ref('')
if (deviceData.value.records && deviceData.value.records.length != 0) {
let csv = '',
obj = {}
obj: any = {}
obj = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})
@@ -669,11 +668,7 @@ const handleExport = async () => {
timeList.push(item.time)
})
xAxis = timeList.sort((a: any, b: any) => {
return (
a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
0 -
(b.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0)
)
new Date(a).getTime() - new Date(b).getTime()
})
xAxis = Array.from(new Set(xAxis))
// 使用这个函数转换数据为CSV格式
@@ -682,11 +677,6 @@ const handleExport = async () => {
csv = convertToCSV([], [])
chartsCsv.value = csv
// 如果你想提供下载链接
// const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
// const link = document.createElement('a')
// link.href = URL.createObjectURL(blob)
// link.download = '历史趋势.csv'
// link.click()
function convertToCSV(data: any, key: any) {
// 添加列头
let title = '统计时间,'
@@ -737,7 +727,7 @@ const handleExport = async () => {
const countData: any = ref([])
//根据选择的指标处理谐波次数
const initSearchFormIndexAndCount = (list: any) => {
const formatCountOptions = (list: any) => {
if (list.length != 0) {
list.map((item: any, index: any) => {
if (!countData.value[index]) {
@@ -757,13 +747,14 @@ const initSearchFormIndexAndCount = (list: any) => {
if (kk.harmStart && kk.harmEnd) {
range(0, 0, 0)
countData.value[index].countOptions = range(kk.harmStart, kk.harmEnd, 1)
countData.value[index].count = countData.value[index].countOptions[0]
if (!countData.value[index].count || countData.value[index].count.length == 0) {
countData.value[index].count = countData.value[index].countOptions[0]
}
}
})
}
})
})
console.log(countData.value, '66666666', legendDictList.value)
}
}
watch(
@@ -771,7 +762,7 @@ watch(
(val: any, oldval: any) => {
if (val) {
let list = [val]
// initSearchFormIndexAndCount(list)
// formatCountOptions(list)
// if (val == 0) {
// countData.value = []
// }
@@ -798,8 +789,6 @@ onMounted(() => {
init()
loading.value = false
}, 1500)
// initSearchFormIndexAndCount([searchForm.value.index])
})
</script>
@@ -844,7 +833,7 @@ onMounted(() => {
p {
height: 32px;
line-height: 32px;
font-size: 14px;
font-size: 16px;
font-weight: bold;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
@@ -855,7 +844,7 @@ onMounted(() => {
.el-tabs__content {
padding: 0 !important;
max-height: 130px !important;
min-height: 130px !important;
}
}
.history_header {
@@ -884,7 +873,7 @@ onMounted(() => {
flex: 1;
display: flex;
justify-content: flex-end;
margin-top: 3px;
// margin-top: 3px;
}
}