修改测试bug 优化页面
This commit is contained in:
@@ -15,6 +15,13 @@ export function getLineTree() {
|
|||||||
method: 'POST'
|
method: 'POST'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 监测点列表治理
|
||||||
|
export function objTree() {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-device-boot/csLedger/objTree',
|
||||||
|
method: 'POST'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//云设备录入树
|
//云设备录入树
|
||||||
|
|||||||
@@ -1,50 +1,67 @@
|
|||||||
import createAxios from '@/utils/request'
|
import createAxios from '@/utils/request'
|
||||||
|
|
||||||
//新增组态项目
|
//新增组态项目
|
||||||
export function add(data: any) {
|
export function add(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-harmonic-boot/csconfiguration/add',
|
url: '/cs-harmonic-boot/csconfiguration/add',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//组态项目分页查询
|
//组态项目分页查询
|
||||||
export function coFqueryPage(data: any) {
|
export function coFqueryPage(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-harmonic-boot/csconfiguration/queryPage',
|
url: '/cs-harmonic-boot/csconfiguration/queryPage',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//修改组态项目
|
//修改组态项目
|
||||||
export function audit(data: any) {
|
export function audit(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-harmonic-boot/csconfiguration/audit',
|
url: '/cs-harmonic-boot/csconfiguration/audit',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//组态页面分页查询
|
//组态页面分页查询
|
||||||
export function queryPageData(data: any) {
|
export function queryPageData(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-harmonic-boot/cspage/queryPage',
|
url: '/cs-harmonic-boot/cspage/queryPage',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//查询工程列表
|
//查询工程列表
|
||||||
export function deviceTree(data: any) {
|
export function deviceTree(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csLedger/deviceTree',
|
url: '/cs-device-boot/csLedger/deviceTree',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//三层设备树(项目层根节点为治理设备和便携式设备组态)
|
//三层设备树(项目层根节点为治理设备和便携式设备组态)
|
||||||
export function getztProjectTree() {
|
export function getztProjectTree() {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csLedger/getztProjectTree',
|
url: '/cs-device-boot/csLedger/getztProjectTree',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//根据用户id获取组件信息
|
||||||
|
export function getByUserId(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-harmonic-boot/cspage/getByUserId',
|
||||||
|
method: 'post',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//c保存组态界面与用户的关系
|
||||||
|
export function savePageIdWithUser(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-harmonic-boot/cspage/savePageIdWithUser',
|
||||||
|
method: 'post',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -54,6 +54,14 @@ export const activatePage = (params: any) => {
|
|||||||
params
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 全局的驾驶舱页面
|
||||||
|
export const scopePage = (params: any) => {
|
||||||
|
return createAxios({
|
||||||
|
url: '/system-boot/dashboard/scopePage',
|
||||||
|
method: 'post',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
// 查询激活的驾驶舱页面
|
// 查询激活的驾驶舱页面
|
||||||
export const queryActivatePage = () => {
|
export const queryActivatePage = () => {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
|
|||||||
308
src/components/cockpit/crossingTime/index.vue
Normal file
308
src/components/cockpit/crossingTime/index.vue
Normal file
@@ -0,0 +1,308 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!--暂态越限时间分布 -->
|
||||||
|
<TableHeader
|
||||||
|
ref="TableHeaderRef"
|
||||||
|
:timeKeyList="prop.timeKey"
|
||||||
|
:showReset="false"
|
||||||
|
@selectChange="selectChange"
|
||||||
|
datePicker
|
||||||
|
v-if="fullscreen"
|
||||||
|
></TableHeader>
|
||||||
|
<my-echart
|
||||||
|
class="tall"
|
||||||
|
:options="echartList1"
|
||||||
|
:style="{
|
||||||
|
width: prop.width,
|
||||||
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<!-- <my-echart
|
||||||
|
class="mt10"
|
||||||
|
:options="echartList1"
|
||||||
|
:style="{
|
||||||
|
width: prop.width,
|
||||||
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||||
|
}"
|
||||||
|
/> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, reactive, watch } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { useConfig } from '@/stores/config'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { getTime } from '@/utils/formatTime'
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
w: { type: [String, Number] },
|
||||||
|
h: { type: [String, Number] },
|
||||||
|
width: { type: [String, Number] },
|
||||||
|
height: { type: [String, Number] },
|
||||||
|
timeKey: { type: Array as () => string[] },
|
||||||
|
timeValue: { type: Object },
|
||||||
|
interval: { type: Number }
|
||||||
|
})
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
|
const headerHeight = ref(57)
|
||||||
|
|
||||||
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
|
headerHeight.value = height
|
||||||
|
|
||||||
|
if (datePickerValue && datePickerValue.timeValue) {
|
||||||
|
// 更新时间参数
|
||||||
|
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
||||||
|
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算是否全屏展示
|
||||||
|
const fullscreen = computed(() => {
|
||||||
|
const w = Number(prop.w)
|
||||||
|
const h = Number(prop.h)
|
||||||
|
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||||
|
// 执行相应逻辑
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const config = useConfig()
|
||||||
|
|
||||||
|
const echartList = ref({})
|
||||||
|
|
||||||
|
const echartList1 = ref({})
|
||||||
|
|
||||||
|
const processDataForChart = (rawData: any[]) => {
|
||||||
|
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
|
||||||
|
const chartData = rawData.map(item => [item.x, item.y, item.z])
|
||||||
|
|
||||||
|
return chartData
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/cs-harmonic-boot/csevent/getEventCoords',
|
||||||
|
method: 'POST',
|
||||||
|
showPage: false,
|
||||||
|
column: [],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
setTime()
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
const processedData = processDataForChart(tableStore.table.data.innerList || [])
|
||||||
|
const trendList = tableStore.table.data.trendList || []
|
||||||
|
const xlist = tableStore.table.data.xlist || []
|
||||||
|
|
||||||
|
// 处理趋势图数据
|
||||||
|
const seriesData = trendList.map((item: any) => {
|
||||||
|
// 根据接口返回的name字段确定系列名称和颜色
|
||||||
|
let name = ''
|
||||||
|
let color = ''
|
||||||
|
|
||||||
|
switch (item.name) {
|
||||||
|
case 'Evt_Sys_DipStr':
|
||||||
|
name = '电压暂降'
|
||||||
|
color = '#FFBF00'
|
||||||
|
break
|
||||||
|
case 'Evt_Sys_IntrStr':
|
||||||
|
name = '电压中断'
|
||||||
|
color = '#FF9100'
|
||||||
|
break
|
||||||
|
case 'Evt_Sys_SwlStr':
|
||||||
|
name = '电压暂升'
|
||||||
|
color = config.layout.elementUiPrimary[0]
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
name = item.name
|
||||||
|
color = '#000000'
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: name,
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
color: color,
|
||||||
|
data: item.trendList?.map((value: number, index: number) => [xlist[index], value]) || []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取x轴和y轴的标签值
|
||||||
|
const xLabels = [
|
||||||
|
'0-10%',
|
||||||
|
'10%-20%',
|
||||||
|
'20%-30%',
|
||||||
|
'30%-40%',
|
||||||
|
'40%-50%',
|
||||||
|
'50%-60%',
|
||||||
|
'60%-70%',
|
||||||
|
'70%-80%',
|
||||||
|
'80%-90%',
|
||||||
|
'90%-100%'
|
||||||
|
]
|
||||||
|
const yLabels = ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s']
|
||||||
|
|
||||||
|
echartList.value = {
|
||||||
|
options: {
|
||||||
|
xAxis: null,
|
||||||
|
yAxis: null,
|
||||||
|
dataZoom: null,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
tooltip: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||||
|
borderWidth: 0,
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var tips = ''
|
||||||
|
tips += '持续时间: ' + yLabels[params.value[1]] + '</br>'
|
||||||
|
tips += '特征幅值: ' + xLabels[params.value[0]] + '</br>'
|
||||||
|
tips += '事件次数: ' + params.value[2] + '</br>'
|
||||||
|
return tips
|
||||||
|
}
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '暂态事件概率分布',
|
||||||
|
x: 'center'
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
max: 500,
|
||||||
|
show: false,
|
||||||
|
inRange: {
|
||||||
|
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis3D: {
|
||||||
|
type: 'category',
|
||||||
|
name: '特征幅值',
|
||||||
|
data: xLabels,
|
||||||
|
nameGap: 40
|
||||||
|
},
|
||||||
|
yAxis3D: {
|
||||||
|
type: 'category',
|
||||||
|
name: '持续时间',
|
||||||
|
data: yLabels,
|
||||||
|
nameGap: 40,
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zAxis3D: {
|
||||||
|
type: 'value',
|
||||||
|
minInterval: 10,
|
||||||
|
name: '暂态事件次数',
|
||||||
|
nameGap: 30
|
||||||
|
},
|
||||||
|
grid3D: {
|
||||||
|
viewControl: {
|
||||||
|
projection: 'perspective',
|
||||||
|
distance: 260
|
||||||
|
},
|
||||||
|
boxWidth: 200,
|
||||||
|
boxDepth: 80,
|
||||||
|
light: {
|
||||||
|
main: {
|
||||||
|
intensity: 1.2
|
||||||
|
},
|
||||||
|
ambient: {
|
||||||
|
intensity: 0.3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar3D',
|
||||||
|
data: processedData,
|
||||||
|
shading: 'realistic',
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
borderWidth: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
echartList1.value = {
|
||||||
|
title: {
|
||||||
|
text: '暂态越限时间概率分布'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xlist,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '次'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '10px',
|
||||||
|
right: '20px'
|
||||||
|
},
|
||||||
|
series: seriesData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableRef = ref()
|
||||||
|
provide('tableRef', tableRef)
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
|
||||||
|
const setTime = () => {
|
||||||
|
const time = getTime(
|
||||||
|
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
||||||
|
prop.timeKey,
|
||||||
|
fullscreen.value
|
||||||
|
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||||
|
: prop.timeValue
|
||||||
|
)
|
||||||
|
|
||||||
|
if (Array.isArray(time)) {
|
||||||
|
tableStore.table.params.searchBeginTime = time[0]
|
||||||
|
tableStore.table.params.searchEndTime = time[1]
|
||||||
|
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||||||
|
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||||||
|
} else {
|
||||||
|
console.warn('获取时间失败,time 不是一个有效数组')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => prop.timeKey,
|
||||||
|
val => {
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => prop.timeValue,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
tableStore.index()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:operation>
|
<template v-slot:operation>
|
||||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
@@ -72,7 +72,7 @@ const initListByIds = () => {
|
|||||||
|
|
||||||
const templateListData = () => {
|
const templateListData = () => {
|
||||||
getTemplateList({}).then(res => {
|
getTemplateList({}).then(res => {
|
||||||
templateList.value = res.data
|
templateList.value = res.data.filter(item => item.name === '稳态治理报表')
|
||||||
if (!tableStore.table.params.tempId && templateList.value?.length > 0) {
|
if (!tableStore.table.params.tempId && templateList.value?.length > 0) {
|
||||||
tableStore.table.params.tempId = templateList.value[0].id
|
tableStore.table.params.tempId = templateList.value[0].id
|
||||||
}
|
}
|
||||||
@@ -156,6 +156,8 @@ const setTime = () => {
|
|||||||
if (Array.isArray(time)) {
|
if (Array.isArray(time)) {
|
||||||
tableStore.table.params.searchBeginTime = time[0]
|
tableStore.table.params.searchBeginTime = time[0]
|
||||||
tableStore.table.params.searchEndTime = time[1]
|
tableStore.table.params.searchEndTime = time[1]
|
||||||
|
tableStore.table.params.startTime = time[0]
|
||||||
|
tableStore.table.params.endTime = time[1]
|
||||||
TableHeaderRef.value?.setInterval(time[2] - 0)
|
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||||||
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
463
src/components/cockpit/indicatorCrossingTime/index.vue
Normal file
463
src/components/cockpit/indicatorCrossingTime/index.vue
Normal file
@@ -0,0 +1,463 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!--指标越限时间分布
|
||||||
|
-->
|
||||||
|
<TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef" @selectChange="selectChange" datePicker v-if="fullscreen">
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form-item label="监测点">
|
||||||
|
<el-select size="small" filterable v-model="tableStore.table.params.lineId">
|
||||||
|
<el-option
|
||||||
|
v-for="item in lineList"
|
||||||
|
:key="item.lineId"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.lineId"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<div v-loading="tableStore.table.loading">
|
||||||
|
<my-echart
|
||||||
|
class="tall"
|
||||||
|
:options="echartList1"
|
||||||
|
:style="{
|
||||||
|
width: prop.width,
|
||||||
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<!-- <my-echart
|
||||||
|
class="mt10"
|
||||||
|
:options="echartList1"
|
||||||
|
:style="{
|
||||||
|
width: prop.width,
|
||||||
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||||
|
}"
|
||||||
|
/> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
|
import { getTime } from '@/utils/formatTime'
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
w: { type: [String, Number] },
|
||||||
|
h: { type: [String, Number] },
|
||||||
|
width: { type: [String, Number] },
|
||||||
|
height: { type: [String, Number] },
|
||||||
|
timeKey: { type: Array as () => string[] },
|
||||||
|
timeValue: { type: Object },
|
||||||
|
interval: { type: Number }
|
||||||
|
})
|
||||||
|
|
||||||
|
// const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
|
||||||
|
|
||||||
|
const lineList = ref()
|
||||||
|
|
||||||
|
const headerHeight = ref(57)
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
|
headerHeight.value = height
|
||||||
|
|
||||||
|
if (datePickerValue && datePickerValue.timeValue) {
|
||||||
|
// 更新时间参数
|
||||||
|
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
||||||
|
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算是否全屏展示
|
||||||
|
const fullscreen = computed(() => {
|
||||||
|
const w = Number(prop.w)
|
||||||
|
const h = Number(prop.h)
|
||||||
|
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||||
|
// 执行相应逻辑
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const echartList = ref()
|
||||||
|
|
||||||
|
const echartList1 = ref()
|
||||||
|
|
||||||
|
const probabilityData = ref()
|
||||||
|
|
||||||
|
const initLineList = async () => {
|
||||||
|
cslineList({}).then(res => {
|
||||||
|
lineList.value = res.data
|
||||||
|
tableStore.table.params.lineId = lineList.value[0].lineId
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 越限程度概率分布
|
||||||
|
const initProbabilityData = () => {
|
||||||
|
// 只有当 lineList 已加载且有数据时才设置默认 lineId
|
||||||
|
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
|
||||||
|
tableStore.table.params.lineId = lineList.value[0].lineId
|
||||||
|
}
|
||||||
|
const params = {
|
||||||
|
searchBeginTime: tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
||||||
|
searchEndTime: tableStore.table.params.searchEndTime || prop.timeValue?.[1],
|
||||||
|
lineId: tableStore.table.params.lineId
|
||||||
|
}
|
||||||
|
limitProbabilityData(params).then((res: any) => {
|
||||||
|
probabilityData.value = res.data
|
||||||
|
|
||||||
|
// 处理接口返回的数据,转换为图表所需格式
|
||||||
|
if (res.data && Array.isArray(res.data)) {
|
||||||
|
// 定义指标类型顺序
|
||||||
|
const indicatorOrder = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相电压不平衡度', '频率偏差']
|
||||||
|
// 按照指定顺序排序数据
|
||||||
|
const sortedData = [...res.data].sort((a, b) => {
|
||||||
|
return indicatorOrder.indexOf(a.indexName) - indicatorOrder.indexOf(b.indexName)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 构造 series 数据
|
||||||
|
const seriesData: any = []
|
||||||
|
let maxValue: any = 0 // 用于存储数据中的最大值
|
||||||
|
// 遍历每个越限程度区间(0-20%, 20-40%, 40-60%, 60-80%, 80-100%)
|
||||||
|
for (let xIndex = 0; xIndex < 5; xIndex++) {
|
||||||
|
// 遍历每个指标类型
|
||||||
|
sortedData.forEach((item, yIndex) => {
|
||||||
|
// 从 extentGrades 中获取对应区间的值
|
||||||
|
const extentGrade = item.extentGrades[xIndex]
|
||||||
|
const value = extentGrade ? (Object.values(extentGrade)[0] as number) : 0
|
||||||
|
seriesData.push([xIndex, yIndex, value])
|
||||||
|
|
||||||
|
// 更新最大值
|
||||||
|
if (value > maxValue) {
|
||||||
|
maxValue = value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算 z 轴最大值(最大值加 5)
|
||||||
|
const zAxisMax = Math.ceil(maxValue) + 5
|
||||||
|
// 构造 yAxis 数据(指标类型名称)
|
||||||
|
const yAxisData = sortedData.map(item => item.indexName)
|
||||||
|
|
||||||
|
echartList.value = {
|
||||||
|
options: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
tooltip: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||||
|
borderWidth: 0,
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var yIndex = params.value[1] //获取y轴索引
|
||||||
|
var tips = ''
|
||||||
|
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
||||||
|
tips += '越限程度: ' + params.seriesName + '</br>'
|
||||||
|
tips += '越限次数: ' + params.value[2] + '</br>'
|
||||||
|
return tips
|
||||||
|
}
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '指标越限概率分布',
|
||||||
|
x: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: 'normal'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 移除或隐藏 visualMap 组件
|
||||||
|
visualMap: {
|
||||||
|
show: false, // 设置为 false 隐藏右侧颜色条
|
||||||
|
min: 0,
|
||||||
|
// max: 100,
|
||||||
|
max: zAxisMax, // 使用计算出的最大值加5
|
||||||
|
inRange: {
|
||||||
|
color: ['#313695', '#00BB00', '#ff8000', '#d73027', '#a50026']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 添加 legend 配置并设置为不显示
|
||||||
|
legend: {
|
||||||
|
show: false // 隐藏图例
|
||||||
|
},
|
||||||
|
xAxis3D: {
|
||||||
|
type: 'category',
|
||||||
|
name: '越限程度',
|
||||||
|
nameLocation: 'middle',
|
||||||
|
nameGap: 50,
|
||||||
|
data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%']
|
||||||
|
},
|
||||||
|
yAxis3D: {
|
||||||
|
type: 'category',
|
||||||
|
name: '指标类型',
|
||||||
|
nameLocation: 'middle',
|
||||||
|
nameGap: 50,
|
||||||
|
data: yAxisData,
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zAxis3D: {
|
||||||
|
type: 'value',
|
||||||
|
name: '越限次数',
|
||||||
|
nameLocation: 'middle',
|
||||||
|
nameGap: 30,
|
||||||
|
minInterval: 10
|
||||||
|
|
||||||
|
// max: 100
|
||||||
|
},
|
||||||
|
grid3D: {
|
||||||
|
viewControl: {
|
||||||
|
projection: 'perspective',
|
||||||
|
distance: 260,
|
||||||
|
rotateSensitivity: 10,
|
||||||
|
zoomSensitivity: 2
|
||||||
|
},
|
||||||
|
boxWidth: 150,
|
||||||
|
boxDepth: 100,
|
||||||
|
boxHeight: 100,
|
||||||
|
light: {
|
||||||
|
main: {
|
||||||
|
intensity: 1.2
|
||||||
|
},
|
||||||
|
ambient: {
|
||||||
|
intensity: 0.4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar3D',
|
||||||
|
name: '0-20%',
|
||||||
|
data: seriesData.filter((item: any) => item[0] === 0),
|
||||||
|
shading: 'realistic',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.9
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff8000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar3D',
|
||||||
|
name: '20-40%',
|
||||||
|
data: seriesData.filter((item: any) => item[0] === 1),
|
||||||
|
shading: 'realistic',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.9
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff8000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar3D',
|
||||||
|
name: '40-60%',
|
||||||
|
data: seriesData.filter((item: any) => item[0] === 2),
|
||||||
|
shading: 'realistic',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.9
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff8000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar3D',
|
||||||
|
name: '60-80%',
|
||||||
|
data: seriesData.filter((item: any) => item[0] === 3),
|
||||||
|
shading: 'realistic',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.9
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff8000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar3D',
|
||||||
|
name: '80-100%',
|
||||||
|
data: seriesData.filter((item: any) => item[0] === 4),
|
||||||
|
shading: 'realistic',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.9
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff8000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
|
||||||
|
method: 'POST',
|
||||||
|
showPage: false,
|
||||||
|
column: [],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
setTime()
|
||||||
|
// 只有当 lineList 已加载且有数据时才设置默认 lineId
|
||||||
|
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
|
||||||
|
tableStore.table.params.lineId = lineList.value[0].lineId
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
// 处理返回的数据,将其转换为图表所需格式
|
||||||
|
const indexNames: any = [...new Set(tableStore.table.data.map((item: any) => item.indexName))]
|
||||||
|
const timePeriods = [...new Set(tableStore.table.data.map((item: any) => item.timePeriod))]
|
||||||
|
|
||||||
|
// 构建系列数据
|
||||||
|
const seriesData = indexNames.map((indexName: string) => {
|
||||||
|
const dataIndex = tableStore.table.data.filter((item: any) => item.indexName === indexName)
|
||||||
|
return {
|
||||||
|
name: indexName,
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
data: dataIndex.map((item: any) => [item.timePeriod, item.times])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
echartList1.value = {
|
||||||
|
title: {
|
||||||
|
text: '指标越限时间概率分布'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: indexNames
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
name: '时间段',
|
||||||
|
data: timePeriods
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
// name: '次数'
|
||||||
|
},
|
||||||
|
series: seriesData
|
||||||
|
}
|
||||||
|
initProbabilityData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initLineList()
|
||||||
|
})
|
||||||
|
|
||||||
|
const setTime = () => {
|
||||||
|
const time = getTime(
|
||||||
|
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
||||||
|
prop.timeKey,
|
||||||
|
fullscreen.value
|
||||||
|
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||||
|
: prop.timeValue
|
||||||
|
)
|
||||||
|
|
||||||
|
if (Array.isArray(time)) {
|
||||||
|
tableStore.table.params.searchBeginTime = time[0]
|
||||||
|
tableStore.table.params.searchEndTime = time[1]
|
||||||
|
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||||||
|
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||||||
|
} else {
|
||||||
|
console.warn('获取时间失败,time 不是一个有效数组')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => prop.timeKey,
|
||||||
|
val => {
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => prop.timeValue,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
tableStore.index()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const addMenu = () => {}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@@ -21,17 +21,17 @@
|
|||||||
:options="echartList"
|
:options="echartList"
|
||||||
:style="{
|
:style="{
|
||||||
width: prop.width,
|
width: prop.width,
|
||||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<my-echart
|
<!-- <my-echart
|
||||||
class="mt10"
|
class="mt10"
|
||||||
:options="echartList1"
|
:options="echartList1"
|
||||||
:style="{
|
:style="{
|
||||||
width: prop.width,
|
width: prop.width,
|
||||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||||
}"
|
}"
|
||||||
/>
|
/> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -220,7 +220,7 @@ const initProbabilityData = () => {
|
|||||||
grid3D: {
|
grid3D: {
|
||||||
viewControl: {
|
viewControl: {
|
||||||
projection: 'perspective',
|
projection: 'perspective',
|
||||||
distance: 250,
|
distance: 260,
|
||||||
rotateSensitivity: 10,
|
rotateSensitivity: 10,
|
||||||
zoomSensitivity: 2
|
zoomSensitivity: 2
|
||||||
},
|
},
|
||||||
@@ -394,7 +394,7 @@ const tableStore: any = new TableStore({
|
|||||||
|
|
||||||
echartList1.value = {
|
echartList1.value = {
|
||||||
title: {
|
title: {
|
||||||
text: '越限时间概率分布'
|
text: '指标越限时间概率分布'
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis'
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ const headerHeight = ref(57)
|
|||||||
const TableHeaderRef = ref()
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const sensitiveUserType = dictData.getBasicData('Sensitive_User_Type')
|
const sensitiveUserType = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
headerHeight.value = height
|
headerHeight.value = height
|
||||||
|
|||||||
@@ -1,23 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--暂态事件概率分布 -->
|
<!--暂态事件概率分布 -->
|
||||||
<TableHeader ref="TableHeaderRef" :timeKeyList="prop.timeKey" :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
|
<TableHeader
|
||||||
|
ref="TableHeaderRef"
|
||||||
|
:timeKeyList="prop.timeKey"
|
||||||
|
:showReset="false"
|
||||||
|
@selectChange="selectChange"
|
||||||
|
datePicker
|
||||||
|
v-if="fullscreen"
|
||||||
|
></TableHeader>
|
||||||
<my-echart
|
<my-echart
|
||||||
class="tall"
|
class="tall"
|
||||||
:options="echartList"
|
:options="echartList"
|
||||||
:style="{
|
:style="{
|
||||||
width: prop.width,
|
width: prop.width,
|
||||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<my-echart
|
<!-- <my-echart
|
||||||
class="mt10"
|
class="mt10"
|
||||||
:options="echartList1"
|
:options="echartList1"
|
||||||
:style="{
|
:style="{
|
||||||
width: prop.width,
|
width: prop.width,
|
||||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||||
}"
|
}"
|
||||||
/>
|
/> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -33,7 +40,7 @@ const prop = defineProps({
|
|||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
width: { type: [String, Number] },
|
width: { type: [String, Number] },
|
||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number }
|
||||||
})
|
})
|
||||||
@@ -70,7 +77,6 @@ const echartList = ref({})
|
|||||||
|
|
||||||
const echartList1 = ref({})
|
const echartList1 = ref({})
|
||||||
|
|
||||||
|
|
||||||
const processDataForChart = (rawData: any[]) => {
|
const processDataForChart = (rawData: any[]) => {
|
||||||
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
|
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
|
||||||
const chartData = rawData.map(item => [item.x, item.y, item.z])
|
const chartData = rawData.map(item => [item.x, item.y, item.z])
|
||||||
@@ -84,7 +90,7 @@ const tableStore: any = new TableStore({
|
|||||||
showPage: false,
|
showPage: false,
|
||||||
column: [],
|
column: [],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
setTime()
|
setTime()
|
||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
const processedData = processDataForChart(tableStore.table.data.innerList || [])
|
const processedData = processDataForChart(tableStore.table.data.innerList || [])
|
||||||
@@ -177,15 +183,14 @@ const tableStore: any = new TableStore({
|
|||||||
type: 'category',
|
type: 'category',
|
||||||
name: '特征幅值',
|
name: '特征幅值',
|
||||||
data: xLabels,
|
data: xLabels,
|
||||||
nameGap: 40,
|
nameGap: 40
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis3D: {
|
yAxis3D: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: '持续时间',
|
name: '持续时间',
|
||||||
data: yLabels,
|
data: yLabels,
|
||||||
nameGap: 40,
|
nameGap: 40,
|
||||||
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: 'dashed',
|
type: 'dashed',
|
||||||
@@ -197,24 +202,26 @@ const tableStore: any = new TableStore({
|
|||||||
type: 'value',
|
type: 'value',
|
||||||
minInterval: 10,
|
minInterval: 10,
|
||||||
name: '暂态事件次数',
|
name: '暂态事件次数',
|
||||||
nameGap: 30,
|
nameGap: 30
|
||||||
},
|
},
|
||||||
grid3D: {
|
grid3D: {
|
||||||
viewControl: {
|
viewControl: {
|
||||||
projection: 'perspective',
|
projection: 'perspective',
|
||||||
distance: 250
|
distance: 260,
|
||||||
},
|
rotateSensitivity: 10,
|
||||||
|
zoomSensitivity: 2
|
||||||
boxWidth: 200,
|
|
||||||
boxDepth: 80,
|
|
||||||
light: {
|
|
||||||
main: {
|
|
||||||
intensity: 1.2
|
|
||||||
},
|
},
|
||||||
ambient: {
|
boxWidth: 150,
|
||||||
intensity: 0.3
|
boxDepth: 100,
|
||||||
|
boxHeight: 100,
|
||||||
|
light: {
|
||||||
|
main: {
|
||||||
|
intensity: 1.2
|
||||||
|
},
|
||||||
|
ambient: {
|
||||||
|
intensity: 0.4
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
@@ -227,9 +234,7 @@ const tableStore: any = new TableStore({
|
|||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
borderWidth: 1
|
borderWidth: 1
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -296,7 +301,7 @@ watch(
|
|||||||
watch(
|
watch(
|
||||||
() => prop.timeValue,
|
() => prop.timeValue,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
deep: true
|
deep: true
|
||||||
|
|||||||
@@ -252,50 +252,56 @@ self.onmessage = function (e) {
|
|||||||
let titles = ''
|
let titles = ''
|
||||||
if (boxoList.systemType == 'pms') {
|
if (boxoList.systemType == 'pms') {
|
||||||
titles =
|
titles =
|
||||||
'变电站名称:' +
|
'变电站名称:' +
|
||||||
boxoList.powerStationName +
|
boxoList.powerStationName +
|
||||||
' 监测点名称:' +
|
' 监测点名称:' +
|
||||||
boxoList.measurementPointName +
|
boxoList.measurementPointName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降(骤升)幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.duration +
|
boxoList.duration +
|
||||||
's'
|
's'
|
||||||
} else if (boxoList.systemType == 'ZL') {
|
} else if (boxoList.systemType == 'ZL') {
|
||||||
titles =
|
titles =
|
||||||
' 监测点名称:' +
|
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
|
||||||
|
' 项目名称:' +
|
||||||
|
boxoList.engineeringName +
|
||||||
|
' 监测点名称:' +
|
||||||
boxoList.equipmentName +
|
boxoList.equipmentName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降(骤升)幅值:' +
|
||||||
boxoList.evtParamVVaDepth +
|
boxoList.evtParamVVaDepth +
|
||||||
' 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.evtParamTm +
|
boxoList.evtParamTm +
|
||||||
's'
|
's'
|
||||||
} else if (boxoList.systemType == 'YPT') {
|
} else if (boxoList.systemType == 'YPT') {
|
||||||
titles =
|
titles =
|
||||||
' 监测点名称:' +
|
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
|
||||||
|
' 项目名称:' +
|
||||||
|
boxoList.engineeringName +
|
||||||
|
' 监测点名称:' +
|
||||||
boxoList.lineName +
|
boxoList.lineName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降(骤升)幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.persistTime +
|
boxoList.persistTime +
|
||||||
's'
|
's'
|
||||||
} else {
|
} else {
|
||||||
titles =
|
titles =
|
||||||
'变电站名称:' +
|
'变电站名称:' +
|
||||||
boxoList.subName +
|
boxoList.subName +
|
||||||
' 监测点名称:' +
|
' 监测点名称:' +
|
||||||
boxoList.lineName +
|
boxoList.lineName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降(骤升)幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.duration +
|
boxoList.duration +
|
||||||
's'
|
's'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -125,50 +125,52 @@ self.addEventListener('message', function (e) {
|
|||||||
let titles = ''
|
let titles = ''
|
||||||
if (boxoList.systemType == 'pms') {
|
if (boxoList.systemType == 'pms') {
|
||||||
titles =
|
titles =
|
||||||
'变电站名称:' +
|
'变电站名称:' +
|
||||||
boxoList.powerStationName +
|
boxoList.powerStationName +
|
||||||
' 监测点名称:' +
|
' 监测点名称:' +
|
||||||
boxoList.measurementPointName +
|
boxoList.measurementPointName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降(骤升)幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.duration +
|
boxoList.duration +
|
||||||
's'
|
's'
|
||||||
} else if (boxoList.systemType == 'ZL') {
|
} else if (boxoList.systemType == 'ZL') {
|
||||||
titles =
|
titles =
|
||||||
' 监测点名称:' +
|
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
|
||||||
|
' 监测点名称:' +
|
||||||
boxoList.equipmentName +
|
boxoList.equipmentName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降(骤升)幅值:' +
|
||||||
boxoList.evtParamVVaDepth +
|
boxoList.evtParamVVaDepth +
|
||||||
' 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.evtParamTm +
|
boxoList.evtParamTm +
|
||||||
's'
|
's'
|
||||||
} else if (boxoList.systemType == 'YPT') {
|
} else if (boxoList.systemType == 'YPT') {
|
||||||
titles =
|
titles =
|
||||||
' 监测点名称:' +
|
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
|
||||||
|
' 监测点名称:' +
|
||||||
boxoList.lineName +
|
boxoList.lineName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降(骤升)幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.persistTime +
|
boxoList.persistTime +
|
||||||
's'
|
's'
|
||||||
} else {
|
} else {
|
||||||
titles =
|
titles =
|
||||||
'变电站名称:' +
|
'变电站名称:' +
|
||||||
boxoList.subName +
|
boxoList.subName +
|
||||||
' 监测点名称:' +
|
' 监测点名称:' +
|
||||||
boxoList.lineName +
|
boxoList.lineName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降(骤升)幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.duration +
|
boxoList.duration +
|
||||||
's'
|
's'
|
||||||
}
|
}
|
||||||
|
|||||||
187
src/components/tree/allocation.vue
Normal file
187
src/components/tree/allocation.vue
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
|
||||||
|
<div class="mt15 mr10" style="display: flex; justify-content: end">
|
||||||
|
<el-button type="primary" icon="el-icon-Select" @click="save" :loading="loading">保存</el-button>
|
||||||
|
</div>
|
||||||
|
<Icon
|
||||||
|
v-show="menuCollapse"
|
||||||
|
@click="onMenuCollapse"
|
||||||
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
|
:class="menuCollapse ? 'unfold' : ''"
|
||||||
|
size="18"
|
||||||
|
class="fold ml10 mt20 menu-collapse"
|
||||||
|
style="cursor: pointer"
|
||||||
|
/>
|
||||||
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||||
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
|
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
|
<template #prefix>
|
||||||
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
<el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
|
||||||
|
<template #content>
|
||||||
|
<span>台账推送</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<Icon
|
||||||
|
name="el-icon-Promotion"
|
||||||
|
size="20"
|
||||||
|
class="fold ml10 menu-collapse"
|
||||||
|
style="cursor: pointer"
|
||||||
|
:style="{ color: config.getColorVal('elementUiPrimary') }"
|
||||||
|
@click="onAdd"
|
||||||
|
/>
|
||||||
|
</el-tooltip>
|
||||||
|
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
|
||||||
|
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
|
||||||
|
style='cursor: pointer' v-if='props.canExpand' /> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-tree
|
||||||
|
:style="{ height: 'calc(100vh - 235px)' }"
|
||||||
|
style="overflow: auto"
|
||||||
|
ref="treeRef"
|
||||||
|
:props="defaultProps"
|
||||||
|
highlight-current
|
||||||
|
:default-expand-all="false"
|
||||||
|
@check-change="checkTreeNodeChange"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
v-bind="$attrs"
|
||||||
|
>
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<span class="custom-tree-node">
|
||||||
|
<Icon
|
||||||
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||||
|
import { ElTree } from 'element-plus'
|
||||||
|
import { emit } from 'process'
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import { t } from 'vxe-table'
|
||||||
|
import { useConfig } from '@/stores/config'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'govern/tree'
|
||||||
|
})
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
width?: string
|
||||||
|
canExpand?: boolean
|
||||||
|
showPush?: boolean
|
||||||
|
}
|
||||||
|
const loading = ref(false)
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
width: '280px',
|
||||||
|
canExpand: true,
|
||||||
|
showPush: false
|
||||||
|
})
|
||||||
|
const config = useConfig()
|
||||||
|
const { proxy } = useCurrentInstance()
|
||||||
|
const menuCollapse = ref(false)
|
||||||
|
const filterText = ref('')
|
||||||
|
const defaultProps = {
|
||||||
|
label: 'name',
|
||||||
|
value: 'id'
|
||||||
|
}
|
||||||
|
const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'checkChange'])
|
||||||
|
watch(filterText, val => {
|
||||||
|
treeRef.value!.filter(val)
|
||||||
|
})
|
||||||
|
const onMenuCollapse = () => {
|
||||||
|
menuCollapse.value = !menuCollapse.value
|
||||||
|
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||||
|
}
|
||||||
|
const save = () => {
|
||||||
|
loading.value = true
|
||||||
|
emit('checkChange')
|
||||||
|
}
|
||||||
|
const filterNode = (value: string, data: any, node: any) => {
|
||||||
|
console.log(value, data, node, 'filterNode')
|
||||||
|
if (!value) return true
|
||||||
|
// return data.name.includes(value)
|
||||||
|
if (data.name) {
|
||||||
|
return chooseNode(value, data, node)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符.
|
||||||
|
const chooseNode = (value: string, data: any, node: any) => {
|
||||||
|
if (data.name.indexOf(value) !== -1) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
const level = node.level
|
||||||
|
// 如果传入的节点本身就是一级节点就不用校验了
|
||||||
|
if (level === 1) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 先取当前节点的父节点
|
||||||
|
let parentData = node.parent
|
||||||
|
// 遍历当前节点的父节点
|
||||||
|
let index = 0
|
||||||
|
while (index < level - 1) {
|
||||||
|
// 如果匹配到直接返回,此处name值是中文字符,enName是英文字符。判断匹配中英文过滤
|
||||||
|
if (parentData.data.name.indexOf(value) !== -1) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
// 否则的话再往上一层做匹配
|
||||||
|
parentData = parentData.parent
|
||||||
|
index++
|
||||||
|
}
|
||||||
|
// 没匹配到返回false
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const checkTreeNodeChange = () => {
|
||||||
|
// console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
|
||||||
|
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
|
||||||
|
}
|
||||||
|
|
||||||
|
const onAdd = () => {
|
||||||
|
emit('onAdd')
|
||||||
|
}
|
||||||
|
|
||||||
|
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||||
|
defineExpose({ treeRef, loading })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.cn-tree {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
:deep(.el-tree) {
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||||
|
background-color: var(--el-color-primary-light-7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-collapse {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tree-node {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
|
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
|
||||||
style='cursor: pointer' v-if='props.canExpand' /> -->
|
style='cursor: pointer' v-if='props.canExpand' /> -->
|
||||||
</div>
|
</div>
|
||||||
<el-tree :style="{ height: 'calc(100vh - 110px)' }"
|
<el-tree :style="{ height: 'calc(100vh - 230px)' }"
|
||||||
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
|
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
|
||||||
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
|
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
|
||||||
<template #default='{ node, data }'>
|
<template #default='{ node, data }'>
|
||||||
@@ -32,7 +32,6 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||||
import { ElTree } from 'element-plus'
|
import { ElTree } from 'element-plus'
|
||||||
import { emit } from 'process';
|
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
|
|||||||
@@ -1,27 +1,48 @@
|
|||||||
<!-- 设备管理使用折叠面板渲染多个tree -->
|
<!-- 设备管理使用折叠面板渲染多个tree -->
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
||||||
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
<Icon
|
||||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
|
v-show="menuCollapse"
|
||||||
style="cursor: pointer" />
|
@click="onMenuCollapse"
|
||||||
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
|
:class="menuCollapse ? 'unfold' : ''"
|
||||||
|
size="18"
|
||||||
|
class="fold ml10 mt20 menu-collapse"
|
||||||
|
style="cursor: pointer"
|
||||||
|
/>
|
||||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
<!-- <el-form-item> -->
|
<!-- <el-form-item> -->
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="filterText" autocomplete="off"
|
<el-input
|
||||||
placeholder="请输入内容" clearable>
|
maxlength="32"
|
||||||
|
show-word-limit
|
||||||
|
v-model.trim="filterText"
|
||||||
|
autocomplete="off"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
<!-- </el-form-item> -->
|
<!-- </el-form-item> -->
|
||||||
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
<Icon
|
||||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
|
@click="onMenuCollapse"
|
||||||
style="cursor: pointer" v-if="props.canExpand" />
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
|
:class="menuCollapse ? 'unfold' : ''"
|
||||||
|
size="18"
|
||||||
|
class="fold ml10 menu-collapse"
|
||||||
|
style="cursor: pointer"
|
||||||
|
v-if="props.canExpand"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
|
<el-collapse
|
||||||
@change="changeDevice">
|
:accordion="true"
|
||||||
|
v-model.trim="activeName"
|
||||||
|
style="flex: 1; height: 100%"
|
||||||
|
@change="changeDevice"
|
||||||
|
>
|
||||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
||||||
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
|
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
|
||||||
<el-option label="功能调试" value="2"></el-option>
|
<el-option label="功能调试" value="2"></el-option>
|
||||||
@@ -29,13 +50,30 @@
|
|||||||
<el-option label="正式投运" value="4"></el-option>
|
<el-option label="正式投运" value="4"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }"
|
:style="{
|
||||||
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
|
height:
|
||||||
node-key="id" :default-expand-all="false" v-bind="$attrs" :data="zlDevList" style="overflow: auto">
|
bxsDeviceData.length != 0
|
||||||
|
? `calc(100vh - 380px - ${props.height}px)`
|
||||||
|
: 'calc(100vh - 278px)'
|
||||||
|
}"
|
||||||
|
ref="treeRef1"
|
||||||
|
:props="defaultProps"
|
||||||
|
highlight-current
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
:default-expand-all="false"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:data="zlDevList"
|
||||||
|
style="overflow: auto"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -43,14 +81,30 @@
|
|||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
|
:style="{
|
||||||
ref="treeRef2" :props="defaultProps" highlight-current :default-expand-all="false"
|
height:
|
||||||
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
|
zlDeviceData.length != 0
|
||||||
style="overflow: auto">
|
? `calc(100vh - 340px - ${props.height}px)`
|
||||||
|
: 'calc(100vh - 238px)'
|
||||||
|
}"
|
||||||
|
ref="treeRef2"
|
||||||
|
:props="defaultProps"
|
||||||
|
highlight-current
|
||||||
|
:default-expand-all="false"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
:data="bxsDeviceData"
|
||||||
|
v-bind="$attrs"
|
||||||
|
style="overflow: auto"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -58,14 +112,30 @@
|
|||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="在线设备" name="2" v-if="frontDeviceData.length != 0">
|
<el-collapse-item title="在线设备" name="2" v-if="frontDeviceData.length != 0">
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
|
:style="{
|
||||||
ref="treeRef3" :props="defaultProps" highlight-current :default-expand-all="false"
|
height:
|
||||||
:filter-node-method="filterNode" node-key="id" :data="frontDeviceData" v-bind="$attrs"
|
zlDeviceData.length != 0
|
||||||
style="overflow: auto">
|
? `calc(100vh - 340px - ${props.height}px)`
|
||||||
|
: 'calc(100vh - 238px)'
|
||||||
|
}"
|
||||||
|
ref="treeRef3"
|
||||||
|
:props="defaultProps"
|
||||||
|
highlight-current
|
||||||
|
:default-expand-all="false"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
:data="frontDeviceData"
|
||||||
|
v-bind="$attrs"
|
||||||
|
style="overflow: auto"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -90,13 +160,15 @@ interface Props {
|
|||||||
canExpand?: boolean
|
canExpand?: boolean
|
||||||
type?: string
|
type?: string
|
||||||
data?: any
|
data?: any
|
||||||
|
height?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
width: '280px',
|
width: '280px',
|
||||||
canExpand: true,
|
canExpand: true,
|
||||||
type: '',
|
type: '',
|
||||||
data: []
|
data: [],
|
||||||
|
height: 0
|
||||||
})
|
})
|
||||||
const { proxy } = useCurrentInstance()
|
const { proxy } = useCurrentInstance()
|
||||||
const menuCollapse = ref(false)
|
const menuCollapse = ref(false)
|
||||||
@@ -124,19 +196,18 @@ watch(
|
|||||||
item.children.map((vv: any) => {
|
item.children.map((vv: any) => {
|
||||||
zlDeviceData.value.push(vv)
|
zlDeviceData.value.push(vv)
|
||||||
})
|
})
|
||||||
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
||||||
} else if (item.name == '便携式设备') {
|
} else if (item.name == '便携式设备') {
|
||||||
bxsDeviceData.value = []
|
bxsDeviceData.value = []
|
||||||
item.children.map((vv: any) => {
|
item.children.map((vv: any) => {
|
||||||
bxsDeviceData.value.push(vv)
|
bxsDeviceData.value.push(vv)
|
||||||
})
|
})
|
||||||
}else if (item.name == '在线设备') {
|
} else if (item.name == '在线设备') {
|
||||||
frontDeviceData.value = []
|
frontDeviceData.value = []
|
||||||
|
|
||||||
item.children.map((vv: any) => {
|
item.children.map((vv: any) => {
|
||||||
frontDeviceData.value.push(vv)
|
frontDeviceData.value.push(vv)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -157,8 +228,9 @@ watch(filterText, val => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
watch(process, val => {
|
watch(process, val => {
|
||||||
if (val == '') {
|
if (val == '' || val == undefined) {
|
||||||
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
||||||
|
console.log('🚀 ~ zlDevList.value:', zlDeviceData.value)
|
||||||
} else {
|
} else {
|
||||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||||
}
|
}
|
||||||
@@ -176,7 +248,7 @@ function filterProcess(nodes: any) {
|
|||||||
const children = node.children ? filterProcess(node.children) : []
|
const children = node.children ? filterProcess(node.children) : []
|
||||||
|
|
||||||
// 如果当前节点的process=4,或者有子节点满足条件,则保留当前节点
|
// 如果当前节点的process=4,或者有子节点满足条件,则保留当前节点
|
||||||
if ( node.process == process.value || children.length > 0) {
|
if (node.process == process.value || children.length > 0) {
|
||||||
return {
|
return {
|
||||||
...node,
|
...node,
|
||||||
children: children
|
children: children
|
||||||
@@ -283,7 +355,7 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
|||||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||||
//前置
|
//前置
|
||||||
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
||||||
defineExpose({ treeRef1, treeRef2 })
|
defineExpose({ treeRef1, treeRef2, treeRef3 })
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (zlDeviceData.value.length != 0) {
|
if (zlDeviceData.value.length != 0) {
|
||||||
@@ -293,6 +365,9 @@ onMounted(() => {
|
|||||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||||
activeName.value = '1'
|
activeName.value = '1'
|
||||||
}
|
}
|
||||||
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
|
||||||
|
activeName.value = '2'
|
||||||
|
}
|
||||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||||
activeName.value = ''
|
activeName.value = ''
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -158,7 +158,7 @@ const onAdd = () => {
|
|||||||
emit('onAdd')
|
emit('onAdd')
|
||||||
}
|
}
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
getTemplateByDept({ id: dictData.state.area[0]?.id })
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
info()
|
info()
|
||||||
|
|||||||
106
src/components/tree/govern/cloudDeviceEntryTreeZL.vue
Normal file
106
src/components/tree/govern/cloudDeviceEntryTreeZL.vue
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
<Tree
|
||||||
|
ref="treRef"
|
||||||
|
:width="width"
|
||||||
|
:showPush="props.showPush"
|
||||||
|
:data="tree"
|
||||||
|
default-expand-all
|
||||||
|
@changePointType="changePointType"
|
||||||
|
@onAdd="onAdd"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||||
|
import Tree from '../index.vue'
|
||||||
|
import { getLineTree, objTree } from '@/api/cs-device-boot/csLedger'
|
||||||
|
import { useConfig } from '@/stores/config'
|
||||||
|
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
template?: boolean
|
||||||
|
showPush?: boolean
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
template: false,
|
||||||
|
showPush: false
|
||||||
|
})
|
||||||
|
defineOptions({
|
||||||
|
name: 'govern/deviceTree'
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
|
||||||
|
const config = useConfig()
|
||||||
|
const tree = ref()
|
||||||
|
const dictData = useDictData()
|
||||||
|
const treRef = ref()
|
||||||
|
const width = ref('')
|
||||||
|
|
||||||
|
const info = (selectedNodeId?: string) => {
|
||||||
|
tree.value = []
|
||||||
|
let arr1: any[] = []
|
||||||
|
objTree().then(res => {
|
||||||
|
try {
|
||||||
|
res.data.map((item: any) => {
|
||||||
|
item.icon = 'el-icon-HomeFilled'
|
||||||
|
item.level = 1
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item.children.forEach((item: any) => {
|
||||||
|
item.icon = 'el-icon-List'
|
||||||
|
item.level = 2
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item.children.forEach((item2: any) => {
|
||||||
|
arr1.push(item2)
|
||||||
|
item2.icon = 'el-icon-Platform'
|
||||||
|
item2.level = 3
|
||||||
|
item2.color = config.getColorVal('elementUiPrimary')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
tree.value = res.data
|
||||||
|
nextTick(() => {
|
||||||
|
if (arr1.length) {
|
||||||
|
//初始化选中
|
||||||
|
treRef.value.treeRef.setCurrentKey(arr1[0].id)
|
||||||
|
// 注册父组件事件
|
||||||
|
emit('init', arr1[0])
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
emit('init')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in processing getCldTree response:', error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const changePointType = (val: any, obj: any) => {
|
||||||
|
emit('pointTypeChange', val, obj)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onAdd = () => {
|
||||||
|
emit('onAdd')
|
||||||
|
}
|
||||||
|
if (props.template) {
|
||||||
|
getTemplateByDept({ id: dictData.state.area[0]?.id })
|
||||||
|
.then((res: any) => {
|
||||||
|
emit('Policy', res.data)
|
||||||
|
info()
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
info()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
info()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露 info 方法给父组件调用
|
||||||
|
defineExpose({
|
||||||
|
info
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {})
|
||||||
|
</script>
|
||||||
@@ -5,6 +5,7 @@
|
|||||||
:default-checked-keys="defaultCheckedKeys"
|
:default-checked-keys="defaultCheckedKeys"
|
||||||
:show-checkbox="props.showCheckbox"
|
:show-checkbox="props.showCheckbox"
|
||||||
:data="tree"
|
:data="tree"
|
||||||
|
:height="props.height"
|
||||||
@changeDeviceType="changeDeviceType"
|
@changeDeviceType="changeDeviceType"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
@@ -21,10 +22,12 @@ const props = withDefaults(
|
|||||||
defineProps<{
|
defineProps<{
|
||||||
showCheckbox?: boolean
|
showCheckbox?: boolean
|
||||||
defaultCheckedKeys?: any
|
defaultCheckedKeys?: any
|
||||||
|
height?: number
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
showCheckbox: false,
|
showCheckbox: false,
|
||||||
defaultCheckedKeys: []
|
defaultCheckedKeys: [],
|
||||||
|
height:0
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
|
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
|
||||||
@@ -124,6 +127,8 @@ getDeviceTree().then(res => {
|
|||||||
})
|
})
|
||||||
return
|
return
|
||||||
} else if (arr3.length > 0) {
|
} else if (arr3.length > 0) {
|
||||||
|
console.log('🚀 ~ arr3:', arr3)
|
||||||
|
|
||||||
treRef.value.treeRef3.setCurrentKey(arr3[0].id)
|
treRef.value.treeRef3.setCurrentKey(arr3[0].id)
|
||||||
// 注册父组件事件
|
// 注册父组件事件
|
||||||
emit('init', {
|
emit('init', {
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ const info = () => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (arr1.length > 0) {
|
if (arr1.length > 0) {
|
||||||
//初始化选中
|
//初始化选中
|
||||||
treRef.value.treeRef1.setCurrentKey(arr1[0].id)
|
treRef.value?.treeRef1.setCurrentKey(arr1[0].id)
|
||||||
// 注册父组件事件
|
// 注册父组件事件
|
||||||
emit('init', {
|
emit('init', {
|
||||||
level: 2,
|
level: 2,
|
||||||
@@ -111,7 +111,7 @@ const info = () => {
|
|||||||
return
|
return
|
||||||
} else if (arr2.length > 0) {
|
} else if (arr2.length > 0) {
|
||||||
//初始化选中
|
//初始化选中
|
||||||
treRef.value.treeRef2.setCurrentKey(arr2[0].id)
|
treRef.value?.treeRef2.setCurrentKey(arr2[0].id)
|
||||||
// 注册父组件事件
|
// 注册父组件事件
|
||||||
emit('init', {
|
emit('init', {
|
||||||
level: 2,
|
level: 2,
|
||||||
@@ -119,7 +119,8 @@ const info = () => {
|
|||||||
})
|
})
|
||||||
return
|
return
|
||||||
} else if (arr3.length > 0) {
|
} else if (arr3.length > 0) {
|
||||||
treRef.value.treeRef3.setCurrentKey(arr3[0].id)
|
|
||||||
|
treRef.value?.treeRef3?.setCurrentKey(arr3[0].id)
|
||||||
emit('init', {
|
emit('init', {
|
||||||
level: 2,
|
level: 2,
|
||||||
...arr3[0]
|
...arr3[0]
|
||||||
@@ -137,7 +138,7 @@ const changePointType = (val: any, obj: any) => {
|
|||||||
emit('pointTypeChange', val, obj)
|
emit('pointTypeChange', val, obj)
|
||||||
}
|
}
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
getTemplateByDept({ id: dictData.state.area[0]?.id })
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
info()
|
info()
|
||||||
|
|||||||
@@ -157,7 +157,7 @@ const clickNode = (e: anyObj) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
getTemplateByDept({ id: dictData.state.area[0]?.id })
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
getTreeList()
|
getTreeList()
|
||||||
|
|||||||
@@ -87,7 +87,7 @@ const handleCheckedNodesChange = (nodes: any[]) => {
|
|||||||
|
|
||||||
|
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
getTemplateByDept({ id: dictData.state.area[0]?.id })
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
info()
|
info()
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
style='cursor: pointer' v-if='props.canExpand' /> -->
|
style='cursor: pointer' v-if='props.canExpand' /> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-tree :style="{ height: 'calc(100vh - 200px)' }"
|
<el-tree :style="{ height: 'calc(100vh - 190px)' }"
|
||||||
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
|
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
|
||||||
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
|
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
|
||||||
<template #default='{ node, data }'>
|
<template #default='{ node, data }'>
|
||||||
|
|||||||
@@ -1,9 +1,16 @@
|
|||||||
<!-- 设备监控使用折叠面板渲染多个tree -->
|
<!-- 设备监控使用折叠面板渲染多个tree -->
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
||||||
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
<Icon
|
||||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse" style="cursor: pointer"
|
v-show="menuCollapse"
|
||||||
v-if="route.path != '/admin/govern/reportCore/statistics/index'" />
|
@click="onMenuCollapse"
|
||||||
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
|
:class="menuCollapse ? 'unfold' : ''"
|
||||||
|
size="18"
|
||||||
|
class="fold ml10 mt20 menu-collapse"
|
||||||
|
style="cursor: pointer"
|
||||||
|
v-if="route.path != '/admin/govern/reportCore/statistics/index'"
|
||||||
|
/>
|
||||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
@@ -11,13 +18,23 @@
|
|||||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
<Icon
|
||||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
|
@click="onMenuCollapse"
|
||||||
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
|
:class="menuCollapse ? 'unfold' : ''"
|
||||||
|
size="18"
|
||||||
|
class="fold ml10 menu-collapse"
|
||||||
style="cursor: pointer"
|
style="cursor: pointer"
|
||||||
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'" />
|
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
|
|
||||||
@change="changeDevice">
|
<el-collapse
|
||||||
|
:accordion="true"
|
||||||
|
v-model.trim="activeName"
|
||||||
|
style="flex: 1; height: 100%"
|
||||||
|
@change="changeDevice"
|
||||||
|
>
|
||||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
||||||
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
|
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
|
||||||
<el-option label="功能调试" value="2"></el-option>
|
<el-option label="功能调试" value="2"></el-option>
|
||||||
@@ -26,14 +43,25 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
|
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }"
|
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
|
||||||
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
|
ref="treeRef1"
|
||||||
node-key="id" v-bind="$attrs" :data="zlDevList" style="overflow: auto"
|
:props="defaultProps"
|
||||||
:default-expand-all="false">
|
highlight-current
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:data="zlDevList"
|
||||||
|
style="overflow: auto"
|
||||||
|
:default-expand-all="false"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -41,14 +69,25 @@
|
|||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 330px)' : 'calc(100vh - 238px)' }"
|
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
|
||||||
ref="treeRef2" :props="defaultProps" highlight-current :default-expand-all="false"
|
ref="treeRef2"
|
||||||
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
|
:props="defaultProps"
|
||||||
style="overflow: auto" >
|
highlight-current
|
||||||
|
:default-expand-all="false"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
:data="bxsDeviceData"
|
||||||
|
v-bind="$attrs"
|
||||||
|
style="overflow: auto"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -56,14 +95,25 @@
|
|||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="在线设备" name="2" v-if="yqfDeviceData.length != 0">
|
<el-collapse-item title="在线设备" name="2" v-if="yqfDeviceData.length != 0">
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 330px)' : 'calc(100vh - 238px)' }"
|
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
|
||||||
ref="treeRef3" :props="defaultProps" highlight-current :default-expand-all="false"
|
ref="treeRef3"
|
||||||
:filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="$attrs"
|
:props="defaultProps"
|
||||||
style="overflow: auto">
|
highlight-current
|
||||||
|
:default-expand-all="false"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
:data="yqfDeviceData"
|
||||||
|
v-bind="$attrs"
|
||||||
|
style="overflow: auto"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -118,27 +168,25 @@ watch(
|
|||||||
() => props.data,
|
() => props.data,
|
||||||
(val, oldVal) => {
|
(val, oldVal) => {
|
||||||
if (val && val.length != 0) {
|
if (val && val.length != 0) {
|
||||||
|
|
||||||
val.map((item: any) => {
|
val.map((item: any) => {
|
||||||
if (item.name == '治理设备') {
|
if (item.name == '治理设备') {
|
||||||
zlDeviceData.value = []
|
zlDeviceData.value = []
|
||||||
item.children.map((vv: any) => {
|
item.children.map((vv: any) => {
|
||||||
zlDeviceData.value.push(vv)
|
zlDeviceData.value.push(vv)
|
||||||
})
|
})
|
||||||
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
||||||
} else if (item.name == '便携式设备') {
|
} else if (item.name == '便携式设备') {
|
||||||
bxsDeviceData.value = []
|
bxsDeviceData.value = []
|
||||||
item.children.map((vv: any) => {
|
item.children.map((vv: any) => {
|
||||||
bxsDeviceData.value.push(vv)
|
bxsDeviceData.value.push(vv)
|
||||||
})
|
})
|
||||||
}else if (item.name == '在线设备') {
|
} else if (item.name == '在线设备') {
|
||||||
yqfDeviceData.value = []
|
yqfDeviceData.value = []
|
||||||
item.children.map((vv: any) => {
|
item.children.map((vv: any) => {
|
||||||
yqfDeviceData.value.push(vv)
|
yqfDeviceData.value.push(vv)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -157,12 +205,10 @@ watch(filterText, val => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
watch(process, val => {
|
watch(process, val => {
|
||||||
|
if (val == '' || val == undefined) {
|
||||||
if (val == '') {
|
|
||||||
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
||||||
} else {
|
} else {
|
||||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -170,9 +216,8 @@ watch(process, val => {
|
|||||||
}, 0)
|
}, 0)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const changeDevice = (val: any) => {
|
const changeDevice = (val: any) => {
|
||||||
|
console.log('🚀 ~ changeDevice ~ val:', val)
|
||||||
|
|
||||||
let arr1: any = []
|
let arr1: any = []
|
||||||
//zlDeviceData
|
//zlDeviceData
|
||||||
@@ -263,8 +308,7 @@ function filterProcess(nodes: any) {
|
|||||||
// 1. 如果有满足条件的子节点则保留
|
// 1. 如果有满足条件的子节点则保留
|
||||||
// 2. 如果本身 process 值匹配则保留
|
// 2. 如果本身 process 值匹配则保留
|
||||||
// 3. 如果是叶子节点也保留(监测点通常没有子节点)
|
// 3. 如果是叶子节点也保留(监测点通常没有子节点)
|
||||||
if (children.length > 0 || node.process == process.value ||
|
if (children.length > 0 || node.process == process.value || !node.children || node.children.length === 0) {
|
||||||
(!node.children || node.children.length === 0)) {
|
|
||||||
return {
|
return {
|
||||||
...node,
|
...node,
|
||||||
children: children
|
children: children
|
||||||
@@ -276,7 +320,6 @@ function filterProcess(nodes: any) {
|
|||||||
.filter(Boolean) // 移除null节点
|
.filter(Boolean) // 移除null节点
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// function filterProcess(nodes: any) {
|
// function filterProcess(nodes: any) {
|
||||||
// if (process.value == '') {
|
// if (process.value == '') {
|
||||||
// return nodes
|
// return nodes
|
||||||
@@ -332,11 +375,9 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
|||||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||||
//在线
|
//在线
|
||||||
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
||||||
defineExpose({ treeRef1, treeRef2 })
|
defineExpose({ treeRef1, treeRef2, treeRef3 })
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
||||||
if (zlDeviceData.value.length != 0) {
|
if (zlDeviceData.value.length != 0) {
|
||||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||||
activeName.value = '0'
|
activeName.value = '0'
|
||||||
@@ -344,8 +385,11 @@ onMounted(() => {
|
|||||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||||
activeName.value = '1'
|
activeName.value = '1'
|
||||||
}
|
}
|
||||||
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
|
||||||
|
activeName.value = '2'
|
||||||
|
}
|
||||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||||
activeName.value = ''
|
activeName.value = '2'
|
||||||
}
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
changeDevice(activeName.value)
|
changeDevice(activeName.value)
|
||||||
|
|||||||
58
src/styles/vxeTable.css
Normal file
58
src/styles/vxeTable.css
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
.vxe-header--row {
|
||||||
|
background: var(--vxe-table-header-background-color);
|
||||||
|
color: var(--vxe-table-header-font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.is--checked.vxe-checkbox,
|
||||||
|
.is--checked.vxe-checkbox .vxe-checkbox--icon,
|
||||||
|
.is--checked.vxe-custom--checkbox-option,
|
||||||
|
.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
|
||||||
|
.is--checked.vxe-export--panel-column-option,
|
||||||
|
.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
|
||||||
|
.is--checked.vxe-table--filter-option,
|
||||||
|
.is--checked.vxe-table--filter-option .vxe-checkbox--icon,
|
||||||
|
.is--indeterminate.vxe-checkbox,
|
||||||
|
.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
|
||||||
|
.is--indeterminate.vxe-custom--checkbox-option,
|
||||||
|
.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
|
||||||
|
.is--indeterminate.vxe-export--panel-column-option,
|
||||||
|
.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
|
||||||
|
.is--indeterminate.vxe-table--filter-option,
|
||||||
|
.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
|
||||||
|
.vxe-table--render-default .is--checked.vxe-cell--checkbox,
|
||||||
|
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
|
||||||
|
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
|
||||||
|
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,
|
||||||
|
.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon {
|
||||||
|
color: var(--el-color-primary-light-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
|
.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
|
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
|
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
|
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
|
.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,
|
||||||
|
.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,
|
||||||
|
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,
|
||||||
|
.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,
|
||||||
|
.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon {
|
||||||
|
color: var(--el-color-primary-light-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-table--render-default .vxe-body--row.row--current,
|
||||||
|
.vxe-table--render-default .vxe-body--row.row--current:hover {
|
||||||
|
background-color: var(--el-color-primary-light-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-table--tooltip-wrapper {
|
||||||
|
z-index: 10000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is--disabled {
|
||||||
|
background-color: var(--vxe-input-disabled-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-modal--wrapper {
|
||||||
|
z-index: 5000 !important;
|
||||||
|
}
|
||||||
1
src/styles/vxeTable.min.css
vendored
Normal file
1
src/styles/vxeTable.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
.vxe-header--row{background:var(--vxe-table-header-background-color);color:var(--vxe-table-header-font-color)}.is--checked.vxe-checkbox,.is--checked.vxe-checkbox .vxe-checkbox--icon,.is--checked.vxe-custom--checkbox-option,.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--checked.vxe-export--panel-column-option,.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,.is--checked.vxe-table--filter-option,.is--checked.vxe-table--filter-option .vxe-checkbox--icon,.is--indeterminate.vxe-checkbox,.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,.is--indeterminate.vxe-custom--checkbox-option,.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--indeterminate.vxe-export--panel-column-option,.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,.is--indeterminate.vxe-table--filter-option,.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--checkbox,.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon{color:var(--el-color-primary-light-3)}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--el-color-primary-light-5)}.vxe-table--render-default .vxe-body--row.row--current,.vxe-table--render-default .vxe-body--row.row--current:hover{background-color:var(--el-color-primary-light-8)}.vxe-table--tooltip-wrapper{z-index:10000 !important}.is--disabled{background-color:var(--vxe-input-disabled-color)}.vxe-modal--wrapper{z-index:5000 !important}
|
||||||
@@ -1,84 +1,87 @@
|
|||||||
// .vxe-table--body-wrapper,
|
// .vxe-table--body-wrapper,
|
||||||
// .boxbx {
|
// .boxbx {
|
||||||
// &::-webkit-scrollbar {
|
// &::-webkit-scrollbar {
|
||||||
// width: 10px;
|
// width: 10px;
|
||||||
// height: 10px;
|
// height: 10px;
|
||||||
// }
|
// }
|
||||||
// &::-webkit-scrollbar-thumb {
|
// &::-webkit-scrollbar-thumb {
|
||||||
// border-radius: 5px;
|
// border-radius: 5px;
|
||||||
// height: 3px;
|
// height: 3px;
|
||||||
// background-color: var(--el-color-primary) !important;
|
// background-color: var(--el-color-primary) !important;
|
||||||
// border-radius: 30px !important;
|
// border-radius: 30px !important;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
|
// .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
|
||||||
// border-radius: 5px;
|
// border-radius: 5px;
|
||||||
// height: 3px;
|
// height: 3px;
|
||||||
// background-color: var(--el-color-primary) !important;
|
// background-color: var(--el-color-primary) !important;
|
||||||
// border-radius: 30px !important;
|
// border-radius: 30px !important;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
.vxe-header--row {
|
.vxe-header--row {
|
||||||
background: var(--vxe-table-header-background-color);
|
background: var(--vxe-table-header-background-color);
|
||||||
color: var(--vxe-table-header-font-color);
|
color: var(--vxe-table-header-font-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.is--checked.vxe-checkbox,
|
.is--checked.vxe-checkbox,
|
||||||
.is--checked.vxe-checkbox .vxe-checkbox--icon,
|
.is--checked.vxe-checkbox .vxe-checkbox--icon,
|
||||||
.is--checked.vxe-custom--checkbox-option,
|
.is--checked.vxe-custom--checkbox-option,
|
||||||
.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
|
.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
|
||||||
.is--checked.vxe-export--panel-column-option,
|
.is--checked.vxe-export--panel-column-option,
|
||||||
.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
|
.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
|
||||||
.is--checked.vxe-table--filter-option,
|
.is--checked.vxe-table--filter-option,
|
||||||
.is--checked.vxe-table--filter-option .vxe-checkbox--icon,
|
.is--checked.vxe-table--filter-option .vxe-checkbox--icon,
|
||||||
.is--indeterminate.vxe-checkbox,
|
.is--indeterminate.vxe-checkbox,
|
||||||
.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
|
.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
|
||||||
.is--indeterminate.vxe-custom--checkbox-option,
|
.is--indeterminate.vxe-custom--checkbox-option,
|
||||||
.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
|
.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
|
||||||
.is--indeterminate.vxe-export--panel-column-option,
|
.is--indeterminate.vxe-export--panel-column-option,
|
||||||
.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
|
.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
|
||||||
.is--indeterminate.vxe-table--filter-option,
|
.is--indeterminate.vxe-table--filter-option,
|
||||||
.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
|
.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
|
||||||
.vxe-table--render-default .is--checked.vxe-cell--checkbox,
|
.vxe-table--render-default .is--checked.vxe-cell--checkbox,
|
||||||
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
|
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
|
||||||
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
|
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
|
||||||
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,
|
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,
|
||||||
.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon {
|
.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon {
|
||||||
color: var(--el-color-primary-light-3);
|
color: var(--el-color-primary-light-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
|
.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
|
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
|
||||||
.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,
|
.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,
|
||||||
.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,
|
.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,
|
||||||
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,
|
.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,
|
||||||
.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,
|
.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,
|
||||||
.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon {
|
.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon {
|
||||||
color: var(--el-color-primary-light-5);
|
color: var(--el-color-primary-light-5);
|
||||||
}
|
}
|
||||||
|
.vxe-table--render-default .vxe-body--row.row--current,
|
||||||
// .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
|
.vxe-table--render-default .vxe-body--row.row--current:hover {
|
||||||
// color: #fff0;
|
background-color: var(--el-color-primary-light-8);
|
||||||
// }
|
}
|
||||||
.vxe-table--tooltip-wrapper {
|
// .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
|
||||||
z-index: 10000 !important;
|
// color: #fff0;
|
||||||
}
|
// }
|
||||||
.is--disabled {
|
.vxe-table--tooltip-wrapper {
|
||||||
background-color: var(--vxe-input-disabled-color);
|
z-index: 10000 !important;
|
||||||
}
|
}
|
||||||
|
.is--disabled {
|
||||||
.vxe-modal--wrapper {
|
background-color: var(--vxe-input-disabled-color);
|
||||||
z-index: 5000 !important;
|
}
|
||||||
}
|
|
||||||
.vxe-table--body .vxe-body--row:nth-child(even) {
|
.vxe-modal--wrapper {
|
||||||
background-color: #f9f9f9;
|
z-index: 5000 !important;
|
||||||
// background-color: var(--el-color-primary-light-9);
|
}
|
||||||
}
|
// .vxe-table--body .vxe-body--row:nth-child(even) {
|
||||||
|
// background-color: #f9f9f9;
|
||||||
.vxe-table--body .vxe-body--row:nth-child(odd) {
|
// // background-color: var(--el-color-primary-light-9);
|
||||||
background-color: #ffffff;
|
// }
|
||||||
}
|
|
||||||
|
// .vxe-table--body .vxe-body--row:nth-child(odd) {
|
||||||
|
// background-color: #ffffff;
|
||||||
|
// }
|
||||||
|
|||||||
@@ -68,7 +68,12 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
|
|||||||
config.url == '/harmonic-boot/grid/getAssessOverview' ||
|
config.url == '/harmonic-boot/grid/getAssessOverview' ||
|
||||||
config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData' ||
|
config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData' ||
|
||||||
config.url == '/cs-device-boot/csline/list' ||
|
config.url == '/cs-device-boot/csline/list' ||
|
||||||
config.url == '/cs-harmonic-boot/pqSensitiveUser/getListByIds'
|
config.url == '/cs-harmonic-boot/pqSensitiveUser/getListByIds'||
|
||||||
|
config.url == '/cs-harmonic-boot/csevent/getEventCoords'||
|
||||||
|
config.url == '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData'||
|
||||||
|
config.url == '/cs-harmonic-boot/limitRateDetailD/limitProbabilityData'||
|
||||||
|
config.url == '/system-boot/dictTree/queryByCode'||
|
||||||
|
config.url == '/system-boot/dictTree/query'
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
removePending(config)
|
removePending(config)
|
||||||
@@ -174,6 +179,8 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
ElMessage.error(response.data.message || '未知错误')
|
ElMessage.error(response.data.message || '未知错误')
|
||||||
}, 6000)
|
}, 6000)
|
||||||
|
}else if (response.config.url == '/cs-harmonic-boot/cspage/getByUserId') {
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(response.data.message || '未知错误')
|
ElMessage.error(response.data.message || '未知错误')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div class="title">角色列表</div>
|
<div class="title">角色列表</div>
|
||||||
<el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
|
<el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
|
||||||
</div>
|
</div>
|
||||||
<Table ref="tableRef" @currentChange="currentChange" />
|
<Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }" @currentChange="currentChange" />
|
||||||
</div>
|
</div>
|
||||||
<Tree
|
<Tree
|
||||||
v-if="menuListId"
|
v-if="menuListId"
|
||||||
@@ -13,8 +13,8 @@
|
|||||||
show-checkbox
|
show-checkbox
|
||||||
width="350px"
|
width="350px"
|
||||||
:data="menuTree"
|
:data="menuTree"
|
||||||
:checkStrictly="checkStrictly"
|
:checkStrictly="false"
|
||||||
@check-change="checkChange"
|
@checkChange="checkChange"
|
||||||
></Tree>
|
></Tree>
|
||||||
<el-empty style="width: 350px; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
|
<el-empty style="width: 350px; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
|
||||||
<PopupForm ref="popupRef"></PopupForm>
|
<PopupForm ref="popupRef"></PopupForm>
|
||||||
@@ -26,7 +26,7 @@ import { ref, onMounted, provide } from 'vue'
|
|||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import Tree from '@/components/tree/index.vue'
|
import Tree from '@/components/tree/allocation.vue'
|
||||||
import { functionTree } from '@/api/user-boot/function'
|
import { functionTree } from '@/api/user-boot/function'
|
||||||
import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction'
|
import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
@@ -43,6 +43,7 @@ const height = mainHeight(20).height
|
|||||||
const treeRef = ref()
|
const treeRef = ref()
|
||||||
const menuTree = ref<treeData[]>([])
|
const menuTree = ref<treeData[]>([])
|
||||||
const popupRef = ref()
|
const popupRef = ref()
|
||||||
|
const tableRef = ref()
|
||||||
const checkStrictly = ref(true)
|
const checkStrictly = ref(true)
|
||||||
const menuListId = ref('')
|
const menuListId = ref('')
|
||||||
const tableStore = new TableStore({
|
const tableStore = new TableStore({
|
||||||
@@ -104,7 +105,13 @@ const tableStore = new TableStore({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
loadCallback: () => {
|
||||||
|
tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
|
||||||
|
currentChange({
|
||||||
|
row: tableStore.table.data[0]
|
||||||
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
tableStore.table.params.searchValue = ''
|
tableStore.table.params.searchValue = ''
|
||||||
|
|
||||||
@@ -139,21 +146,22 @@ const currentChange = (data: any) => {
|
|||||||
|
|
||||||
const timeout = ref<NodeJS.Timeout>()
|
const timeout = ref<NodeJS.Timeout>()
|
||||||
const checkChange = (data: any) => {
|
const checkChange = (data: any) => {
|
||||||
if (checkStrictly.value) {
|
// if (checkStrictly.value) {
|
||||||
checkStrictly.value = false
|
// checkStrictly.value = false
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
if (timeout.value) {
|
|
||||||
clearTimeout(timeout.value)
|
updateRoleMenu({
|
||||||
}
|
id: menuListId.value,
|
||||||
timeout.value = setTimeout(() => {
|
idList: treeRef.value.treeRef.getCheckedNodes(false, true).map((node: any) => node.id)
|
||||||
updateRoleMenu({
|
})
|
||||||
id: menuListId.value,
|
.then(() => {
|
||||||
idList: treeRef.value.treeRef.getCheckedNodes(false, true).map((node: any) => node.id)
|
|
||||||
}).then(() => {
|
|
||||||
ElMessage.success('操作成功!')
|
ElMessage.success('操作成功!')
|
||||||
|
treeRef.value.loading = false
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
treeRef.value.loading = false
|
||||||
})
|
})
|
||||||
}, 1000)
|
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
|
|||||||
@@ -83,14 +83,14 @@ const tableStore = new TableStore({
|
|||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ title: '设备名称', field: 'equipmentName', align: 'center' },
|
{ title: '设备名称', field: 'equipmentName', align: 'center',minWidth: 100 },
|
||||||
{ title: '工程名称', field: 'engineeringName', align: 'center' },
|
{ title: '工程名称', field: 'engineeringName', align: 'center',minWidth: 100 },
|
||||||
{ title: '项目名称', field: 'projectName', align: 'center' },
|
{ title: '项目名称', field: 'projectName', align: 'center',minWidth: 100 },
|
||||||
{ title: '发生时刻', field: 'startTime', align: 'center', width: 180, sortable: true },
|
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
|
||||||
{
|
{
|
||||||
title: '模块信息',
|
title: '模块信息',
|
||||||
field: 'moduleNo',
|
field: 'moduleNo',
|
||||||
align: 'center',
|
align: 'center',minWidth: 100 ,
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
@@ -107,7 +107,7 @@ const tableStore = new TableStore({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '事件描述',
|
title: '事件描述',
|
||||||
minWidth: 220,
|
minWidth: 250,
|
||||||
field: 'showName'
|
field: 'showName'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -35,10 +35,10 @@ const tableStore = new TableStore({
|
|||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ title: '前置服务器名称', field: 'lineId', align: 'center' },
|
{ title: '前置服务器名称', field: 'lineId', align: 'center' ,minWidth: 120 },
|
||||||
{ title: '前置服务器ip', field: 'wavePath', align: 'center' },
|
{ title: '前置服务器ip', field: 'wavePath', align: 'center' ,minWidth: 100 },
|
||||||
{ title: '进程号', field: 'clDid', align: 'center' },
|
{ title: '进程号', field: 'clDid', align: 'center',minWidth: 60 },
|
||||||
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 80, sortable: true },
|
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '事件描述',
|
title: '事件描述',
|
||||||
@@ -48,7 +48,8 @@ const tableStore = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '告警代码',
|
title: '告警代码',
|
||||||
field: 'code',
|
field: 'code',
|
||||||
align: 'center',
|
align: 'center',minWidth: 100 ,
|
||||||
|
|
||||||
|
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return row.cellValue ? '\u200B' + row.cellValue : '/'
|
return row.cellValue ? '\u200B' + row.cellValue : '/'
|
||||||
|
|||||||
@@ -128,15 +128,15 @@ const tableStore = new TableStore({
|
|||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ title: '设备名称', field: 'equipmentName', align: 'center' },
|
{ title: '设备名称', field: 'equipmentName', minWidth: 120,align: 'center' },
|
||||||
{ title: '工程名称', field: 'engineeringName', align: 'center' },
|
{ title: '工程名称', field: 'engineeringName', minWidth: 120,align: 'center' },
|
||||||
{ title: '项目名称', field: 'projectName', align: 'center' },
|
{ title: '项目名称', field: 'projectName', minWidth: 120,align: 'center' },
|
||||||
{ title: '发生时刻', field: 'startTime', align: 'center', width: '240',sortable: true },
|
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180,sortable: true },
|
||||||
{ title: '监测点名称', field: 'lineName', align: 'center' },
|
{ title: '监测点名称', field: 'lineName', minWidth: 120,align: 'center' },
|
||||||
{ title: '事件描述', field: 'showName', align: 'center' },
|
{ title: '事件描述', field: 'showName', minWidth: 120,align: 'center' },
|
||||||
{ title: '事件发生位置', field: 'evtParamPosition', align: 'center' },
|
{ title: '事件发生位置', field: 'evtParamPosition',minWidth: 150, align: 'center' },
|
||||||
{ title: '相别', field: 'evtParamPhase', align: 'center' },
|
{ title: '相别', field: 'evtParamPhase',minWidth: 80, align: 'center' },
|
||||||
{ title: '持续时间(s)', field: 'evtParamTm', align: 'center',sortable: true },
|
{ title: '持续时间(s)', field: 'evtParamTm',minWidth: 80, align: 'center',sortable: true },
|
||||||
{ title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center',sortable: true },
|
{ title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center',sortable: true },
|
||||||
|
|
||||||
{
|
{
|
||||||
@@ -166,7 +166,7 @@ const tableStore = new TableStore({
|
|||||||
boxoList.value = row
|
boxoList.value = row
|
||||||
boxoList.value.featureAmplitude =
|
boxoList.value.featureAmplitude =
|
||||||
row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
|
row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
|
||||||
boxoList.value.systemType = 'WX'
|
boxoList.value.systemType = 'ZL'
|
||||||
wp.value = res.data
|
wp.value = res.data
|
||||||
}
|
}
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|||||||
@@ -77,7 +77,6 @@
|
|||||||
</el-descriptions-item> -->
|
</el-descriptions-item> -->
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
<el-tabs v-model.trim="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
|
<el-tabs v-model.trim="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
|
||||||
|
|
||||||
<el-tab-pane
|
<el-tab-pane
|
||||||
lazy
|
lazy
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
@@ -87,7 +86,7 @@
|
|||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<span class="custom-tabs-label">
|
<span class="custom-tabs-label">
|
||||||
<el-icon>
|
<!-- <el-icon>
|
||||||
<TrendCharts v-if="item.name == 'APF模块数据'" />
|
<TrendCharts v-if="item.name == 'APF模块数据'" />
|
||||||
<DataLine v-if="item.name == '历史APF模块数据'" />
|
<DataLine v-if="item.name == '历史APF模块数据'" />
|
||||||
<DataAnalysis v-if="item.name.includes('趋势数据')" />
|
<DataAnalysis v-if="item.name.includes('趋势数据')" />
|
||||||
@@ -113,7 +112,7 @@
|
|||||||
!item.name.includes('暂态事件')
|
!item.name.includes('暂态事件')
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</el-icon>
|
</el-icon> -->
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -157,7 +156,7 @@
|
|||||||
</el-select> -->
|
</el-select> -->
|
||||||
<el-radio-group
|
<el-radio-group
|
||||||
v-model.trim="formInline.dataLevel"
|
v-model.trim="formInline.dataLevel"
|
||||||
v-if="!dataSet.includes('_moduleData')"
|
v-if="!dataSet.includes('_moduleData') && TrendList?.lineType == 1"
|
||||||
:disabled="TrendList?.lineType != 1"
|
:disabled="TrendList?.lineType != 1"
|
||||||
@change="handleClick"
|
@change="handleClick"
|
||||||
>
|
>
|
||||||
@@ -733,14 +732,14 @@ const handleHarmonicSpectrum = async () => {
|
|||||||
// getRealDataMqttMsg()
|
// getRealDataMqttMsg()
|
||||||
await getBasicRealData(lineId.value).then((res: any) => {
|
await getBasicRealData(lineId.value).then((res: any) => {
|
||||||
if (res.code == 'A0000') {
|
if (res.code == 'A0000') {
|
||||||
ElMessage.success('装置应答成功')
|
ElMessage.success('装置应答成功')
|
||||||
// mqttMessage.value = {}
|
// mqttMessage.value = {}
|
||||||
|
|
||||||
realDataTimer.value = window.setInterval(() => {
|
realDataTimer.value = window.setInterval(() => {
|
||||||
if (!dataSet.value.includes('_realtimedata')) return
|
if (!dataSet.value.includes('_realtimedata')) return
|
||||||
|
|
||||||
getBasicRealData(lineId.value).then((res: any) => {
|
getBasicRealData(lineId.value).then((res: any) => {
|
||||||
console.log(res, '获取基础实时数据')
|
console.log(res, '获取基础实时数据')
|
||||||
})
|
})
|
||||||
}, 30000)
|
}, 30000)
|
||||||
}
|
}
|
||||||
@@ -838,8 +837,8 @@ const devData: any = ref({})
|
|||||||
const lineId: any = ref('')
|
const lineId: any = ref('')
|
||||||
const dataLevel: any = ref('')
|
const dataLevel: any = ref('')
|
||||||
const dataSource = ref([])
|
const dataSource = ref([])
|
||||||
const nodeClick = async (e: anyObj) => {
|
const engineeringName = ref('')
|
||||||
console.log("🚀 ~ nodeClick ~ e:", e)
|
const nodeClick = async (e: anyObj, node: any) => {
|
||||||
if (e == undefined || e.level == 2) {
|
if (e == undefined || e.level == 2) {
|
||||||
return (loading.value = false)
|
return (loading.value = false)
|
||||||
}
|
}
|
||||||
@@ -855,6 +854,8 @@ const nodeClick = async (e: anyObj) => {
|
|||||||
|
|
||||||
//选中设备名称后,点击标签页也能查询数据,要求点击设备名称后,点击标签页默认查询第一个监测点数据
|
//选中设备名称后,点击标签页也能查询数据,要求点击设备名称后,点击标签页默认查询第一个监测点数据
|
||||||
if (e.level == 3 || e.level == 2) {
|
if (e.level == 3 || e.level == 2) {
|
||||||
|
engineeringName.value = node?.parent.parent.data.name
|
||||||
|
|
||||||
await queryDictType({
|
await queryDictType({
|
||||||
lineId: e?.id,
|
lineId: e?.id,
|
||||||
conType: e.conType
|
conType: e.conType
|
||||||
@@ -985,44 +986,42 @@ const getRealDataMqttMsg = async () => {
|
|||||||
JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
||||||
)
|
)
|
||||||
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
||||||
|
|
||||||
if (lineId.value != obj.lineId || adminInfo.userIndex != obj.userId) return
|
if (lineId.value != obj.lineId || adminInfo.userIndex != obj.userId) return
|
||||||
|
|
||||||
//处理mqtt数据 1转2除 2转1乘
|
//处理mqtt数据 1转2除 2转1乘
|
||||||
//如果消息返回值是二次值,下拉框是二次值只需要单位换算 除以1000
|
//如果消息返回值是二次值,下拉框是二次值只需要单位换算 除以1000
|
||||||
//如果消息返回值是一次值,下拉框是一次值只需要单位换算 除以1000
|
//如果消息返回值是一次值,下拉框是一次值只需要单位换算 除以1000
|
||||||
if (obj.dataLevel == formInline.dataLevel) {
|
if (obj.dataLevel == formInline.dataLevel) {
|
||||||
|
|
||||||
obj = {
|
obj = {
|
||||||
...obj,
|
...obj,
|
||||||
// 电压有效值
|
// 电压有效值
|
||||||
vRmsA: obj.vRmsA ,
|
vRmsA: obj.vRmsA,
|
||||||
vRmsB: obj.vRmsB ,
|
vRmsB: obj.vRmsB,
|
||||||
vRmsC: obj.vRmsC ,
|
vRmsC: obj.vRmsC,
|
||||||
//基波电压幅值
|
//基波电压幅值
|
||||||
v1A: obj.v1A ,
|
v1A: obj.v1A,
|
||||||
v1B: obj.v1B ,
|
v1B: obj.v1B,
|
||||||
v1C: obj.v1C ,
|
v1C: obj.v1C,
|
||||||
//有功功率
|
//有功功率
|
||||||
pA: obj.pA ,
|
pA: obj.pA,
|
||||||
pB: obj.pB ,
|
pB: obj.pB,
|
||||||
pC: obj.pC ,
|
pC: obj.pC,
|
||||||
pTot: obj.pTot ,
|
pTot: obj.pTot,
|
||||||
//无功功率
|
//无功功率
|
||||||
qA: obj.qA ,
|
qA: obj.qA,
|
||||||
qB: obj.qB ,
|
qB: obj.qB,
|
||||||
qC: obj.qC ,
|
qC: obj.qC,
|
||||||
qTot: obj.qTot ,
|
qTot: obj.qTot,
|
||||||
//视在功率
|
//视在功率
|
||||||
sA: obj.sA ,
|
sA: obj.sA,
|
||||||
sB: obj.sB ,
|
sB: obj.sB,
|
||||||
sC: obj.sC ,
|
sC: obj.sC,
|
||||||
sTot: obj.sTot
|
sTot: obj.sTot
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//如果消息返回值是二次值,下拉框是一次值需要单位换算 除以1000 并且乘以pt ct
|
//如果消息返回值是二次值,下拉框是一次值需要单位换算 除以1000 并且乘以pt ct
|
||||||
if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') {
|
if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') {
|
||||||
|
|
||||||
obj = {
|
obj = {
|
||||||
...obj,
|
...obj,
|
||||||
// 电压有效值
|
// 电压有效值
|
||||||
@@ -1103,9 +1102,11 @@ const getRealDataMqttMsg = async () => {
|
|||||||
}
|
}
|
||||||
if (obj.hasOwnProperty('pA') && obj.hasOwnProperty('pB')) {
|
if (obj.hasOwnProperty('pA') && obj.hasOwnProperty('pB')) {
|
||||||
mqttMessage.value = obj
|
mqttMessage.value = obj
|
||||||
|
|
||||||
//更新实时数据主页面值
|
//更新实时数据主页面值
|
||||||
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value,formInline.dataLevel)
|
realTimeFlag.value &&
|
||||||
|
realTimeRef.value &&
|
||||||
|
realTimeRef.value.setRealData(mqttMessage.value, formInline.dataLevel)
|
||||||
tableLoading.value = false
|
tableLoading.value = false
|
||||||
//更新实时趋势折线图数据
|
//更新实时趋势折线图数据
|
||||||
if (sonTab.value == 2) {
|
if (sonTab.value == 2) {
|
||||||
@@ -1229,6 +1230,7 @@ const handleClick = async (tab?: any) => {
|
|||||||
let obj = {
|
let obj = {
|
||||||
devId: deviceId.value, //e.id
|
devId: deviceId.value, //e.id
|
||||||
lineId: lineId.value, //e.pid
|
lineId: lineId.value, //e.pid
|
||||||
|
engineeringName: engineeringName.value, //e.name
|
||||||
type: 3,
|
type: 3,
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
@@ -1423,9 +1425,7 @@ const echoName = (value: any, arr: any[]) => {
|
|||||||
return value ? arr.find(item => item.value == value)?.label : '/'
|
return value ? arr.find(item => item.value == value)?.label : '/'
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {})
|
||||||
|
|
||||||
})
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
clearInterval(realDataTimer.value)
|
clearInterval(realDataTimer.value)
|
||||||
clearInterval(trendTimer.value)
|
clearInterval(trendTimer.value)
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -2,8 +2,13 @@
|
|||||||
<div class="view">
|
<div class="view">
|
||||||
<TableHeader datePicker ref="headerRef" v-if="!isWaveCharts" :showReset="false"></TableHeader>
|
<TableHeader datePicker ref="headerRef" v-if="!isWaveCharts" :showReset="false"></TableHeader>
|
||||||
<Table ref="tableRef" v-if="!isWaveCharts" />
|
<Table ref="tableRef" v-if="!isWaveCharts" />
|
||||||
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
|
<waveFormAnalysis
|
||||||
@handleHideCharts="isWaveCharts = false" :wp="wp" />
|
v-loading="loading"
|
||||||
|
v-if="isWaveCharts"
|
||||||
|
ref="waveFormAnalysisRef"
|
||||||
|
@handleHideCharts="isWaveCharts = false"
|
||||||
|
:wp="wp"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -15,7 +20,7 @@ import TableHeader from '@/components/table/header/index.vue'
|
|||||||
import waveFormAnalysis from './components/waveFormAnalysis.vue'
|
import waveFormAnalysis from './components/waveFormAnalysis.vue'
|
||||||
import { ArrowLeft, Message } from '@element-plus/icons-vue'
|
import { ArrowLeft, Message } from '@element-plus/icons-vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { analyseWave,getFileByEventId } from '@/api/common'
|
import { analyseWave, getFileByEventId } from '@/api/common'
|
||||||
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
|
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
|
||||||
const tableParams: any = ref({})
|
const tableParams: any = ref({})
|
||||||
const refheader = ref()
|
const refheader = ref()
|
||||||
@@ -31,12 +36,11 @@ const waveFormAnalysisRef = ref()
|
|||||||
const headerRef = ref()
|
const headerRef = ref()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
deviceType: {
|
deviceType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '0'
|
default: '0'
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
|
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/cs-device-boot/csGroup/deviceDataByType',
|
url: '/cs-device-boot/csGroup/deviceDataByType',
|
||||||
@@ -45,7 +49,9 @@ const tableStore: any = new TableStore({
|
|||||||
column: [
|
column: [
|
||||||
// { width: '60', type: 'checkbox', fixed: 'left' },
|
// { width: '60', type: 'checkbox', fixed: 'left' },
|
||||||
{
|
{
|
||||||
title: '序号', width: 80, formatter: (row: any) => {
|
title: '序号',
|
||||||
|
width: 80,
|
||||||
|
formatter: (row: any) => {
|
||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -65,10 +71,11 @@ const tableStore: any = new TableStore({
|
|||||||
title: '持续时间(s)',
|
title: '持续时间(s)',
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
console.log('row.cellValue', row.cellValue)
|
console.log('row.cellValue', row.cellValue)
|
||||||
row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/'
|
row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/'
|
||||||
return row.cellValue
|
return row.cellValue
|
||||||
}, sortable: true
|
},
|
||||||
|
sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'featureAmplitude',
|
field: 'featureAmplitude',
|
||||||
@@ -109,7 +116,9 @@ const tableStore: any = new TableStore({
|
|||||||
row.loading1 = false
|
row.loading1 = false
|
||||||
if (res != undefined) {
|
if (res != undefined) {
|
||||||
boxoList.value = row
|
boxoList.value = row
|
||||||
boxoList.value.systemType = 'WX'
|
boxoList.value.systemType = 'YPT'
|
||||||
|
boxoList.value.engineeringName = tableParams.value.engineeringName
|
||||||
|
console.log("🚀 ~ tableParams.value.engineeringName:", tableParams.value.engineeringName)
|
||||||
wp.value = res.data
|
wp.value = res.data
|
||||||
view.value = false
|
view.value = false
|
||||||
view2.value = true
|
view2.value = true
|
||||||
@@ -134,7 +143,7 @@ const tableStore: any = new TableStore({
|
|||||||
icon: 'el-icon-DataLine',
|
icon: 'el-icon-DataLine',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
return row.showName != '未知';
|
return row.showName != '未知'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -158,25 +167,24 @@ const tableStore: any = new TableStore({
|
|||||||
document.body.appendChild(link)
|
document.body.appendChild(link)
|
||||||
link.click() //执行下载
|
link.click() //执行下载
|
||||||
document.body.removeChild(link) //释放标签
|
document.body.removeChild(link) //释放标签
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
title: '波形补召',
|
title: '波形补召',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-Check',
|
icon: 'el-icon-Check',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
return props.deviceType === '2' && row.wavePath || row.showName === '未知';
|
return (props.deviceType === '2' && row.wavePath) || row.showName === '未知'
|
||||||
},
|
},
|
||||||
click: row => {
|
click: row => {
|
||||||
getFileByEventId(row.id).then(res => {
|
getFileByEventId(row.id).then(res => {
|
||||||
ElMessage.success(res.message)
|
ElMessage.success(res.message)
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -186,9 +194,10 @@ const tableStore: any = new TableStore({
|
|||||||
tableStore.table.params.devId = tableParams.value.devId
|
tableStore.table.params.devId = tableParams.value.devId
|
||||||
tableStore.table.params.lineId = tableParams.value.lineId
|
tableStore.table.params.lineId = tableParams.value.lineId
|
||||||
tableStore.table.params.list = tableParams.value.list
|
tableStore.table.params.list = tableParams.value.list
|
||||||
|
console.log('🚀 ~ ableParams.value:', tableParams.value)
|
||||||
tableStore.table.params.type = 3
|
tableStore.table.params.type = 3
|
||||||
},
|
},
|
||||||
loadCallback: () => { }
|
loadCallback: () => {}
|
||||||
})
|
})
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
const isWaveCharts = ref(false)
|
const isWaveCharts = ref(false)
|
||||||
|
|||||||
@@ -232,6 +232,7 @@ const init = async () => {
|
|||||||
loading.value = true
|
loading.value = true
|
||||||
// 选择指标的时候切换legend内容和data数据
|
// 选择指标的时候切换legend内容和data数据
|
||||||
let list: any = []
|
let list: any = []
|
||||||
|
echartsData.value={}
|
||||||
legendDictList.value?.selectedList?.map((item: any) => {
|
legendDictList.value?.selectedList?.map((item: any) => {
|
||||||
searchForm.value.index.map((vv: any) => {
|
searchForm.value.index.map((vv: any) => {
|
||||||
if (item.dataType == vv) {
|
if (item.dataType == vv) {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
<div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||||
<GetMarketList @node-click="selectUser" @selectUser="selectUser"></GetMarketList>
|
<GetMarketList @node-click="selectUser" @selectUser="selectUser"></GetMarketList>
|
||||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||||
<el-descriptions title="用户基本信息" class="mb10" :column="2" border>
|
<el-descriptions title="用户基本信息" class="mb10" :column="2" border>
|
||||||
@@ -65,10 +65,10 @@ import { queryByUseId, add, removeMarketData, queryEnginnerByUseId } from '@/api
|
|||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
const pageHeight = mainHeight(20)
|
const pageHeight = mainHeight(60)
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
|
|
||||||
const tableHeight = mainHeight(135)
|
const tableHeight = mainHeight(173)
|
||||||
const user: any = ref({})
|
const user: any = ref({})
|
||||||
const tableData = ref([])
|
const tableData = ref([])
|
||||||
const tableData2 = ref([])
|
const tableData2 = ref([])
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
<div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||||
<OfficialUserTree @node-click="selectUser" @selectUser="selectUser"></OfficialUserTree>
|
<OfficialUserTree @node-click="selectUser" @selectUser="selectUser"></OfficialUserTree>
|
||||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||||
<div class="el-descriptions__header">
|
<div class="el-descriptions__header">
|
||||||
@@ -134,7 +134,7 @@ import { add, removeUserDev, queryDevByUseId } from '@/api/cs-system-boot/offici
|
|||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
const pageHeight = mainHeight(20)
|
const pageHeight = mainHeight(60)
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
|
|
||||||
const user: any = ref({})
|
const user: any = ref({})
|
||||||
|
|||||||
22
src/views/govern/device/permission/index.vue
Normal file
22
src/views/govern/device/permission/index.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main">
|
||||||
|
<el-tabs type="border-card" v-model="activeName">
|
||||||
|
<el-tab-pane label="营销用户" name="1"><Disposition v-if="activeName == '1'" /></el-tab-pane>
|
||||||
|
<el-tab-pane label="正式用户" name="2"><OfficialUser v-if="activeName == '2'" /></el-tab-pane>
|
||||||
|
<el-tab-pane label="游客" name="3"><Tourist v-if="activeName == '3'" /></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import Disposition from '@/views/govern/device/disposition/index.vue'
|
||||||
|
import OfficialUser from '@/views/govern/device/officialUser/index.vue'
|
||||||
|
import Tourist from '@/views/govern/device/tourist/index.vue'
|
||||||
|
const activeName = ref('1')
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-tabs--border-card > .el-tabs__content) {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,191 +1,191 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Table ref="tableRef" v-if="!isWaveCharts" />
|
<Table ref="tableRef" v-if="!isWaveCharts" />
|
||||||
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
|
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
|
||||||
@handleHideCharts="isWaveCharts = false" :wp="wp" />
|
@handleHideCharts="isWaveCharts = false" :wp="wp" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <TableHeader :showReset="false">
|
<!-- <TableHeader :showReset="false">
|
||||||
|
|
||||||
</TableHeader> -->
|
</TableHeader> -->
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import { ref, provide, onMounted, nextTick } from 'vue'
|
import { ref, provide, onMounted, nextTick } from 'vue'
|
||||||
import { getEventByItem } from '@/api/cs-device-boot/planData'
|
import { getEventByItem } from '@/api/cs-device-boot/planData'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue';
|
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue';
|
||||||
import { analyseWave } from '@/api/common'
|
import { analyseWave } from '@/api/common'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
|
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
activeName: String,
|
activeName: String,
|
||||||
activeColName: [Object, String]
|
activeColName: [Object, String]
|
||||||
})
|
})
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const waveFormAnalysisRef = ref()
|
const waveFormAnalysisRef = ref()
|
||||||
const isWaveCharts = ref(false)
|
const isWaveCharts = ref(false)
|
||||||
const boxoList: any = ref([])
|
const boxoList: any = ref([])
|
||||||
const wp = ref({})
|
const wp = ref({})
|
||||||
const tableStore = new TableStore({
|
const tableStore = new TableStore({
|
||||||
url: '/cs-harmonic-boot/data/getEventByItem',
|
url: '/cs-harmonic-boot/data/getEventByItem',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
paramsPOST: true,
|
paramsPOST: true,
|
||||||
showPage: false,
|
showPage: false,
|
||||||
publicHeight: 355,
|
publicHeight: 355,
|
||||||
column: [
|
column: [
|
||||||
// { width: '60', type: 'checkbox', fixed: 'left' },
|
// { width: '60', type: 'checkbox', fixed: 'left' },
|
||||||
{
|
{
|
||||||
title: '序号', width: 80, formatter: (row: any) => {
|
title: '序号', width: 80, formatter: (row: any) => {
|
||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ field: 'startTime', title: '发生时刻', minWidth: 170, sortable: true },
|
{ field: 'startTime', title: '发生时刻', minWidth: 170, sortable: true },
|
||||||
{ field: 'showName', title: '事件描述', minWidth: 170 },
|
{ field: 'showName', title: '事件描述', minWidth: 170 },
|
||||||
{
|
{
|
||||||
field: 'phaseType',
|
field: 'phaseType',
|
||||||
title: '相别',
|
title: '相别',
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
row.cellValue = row.cellValue ? row.cellValue : '/'
|
row.cellValue = row.cellValue ? row.cellValue : '/'
|
||||||
return row.cellValue
|
return row.cellValue
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'persistTime',
|
field: 'persistTime',
|
||||||
title: '持续时间(s)',
|
title: '持续时间(s)',
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/'
|
row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/'
|
||||||
return row.cellValue
|
return row.cellValue
|
||||||
}, sortable: true
|
}, sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'featureAmplitude',
|
field: 'featureAmplitude',
|
||||||
title: '暂降(聚升)幅值(%)',
|
title: '暂降(聚升)幅值(%)',
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
row.cellValue = row.cellValue + '' ? row.cellValue.toFixed(2) : '/'
|
row.cellValue = row.cellValue + '' ? row.cellValue.toFixed(2) : '/'
|
||||||
if (String(row.cellValue).split('.')[1] == '00') {
|
if (String(row.cellValue).split('.')[1] == '00') {
|
||||||
row.cellValue = String(row.cellValue).split('.')[0]
|
row.cellValue = String(row.cellValue).split('.')[0]
|
||||||
}
|
}
|
||||||
return row.cellValue
|
return row.cellValue
|
||||||
}, sortable: true
|
}, sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
width: 180,
|
width: 180,
|
||||||
render: 'buttons',
|
render: 'buttons',
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
title: '波形分析',
|
title: '波形分析',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-Check',
|
icon: 'el-icon-Check',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
loading: 'loading1',
|
loading: 'loading1',
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
// && row.evtParamTm < 20
|
// && row.evtParamTm < 20
|
||||||
return !row.wavePath
|
return !row.wavePath
|
||||||
},
|
},
|
||||||
click: async row => {
|
click: async row => {
|
||||||
row.loading1 = true
|
row.loading1 = true
|
||||||
loading.value = true
|
loading.value = true
|
||||||
isWaveCharts.value = true
|
isWaveCharts.value = true
|
||||||
await analyseWave(row.id)
|
await analyseWave(row.id)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
row.loading1 = false
|
row.loading1 = false
|
||||||
if (res != undefined) {
|
if (res != undefined) {
|
||||||
boxoList.value = row
|
boxoList.value = row
|
||||||
boxoList.value.systemType = 'WX'
|
boxoList.value.systemType = 'YPT'
|
||||||
wp.value = res.data
|
wp.value = res.data
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
loading.value = false
|
loading.value = false
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
row.loading1 = false
|
row.loading1 = false
|
||||||
loading.value = false
|
loading.value = false
|
||||||
})
|
})
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
|
waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
|
||||||
setHeight()
|
setHeight()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
text: '暂无波形',
|
text: '暂无波形',
|
||||||
type: 'info',
|
type: 'info',
|
||||||
icon: 'el-icon-DataLine',
|
icon: 'el-icon-DataLine',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
return row.wavePath
|
return row.wavePath
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
title: '波形下载',
|
title: '波形下载',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
loading: 'loading2',
|
loading: 'loading2',
|
||||||
icon: 'el-icon-Check',
|
icon: 'el-icon-Check',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
// && row.evtParamTm < 20
|
// && row.evtParamTm < 20
|
||||||
return !row.wavePath
|
return !row.wavePath
|
||||||
},
|
},
|
||||||
click: row => {
|
click: row => {
|
||||||
getFileZip({ eventId: row.id }).then(res => {
|
getFileZip({ eventId: row.id }).then(res => {
|
||||||
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
|
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
|
||||||
const url = window.URL.createObjectURL(blob)
|
const url = window.URL.createObjectURL(blob)
|
||||||
const link = document.createElement('a') // 创建a标签
|
const link = document.createElement('a') // 创建a标签
|
||||||
link.href = url
|
link.href = url
|
||||||
link.download = row.wavePath.split('/')[2] || '波形文件' // 设置下载的文件名
|
link.download = row.wavePath.split('/')[2] || '波形文件' // 设置下载的文件名
|
||||||
document.body.appendChild(link)
|
document.body.appendChild(link)
|
||||||
link.click() //执行下载
|
link.click() //执行下载
|
||||||
document.body.removeChild(link) //释放标签
|
document.body.removeChild(link) //释放标签
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const setHeight = () => {
|
const setHeight = () => {
|
||||||
if (props.activeColName == '0') {
|
if (props.activeColName == '0') {
|
||||||
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 485)
|
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 485)
|
||||||
tableStore.table.height = mainHeight(380).height
|
tableStore.table.height = mainHeight(380).height
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 350)
|
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 350)
|
||||||
tableStore.table.height = mainHeight(240).height
|
tableStore.table.height = mainHeight(240).height
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
const init = () => {
|
const init = () => {
|
||||||
tableStore.table.params.id = props.activeName
|
tableStore.table.params.id = props.activeName
|
||||||
// getEventByItem({ id: props.activeName }).then(res => {
|
// getEventByItem({ id: props.activeName }).then(res => {
|
||||||
|
|
||||||
// })
|
// })
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
})
|
})
|
||||||
defineExpose({ init, setHeight })
|
defineExpose({ init, setHeight })
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -1,95 +1,96 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
<div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||||
<DeviceTree
|
<DeviceTree
|
||||||
:showCheckbox="true"
|
:showCheckbox="true"
|
||||||
:default-checked-keys="defaultCheckedKeys"
|
:default-checked-keys="defaultCheckedKeys"
|
||||||
@checkChange="checkChange"
|
@checkChange="checkChange"
|
||||||
></DeviceTree>
|
:height="35"
|
||||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
></DeviceTree>
|
||||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||||
<vxe-column field="enginerName" title="工程名称"></vxe-column>
|
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
||||||
<vxe-column field="projectName" title="项目名称"></vxe-column>
|
<vxe-column field="enginerName" title="工程名称"></vxe-column>
|
||||||
<vxe-column field="deviceName" title="装置名称"></vxe-column>
|
<vxe-column field="projectName" title="项目名称"></vxe-column>
|
||||||
</vxe-table>
|
<vxe-column field="deviceName" title="装置名称"></vxe-column>
|
||||||
</div>
|
</vxe-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
</template>
|
||||||
<script setup lang="ts">
|
|
||||||
defineOptions({
|
<script setup lang="ts">
|
||||||
name: 'govern/tourist/index'
|
defineOptions({
|
||||||
})
|
name: 'govern/tourist/index'
|
||||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
})
|
||||||
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
||||||
import { getVisitorConfig, updateVisitorConfig } from '@/api/cs-device-boot/user'
|
import { mainHeight } from '@/utils/layout'
|
||||||
import { ref, onMounted } from 'vue'
|
import { getVisitorConfig, updateVisitorConfig } from '@/api/cs-device-boot/user'
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
const pageHeight = mainHeight(20)
|
|
||||||
const loading = ref(true)
|
const pageHeight = mainHeight(60)
|
||||||
const defaultCheckedKeys: any = ref([])
|
const loading = ref(true)
|
||||||
const tableData = ref([])
|
const defaultCheckedKeys: any = ref([])
|
||||||
|
const tableData = ref([])
|
||||||
const checkChange = (data: any) => {
|
|
||||||
if (data.data.level === 2) {
|
const checkChange = (data: any) => {
|
||||||
if (data.checked) {
|
if (data.data.level === 2) {
|
||||||
defaultCheckedKeys.value.push(data.data.id)
|
if (data.checked) {
|
||||||
} else {
|
defaultCheckedKeys.value.push(data.data.id)
|
||||||
defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1)
|
} else {
|
||||||
}
|
defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1)
|
||||||
loading.value = true
|
}
|
||||||
updateVisitorConfigs()
|
loading.value = true
|
||||||
}
|
updateVisitorConfigs()
|
||||||
}
|
}
|
||||||
const updateVisitorConfigs = () => {
|
}
|
||||||
const result = Array.from(new Set(defaultCheckedKeys.value))
|
const updateVisitorConfigs = () => {
|
||||||
updateVisitorConfig(
|
const result = Array.from(new Set(defaultCheckedKeys.value))
|
||||||
result.map(item => {
|
updateVisitorConfig(
|
||||||
return {
|
result.map(item => {
|
||||||
deviceId: item
|
return {
|
||||||
}
|
deviceId: item
|
||||||
})
|
}
|
||||||
).then((res: any) => {
|
})
|
||||||
if (res.code === 'A0000') {
|
).then((res: any) => {
|
||||||
getVisitorConfigs()
|
if (res.code === 'A0000') {
|
||||||
}
|
getVisitorConfigs()
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
const getVisitorConfigs = () => {
|
}
|
||||||
getVisitorConfig().then((res:any) => {
|
const getVisitorConfigs = () => {
|
||||||
if (res.code === 'A0000') {
|
getVisitorConfig().then((res:any) => {
|
||||||
tableData.value = res.data
|
if (res.code === 'A0000') {
|
||||||
loading.value = false
|
tableData.value = res.data
|
||||||
if (defaultCheckedKeys.value.length > 0) return
|
loading.value = false
|
||||||
defaultCheckedKeys.value = [] // 清空
|
if (defaultCheckedKeys.value.length > 0) return
|
||||||
res.data.forEach((item:any) => {
|
defaultCheckedKeys.value = [] // 清空
|
||||||
defaultCheckedKeys.value.push(item.deviceId)
|
res.data.forEach((item:any) => {
|
||||||
})
|
defaultCheckedKeys.value.push(item.deviceId)
|
||||||
}
|
})
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
|
}
|
||||||
onMounted(() => {
|
|
||||||
// if (!adminInfo.token) return router.push({ name: 'login' })
|
onMounted(() => {
|
||||||
|
// if (!adminInfo.token) return router.push({ name: 'login' })
|
||||||
getVisitorConfigs()
|
|
||||||
})
|
getVisitorConfigs()
|
||||||
</script>
|
})
|
||||||
|
</script>
|
||||||
<style lang="scss">
|
|
||||||
.device-manage {
|
<style lang="scss">
|
||||||
display: flex;
|
.device-manage {
|
||||||
|
display: flex;
|
||||||
&-right {
|
|
||||||
overflow: hidden;
|
&-right {
|
||||||
flex: 1;
|
overflow: hidden;
|
||||||
padding: 10px 10px 10px 0;
|
flex: 1;
|
||||||
.el-descriptions__header {
|
padding: 10px 10px 10px 0;
|
||||||
height: 36px;
|
.el-descriptions__header {
|
||||||
margin-bottom: 7px;
|
height: 36px;
|
||||||
display: flex;
|
margin-bottom: 7px;
|
||||||
align-items: center;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,165 +1,165 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main">
|
<div class="default-main">
|
||||||
<TableHeader ref="tableHeaderRef">
|
<TableHeader ref="tableHeaderRef">
|
||||||
<template #select>
|
<template #select>
|
||||||
<el-form-item label="装置型号:">
|
<el-form-item label="装置型号:">
|
||||||
<el-select v-model.trim="tableStore.table.params.devType" placeholder="请选择装置型号" clearable>
|
<el-select v-model.trim="tableStore.table.params.devType" placeholder="请选择装置型号" clearable>
|
||||||
<el-option v-for="item in DevTypeOptions" :key="item.id" :label="item.name"
|
<el-option v-for="item in DevTypeOptions" :key="item.id" :label="item.name"
|
||||||
:value="item.id"></el-option>
|
:value="item.id"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template #operation>
|
<template #operation>
|
||||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增版本</el-button>
|
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增版本</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef" />
|
<Table ref="tableRef" />
|
||||||
<PopupVersion ref="popupVersionRef" v-if="showPopup"></PopupVersion>
|
<PopupVersion ref="popupVersionRef" v-if="showPopup"></PopupVersion>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, provide } from 'vue'
|
import { ref, onMounted, provide } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { delCsDictData } from '@/api/system-boot/csDictData'
|
import { delCsDictData } from '@/api/system-boot/csDictData'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
|
import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import PopupVersion from '@/views/govern/manage/basic/popupVersion.vue'
|
import PopupVersion from '@/views/govern/manage/basic/popupVersion.vue'
|
||||||
import { Plus } from '@element-plus/icons-vue'
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
import { auditEdData } from '@/api/cs-device-boot/edData'
|
import { auditEdData } from '@/api/cs-device-boot/edData'
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/manage/basic/version'
|
name: 'govern/manage/basic/version'
|
||||||
})
|
})
|
||||||
const popupVersionRef = ref()
|
const popupVersionRef = ref()
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const showPopup = ref(false)
|
const showPopup = ref(false)
|
||||||
const DevTypeOptions = ref()
|
const DevTypeOptions = ref()
|
||||||
const tableHeaderRef = ref()
|
const tableHeaderRef = ref()
|
||||||
|
|
||||||
const tableStore = new TableStore({
|
const tableStore = new TableStore({
|
||||||
url: '/cs-device-boot/edData/queryEdDataPage',
|
url: '/cs-device-boot/edData/queryEdDataPage',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
column: [
|
column: [
|
||||||
{ title: '装置型号', field: 'devTypeName' },
|
{ title: '装置型号', field: 'devTypeName' },
|
||||||
{ title: '版本号', field: 'versionNo' },
|
{ title: '版本号', field: 'versionNo' },
|
||||||
{ title: '版本协议', field: 'versionAgreement' },
|
{ title: '版本协议', field: 'versionAgreement' },
|
||||||
{ title: '版本日期', field: 'versionDate' },
|
{ title: '版本日期', field: 'versionDate' },
|
||||||
{ title: '归档日期', field: 'updateTime' },
|
{ title: '归档日期', field: 'updateTime' },
|
||||||
{ title: '描述', field: 'description' },
|
{ title: '描述', field: 'description' },
|
||||||
{
|
{
|
||||||
title: '状态', field: 'status', render: 'tag',
|
title: '状态', field: 'status', render: 'tag',
|
||||||
custom: {
|
custom: {
|
||||||
1: 'error',
|
0: 'error',
|
||||||
0: 'success',
|
1: 'success',
|
||||||
|
|
||||||
},
|
},
|
||||||
replaceValue: {
|
replaceValue: {
|
||||||
1: '禁用',
|
0: '禁用',
|
||||||
0: '启用',
|
1: '启用',
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: '180',
|
width: '180',
|
||||||
render: 'buttons',
|
render: 'buttons',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-EditPen',
|
icon: 'el-icon-EditPen',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
click: row => {
|
click: row => {
|
||||||
popupVersionRef.value.open('编辑版本', row)
|
popupVersionRef.value.open('编辑版本', row)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
title: '启用',
|
title: '启用',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-Open',
|
icon: 'el-icon-Open',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
return row.status == 1
|
return row.status == 1
|
||||||
},
|
},
|
||||||
click: row => {
|
click: row => {
|
||||||
auditEdData({
|
auditEdData({
|
||||||
id: row.id,
|
id: row.id,
|
||||||
status: 1
|
status: 1
|
||||||
}).then((res: any) => {
|
}).then((res: any) => {
|
||||||
ElMessage.success('启用成功')
|
ElMessage.success('启用成功')
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'del',
|
name: 'del',
|
||||||
title: '禁用',
|
title: '禁用',
|
||||||
type: 'danger',
|
type: 'danger',
|
||||||
icon: 'el-icon-SwitchButton',
|
icon: 'el-icon-SwitchButton',
|
||||||
render: 'confirmButton',
|
render: 'confirmButton',
|
||||||
popconfirm: {
|
popconfirm: {
|
||||||
confirmButtonText: '确认',
|
confirmButtonText: '确认',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
confirmButtonType: 'danger',
|
confirmButtonType: 'danger',
|
||||||
title: '确定禁用吗?'
|
title: '确定禁用吗?'
|
||||||
},
|
},
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
return row.status == 0
|
return row.status == 0
|
||||||
},
|
},
|
||||||
click: row => {
|
click: row => {
|
||||||
auditEdData({
|
auditEdData({
|
||||||
id: row.id,
|
id: row.id,
|
||||||
status: 0
|
status: 0
|
||||||
}).then((res: any) => {
|
}).then((res: any) => {
|
||||||
ElMessage.success('禁用成功')
|
ElMessage.success('禁用成功')
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
tableStore.table.data.forEach((item: any) => {
|
tableStore.table.data.forEach((item: any) => {
|
||||||
item.statusName = item.status == 1 ? '禁用' : '启用'
|
item.statusName = item.status == 1 ? '禁用' : '启用'
|
||||||
for (let key in item) {
|
for (let key in item) {
|
||||||
if (typeof item[key] !== 'number') {
|
if (typeof item[key] !== 'number') {
|
||||||
item[key] = item[key] || '/'
|
item[key] = item[key] || '/'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
queryByCode('Device_Type').then(res => {
|
queryByCode('Device_Type').then(res => {
|
||||||
const id = res.data.id
|
const id = res.data.id
|
||||||
queryByid(id).then(res1 => {
|
queryByid(id).then(res1 => {
|
||||||
res1.data.map((item: any, index: any) => {
|
res1.data.map((item: any, index: any) => {
|
||||||
if (item.pid == id) {
|
if (item.pid == id) {
|
||||||
res1.data.splice(index, 1)
|
res1.data.splice(index, 1)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.log("🚀 ~ res1.data.map ~ res1.data:", res1.data)
|
console.log("🚀 ~ res1.data.map ~ res1.data:", res1.data)
|
||||||
|
|
||||||
DevTypeOptions.value = res1.data
|
DevTypeOptions.value = res1.data
|
||||||
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
tableStore.table.params.devType = ''
|
tableStore.table.params.devType = ''
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
tableHeaderRef.value.onComSearch()
|
tableHeaderRef.value.onComSearch()
|
||||||
})
|
})
|
||||||
const addMenu = () => {
|
const addMenu = () => {
|
||||||
showPopup.value = true
|
showPopup.value = true
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
popupVersionRef.value.open('新增版本')
|
popupVersionRef.value.open('新增版本')
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<el-button type="primary" :icon="Setting" @click="recall2">波形补召</el-button>
|
<el-button type="primary" :icon="Setting" @click="recall2">波形补召</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef" />
|
<Table ref="tableRef" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -16,17 +16,16 @@ import TableStore from '@/utils/tableStore'
|
|||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { Setting } from '@element-plus/icons-vue'
|
import { Setting } from '@element-plus/icons-vue'
|
||||||
import {eventRecall,fileRecall,logRecall} from '@/api/cs-device-boot/recall'
|
import { eventRecall, fileRecall, logRecall } from '@/api/cs-device-boot/recall'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { el } from 'element-plus/es/locale'
|
import { el } from 'element-plus/es/locale'
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
checkedNodes: {
|
checkedNodes: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/cs-device-boot/csTerminalReply/bzLogs',
|
url: '/cs-device-boot/csTerminalReply/bzLogs',
|
||||||
@@ -34,14 +33,16 @@ const tableStore: any = new TableStore({
|
|||||||
method: 'POST',
|
method: 'POST',
|
||||||
column: [
|
column: [
|
||||||
{
|
{
|
||||||
title: '序号', width: 80, formatter: (row: any) => {
|
title: '序号',
|
||||||
|
width: 80,
|
||||||
|
formatter: (row: any) => {
|
||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'engineeringName',
|
field: 'engineeringName',
|
||||||
title: '项目名称',
|
title: '项目名称',
|
||||||
|
width: 120,
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
@@ -49,23 +50,23 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
field: 'projectName',
|
field: 'projectName',
|
||||||
title: '工程名称',
|
title: '工程名称',
|
||||||
|
width: 120,
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'deviceName',
|
field: 'deviceName',
|
||||||
title: '设备名称',
|
title: '设备名称',
|
||||||
|
width: 120,
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
title: '监测点名称',
|
title: '监测点名称',
|
||||||
|
width: 120,
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
@@ -73,23 +74,23 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
field: 'logTime',
|
field: 'logTime',
|
||||||
title: '补召时间',
|
title: '补召时间',
|
||||||
|
width: 160,
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'log',
|
field: 'log',
|
||||||
title: '类型',
|
title: '类型',
|
||||||
|
width: 80,
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'status',
|
field: 'status',
|
||||||
title: '状态',
|
title: '状态',
|
||||||
|
width: 80,
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
@@ -97,25 +98,22 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
field: 'result',
|
field: 'result',
|
||||||
title: '结果',
|
title: '结果',
|
||||||
|
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
return row.cellValue ? row.cellValue : '/'
|
return row.cellValue ? row.cellValue : '/'
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
if (!nodeClick.value || nodeClick.value.level !== 3) {
|
if (!nodeClick.value || nodeClick.value.level !== 3) {
|
||||||
ElMessage.warning('请先选中监测点')
|
ElMessage.warning('请先选中监测点')
|
||||||
return // 阻止查询
|
return // 阻止查询
|
||||||
}
|
}
|
||||||
if (nodeClick.value) {
|
if (nodeClick.value) {
|
||||||
tableStore.table.params.searchValue = nodeClick.value.id
|
tableStore.table.params.searchValue = nodeClick.value.id
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {}
|
||||||
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
@@ -127,19 +125,18 @@ const handleTreeNodeClick = (node: any) => {
|
|||||||
if (tableStore && tableStore.index) {
|
if (tableStore && tableStore.index) {
|
||||||
// 判断当前节点是否为监测点层级
|
// 判断当前节点是否为监测点层级
|
||||||
if (node) {
|
if (node) {
|
||||||
if (node.level !== 3) {
|
if (node.level !== 3) {
|
||||||
ElMessage.warning('请先选中监测点')
|
ElMessage.warning('请先选中监测点')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}else {
|
} else {
|
||||||
ElMessage.warning('请先选中监测点')
|
ElMessage.warning('请先选中监测点')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const recall1 = async () => {
|
const recall1 = async () => {
|
||||||
if (!props.checkedNodes || props.checkedNodes.length === 0) {
|
if (!props.checkedNodes || props.checkedNodes.length === 0) {
|
||||||
ElMessage.warning('请先勾选监测点')
|
ElMessage.warning('请先勾选监测点')
|
||||||
@@ -163,13 +160,12 @@ const recall2 = async () => {
|
|||||||
await fileRecall({
|
await fileRecall({
|
||||||
startTime: tableStore.table.params.startTime,
|
startTime: tableStore.table.params.startTime,
|
||||||
endTime: tableStore.table.params.endTime,
|
endTime: tableStore.table.params.endTime,
|
||||||
lineList: props.checkedNodes.map((node: any) => node.id)
|
lineList: props.checkedNodes.map((node: any) => node.id)
|
||||||
}).then((res: any) => {
|
}).then((res: any) => {
|
||||||
ElMessage.success('补召波形成功')
|
ElMessage.success('补召波形成功')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 暴露方法给父组件调用
|
// 暴露方法给父组件调用
|
||||||
defineExpose({
|
defineExpose({
|
||||||
handleTreeNodeClick
|
handleTreeNodeClick
|
||||||
@@ -194,4 +190,4 @@ defineExpose({
|
|||||||
.view :deep(.el-table) {
|
.view :deep(.el-table) {
|
||||||
height: calc(100% - 56px);
|
height: calc(100% - 56px);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,214 +1,229 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<el-dialog
|
||||||
draggable
|
draggable
|
||||||
:title="title"
|
:title="title"
|
||||||
v-model.trim="dialogVisible"
|
v-model.trim="dialogVisible"
|
||||||
width="500px"
|
width="500px"
|
||||||
:before-close="handleClose"
|
:before-close="handleClose"
|
||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
>
|
>
|
||||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form">
|
<el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form-one">
|
||||||
<el-form-item label="项目名称:" prop="name">
|
<el-form-item label="项目名称:" prop="name">
|
||||||
<el-input
|
<el-input
|
||||||
maxlength="32"
|
maxlength="32"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
v-model.trim="form.name"
|
v-model.trim="form.name"
|
||||||
placeholder="请输入项目名称"
|
placeholder="请输入项目名称"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="工程项目:" class="top" prop="projectIds">
|
<el-form-item label="是否全局:" class="top" v-if="hasAdmin">
|
||||||
<el-tree-select
|
<el-switch
|
||||||
v-model.trim="form.projectIds"
|
v-model="form.scope"
|
||||||
default-expand-all
|
inline-prompt
|
||||||
show-checkbox
|
width="60px"
|
||||||
node-key="id"
|
:active-value="1"
|
||||||
:props="defaultProps"
|
:inactive-value="0"
|
||||||
multiple
|
active-text="是 "
|
||||||
:data="Engineering"
|
inactive-text="否 "
|
||||||
collapse-tags
|
/>
|
||||||
style="width: 100%"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="工程项目:" class="top" prop="projectIds" v-if="!hasAdmin || form.scope == 0">
|
||||||
<!-- <el-cascader v-model.trim="form.projectIds" :options="Engineering" :props="defaultProps"
|
<el-tree-select
|
||||||
:show-all-levels="false" collapse-tags collapse-tags-tooltip clearable style="width: 100%;"/> -->
|
v-model.trim="form.projectIds"
|
||||||
</el-form-item>
|
default-expand-all
|
||||||
<el-form-item label="项目排序:" prop="orderBy">
|
show-checkbox
|
||||||
<el-input
|
node-key="id"
|
||||||
maxlength="32"
|
:props="defaultProps"
|
||||||
show-word-limit-number
|
multiple
|
||||||
v-model.trim="form.orderBy"
|
:data="Engineering"
|
||||||
:min="0"
|
collapse-tags
|
||||||
:step="1"
|
style="width: 100%"
|
||||||
step-strictly
|
/>
|
||||||
style="width: 100%"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="项目排序:" prop="orderBy">
|
||||||
</el-form-item>
|
<el-input
|
||||||
|
maxlength="32"
|
||||||
<el-form-item label="备注:" class="top">
|
show-word-limit-number
|
||||||
<el-input
|
v-model.trim="form.orderBy"
|
||||||
maxlength="300"
|
:min="0"
|
||||||
show-word-limit
|
:step="1"
|
||||||
type="textarea"
|
step-strictly
|
||||||
:rows="2"
|
style="width: 100%"
|
||||||
placeholder="请输入内容"
|
/>
|
||||||
v-model.trim="form.remark"
|
</el-form-item>
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
<el-form-item label="备注:" class="top">
|
||||||
</el-form>
|
<el-input
|
||||||
|
maxlength="300"
|
||||||
<template #footer>
|
show-word-limit
|
||||||
<span class="dialog-footer">
|
type="textarea"
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
:rows="2"
|
||||||
<el-button type="primary" @click="addFn">确定</el-button>
|
placeholder="请输入内容"
|
||||||
</span>
|
v-model.trim="form.remark"
|
||||||
</template>
|
></el-input>
|
||||||
</el-dialog>
|
</el-form-item>
|
||||||
</template>
|
</el-form>
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive } from 'vue'
|
<template #footer>
|
||||||
import { deviceTree, add, audit, getztProjectTree } from '@/api/cs-harmonic-boot/mxgraph'
|
<span class="dialog-footer">
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
const title = ref('')
|
<el-button type="primary" @click="addFn">确定</el-button>
|
||||||
const formRef = ref()
|
</span>
|
||||||
const Engineering = ref([])
|
</template>
|
||||||
const dialogVisible = ref(false)
|
</el-dialog>
|
||||||
const emit = defineEmits(['submit'])
|
</template>
|
||||||
const defaultProps = {
|
<script setup lang="ts">
|
||||||
children: 'children',
|
import { ref, reactive } from 'vue'
|
||||||
value: 'id',
|
import { deviceTree, add, audit, getztProjectTree } from '@/api/cs-harmonic-boot/mxgraph'
|
||||||
label: 'name',
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
multiple: true,
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
expandTrigger: 'hover' as const
|
const adminInfo = useAdminInfo()
|
||||||
}
|
const hasAdmin = adminInfo.roleCode.some(item => item.includes('operation_manager')|| item.includes('root'))
|
||||||
const form: any = reactive({
|
const title = ref('')
|
||||||
name: '',
|
const formRef = ref()
|
||||||
projectIds: [],
|
const Engineering = ref([])
|
||||||
orderBy: '100',
|
const dialogVisible = ref(false)
|
||||||
remark: ''
|
const emit = defineEmits(['submit'])
|
||||||
})
|
const defaultProps = {
|
||||||
const rules = {
|
children: 'children',
|
||||||
name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
value: 'id',
|
||||||
projectIds: [{ required: true, message: '请选择工程项目', trigger: 'change' }],
|
label: 'name',
|
||||||
orderBy: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
multiple: true,
|
||||||
}
|
expandTrigger: 'hover' as const
|
||||||
const addFn = () => {
|
}
|
||||||
console.log('🚀 ~ add ~ form:', form)
|
const form: any = reactive({
|
||||||
|
name: '',
|
||||||
formRef.value.validate((valid: boolean) => {
|
projectIds: [],
|
||||||
if (valid) {
|
scope: 1,
|
||||||
if (title.value == '新增项目') {
|
orderBy: '100',
|
||||||
add(form).then((res: any) => {
|
remark: ''
|
||||||
ElMessage.success('新增项目成功!')
|
})
|
||||||
dialogVisible.value = false
|
const rules = {
|
||||||
emit('submit')
|
name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
||||||
})
|
projectIds: [{ required: true, message: '请选择工程项目', trigger: 'change' }],
|
||||||
} else {
|
orderBy: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||||
audit(form).then((res: any) => {
|
}
|
||||||
ElMessage.success('修改项目成功!')
|
const addFn = () => {
|
||||||
dialogVisible.value = false
|
console.log('🚀 ~ add ~ form:', form)
|
||||||
emit('submit')
|
|
||||||
})
|
formRef.value.validate((valid: boolean) => {
|
||||||
}
|
if (valid) {
|
||||||
}
|
if (title.value == '新增项目') {
|
||||||
})
|
add({ ...form, projectIds: form.scope == 1 ? ['WIRELESS_PROJECT_ID'] : form.projectIds }).then(
|
||||||
}
|
(res: any) => {
|
||||||
const handleTree = (data: any) => {
|
ElMessage.success('新增项目成功!')
|
||||||
if (data && data.length != 0) {
|
dialogVisible.value = false
|
||||||
data.map((item: any) => {
|
emit('submit')
|
||||||
if (item.level != 2) {
|
}
|
||||||
item.disabled = true
|
)
|
||||||
} else {
|
} else {
|
||||||
item.disabled = false
|
audit({ ...form, projectIds: form.scope == 1 ? ['WIRELESS_PROJECT_ID'] : form.projectIds }).then((res: any) => {
|
||||||
}
|
ElMessage.success('修改项目成功!')
|
||||||
})
|
dialogVisible.value = false
|
||||||
}
|
emit('submit')
|
||||||
}
|
})
|
||||||
const open = ref((row: any) => {
|
}
|
||||||
formRef.value?.resetFields()
|
}
|
||||||
// deviceTree({}).then((res: any) => {
|
})
|
||||||
// res.data.forEach((item: any) => {
|
}
|
||||||
// item.children.forEach((child: any) => {
|
const handleTree = (data: any) => {
|
||||||
// child.children = []
|
if (data && data.length != 0) {
|
||||||
// })
|
data.map((item: any) => {
|
||||||
// })
|
if (item.level != 2) {
|
||||||
// Engineering.value = res.data
|
item.disabled = true
|
||||||
// })
|
} else {
|
||||||
getztProjectTree().then((res: any) => {
|
item.disabled = false
|
||||||
res.data.forEach((item: any, index: any) => {
|
}
|
||||||
if (!item.children || item.children.length == 0) {
|
})
|
||||||
res.data.splice(index, 1)
|
}
|
||||||
return
|
}
|
||||||
}
|
const open = ref((row: any) => {
|
||||||
item.newList = []
|
formRef.value?.resetFields()
|
||||||
item.children.forEach((vv: any, vvs: any) => {
|
// deviceTree({}).then((res: any) => {
|
||||||
vv.children.forEach((ss: any, ssIndex: any) => {
|
// res.data.forEach((item: any) => {
|
||||||
if (ss.level == 1) {
|
// item.children.forEach((child: any) => {
|
||||||
item.newList.push(ss)
|
// child.children = []
|
||||||
}
|
// })
|
||||||
})
|
// })
|
||||||
})
|
// Engineering.value = res.data
|
||||||
item.disabled = true
|
// })
|
||||||
if (item.children && item.children.length != 0) {
|
getztProjectTree().then((res: any) => {
|
||||||
item.children.forEach((vv: any, vvs: any) => {
|
res.data.forEach((item: any, index: any) => {
|
||||||
vv.disabled = true
|
if (!item.children || item.children.length == 0) {
|
||||||
if (item.name.includes('治理')) {
|
res.data.splice(index, 1)
|
||||||
if (vv.level === 0) {
|
return
|
||||||
vv.disabled = true
|
}
|
||||||
} else {
|
item.newList = []
|
||||||
vv.disabled = false
|
item.children.forEach((vv: any, vvs: any) => {
|
||||||
}
|
vv.children.forEach((ss: any, ssIndex: any) => {
|
||||||
// item.children = item.newList
|
if (ss.level == 1) {
|
||||||
}
|
item.newList.push(ss)
|
||||||
if (item.name.includes('便携式')) {
|
}
|
||||||
if (vv.level === 1) {
|
})
|
||||||
vv.disabled = false
|
})
|
||||||
} else {
|
item.disabled = true
|
||||||
vv.disabled = true
|
if (item.children && item.children.length != 0) {
|
||||||
}
|
item.children.forEach((vv: any, vvs: any) => {
|
||||||
}
|
vv.disabled = true
|
||||||
if (vv.children && vv.children.length != 0) {
|
if (item.name.includes('治理')) {
|
||||||
vv.children.forEach((kk: any, kks: any) => {
|
if (vv.level === 0) {
|
||||||
if (item.name.includes('便携式') && kk.level === 2) {
|
vv.disabled = true
|
||||||
kk.disabled = true
|
} else {
|
||||||
vv.children.splice(kks, 1)
|
vv.disabled = false
|
||||||
}
|
}
|
||||||
// else {
|
// item.children = item.newList
|
||||||
// kk.disabled = true
|
}
|
||||||
// }
|
if (item.name.includes('便携式')) {
|
||||||
})
|
if (vv.level === 1) {
|
||||||
}
|
vv.disabled = false
|
||||||
})
|
} else {
|
||||||
}
|
vv.disabled = true
|
||||||
})
|
}
|
||||||
Engineering.value = removeData(res.data)
|
}
|
||||||
})
|
if (vv.children && vv.children.length != 0) {
|
||||||
title.value = row.title
|
vv.children.forEach((kk: any, kks: any) => {
|
||||||
dialogVisible.value = true
|
if (item.name.includes('便携式') && kk.level === 2) {
|
||||||
if (row.title == '新增项目') {
|
kk.disabled = true
|
||||||
form.name = ''
|
vv.children.splice(kks, 1)
|
||||||
form.projectIds = []
|
}
|
||||||
form.orderBy = '100'
|
// else {
|
||||||
form.remark = ''
|
// kk.disabled = true
|
||||||
} else {
|
// }
|
||||||
for (let key in form) {
|
})
|
||||||
form[key] = row.row[key] || ''
|
}
|
||||||
}
|
})
|
||||||
form.id = row.row.id
|
}
|
||||||
}
|
})
|
||||||
})
|
Engineering.value = removeData(res.data)
|
||||||
const removeData = arr => {
|
})
|
||||||
return arr
|
title.value = row.title
|
||||||
.map(item => {
|
dialogVisible.value = true
|
||||||
if (item.children) {
|
if (row.title == '新增项目') {
|
||||||
item.children = removeData(item.children)
|
form.name = ''
|
||||||
}
|
form.projectIds = []
|
||||||
return item.level <= 1 ? item : {}
|
form.orderBy = '100'
|
||||||
})
|
form.remark = ''
|
||||||
.filter(item => Object.keys(item).length > 0)
|
} else {
|
||||||
}
|
for (let key in form) {
|
||||||
|
form[key] = row.row[key] || ''
|
||||||
const handleClose = () => {
|
}
|
||||||
dialogVisible.value = false
|
form.id = row.row.id
|
||||||
}
|
}
|
||||||
defineExpose({ open })
|
})
|
||||||
</script>
|
const removeData = arr => {
|
||||||
<style lang="scss" scoped></style>
|
return arr
|
||||||
|
.map(item => {
|
||||||
|
if (item.children) {
|
||||||
|
item.children = removeData(item.children)
|
||||||
|
}
|
||||||
|
return item.level <= 1 ? item : {}
|
||||||
|
})
|
||||||
|
.filter(item => Object.keys(item).length > 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
<span style="display: flex; align-items: center">
|
<span style="display: flex; align-items: center">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
|
|
||||||
<el-tooltip class="item" effect="dark" content="修改项目" placement="top">
|
<el-tooltip class="item" effect="dark" content="修改项目" placement="top" v-if="hasAdmin || item.createBy == adminInfo.id">
|
||||||
<Edit
|
<Edit
|
||||||
style="margin-left: 5px; width: 16px"
|
style="margin-left: 5px; width: 16px"
|
||||||
class="xiaoshou color"
|
class="xiaoshou color"
|
||||||
@@ -36,28 +36,43 @@
|
|||||||
/>
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
<div style="display: flex; justify-content: end">
|
<div style="height: 32px">
|
||||||
<el-button
|
<div
|
||||||
class="color"
|
style="display: flex; justify-content: end"
|
||||||
icon="el-icon-Share"
|
v-if="hasAdmin || item.createBy == adminInfo.id"
|
||||||
style="padding: 3px 0"
|
|
||||||
type="text"
|
|
||||||
@click="Aclick(item)"
|
|
||||||
>
|
>
|
||||||
设计
|
<!-- <el-button
|
||||||
</el-button>
|
class="color"
|
||||||
<!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green"
|
icon="el-icon-Promotion"
|
||||||
|
style="padding: 3px 0"
|
||||||
|
type="text"
|
||||||
|
v-if="bindId != item.id"
|
||||||
|
@click="activate(item)"
|
||||||
|
>
|
||||||
|
绑定
|
||||||
|
</el-button> -->
|
||||||
|
<el-button
|
||||||
|
class="color"
|
||||||
|
icon="el-icon-Share"
|
||||||
|
style="padding: 3px 0"
|
||||||
|
type="text"
|
||||||
|
@click="Aclick(item)"
|
||||||
|
>
|
||||||
|
设计
|
||||||
|
</el-button>
|
||||||
|
<!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green"
|
||||||
type="text" @click="shejid(item)">设计</el-button> -->
|
type="text" @click="shejid(item)">设计</el-button> -->
|
||||||
<!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text"
|
<!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text"
|
||||||
@click="shejid(item)">编辑</el-button> -->
|
@click="shejid(item)">编辑</el-button> -->
|
||||||
<el-button
|
<el-button
|
||||||
icon="el-icon-Delete"
|
icon="el-icon-Delete"
|
||||||
style="padding: 3px 0; color: red"
|
style="padding: 3px 0; color: red"
|
||||||
type="text"
|
type="text"
|
||||||
@click="deleted(item)"
|
@click="deleted(item)"
|
||||||
>
|
>
|
||||||
删除
|
删除
|
||||||
</el-button>
|
</el-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
@@ -95,15 +110,18 @@ import TableStore from '@/utils/tableStore'
|
|||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
|
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { audit, add } from '@/api/cs-harmonic-boot/mxgraph'
|
import { audit, add, savePageIdWithUser, getByUserId } from '@/api/cs-harmonic-boot/mxgraph'
|
||||||
import { Edit } from '@element-plus/icons-vue'
|
import { Edit } from '@element-plus/icons-vue'
|
||||||
import popup from './components/popup.vue'
|
import popup from './components/popup.vue'
|
||||||
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'ypt'
|
const VITE_FLAG = import.meta.env.VITE_NAME == 'ypt'
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'mxgraph/graph-list'
|
name: 'mxgraph/graph-list'
|
||||||
})
|
})
|
||||||
|
const adminInfo = useAdminInfo()
|
||||||
|
|
||||||
|
const hasAdmin = adminInfo.roleCode.some(item => item.includes('operation_manager')|| item.includes('root'))
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
const popupRef = ref()
|
const popupRef = ref()
|
||||||
let DOMIN = window.location.origin
|
let DOMIN = window.location.origin
|
||||||
@@ -120,8 +138,12 @@ const tableStore = new TableStore({
|
|||||||
})
|
})
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
tableStore.table.params.searchValue = ''
|
tableStore.table.params.searchValue = ''
|
||||||
|
tableStore.table.params.currentUserId = adminInfo.id
|
||||||
|
// let aa=['operation_manager',]
|
||||||
|
tableStore.table.params.roleCode = adminInfo.roleCode.join(',')
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tableStore.table.ref = tableRef.value
|
tableStore.table.ref = tableRef.value
|
||||||
|
getBindId()
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
tableStore.table.loading = false
|
tableStore.table.loading = false
|
||||||
})
|
})
|
||||||
@@ -131,6 +153,31 @@ const onSubmitadd = () => {
|
|||||||
title: '新增项目'
|
title: '新增项目'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const bindId = ref('')
|
||||||
|
const activate = (e: any) => {
|
||||||
|
ElMessageBox.confirm('是否绑定?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
savePageIdWithUser({ pageId: e.id, userId: adminInfo.id }).then(res => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '操作成功'
|
||||||
|
})
|
||||||
|
bindId.value = e.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
const getBindId = () => {
|
||||||
|
getByUserId({ userId: adminInfo.id }).then(res => {
|
||||||
|
bindId.value = res.data.pageId
|
||||||
|
})
|
||||||
|
}
|
||||||
const querdata = (e: any) => {}
|
const querdata = (e: any) => {}
|
||||||
const editd = (e: any) => {
|
const editd = (e: any) => {
|
||||||
popupRef.value.open({
|
popupRef.value.open({
|
||||||
@@ -142,7 +189,7 @@ const editd = (e: any) => {
|
|||||||
const Aclick = (e: any) => {
|
const Aclick = (e: any) => {
|
||||||
//window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=zl`)
|
//window.open(window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=zl`)
|
||||||
window.open(
|
window.open(
|
||||||
window.location.origin +
|
window.location.origin +
|
||||||
`/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=${VITE_FLAG ? 'ypt' : 'zl'}`
|
`/zutai/?id=${e.id}&&name=${e.name}&&preview=false&&graphicDisplay=${VITE_FLAG ? 'ypt' : 'zl'}`
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -179,7 +226,10 @@ const deleted = (e: any) => {
|
|||||||
|
|
||||||
const imgData = (e: any) => {
|
const imgData = (e: any) => {
|
||||||
window.open(
|
window.open(
|
||||||
window.location.origin + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=${VITE_FLAG ? 'ypt' : 'zl'}#/preview_ZL`
|
window.location.origin +
|
||||||
|
`/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=${VITE_FLAG ? 'ypt' : 'zl'}#/preview_${
|
||||||
|
VITE_FLAG ? 'YPT' : 'ZL'
|
||||||
|
}`
|
||||||
)
|
)
|
||||||
// window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=zl#/preview_ZL`)
|
// window.open('http://192.168.1.128:4001' + `/zutai/?id=${e.id}&&name=${e.name}&&preview=true&&graphicDisplay=zl#/preview_ZL`)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -219,6 +219,13 @@ const exportEvent = () => {
|
|||||||
formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
||||||
formd.value.flag = TableHeaderRef.value.datePickerRef.interval
|
formd.value.flag = TableHeaderRef.value.datePickerRef.interval
|
||||||
ElMessage('生成报告中,请稍等!')
|
ElMessage('生成报告中,请稍等!')
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear() // 4位年份
|
||||||
|
const month = now.getMonth() + 1 // 月份0-11,需+1
|
||||||
|
const day = now.getDate() // 日期1-31
|
||||||
|
|
||||||
|
// 格式化YYYY - MM - DD(补零)
|
||||||
|
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
|
||||||
getLineExport(formd.value).then((res: any) => {
|
getLineExport(formd.value).then((res: any) => {
|
||||||
let blob = new Blob([res], {
|
let blob = new Blob([res], {
|
||||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
||||||
@@ -227,7 +234,7 @@ const exportEvent = () => {
|
|||||||
const url = window.URL.createObjectURL(blob)
|
const url = window.URL.createObjectURL(blob)
|
||||||
const link = document.createElement('a') // 创建a标签
|
const link = document.createElement('a') // 创建a标签
|
||||||
link.href = url
|
link.href = url
|
||||||
link.download = '监测点报告' // 设置下载的文件名
|
link.download = dotList.value.name+formattedDate // 设置下载的文件名
|
||||||
document.body.appendChild(link)
|
document.body.appendChild(link)
|
||||||
link.click() //执行下载
|
link.click() //执行下载
|
||||||
document.body.removeChild(link)
|
document.body.removeChild(link)
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main" :style="height">
|
<div class="default-main" :style="height">
|
||||||
<splitpanes style="height: 100%" id="navigation-splitpanes">
|
<splitpanes style="height: 100%" id="navigation-splitpanes">
|
||||||
<pane :size="size">
|
<pane :size="size">
|
||||||
|
|
||||||
<CloudDeviceEntryTree
|
<CloudDeviceEntryTree
|
||||||
ref="TerminalRef"
|
ref="TerminalRef"
|
||||||
@node-click="handleNodeClick"
|
@node-click="handleNodeClick"
|
||||||
@@ -78,6 +77,7 @@ import { exportModel } from '@/api/cs-harmonic-boot/datatrend'
|
|||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'harmonic-boot/report/word'
|
name: 'harmonic-boot/report/word'
|
||||||
})
|
})
|
||||||
|
|
||||||
const height = mainHeight(20)
|
const height = mainHeight(20)
|
||||||
const size = ref(0)
|
const size = ref(0)
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
@@ -121,7 +121,7 @@ const choose = (files: any) => {
|
|||||||
}
|
}
|
||||||
// 生成
|
// 生成
|
||||||
const exportEvent = () => {
|
const exportEvent = () => {
|
||||||
console.log("🚀 ~ exportEvent ~ dotList.value:", dotList.value)
|
console.log('🚀 ~ exportEvent ~ dotList.value:', dotList.value)
|
||||||
if (dotList.value?.level != 4) {
|
if (dotList.value?.level != 4) {
|
||||||
return ElMessage.warning('请选择监测点进行报告生成!')
|
return ElMessage.warning('请选择监测点进行报告生成!')
|
||||||
}
|
}
|
||||||
@@ -148,6 +148,13 @@ const exportEvent = () => {
|
|||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
ElMessage('生成报告中...')
|
ElMessage('生成报告中...')
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear() // 4位年份
|
||||||
|
const month = now.getMonth() + 1 // 月份0-11,需+1
|
||||||
|
const day = now.getDate() // 日期1-31
|
||||||
|
|
||||||
|
// 格式化YYYY - MM - DD(补零)
|
||||||
|
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
|
||||||
exportModel(form).then((res: any) => {
|
exportModel(form).then((res: any) => {
|
||||||
let blob = new Blob([res], {
|
let blob = new Blob([res], {
|
||||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
||||||
@@ -156,7 +163,7 @@ const exportEvent = () => {
|
|||||||
const url = window.URL.createObjectURL(blob)
|
const url = window.URL.createObjectURL(blob)
|
||||||
const link = document.createElement('a') // 创建a标签
|
const link = document.createElement('a') // 创建a标签
|
||||||
link.href = url
|
link.href = url
|
||||||
link.download = dotList.value.name // 设置下载的文件名
|
link.download = dotList.value.name + formattedDate // 设置下载的文件名
|
||||||
document.body.appendChild(link)
|
document.body.appendChild(link)
|
||||||
link.click() //执行下载
|
link.click() //执行下载
|
||||||
document.body.removeChild(link)
|
document.body.removeChild(link)
|
||||||
|
|||||||
@@ -1,147 +1,147 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main" :style="height">
|
<div class="default-main" :style="height">
|
||||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||||
<pane :size="size">
|
<pane :size="size">
|
||||||
<PointTree :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
|
<PointTree :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
|
||||||
@Policy="stencil">
|
@Policy="stencil">
|
||||||
</PointTree>
|
</PointTree>
|
||||||
</pane>
|
</pane>
|
||||||
<pane :size="(100 - size)" style="background: #fff" :style="height">
|
<pane :size="(100 - size)" style="background: #fff" :style="height">
|
||||||
<TableHeader ref="TableHeaderRef" datePicker>
|
<TableHeader ref="TableHeaderRef" datePicker>
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="模板策略">
|
<el-form-item label="模板策略">
|
||||||
<el-select v-model.trim="Template" @change="changetype" placeholder="请选择模版" value-key="id">
|
<el-select v-model.trim="Template" @change="changetype" placeholder="请选择模版" value-key="id">
|
||||||
<el-option v-for="item in templatePolicy" :key="item.id" :label="item.name"
|
<el-option v-for="item in templatePolicy" :key="item.id" :label="item.name"
|
||||||
:value="item"></el-option>
|
:value="item"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template #operation>
|
<template #operation>
|
||||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button>
|
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div id="luckysheet" v-loading="tableStore.table.loading"
|
<div id="luckysheet" v-loading="tableStore.table.loading"
|
||||||
:style="`height: calc(${tableStore.table.height} + 45px)`"></div>
|
:style="`height: calc(${tableStore.table.height} + 45px)`"></div>
|
||||||
</div>
|
</div>
|
||||||
</pane>
|
</pane>
|
||||||
</splitpanes>
|
</splitpanes>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref, provide } from 'vue'
|
import { onMounted, ref, provide } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import PointTree from '@/components/tree/govern/pointTree.vue'
|
import PointTree from '@/components/tree/govern/pointTree.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
||||||
import { exportExcel } from '@/views/system/reportForms/export.js'
|
import { exportExcel } from '@/views/system/reportForms/export.js'
|
||||||
import 'splitpanes/dist/splitpanes.css'
|
import 'splitpanes/dist/splitpanes.css'
|
||||||
import { Splitpanes, Pane } from 'splitpanes'
|
import { Splitpanes, Pane } from 'splitpanes'
|
||||||
// import data from './123.json'
|
// import data from './123.json'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/reportCore/statistics/index'
|
name: 'govern/reportCore/statistics/index'
|
||||||
})
|
})
|
||||||
const height = mainHeight(20)
|
const height = mainHeight(20)
|
||||||
const size = ref(0)
|
const size = ref(0)
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const TableHeaderRef = ref()
|
const TableHeaderRef = ref()
|
||||||
const dotList: any = ref({})
|
const dotList: any = ref({})
|
||||||
const Template: any = ref({})
|
const Template: any = ref({})
|
||||||
const reportForm: any = ref('')
|
const reportForm: any = ref('')
|
||||||
|
|
||||||
const templatePolicy: any = ref([])
|
const templatePolicy: any = ref([])
|
||||||
const reportFormList: any = ref([
|
const reportFormList: any = ref([
|
||||||
{
|
{
|
||||||
value: '1',
|
value: '1',
|
||||||
label: '分析报表'
|
label: '分析报表'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '2',
|
value: '2',
|
||||||
label: '统计报表'
|
label: '统计报表'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '3',
|
value: '3',
|
||||||
label: '自定义报表'
|
label: '自定义报表'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
const tableStore = new TableStore({
|
const tableStore = new TableStore({
|
||||||
url: '/harmonic-boot/customReport/getCustomReport',
|
url: '/harmonic-boot/customReport/getCustomReport',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
column: [],
|
column: [],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
tableStore.table.params.tempId = Template.value.id
|
tableStore.table.params.tempId = Template.value.id
|
||||||
tableStore.table.params.lineId = dotList.value.id
|
tableStore.table.params.lineId = dotList.value.id
|
||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
tableStore.table.data.forEach((item: any) => {
|
tableStore.table.data.forEach((item: any) => {
|
||||||
item.data1 ? (item.data = JSON.parse(item.data1)) : ''
|
item.data1 ? (item.data = JSON.parse(item.data1)) : ''
|
||||||
item.celldata.forEach((k: any) => {
|
item.celldata.forEach((k: any) => {
|
||||||
|
|
||||||
item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
|
item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
luckysheet.create({
|
luckysheet.create({
|
||||||
container: 'luckysheet',
|
container: 'luckysheet',
|
||||||
title: '', // 表 头名
|
title: '', // 表 头名
|
||||||
lang: 'zh', // 中文
|
lang: 'zh', // 中文
|
||||||
showtoolbar: false, // 是否显示工具栏
|
showtoolbar: false, // 是否显示工具栏
|
||||||
showinfobar: false, // 是否显示顶部信息栏
|
showinfobar: false, // 是否显示顶部信息栏
|
||||||
showsheetbar: true, // 是否显示底部sheet按钮
|
showsheetbar: true, // 是否显示底部sheet按钮
|
||||||
data: tableStore.table.data
|
data: tableStore.table.data
|
||||||
// tableStore.table.data
|
// tableStore.table.data
|
||||||
})
|
})
|
||||||
}, 10)
|
}, 10)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
tableStore.table.params.resourceType = 1
|
tableStore.table.params.resourceType = 1
|
||||||
const flag = ref(true)
|
const flag = ref(true)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const dom = document.getElementById('navigation-splitpanes')
|
const dom = document.getElementById('navigation-splitpanes')
|
||||||
if (dom) {
|
if (dom) {
|
||||||
size.value = ((280 / (dom.offsetWidth - 7)) * 100)
|
size.value = ((280 / (dom.offsetWidth - 7)) * 100)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
||||||
// templatePolicy.value = res.data
|
// templatePolicy.value = res.data
|
||||||
|
|
||||||
|
|
||||||
// })
|
// })
|
||||||
|
|
||||||
const stencil = (val: any) => {
|
const stencil = (val: any) => {
|
||||||
templatePolicy.value = val
|
templatePolicy.value = val
|
||||||
Template.value = val[0]
|
Template.value = val[0]
|
||||||
reportForm.value = val[0]?.reportForm
|
reportForm.value = val[0]?.reportForm
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const changetype = (val: any) => {
|
const changetype = (val: any) => {
|
||||||
reportForm.value = val.reportForm
|
reportForm.value = val.reportForm
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleNodeClick = (data: any, node: any) => {
|
const handleNodeClick = (data: any, node: any) => {
|
||||||
if (data?.type == "line") {
|
if (data?.type == "line") {
|
||||||
dotList.value = data
|
dotList.value = data
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
}, 500)
|
}, 500)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportEvent = () => {
|
const exportEvent = () => {
|
||||||
exportExcel(luckysheet.getAllSheets(), '统计报表下载')
|
exportExcel(luckysheet.getAllSheets(), '统计报表下载')
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.splitpanes.default-theme .splitpanes__pane {
|
.splitpanes.default-theme .splitpanes__pane {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template #operation>
|
<template #operation>
|
||||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button>
|
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<div class="box" v-loading="tableStore.table.loading">
|
<div class="box" v-loading="tableStore.table.loading">
|
||||||
@@ -45,6 +45,7 @@ import { exportExcel } from '@/views/system/reportForms/export.js'
|
|||||||
import 'splitpanes/dist/splitpanes.css'
|
import 'splitpanes/dist/splitpanes.css'
|
||||||
import DatePicker from '@/components/form/datePicker/time.vue'
|
import DatePicker from '@/components/form/datePicker/time.vue'
|
||||||
import { Splitpanes, Pane } from 'splitpanes'
|
import { Splitpanes, Pane } from 'splitpanes'
|
||||||
|
const name = ref('')
|
||||||
// import data from './123.json'
|
// import data from './123.json'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/reportCore/statisticsWx/index'
|
name: 'govern/reportCore/statisticsWx/index'
|
||||||
@@ -73,6 +74,7 @@ const tableStore = new TableStore({
|
|||||||
delete tableStore.table.params.timeFlag
|
delete tableStore.table.params.timeFlag
|
||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
|
name.value = dotList.value.name
|
||||||
tableStore.table.data.forEach((item: any) => {
|
tableStore.table.data.forEach((item: any) => {
|
||||||
item.data1 ? (item.data = JSON.parse(item.data1)) : ''
|
item.data1 ? (item.data = JSON.parse(item.data1)) : ''
|
||||||
item.celldata.forEach((k: any) => {
|
item.celldata.forEach((k: any) => {
|
||||||
@@ -140,7 +142,14 @@ const handleNodeClick = (data: any, node: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const exportEvent = () => {
|
const exportEvent = () => {
|
||||||
exportExcel(luckysheet.getAllSheets(), '统计报表下载')
|
const now = new Date()
|
||||||
|
const year = now.getFullYear() // 4位年份
|
||||||
|
const month = now.getMonth() + 1 // 月份0-11,需+1
|
||||||
|
const day = now.getDate() // 日期1-31
|
||||||
|
|
||||||
|
// 格式化YYYY - MM - DD(补零)
|
||||||
|
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
|
||||||
|
exportExcel(luckysheet.getAllSheets(), name.value + formattedDate)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@@ -5,36 +5,51 @@
|
|||||||
<!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
|
<!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
|
||||||
@Policy="stencil">
|
@Policy="stencil">
|
||||||
</pointTreeWx> -->
|
</pointTreeWx> -->
|
||||||
<CloudDeviceEntryTree
|
<CloudDeviceEntryTree
|
||||||
ref="TerminalRef"
|
ref="TerminalRef"
|
||||||
template
|
template
|
||||||
@Policy="stencil"
|
@Policy="stencil"
|
||||||
@node-click="handleNodeClick"
|
@node-click="handleNodeClick"
|
||||||
@init="handleNodeClick"
|
@init="handleNodeClick"
|
||||||
></CloudDeviceEntryTree>
|
></CloudDeviceEntryTree>
|
||||||
</pane>
|
</pane>
|
||||||
<pane :size="(100 - size)" style="background: #fff" :style="height">
|
<pane :size="100 - size" style="background: #fff" :style="height">
|
||||||
<TableHeader ref="TableHeaderRef" :showReset="false">
|
<TableHeader datePicker ref="TableHeaderRef" :showReset="false">
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="时间:">
|
<!-- <el-form-item label="时间:">
|
||||||
<DatePicker ref="datePickerRef"></DatePicker>
|
<DatePicker ref="datePickerRef"></DatePicker>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item label="模板策略">
|
<el-form-item label="模板策略">
|
||||||
<el-select v-model.trim="Template" @change="changetype" placeholder="请选择模版" value-key="id">
|
<el-select
|
||||||
<el-option v-for="item in templatePolicy" :key="item.id" :label="item.name"
|
v-model.trim="Template"
|
||||||
:value="item"></el-option>
|
@change="changetype"
|
||||||
|
placeholder="请选择模版"
|
||||||
|
value-key="id"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in templatePolicy"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template #operation>
|
<template #operation>
|
||||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button>
|
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<div class="box" v-loading="tableStore.table.loading">
|
<div class="box" v-loading="tableStore.table.loading">
|
||||||
<div id="luckysheet"
|
<div
|
||||||
|
id="luckysheet"
|
||||||
:style="`height: calc(${tableStore.table.height} + 45px)`"
|
:style="`height: calc(${tableStore.table.height} + 45px)`"
|
||||||
v-if="tableStore.table.data.length > 0"></div>
|
v-if="tableStore.table.data.length > 0"
|
||||||
<el-empty :style="`height: calc(${tableStore.table.height} + 45px)`" v-else description="暂无数据" />
|
></div>
|
||||||
|
<el-empty
|
||||||
|
:style="`height: calc(${tableStore.table.height} + 45px)`"
|
||||||
|
v-else
|
||||||
|
description="暂无数据"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</pane>
|
</pane>
|
||||||
</splitpanes>
|
</splitpanes>
|
||||||
@@ -66,23 +81,23 @@ const Template: any = ref({})
|
|||||||
const reportForm: any = ref('')
|
const reportForm: any = ref('')
|
||||||
const datePickerRef = ref()
|
const datePickerRef = ref()
|
||||||
const templatePolicy: any = ref([])
|
const templatePolicy: any = ref([])
|
||||||
|
const name = ref('')
|
||||||
const tableStore = new TableStore({
|
const tableStore = new TableStore({
|
||||||
url: '/cs-harmonic-boot/customReport/getSensitiveUserReport',
|
url: '/cs-harmonic-boot/customReport/getCustomReport',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
column: [],
|
column: [],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
tableStore.table.params.tempId = Template.value.id
|
tableStore.table.params.tempId = Template.value.id
|
||||||
tableStore.table.params.lineId = dotList.value.id
|
tableStore.table.params.lineId = dotList.value.id
|
||||||
tableStore.table.params.startTime = datePickerRef.value.timeValue[0],
|
// tableStore.table.params.startTime = datePickerRef.value.timeValue[0],
|
||||||
tableStore.table.params.endTime = datePickerRef.value.timeValue[1],
|
// tableStore.table.params.endTime = datePickerRef.value.timeValue[1],
|
||||||
delete tableStore.table.params.searchBeginTime
|
delete tableStore.table.params.searchBeginTime
|
||||||
delete tableStore.table.params.searchEndTime
|
delete tableStore.table.params.searchEndTime
|
||||||
delete tableStore.table.params.timeFlag
|
delete tableStore.table.params.timeFlag
|
||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
console.log("🚀 ~ tableStore.table:", tableStore.table)
|
console.log('🚀 ~ tableStore.table:', tableStore.table)
|
||||||
|
name.value = dotList.value.name
|
||||||
// tableStore.table.data.forEach((item: any) => {
|
// tableStore.table.data.forEach((item: any) => {
|
||||||
// item.data1 ? (item.data = JSON.parse(item.data1)) : ''
|
// item.data1 ? (item.data = JSON.parse(item.data1)) : ''
|
||||||
// item.celldata.forEach((k: any) => {
|
// item.celldata.forEach((k: any) => {
|
||||||
@@ -90,7 +105,13 @@ const tableStore = new TableStore({
|
|||||||
// item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
|
// item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
|
||||||
// })
|
// })
|
||||||
// })
|
// })
|
||||||
console.log("🚀 ~ tableStore.table:", tableStore.table)
|
tableStore.table.data.forEach((item: any) => {
|
||||||
|
item.data1 ? (item.data = JSON.parse(item.data1)) : ''
|
||||||
|
item.celldata.forEach((k: any) => {
|
||||||
|
item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
|
||||||
|
})
|
||||||
|
})
|
||||||
|
console.log('🚀 ~ tableStore.table:', tableStore.table)
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
luckysheet.create({
|
luckysheet.create({
|
||||||
@@ -100,7 +121,7 @@ const tableStore = new TableStore({
|
|||||||
showtoolbar: false, // 是否显示工具栏
|
showtoolbar: false, // 是否显示工具栏
|
||||||
showinfobar: false, // 是否显示顶部信息栏
|
showinfobar: false, // 是否显示顶部信息栏
|
||||||
showsheetbar: true, // 是否显示底部sheet按钮
|
showsheetbar: true, // 是否显示底部sheet按钮
|
||||||
allowEdit: false, // 禁止所有编辑操作(必填)
|
allowEdit: false, // 禁止所有编辑操作(必填)
|
||||||
data: tableStore.table.data
|
data: tableStore.table.data
|
||||||
// tableStore.table.data
|
// tableStore.table.data
|
||||||
})
|
})
|
||||||
@@ -109,13 +130,13 @@ const tableStore = new TableStore({
|
|||||||
})
|
})
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
tableStore.table.params.resourceType = 1
|
tableStore.table.params.resourceType = 1
|
||||||
tableStore.table.params.customType = 1
|
tableStore.table.params.customType = null
|
||||||
const flag = ref(true)
|
const flag = ref(true)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const dom = document.getElementById('navigation-splitpanes')
|
const dom = document.getElementById('navigation-splitpanes')
|
||||||
if (dom && dom.offsetHeight > 0) {
|
if (dom && dom.offsetHeight > 0) {
|
||||||
size.value = ((280 / (dom.offsetWidth - 7)) * 100)
|
size.value = (280 / (dom.offsetWidth - 7)) * 100
|
||||||
} else {
|
} else {
|
||||||
// 设置默认值
|
// 设置默认值
|
||||||
size.value = 20
|
size.value = 20
|
||||||
@@ -126,14 +147,12 @@ onMounted(() => {
|
|||||||
// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
||||||
// templatePolicy.value = res.data
|
// templatePolicy.value = res.data
|
||||||
|
|
||||||
|
|
||||||
// })
|
// })
|
||||||
|
|
||||||
const stencil = (val: any) => {
|
const stencil = (val: any) => {
|
||||||
templatePolicy.value = val.filter((item: any) => item.name != '稳态治理报表')
|
templatePolicy.value = val.filter((item: any) => item.name != '稳态治理报表')
|
||||||
Template.value = templatePolicy.value[0]
|
Template.value = templatePolicy.value[0]
|
||||||
reportForm.value = templatePolicy.value[0]?.reportForm
|
reportForm.value = templatePolicy.value[0]?.reportForm
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const changetype = (val: any) => {
|
const changetype = (val: any) => {
|
||||||
@@ -141,8 +160,7 @@ const changetype = (val: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleNodeClick = (data: any, node: any) => {
|
const handleNodeClick = (data: any, node: any) => {
|
||||||
|
if (data?.level == 4) {
|
||||||
if (data?.level==4) {
|
|
||||||
dotList.value = data
|
dotList.value = data
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
@@ -153,7 +171,14 @@ const handleNodeClick = (data: any, node: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const exportEvent = () => {
|
const exportEvent = () => {
|
||||||
exportExcel(luckysheet.getAllSheets(), '稳态报表')
|
const now = new Date()
|
||||||
|
const year = now.getFullYear() // 4位年份
|
||||||
|
const month = now.getMonth() + 1 // 月份0-11,需+1
|
||||||
|
const day = now.getDate() // 日期1-31
|
||||||
|
|
||||||
|
// 格式化YYYY - MM - DD(补零)
|
||||||
|
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
|
||||||
|
exportExcel(luckysheet.getAllSheets(), name.value + formattedDate)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
212
src/views/govern/reportCore/statisticsWx/index_zl.vue
Normal file
212
src/views/govern/reportCore/statisticsWx/index_zl.vue
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main" :style="height">
|
||||||
|
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||||
|
<pane :size="size">
|
||||||
|
<!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
|
||||||
|
@Policy="stencil">
|
||||||
|
</pointTreeWx> -->
|
||||||
|
<CloudDeviceEntryTree
|
||||||
|
ref="TerminalRef"
|
||||||
|
template
|
||||||
|
@Policy="stencil"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
@init="handleNodeClick"
|
||||||
|
></CloudDeviceEntryTree>
|
||||||
|
</pane>
|
||||||
|
<pane :size="100 - size" style="background: #fff" :style="height">
|
||||||
|
<TableHeader datePicker ref="TableHeaderRef" :showReset="false">
|
||||||
|
<template v-slot:select>
|
||||||
|
<!-- <el-form-item label="时间:">
|
||||||
|
<DatePicker ref="datePickerRef"></DatePicker>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="模板策略">
|
||||||
|
<el-select
|
||||||
|
v-model.trim="Template"
|
||||||
|
@change="changetype"
|
||||||
|
placeholder="请选择模版"
|
||||||
|
value-key="id"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in templatePolicy"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="监测对象">
|
||||||
|
<el-select
|
||||||
|
filterable
|
||||||
|
v-model="tableStore.table.params.sensitiveUserId"
|
||||||
|
placeholder="请选择监测对象"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
</template>
|
||||||
|
<template #operation>
|
||||||
|
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<div class="box" v-loading="tableStore.table.loading">
|
||||||
|
<div
|
||||||
|
id="luckysheet"
|
||||||
|
:style="`height: calc(${tableStore.table.height} + 45px)`"
|
||||||
|
v-if="tableStore.table.data.length > 0"
|
||||||
|
></div>
|
||||||
|
<el-empty
|
||||||
|
:style="`height: calc(${tableStore.table.height} + 45px)`"
|
||||||
|
v-else
|
||||||
|
description="暂无数据"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</pane>
|
||||||
|
</splitpanes>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, provide } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
||||||
|
import { exportExcel } from '@/views/system/reportForms/export.js'
|
||||||
|
import 'splitpanes/dist/splitpanes.css'
|
||||||
|
import DatePicker from '@/components/form/datePicker/time.vue'
|
||||||
|
import { Splitpanes, Pane } from 'splitpanes'
|
||||||
|
import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTreeZL.vue'
|
||||||
|
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
|
// import data from './123.json'
|
||||||
|
defineOptions({
|
||||||
|
name: 'govern/reportCore/statisticsWx/indexZL'
|
||||||
|
})
|
||||||
|
const height = mainHeight(20)
|
||||||
|
const size = ref(0)
|
||||||
|
const dictData = useDictData()
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const dotList: any = ref({})
|
||||||
|
const Template: any = ref({})
|
||||||
|
const reportForm: any = ref('')
|
||||||
|
const datePickerRef = ref()
|
||||||
|
const templatePolicy: any = ref([])
|
||||||
|
const name = ref('')
|
||||||
|
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/cs-harmonic-boot/customReport/getSensitiveUserReport',
|
||||||
|
method: 'POST',
|
||||||
|
column: [],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
tableStore.table.params.tempId = Template.value.id
|
||||||
|
tableStore.table.params.lineId = dotList.value.id
|
||||||
|
tableStore.table.params.sensitiveUserId = dotList.value.id
|
||||||
|
// ;(tableStore.table.params.startTime = datePickerRef.value.timeValue[0]),
|
||||||
|
// (tableStore.table.params.endTime = datePickerRef.value.timeValue[1]),
|
||||||
|
delete tableStore.table.params.searchBeginTime
|
||||||
|
delete tableStore.table.params.searchEndTime
|
||||||
|
delete tableStore.table.params.timeFlag
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
console.log('🚀 ~ tableStore.table:', tableStore.table.data)
|
||||||
|
name.value = dotList.value.name
|
||||||
|
// tableStore.table.data.forEach((item: any) => {
|
||||||
|
// item.data1 ? (item.data = JSON.parse(item.data1)) : ''
|
||||||
|
// item.celldata.forEach((k: any) => {
|
||||||
|
// item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
luckysheet.create({
|
||||||
|
container: 'luckysheet',
|
||||||
|
title: '', // 表 头名
|
||||||
|
lang: 'zh', // 中文
|
||||||
|
showtoolbar: false, // 是否显示工具栏
|
||||||
|
showinfobar: false, // 是否显示顶部信息栏
|
||||||
|
showsheetbar: true, // 是否显示底部sheet按钮
|
||||||
|
allowEdit: false, // 禁止所有编辑操作(必填)
|
||||||
|
data: tableStore.table.data
|
||||||
|
// tableStore.table.data
|
||||||
|
})
|
||||||
|
}, 10)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
tableStore.table.params.resourceType = 1
|
||||||
|
tableStore.table.params.customType = 1
|
||||||
|
const flag = ref(true)
|
||||||
|
onMounted(() => {
|
||||||
|
initListByIds()
|
||||||
|
nextTick(() => {
|
||||||
|
const dom = document.getElementById('navigation-splitpanes')
|
||||||
|
if (dom && dom.offsetHeight > 0) {
|
||||||
|
size.value = (280 / (dom.offsetWidth - 7)) * 100
|
||||||
|
} else {
|
||||||
|
// 设置默认值
|
||||||
|
size.value = 20
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
||||||
|
// templatePolicy.value = res.data
|
||||||
|
|
||||||
|
// })
|
||||||
|
const idList = ref([])
|
||||||
|
// 监测对象
|
||||||
|
const initListByIds = () => {
|
||||||
|
getListByIds({}).then((res: any) => {
|
||||||
|
if (res.data.length > 0) {
|
||||||
|
idList.value = res.data
|
||||||
|
|
||||||
|
if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
|
||||||
|
tableStore.table.params.sensitiveUserId = idList.value[0].id
|
||||||
|
}
|
||||||
|
// templateListData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const stencil = (val: any) => {
|
||||||
|
console.log('🚀 ~ stencil ~ val:', val)
|
||||||
|
templatePolicy.value = val.filter((item: any) => item.name == '稳态治理报表')
|
||||||
|
Template.value = templatePolicy.value[0]
|
||||||
|
reportForm.value = templatePolicy.value[0]?.reportForm
|
||||||
|
}
|
||||||
|
|
||||||
|
const changetype = (val: any) => {
|
||||||
|
reportForm.value = val.reportForm
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNodeClick = (data: any, node: any) => {
|
||||||
|
if (data?.level == 3) {
|
||||||
|
dotList.value = data
|
||||||
|
setTimeout(() => {
|
||||||
|
tableStore.index()
|
||||||
|
}, 500)
|
||||||
|
} else {
|
||||||
|
tableStore.table.loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const exportEvent = () => {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear() // 4位年份
|
||||||
|
const month = now.getMonth() + 1 // 月份0-11,需+1
|
||||||
|
const day = now.getDate() // 日期1-31
|
||||||
|
|
||||||
|
// 格式化YYYY - MM - DD(补零)
|
||||||
|
const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
|
||||||
|
exportExcel(luckysheet.getAllSheets(), name.value + formattedDate)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.splitpanes.default-theme .splitpanes__pane {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
>
|
>
|
||||||
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
|
||||||
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
>
|
>
|
||||||
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
|
||||||
<el-button type="primary" icon="el-icon-Check" @click="preservation">保存</el-button>
|
<el-button type="primary" icon="el-icon-Check" @click="preservation">保存</el-button>
|
||||||
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ import { useDictData } from '@/stores/dictData'
|
|||||||
const TypeOptions = ref()
|
const TypeOptions = ref()
|
||||||
|
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const DataTypeSelect = dictData.getBasicData('Sensitive_User_Type')
|
const DataTypeSelect = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
const tableStore = inject('tableStore') as TableStore
|
const tableStore = inject('tableStore') as TableStore
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ defineOptions({
|
|||||||
const detail = ref()
|
const detail = ref()
|
||||||
|
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const interferenceType = dictData.getBasicData('Sensitive_User_Type')
|
const interferenceType = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/cs-harmonic-boot/pqSensitiveUser/getList',
|
url: '/cs-harmonic-boot/pqSensitiveUser/getList',
|
||||||
|
|||||||
@@ -1,107 +1,108 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog width="500px" v-model.trim="dialogVisible" :title="title">
|
<el-dialog width="500px" v-model.trim="dialogVisible" :title="title">
|
||||||
|
|
||||||
<el-form :model="form" class="form-one" label-width="auto">
|
<el-form :model="form" class="form-one" label-width="auto">
|
||||||
<el-form-item label="名称">
|
<el-form-item label="名称">
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入名称" />
|
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="编码">
|
<el-form-item label="编码">
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入编码" />
|
<el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入编码" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="类型" v-if="title == '新增'|| title == '编辑'">
|
<el-form-item label="类型" v-if="title == '新增'|| title == '编辑'">
|
||||||
<el-select v-model.trim="form.type" placeholder="请选择类型">
|
<el-select v-model.trim="form.type" placeholder="请选择类型">
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
|
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="备注">
|
<el-form-item label="备注">
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="form.remark" placeholder="请输入备注" />
|
<el-input maxlength="32" show-word-limit v-model.trim="form.remark" placeholder="请输入备注" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="排序">
|
<el-form-item label="排序">
|
||||||
<el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
|
<el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button type="primary" @click="submit">确认</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, inject } from 'vue'
|
import { ref, inject } from 'vue'
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import { addDictTree, updateStatistical } from '@/api/system-boot/dictTree'
|
import { addDictTree, updateStatistical } from '@/api/system-boot/dictTree'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
const emits = defineEmits<{
|
const emits = defineEmits<{
|
||||||
(e: 'over'): void
|
(e: 'over'): void
|
||||||
}>()
|
}>()
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/setting/statisticalType/add'
|
name: 'govern/setting/statisticalType/add'
|
||||||
})
|
})
|
||||||
const tableStore = inject('tableStore') as TableStore
|
const tableStore = inject('tableStore') as TableStore
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
name: '',
|
name: '',
|
||||||
code: '',
|
code: '',
|
||||||
remark: '',
|
remark: '',
|
||||||
// type: 2,
|
// type: 2,
|
||||||
sort: 100,
|
sort: 100,
|
||||||
pid: '',
|
pid: '',
|
||||||
id: ''
|
id: ''
|
||||||
})
|
})
|
||||||
const options = ref([
|
const options = ref([
|
||||||
{ name: '通用指标', value: 2 },
|
{ name: '通用指标', value: 2 },
|
||||||
{ name: 'APF模块', value: 3 },
|
{ name: 'APF模块', value: 3 },
|
||||||
{ name: '星型接线', value: 4 },
|
{ name: '星型接线', value: 4 },
|
||||||
{ name: '角型接线', value: 5 },
|
{ name: '角型接线', value: 5 },
|
||||||
{ name: 'V型接线', value: 6 },
|
{ name: 'V型接线', value: 6 },
|
||||||
])
|
{ name: '驾驶舱指标', value: 7 },
|
||||||
|
])
|
||||||
const dialogVisible = ref(false)
|
|
||||||
const title = ref('新增菜单')
|
const dialogVisible = ref(false)
|
||||||
const open = (text: string, data?: anyObj) => {
|
const title = ref('新增菜单')
|
||||||
title.value = text
|
const open = (text: string, data?: anyObj) => {
|
||||||
for (let key in form) {
|
title.value = text
|
||||||
form[key] = data ? data[key] : ''
|
for (let key in form) {
|
||||||
|
form[key] = data ? data[key] : ''
|
||||||
if (key == 'sort') {
|
|
||||||
|
if (key == 'sort') {
|
||||||
form[key] = data?.sort ? data[key] : 100
|
|
||||||
// console.log("🚀 ~ open ~ form[key]:", form[key])
|
form[key] = data?.sort ? data[key] : 100
|
||||||
}
|
// console.log("🚀 ~ open ~ form[key]:", form[key])
|
||||||
}
|
}
|
||||||
dialogVisible.value = true
|
}
|
||||||
}
|
dialogVisible.value = true
|
||||||
const submit = async () => {
|
}
|
||||||
// 非空校验
|
const submit = async () => {
|
||||||
for (let key in form) {
|
// 非空校验
|
||||||
if (key != 'pid' && key != 'id' && key != 'sort') {
|
for (let key in form) {
|
||||||
if (!form[key]) {
|
if (key != 'pid' && key != 'id' && key != 'sort') {
|
||||||
ElMessage.warning('请填写完整信息')
|
if (!form[key]) {
|
||||||
return
|
ElMessage.warning('请填写完整信息')
|
||||||
}
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (form.id) {
|
}
|
||||||
await updateStatistical(form).then(res => {
|
if (form.id) {
|
||||||
ElMessage.success('编辑成功')
|
await updateStatistical(form).then(res => {
|
||||||
})
|
ElMessage.success('编辑成功')
|
||||||
} else {
|
})
|
||||||
if (!form.pid) {
|
} else {
|
||||||
form.pid = tableStore.table.params.pid
|
if (!form.pid) {
|
||||||
}
|
form.pid = tableStore.table.params.pid
|
||||||
await addDictTree(form).then(res => {
|
}
|
||||||
ElMessage.success('新增成功')
|
await addDictTree(form).then(res => {
|
||||||
})
|
ElMessage.success('新增成功')
|
||||||
}
|
})
|
||||||
emits('over')
|
}
|
||||||
dialogVisible.value = false
|
emits('over')
|
||||||
}
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
defineExpose({ open })
|
|
||||||
</script>
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -1,154 +1,155 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='default-main'>
|
<div class="default-main">
|
||||||
<TableHeader :showReset='false'>
|
<TableHeader :showReset="false">
|
||||||
<template v-slot:operation>
|
<template v-slot:operation>
|
||||||
<el-button :icon='Plus' type='primary' @click='addMenu'>新增</el-button>
|
<el-button :icon="Plus" type="primary" @click="addMenu">新增</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref='tableRef' />
|
<Table ref="tableRef" />
|
||||||
<!-- <el-tabs type="border-card">
|
<!-- <el-tabs type="border-card">
|
||||||
<el-tab-pane v-for="item in tabPane" :label="item.name">
|
<el-tab-pane v-for="item in tabPane" :label="item.name">
|
||||||
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs> -->
|
</el-tabs> -->
|
||||||
|
|
||||||
|
<PopupBinding ref="bindingRef"></PopupBinding>
|
||||||
|
<PopupAdd ref="addRef" @over="init"></PopupAdd>
|
||||||
|
</div>
|
||||||
<PopupBinding ref='bindingRef'></PopupBinding>
|
</template>
|
||||||
<PopupAdd ref='addRef' @over='init'></PopupAdd>
|
<script setup lang="ts">
|
||||||
</div>
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
</template>
|
import { ref, onMounted, provide } from 'vue'
|
||||||
<script setup lang='ts'>
|
import TableStore from '@/utils/tableStore'
|
||||||
import { Plus } from '@element-plus/icons-vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import { ref, onMounted, provide } from 'vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import PopupBinding from './binding.vue'
|
||||||
import Table from '@/components/table/index.vue'
|
import PopupAdd from './add.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||||
import PopupBinding from './binding.vue'
|
import { dicDelete } from '@/api/system-boot/dic'
|
||||||
import PopupAdd from './add.vue'
|
|
||||||
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
defineOptions({
|
||||||
import { dicDelete } from '@/api/system-boot/dic'
|
name: 'govern/setting/statisticalType'
|
||||||
|
})
|
||||||
defineOptions({
|
const tabPane = [{ name: '在线监测' }, { name: '治理' }, { name: '测试' }]
|
||||||
name: 'govern/setting/statisticalType'
|
const tableRef = ref()
|
||||||
})
|
const bindingRef = ref()
|
||||||
const tabPane = [{ name: '在线监测' }, { name: '治理' }, { name: '测试' }]
|
const addRef = ref()
|
||||||
const tableRef = ref()
|
const options = ref([
|
||||||
const bindingRef = ref()
|
{ name: '通用指标', value: 2 },
|
||||||
const addRef = ref()
|
{ name: 'APF模块', value: 3 },
|
||||||
const options = ref([
|
{ name: '星型接线', value: 4 },
|
||||||
{ name: '通用指标', value: 2 },
|
{ name: '角型接线', value: 5 },
|
||||||
{ name: 'APF模块', value: 3 },
|
{ name: 'V型接线', value: 6 },
|
||||||
{ name: '星型接线', value: 4 },
|
{ name: '驾驶舱指标', value: 7 }
|
||||||
{ name: '角型接线', value: 5 },
|
])
|
||||||
{ name: 'V型接线', value: 6 },
|
const tableStore = new TableStore({
|
||||||
])
|
showPage: false,
|
||||||
const tableStore = new TableStore({
|
url: '/system-boot/dictTree/query',
|
||||||
showPage: false,
|
method: 'POST',
|
||||||
url: '/system-boot/dictTree/query',
|
paramsPOST: true,
|
||||||
method: 'POST',
|
// publicHeight: 60,
|
||||||
paramsPOST: true,
|
column: [
|
||||||
// publicHeight: 60,
|
{
|
||||||
column: [
|
title: '序号',
|
||||||
{
|
width: 80,
|
||||||
title: '序号', width: 80, formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ title: '统计类型', field: 'name' },
|
{ title: '统计类型', field: 'name' },
|
||||||
{
|
{
|
||||||
title: '类型', field: 'type',
|
title: '类型',
|
||||||
width: 200,
|
field: 'type',
|
||||||
formatter: row => {
|
width: 200,
|
||||||
return options.value.filter((item: any) => item.value == row.cellValue)[0]?.name
|
formatter: row => {
|
||||||
},
|
return options.value.filter((item: any) => item.value == row.cellValue)[0]?.name
|
||||||
},
|
}
|
||||||
{
|
},
|
||||||
title: '操作',
|
{
|
||||||
align: 'center',
|
title: '操作',
|
||||||
width: '200',
|
align: 'center',
|
||||||
render: 'buttons',
|
width: '200',
|
||||||
buttons: [
|
render: 'buttons',
|
||||||
{
|
buttons: [
|
||||||
name: 'edit',
|
{
|
||||||
title: '绑定指标',
|
name: 'edit',
|
||||||
type: 'primary',
|
title: '绑定指标',
|
||||||
icon: 'el-icon-Connection',
|
type: 'primary',
|
||||||
render: 'basicButton',
|
icon: 'el-icon-Connection',
|
||||||
click: row => {
|
render: 'basicButton',
|
||||||
bindingRef.value.open(row.id)
|
click: row => {
|
||||||
}
|
bindingRef.value.open(row.id)
|
||||||
},
|
}
|
||||||
{
|
},
|
||||||
name: 'edit',
|
{
|
||||||
title: '编辑',
|
name: 'edit',
|
||||||
type: 'primary',
|
title: '编辑',
|
||||||
icon: 'el-icon-EditPen',
|
type: 'primary',
|
||||||
render: 'basicButton',
|
icon: 'el-icon-EditPen',
|
||||||
click: row => {
|
render: 'basicButton',
|
||||||
addRef.value.open('编辑', row)
|
click: row => {
|
||||||
}
|
addRef.value.open('编辑', row)
|
||||||
},
|
}
|
||||||
{
|
},
|
||||||
name: 'del',
|
{
|
||||||
title: '删除',
|
name: 'del',
|
||||||
type: 'danger',
|
title: '删除',
|
||||||
icon: 'el-icon-Delete',
|
type: 'danger',
|
||||||
render: 'confirmButton',
|
icon: 'el-icon-Delete',
|
||||||
popconfirm: {
|
render: 'confirmButton',
|
||||||
confirmButtonText: '确认',
|
popconfirm: {
|
||||||
cancelButtonText: '取消',
|
confirmButtonText: '确认',
|
||||||
confirmButtonType: 'danger',
|
cancelButtonText: '取消',
|
||||||
title: '确定删除该菜单吗?'
|
confirmButtonType: 'danger',
|
||||||
},
|
title: '确定删除该菜单吗?'
|
||||||
click: row => {
|
},
|
||||||
dicDelete(row.id).then(() => {
|
click: row => {
|
||||||
init()
|
dicDelete(row.id).then(() => {
|
||||||
})
|
init()
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
]
|
}
|
||||||
}
|
]
|
||||||
],
|
}
|
||||||
loadCallback: () => {
|
],
|
||||||
// // 过滤数组中type等于1的数据,children下钻
|
loadCallback: () => {
|
||||||
// const filterData = (arr: any[]) => {
|
// // 过滤数组中type等于1的数据,children下钻
|
||||||
// return arr.filter((item: any) => {
|
// const filterData = (arr: any[]) => {
|
||||||
// if (item.children.length) {
|
// return arr.filter((item: any) => {
|
||||||
// item.children = filterData(item.children)
|
// if (item.children.length) {
|
||||||
// }
|
// item.children = filterData(item.children)
|
||||||
// return item.type != 1
|
// }
|
||||||
// })
|
// return item.type != 1
|
||||||
// }
|
// })
|
||||||
// tableStore.table.data = filterData(tableStore.table.data)
|
// }
|
||||||
}
|
// tableStore.table.data = filterData(tableStore.table.data)
|
||||||
})
|
}
|
||||||
provide('tableStore', tableStore)
|
})
|
||||||
const init = () => {
|
provide('tableStore', tableStore)
|
||||||
tableStore.table.loading = true
|
const init = () => {
|
||||||
queryByCode('Statistical_Type').then(res => {
|
tableStore.table.loading = true
|
||||||
tableStore.table.params.pid = res.data.id
|
queryByCode('Statistical_Type').then(res => {
|
||||||
queryCsDictTree(res.data.id).then(res => {
|
tableStore.table.params.pid = res.data.id
|
||||||
tableStore.table.data = res.data
|
queryCsDictTree(res.data.id).then(res => {
|
||||||
tableStore.table.loading = false
|
tableStore.table.data = res.data
|
||||||
})
|
tableStore.table.loading = false
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
onMounted(() => {
|
}
|
||||||
tableStore.table.ref = tableRef.value
|
onMounted(() => {
|
||||||
init()
|
tableStore.table.ref = tableRef.value
|
||||||
})
|
init()
|
||||||
|
})
|
||||||
const addMenu = () => {
|
|
||||||
// console.log(bindingRef)
|
const addMenu = () => {
|
||||||
addRef.value.open('新增', {
|
// console.log(bindingRef)
|
||||||
sort: tableStore.table.data.length ? tableStore.table.data[tableStore.table.data.length - 1].sort + 1 : 1,
|
addRef.value.open('新增', {
|
||||||
code: '',
|
sort: tableStore.table.data.length ? tableStore.table.data[tableStore.table.data.length - 1].sort + 1 : 1,
|
||||||
pid: '',
|
code: '',
|
||||||
id: '',
|
pid: '',
|
||||||
remark: '',
|
id: '',
|
||||||
name: ''
|
remark: '',
|
||||||
})
|
name: ''
|
||||||
}
|
})
|
||||||
</script>
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-dialog v-model="dialogVisible" title="自定义功能管理" width="600">
|
<el-dialog v-model="dialogVisible" title="自定义功能管理" width="650">
|
||||||
<div style="display: flex; justify-content: end" class="mb10">
|
<div style="display: flex; justify-content: end" class="mb10">
|
||||||
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: calc(100vh / 2); max-height: 400px">
|
<div style="height: 300px; max-height: 400px">
|
||||||
<vxe-table
|
<vxe-table
|
||||||
border
|
border
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
@@ -25,6 +25,7 @@
|
|||||||
<el-switch
|
<el-switch
|
||||||
v-model="row.state"
|
v-model="row.state"
|
||||||
inline-prompt
|
inline-prompt
|
||||||
|
:disabled="!hasAdmin && row.scope"
|
||||||
:active-value="1"
|
:active-value="1"
|
||||||
:inactive-value="0"
|
:inactive-value="0"
|
||||||
active-text="已激活"
|
active-text="已激活"
|
||||||
@@ -33,11 +34,29 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
|
<vxe-column field="startTime" title="是否全局" v-if="hasAdmin">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-switch
|
||||||
|
v-model="row.scope"
|
||||||
|
inline-prompt
|
||||||
|
:active-value="1"
|
||||||
|
width="50px"
|
||||||
|
:inactive-value="0"
|
||||||
|
active-text="是"
|
||||||
|
inactive-text="否"
|
||||||
|
:before-change="() => beforeChange1(row)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</vxe-column>
|
||||||
<vxe-column field="startTime" title="操作">
|
<vxe-column field="startTime" title="操作">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-button type="primary" link @click="edit(row)">编辑</el-button>
|
<el-button type="primary" link @click="edit(row)" v-if="!(!hasAdmin && row.scope)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
|
||||||
<el-button type="danger" link @click="deletes(row)">删除</el-button>
|
<el-button type="danger" link @click="deletes(row)" v-if="!(!hasAdmin && row.scope)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
@@ -49,18 +68,20 @@
|
|||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
import { getDashboardPageByUserId, deleteDashboard, activatePage } from '@/api/system-boot/csstatisticalset'
|
import { getDashboardPageByUserId, deleteDashboard, activatePage, scopePage } from '@/api/system-boot/csstatisticalset'
|
||||||
import { useAdminInfo } from '@/stores/adminInfo'
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { useNavTabs } from '@/stores/navTabs'
|
import { useNavTabs } from '@/stores/navTabs'
|
||||||
import { getMenu } from '@/utils/router'
|
import { getMenu } from '@/utils/router'
|
||||||
|
|
||||||
const { push } = useRouter()
|
const { push } = useRouter()
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
const route = useRouter()
|
const route = useRouter()
|
||||||
const navTabs = useNavTabs()
|
const navTabs = useNavTabs()
|
||||||
const adminInfo = useAdminInfo()
|
const adminInfo = useAdminInfo()
|
||||||
const pageList: any = ref([])
|
const pageList: any = ref([])
|
||||||
|
const hasAdmin = adminInfo.roleCode.some(item => item.includes('operation_manager') || item.includes('root'))
|
||||||
|
|
||||||
const open = () => {
|
const open = () => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
@@ -68,7 +89,10 @@ const open = () => {
|
|||||||
}
|
}
|
||||||
const init = () => {
|
const init = () => {
|
||||||
getDashboardPageByUserId({ id: adminInfo.id, state: false }).then(res => {
|
getDashboardPageByUserId({ id: adminInfo.id, state: false }).then(res => {
|
||||||
pageList.value = res.data
|
pageList.value = res.data.filter(item => {
|
||||||
|
item.scope = item.userId == '0' ? 1 : 0
|
||||||
|
return item
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 新增
|
// 新增
|
||||||
@@ -93,7 +117,7 @@ const beforeChange = (row: any): Promise<boolean> => {
|
|||||||
type: 'warning'
|
type: 'warning'
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
activatePage({ id: row.id, state: row.state == 0 ? 1 : 0 }).then( async(res: any) => {
|
activatePage({ id: row.id, state: row.state == 0 ? 1 : 0 }).then(async (res: any) => {
|
||||||
if (res.code == 'A0000') {
|
if (res.code == 'A0000') {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
@@ -102,19 +126,45 @@ const beforeChange = (row: any): Promise<boolean> => {
|
|||||||
}
|
}
|
||||||
init()
|
init()
|
||||||
resolve(true)
|
resolve(true)
|
||||||
await getMenu()
|
await getMenu()
|
||||||
await setTimeout(() => {
|
await setTimeout(() => {
|
||||||
navTabs.refresh()
|
navTabs.refresh()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {})
|
||||||
ElMessage({
|
})
|
||||||
type: 'info',
|
}
|
||||||
message: '已取消删除'
|
// 全局
|
||||||
|
const beforeChange1 = (row: any): Promise<boolean> => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// loading1.value = false
|
||||||
|
// ElMessage.success('Switch success')
|
||||||
|
// return resolve(true)
|
||||||
|
// }, 1000)
|
||||||
|
ElMessageBox.confirm('此操作将页面配置成全局, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
scopePage({ id: row.id, userId: row.scope == 0 ? '0' : adminInfo.id }).then(async (res: any) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '操作成功!'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
init()
|
||||||
|
resolve(true)
|
||||||
|
await getMenu()
|
||||||
|
await setTimeout(() => {
|
||||||
|
navTabs.refresh()
|
||||||
|
}, 1000)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
.catch(() => {})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 删除
|
// 删除
|
||||||
|
|||||||
@@ -12,7 +12,9 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:operation>
|
<template v-slot:operation>
|
||||||
<el-button type="primary" icon="el-icon-Edit" @click="editd">编辑</el-button>
|
<el-button type="primary" icon="el-icon-Edit" v-if="hasAdmin || adminInfo.id == userId" @click="editd">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
type="primary"
|
type="primary"
|
||||||
icon="el-icon-Tools"
|
icon="el-icon-Tools"
|
||||||
@@ -46,7 +48,13 @@
|
|||||||
{{ (item as LayoutItem).name }}
|
{{ (item as LayoutItem).name }}
|
||||||
</div>
|
</div>
|
||||||
<!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="setZoom(item)" /> -->
|
<!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="setZoom(item)" /> -->
|
||||||
<img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="setZoom(item)" />
|
<span style="display: flex; align-items: center">
|
||||||
|
<img
|
||||||
|
:src="flag ? img : img1"
|
||||||
|
style="cursor: pointer; height: 16px"
|
||||||
|
@click="setZoom(item)"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<component
|
<component
|
||||||
@@ -82,12 +90,15 @@ import { queryActivatePage, queryByPagePath } from '@/api/system-boot/csstatisti
|
|||||||
import RoutingConfig from '@/views/pqs/cockpit/homePage/components/routingConfig.vue'
|
import RoutingConfig from '@/views/pqs/cockpit/homePage/components/routingConfig.vue'
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||||
|
import { Sort } from '@element-plus/icons-vue'
|
||||||
const { push } = useRouter()
|
const { push } = useRouter()
|
||||||
const datePickerRef = ref()
|
const datePickerRef = ref()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const timeCacheStore = useTimeCacheStore()
|
const timeCacheStore = useTimeCacheStore()
|
||||||
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
|
const adminInfo = useAdminInfo()
|
||||||
|
const hasAdmin = adminInfo.roleCode.some(item => item.includes('operation_manager') || item.includes('root'))
|
||||||
defineOptions({
|
defineOptions({
|
||||||
// name: 'dashboard/index'
|
// name: 'dashboard/index'
|
||||||
})
|
})
|
||||||
@@ -109,6 +120,7 @@ interface LayoutItem {
|
|||||||
}
|
}
|
||||||
const zoom = ref(1)
|
const zoom = ref(1)
|
||||||
const RoutingConfigRef = ref()
|
const RoutingConfigRef = ref()
|
||||||
|
const userId = ref('')
|
||||||
const key = ref(0)
|
const key = ref(0)
|
||||||
const img = new URL(`@/assets/img/amplify.png`, import.meta.url).href
|
const img = new URL(`@/assets/img/amplify.png`, import.meta.url).href
|
||||||
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url).href
|
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url).href
|
||||||
@@ -219,6 +231,7 @@ const seRowHeight = (value: any) => {
|
|||||||
const fetchLayoutData = async () => {
|
const fetchLayoutData = async () => {
|
||||||
try {
|
try {
|
||||||
const { data } = await queryByPagePath({ pagePath: router.currentRoute.value.name })
|
const { data } = await queryByPagePath({ pagePath: router.currentRoute.value.name })
|
||||||
|
userId.value = data.userId
|
||||||
dataList.value = data
|
dataList.value = data
|
||||||
const parsedLayout = JSON.parse(data.containerConfig || '[]') as LayoutItem[]
|
const parsedLayout = JSON.parse(data.containerConfig || '[]') as LayoutItem[]
|
||||||
// 处理布局数据
|
// 处理布局数据
|
||||||
|
|||||||
146
src/views/pqs/cockpit/realTimeData/bind.vue
Normal file
146
src/views/pqs/cockpit/realTimeData/bind.vue
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
class="cn-operate-dialog"
|
||||||
|
width="1200px"
|
||||||
|
append-to-body
|
||||||
|
v-model.trim="dialogVisible"
|
||||||
|
title="绑定"
|
||||||
|
>
|
||||||
|
<el-form ref="formRef" label-width="80px" class="form">
|
||||||
|
<el-form-item label="项目名称">
|
||||||
|
<el-input
|
||||||
|
maxlength="32"
|
||||||
|
show-word-limit
|
||||||
|
clearable
|
||||||
|
style="width: 240px"
|
||||||
|
v-model.trim="searchValue"
|
||||||
|
placeholder="请输入项目名称"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="info" icon="el-icon-Search">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div style="height: calc(60vh - 120px); overflow-y: auto" v-loading="loading">
|
||||||
|
<el-row :gutter="10" style="width: 100%; margin: auto">
|
||||||
|
<el-col :span="6" v-for="item in list" :key="item.id" class="mt10">
|
||||||
|
<el-card class="box-card" shadow="hover">
|
||||||
|
<div slot="header" class="clearfix mb10">
|
||||||
|
<span style="display: flex; align-items: center;justify-content: space-between;">
|
||||||
|
{{ item.name }}
|
||||||
|
|
||||||
|
<!-- <el-tooltip
|
||||||
|
class="item"
|
||||||
|
effect="dark"
|
||||||
|
content="绑定实时数据"
|
||||||
|
placement="top"
|
||||||
|
v-if="bindId != item.id"
|
||||||
|
>
|
||||||
|
<Sort
|
||||||
|
style="margin-left: 5px; width: 16px"
|
||||||
|
class="xiaoshou color"
|
||||||
|
@click="activate(item)"
|
||||||
|
/>
|
||||||
|
</el-tooltip> -->
|
||||||
|
<el-button type="primary" v-if="bindId != item.id" @click="activate(item)" icon="el-icon-Sort" link>绑定</el-button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<img v-if="item.fileContent" :src="item.fileContent" class="image" />
|
||||||
|
<el-empty v-else description="暂无设计" style="height: 220px" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, inject } from 'vue'
|
||||||
|
import { reactive } from 'vue'
|
||||||
|
import { coFqueryPage, getByUserId, savePageIdWithUser } from '@/api/cs-harmonic-boot/mxgraph'
|
||||||
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
|
import { Sort } from '@element-plus/icons-vue'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
const adminInfo = useAdminInfo()
|
||||||
|
const emit = defineEmits(['bindClick'])
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const searchValue = ref('')
|
||||||
|
const bindId = ref('')
|
||||||
|
const list = ref([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const open = (text: string, data: anyObj) => {
|
||||||
|
searchValue.value = ''
|
||||||
|
list.value = []
|
||||||
|
info()
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
const info = () => {
|
||||||
|
loading.value = true
|
||||||
|
getBindId()
|
||||||
|
coFqueryPage({
|
||||||
|
currentUserId: adminInfo.id,
|
||||||
|
roleCode: adminInfo.roleCode.join(','),
|
||||||
|
searchValue: searchValue.value,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
list.value = res.data.records
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const getBindId = () => {
|
||||||
|
getByUserId({ userId: adminInfo.id }).then(res => {
|
||||||
|
bindId.value = res.data.pageId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const activate = (e: any) => {
|
||||||
|
ElMessageBox.confirm('是否绑定页面?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
savePageIdWithUser({ pageId: e.id, userId: adminInfo.id }).then(res => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '操作成功'
|
||||||
|
})
|
||||||
|
bindId.value = e.id
|
||||||
|
emit('bindClick', bindId.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.form {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
.xiaoshou {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.color {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
.box-card {
|
||||||
|
width: 100%;
|
||||||
|
// border: 1px solid #000;
|
||||||
|
box-shadow: var(--el-box-shadow-light);
|
||||||
|
}
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -12,6 +12,8 @@
|
|||||||
style="position: relative"
|
style="position: relative"
|
||||||
>
|
>
|
||||||
<iframe
|
<iframe
|
||||||
|
v-if="bindId"
|
||||||
|
:key="bindId"
|
||||||
:src="iframeSrc"
|
:src="iframeSrc"
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
@@ -20,6 +22,7 @@
|
|||||||
id="iframeLeft"
|
id="iframeLeft"
|
||||||
@load="onIframeLoad"
|
@load="onIframeLoad"
|
||||||
></iframe>
|
></iframe>
|
||||||
|
<el-empty v-else description="暂无绑定页面" style="height: 100%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-container">
|
<div class="bottom-container">
|
||||||
@@ -28,13 +31,15 @@
|
|||||||
:icon="show ? 'el-icon-ArrowDownBold' : 'el-icon-ArrowUpBold'"
|
:icon="show ? 'el-icon-ArrowDownBold' : 'el-icon-ArrowUpBold'"
|
||||||
@click="show = !show"
|
@click="show = !show"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
|
v-if="bindId"
|
||||||
>
|
>
|
||||||
事件列表
|
事件列表
|
||||||
</el-button>
|
</el-button>
|
||||||
|
<el-button class="bindBut" type="primary" icon="el-icon-Sort" @click="bindClick">绑定</el-button>
|
||||||
<!-- <div class="buttonBox">
|
<!-- <div class="buttonBox">
|
||||||
<el-button type="primary" icon="el-icon-Aim" @click="reset">复位</el-button>
|
<el-button type="primary" icon="el-icon-Aim" @click="reset">复位</el-button>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<transition name="table-fade">
|
<transition name="table-fade">
|
||||||
<div class="tableBox" v-if="show">
|
<div class="tableBox" v-if="show">
|
||||||
<vxe-table border auto-resize height="230px" :data="tableData" ref="tableRef">
|
<vxe-table border auto-resize height="230px" :data="tableData" ref="tableRef">
|
||||||
@@ -46,6 +51,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
|
<!--绑定实时数据 -->
|
||||||
|
<Bind ref="bindRef" @bindClick="info" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -53,11 +60,16 @@ import { ref, watch, onMounted, onUnmounted, provide } from 'vue'
|
|||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
|
||||||
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
|
import { audit, add, coFqueryPage, getByUserId } from '@/api/cs-harmonic-boot/mxgraph'
|
||||||
|
import Bind from './bind.vue'
|
||||||
// import { getActive } from "@/api/manage_wx/index";
|
// import { getActive } from "@/api/manage_wx/index";
|
||||||
|
|
||||||
// const props = defineProps<{
|
// const props = defineProps<{
|
||||||
// project: { id: string; name: string } | null
|
// project: { id: string; name: string } | null
|
||||||
// }>()
|
// }>()
|
||||||
|
const adminInfo = useAdminInfo()
|
||||||
const show = ref(false)
|
const show = ref(false)
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
width: { type: [String, Number] },
|
width: { type: [String, Number] },
|
||||||
@@ -65,10 +77,9 @@ const prop = defineProps({
|
|||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object }
|
timeValue: { type: Object }
|
||||||
})
|
})
|
||||||
|
const bindRef = ref()
|
||||||
const tableData = ref([
|
const tableData = ref([])
|
||||||
|
const bindId = ref('')
|
||||||
])
|
|
||||||
|
|
||||||
// 在父页面中添加事件监听器
|
// 在父页面中添加事件监听器
|
||||||
window.addEventListener('message', function (event) {
|
window.addEventListener('message', function (event) {
|
||||||
@@ -83,6 +94,9 @@ window.addEventListener('message', function (event) {
|
|||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
|
|
||||||
const pageHeight = mainHeight(40)
|
const pageHeight = mainHeight(40)
|
||||||
|
const bindClick = () => {
|
||||||
|
bindRef.value.open()
|
||||||
|
}
|
||||||
|
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
// 向 iframe 发送复位事件
|
// 向 iframe 发送复位事件
|
||||||
@@ -128,15 +142,10 @@ const iframeSrc = ref('')
|
|||||||
// { immediate: true, deep: true }
|
// { immediate: true, deep: true }
|
||||||
// )
|
// )
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
iframeSrc.value =
|
info()
|
||||||
window.location.origin + `/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true#/preview_YPT`
|
|
||||||
|
|
||||||
// tableStore.index()
|
// tableStore.index()
|
||||||
|
|
||||||
// 监听来自 eventStatistics 组件的消息
|
// 监听来自 eventStatistics 组件的消息
|
||||||
window.addEventListener('message', handleMessage)
|
|
||||||
|
|
||||||
// getActive({}).then((res: any) => {
|
// getActive({}).then((res: any) => {
|
||||||
// if (res.code == "A0000") {
|
// if (res.code == "A0000") {
|
||||||
// // window.location.origin
|
// // window.location.origin
|
||||||
@@ -148,7 +157,31 @@ onMounted(() => {
|
|||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
})
|
})
|
||||||
|
const info = async () => {
|
||||||
|
iframeSrc.value = ''
|
||||||
|
await getByUserId({ userId: adminInfo.id })
|
||||||
|
.then(res => {
|
||||||
|
bindId.value = res.data.pageId
|
||||||
|
})
|
||||||
|
.catch(async err => {
|
||||||
|
// bindId.value = '4b4f7f4260198776594f5f9d93a532e8'
|
||||||
|
await coFqueryPage({
|
||||||
|
currentUserId: adminInfo.id,
|
||||||
|
roleCode: adminInfo.roleCode.join(','),
|
||||||
|
searchValue: '',
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000
|
||||||
|
}).then(res => {
|
||||||
|
bindId.value = res.data.records.filter(item => item.scope == 1)[0]?.id || null
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
await setTimeout(() => {
|
||||||
|
iframeSrc.value = window.location.origin + `/zutai/?id=${bindId.value}&&name=stt&&preview=true#/preview_YPT`
|
||||||
|
// iframeSrc.value = `http://192.168.2.128:4001/zutai/?id=${bindId.value}&&name=stt&&preview=true#/preview_YPT`
|
||||||
|
window.addEventListener('message', handleMessage)
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
// 清理事件监听器
|
// 清理事件监听器
|
||||||
window.removeEventListener('message', handleMessage)
|
window.removeEventListener('message', handleMessage)
|
||||||
@@ -258,4 +291,9 @@ const sendKeysToIframe = (keyList: string[]) => {
|
|||||||
.table-fade-enter-active {
|
.table-fade-enter-active {
|
||||||
transition-delay: 0.05s;
|
transition-delay: 0.05s;
|
||||||
}
|
}
|
||||||
|
.bindBut {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: -35px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,136 +1,195 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pd10">
|
<div class="default-main pd10">
|
||||||
<el-card>
|
<div style="width: 100%; display: flex; justify-content: end">
|
||||||
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="auto" class="form-four">
|
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
|
||||||
<el-form-item label="页面名称" prop="pageName">
|
<back-component />
|
||||||
<el-input
|
</div>
|
||||||
style="width: 100%"
|
<div style="display: flex" class="mt10">
|
||||||
maxlength="32"
|
<!-- <el-tabs type="border-card">
|
||||||
show-word-limit
|
<el-tab-pane label="组件">
|
||||||
v-model.trim="form.pageName"
|
<div style="width: 520px; overflow: auto" :style="indicatorHeight" class="mr10">
|
||||||
placeholder="请输入页面名称"
|
<el-collapse v-model="activeNames" :expand-icon-position="position">
|
||||||
></el-input>
|
<el-collapse-item
|
||||||
</el-form-item>
|
v-for="item in treeComponents"
|
||||||
<el-form-item label="图标">
|
:key="item.id"
|
||||||
<IconSelector v-model.trim="form.icon" style="width: 80%" placeholder="请选择图标" />
|
:title="item.name"
|
||||||
</el-form-item>
|
:name="item.id"
|
||||||
<el-form-item label="页面排序" prop="sort">
|
>
|
||||||
<el-input-number style="width: 100%" v-model.trim="form.sort" :min="0" :max="10000" :step="1" />
|
<el-collapse v-model="activeNames1" class="ml20">
|
||||||
</el-form-item>
|
<el-collapse-item
|
||||||
|
v-for="k in item.children"
|
||||||
<el-form-item label="是否激活">
|
:key="k.id"
|
||||||
|
:title="k.name"
|
||||||
<el-switch
|
:name="k.id"
|
||||||
v-model="form.state"
|
>
|
||||||
inline-prompt
|
<div class="Box">
|
||||||
:disabled="form.pagePath == 'dashboard/index'"
|
<div
|
||||||
:active-value="1"
|
v-for="(s, index) in k.children"
|
||||||
:inactive-value="0"
|
:key="index"
|
||||||
active-text="是"
|
class="mr10 mb10 imgBox"
|
||||||
inactive-text="否"
|
draggable="true"
|
||||||
|
unselectable="on"
|
||||||
/>
|
@drag="drag(s)"
|
||||||
</el-form-item>
|
@dragend="dragEnd(s)"
|
||||||
|
>
|
||||||
<el-form-item label="备注" class="top">
|
<div class="textName">{{ s.name }}</div>
|
||||||
<el-input
|
<img :src="s.image" style="width: 150px" />
|
||||||
maxlength="300"
|
</div>
|
||||||
show-word-limit
|
|
||||||
type="textarea"
|
|
||||||
:rows="1"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
v-model.trim="form.remark"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<div style="width: 100%; display: flex; justify-content: end">
|
|
||||||
<el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
|
|
||||||
<back-component />
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
<el-card class="mt10" :style="height">
|
|
||||||
<div style="display: flex">
|
|
||||||
<div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
|
|
||||||
<el-collapse v-model="activeNames" :expand-icon-position="position">
|
|
||||||
<el-collapse-item
|
|
||||||
v-for="item in treeComponents"
|
|
||||||
:key="item.id"
|
|
||||||
:title="item.name"
|
|
||||||
:name="item.id"
|
|
||||||
>
|
|
||||||
<el-collapse v-model="activeNames1" class="ml20">
|
|
||||||
<el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
|
|
||||||
<div class="Box">
|
|
||||||
<div
|
|
||||||
v-for="(s, index) in k.children"
|
|
||||||
:key="index"
|
|
||||||
class="mr10 mb10 imgBox"
|
|
||||||
draggable="true"
|
|
||||||
unselectable="on"
|
|
||||||
@drag="drag(s)"
|
|
||||||
@dragend="dragEnd(s)"
|
|
||||||
>
|
|
||||||
<div class="textName">{{ s.name }}</div>
|
|
||||||
<img :src="s.image" style="width: 180px" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-collapse-item>
|
||||||
</el-collapse-item>
|
</el-collapse>
|
||||||
</el-collapse>
|
</el-collapse-item>
|
||||||
</el-collapse-item>
|
</el-collapse>
|
||||||
</el-collapse>
|
</div>
|
||||||
</div>
|
</el-tab-pane>
|
||||||
<div style="flex: 1" ref="wrapper">
|
</el-tabs> -->
|
||||||
<GridLayout
|
<el-tabs v-model="tableName" type="border-card" @tab-change="changeTab">
|
||||||
class="GridLayout"
|
<el-tab-pane v-for="item in treeComponents" :key="item.name" :label="item.name" :name="item.name">
|
||||||
ref="gridLayout"
|
<el-tabs v-model="tableName1" tab-position="top">
|
||||||
v-model:layout="layout"
|
<el-tab-pane v-for="k in item?.children" :key="k.name" :label="k.name" :name="k.name">
|
||||||
style="width: 100%"
|
<div :style="indicatorHeight" style="overflow-y: auto; overflow-x: hidden">
|
||||||
:style="{ height: GridHeight + 'px' }"
|
<el-row :gutter="10" class="pl5 pr5 pt5" style="width: 520px">
|
||||||
:row-height="rowHeight"
|
<el-col :span="8" v-for="component in k.children" :key="component.id" class="mb10">
|
||||||
:col-num="12"
|
<el-card
|
||||||
prevent-collision
|
class="box-card"
|
||||||
:vertical-compact="false"
|
shadow="hover"
|
||||||
>
|
@drag="drag(component)"
|
||||||
<template #item="{ item }">
|
@dragend="dragEnd(component)"
|
||||||
<div class="imgBox">
|
>
|
||||||
<div class="textName">{{ item.name }}</div>
|
<div slot="header" class="clearfix">
|
||||||
|
<span style="display: flex; align-items: center">
|
||||||
<img
|
{{ component.name }}
|
||||||
:src="getImg(item.path)"
|
</span>
|
||||||
:style="{
|
</div>
|
||||||
height:
|
<img v-if="component.image" :src="component.image" class="image xiaoshou" />
|
||||||
item.h * rowHeight -
|
</el-card>
|
||||||
(item.h == 1
|
</el-col>
|
||||||
? 30
|
</el-row>
|
||||||
: item.h == 2
|
|
||||||
? 20
|
|
||||||
: item.h == 3
|
|
||||||
? 10
|
|
||||||
: item.h == 4
|
|
||||||
? -0
|
|
||||||
: item.h == 5
|
|
||||||
? -10
|
|
||||||
: -20) +
|
|
||||||
'px'
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<CloseBold class="remove" @click="removeItem(item.i)" />
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <span class="text">{{ `${item?.name}` }}</span>
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
|
<div style="flex: 1" ref="wrapper" class="ml10">
|
||||||
|
<el-tabs type="border-card" class="mb10">
|
||||||
|
<el-tab-pane label="基础信息">
|
||||||
|
<el-form ref="formRef" inline :rules="rules" :model="form" label-width="auto" class="form-four">
|
||||||
|
<el-form-item label="页面名称" prop="pageName">
|
||||||
|
<el-input
|
||||||
|
style="width: 100%"
|
||||||
|
maxlength="32"
|
||||||
|
show-word-limit
|
||||||
|
v-model.trim="form.pageName"
|
||||||
|
placeholder="请输入页面名称"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图标">
|
||||||
|
<IconSelector v-model.trim="form.icon" placeholder="请选择图标" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="页面排序" prop="sort">
|
||||||
|
<el-input-number
|
||||||
|
style="width: 100%"
|
||||||
|
v-model.trim="form.sort"
|
||||||
|
:min="0"
|
||||||
|
:max="10000"
|
||||||
|
:step="1"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否激活">
|
||||||
|
<el-switch
|
||||||
|
v-model="form.state"
|
||||||
|
inline-prompt
|
||||||
|
width="60px"
|
||||||
|
:disabled="form.pagePath == 'dashboard/index'"
|
||||||
|
:active-value="1"
|
||||||
|
:inactive-value="0"
|
||||||
|
active-text="是 "
|
||||||
|
inactive-text="否 "
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否全局" v-if="hasAdmin">
|
||||||
|
<el-switch
|
||||||
|
v-model="form.scope"
|
||||||
|
inline-prompt
|
||||||
|
width="60px"
|
||||||
|
:active-value="1"
|
||||||
|
:inactive-value="0"
|
||||||
|
:disabled="form.pagePath == 'dashboard/index'"
|
||||||
|
active-text="是 "
|
||||||
|
inactive-text="否 "
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" class="top">
|
||||||
|
<el-input
|
||||||
|
maxlength="300"
|
||||||
|
show-word-limit
|
||||||
|
style="width: 100%"
|
||||||
|
type="textarea"
|
||||||
|
:rows="1"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model.trim="form.remark"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item></el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<div ref="PaneRef">
|
||||||
|
<el-tabs type="border-card">
|
||||||
|
<el-tab-pane label="画布" :style="height">
|
||||||
|
<GridLayout
|
||||||
|
class="GridLayout"
|
||||||
|
ref="gridLayout"
|
||||||
|
v-model:layout="layout"
|
||||||
|
style="width: 100%"
|
||||||
|
:style="{ height: GridHeight + 'px' }"
|
||||||
|
:row-height="rowHeight"
|
||||||
|
:col-num="12"
|
||||||
|
prevent-collision
|
||||||
|
:is-bounded="true"
|
||||||
|
:vertical-compact="false"
|
||||||
|
>
|
||||||
|
<template #item="{ item }">
|
||||||
|
<div class="imgBox">
|
||||||
|
<div class="textName">{{ item.name }}</div>
|
||||||
|
|
||||||
|
<img
|
||||||
|
:src="getImg(item.path)"
|
||||||
|
:style="{
|
||||||
|
height:
|
||||||
|
item.h * rowHeight -
|
||||||
|
(item.h == 1
|
||||||
|
? 30
|
||||||
|
: item.h == 2
|
||||||
|
? 20
|
||||||
|
: item.h == 3
|
||||||
|
? 10
|
||||||
|
: item.h == 4
|
||||||
|
? -0
|
||||||
|
: item.h == 5
|
||||||
|
? -10
|
||||||
|
: -20) +
|
||||||
|
'px'
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CloseBold class="remove" @click="removeItem(item.i)" />
|
||||||
|
</div>
|
||||||
|
<!-- <span class="text">{{ `${item?.name}` }}</span>
|
||||||
-->
|
-->
|
||||||
</template>
|
</template>
|
||||||
</GridLayout>
|
</GridLayout>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import BackComponent from '@/components/icon/back/index.vue'
|
import BackComponent from '@/components/icon/back/index.vue'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
@@ -145,17 +204,22 @@ import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csst
|
|||||||
import html2canvas from 'html2canvas'
|
import html2canvas from 'html2canvas'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { getMenu } from '@/utils/router'
|
import { getMenu } from '@/utils/router'
|
||||||
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
|
const tableName = ref('')
|
||||||
|
const tableName1 = ref('')
|
||||||
import { useNavTabs } from '@/stores/navTabs'
|
import { useNavTabs } from '@/stores/navTabs'
|
||||||
// defineOptions({
|
// defineOptions({
|
||||||
// name: 'cockpit/popup'
|
// name: 'cockpit/popup'
|
||||||
// })
|
// })
|
||||||
|
const adminInfo = useAdminInfo()
|
||||||
|
const hasAdmin = adminInfo.roleCode.some(item => item.includes('operation_manager') || item.includes('root'))
|
||||||
|
|
||||||
const { go } = useRouter()
|
const { go } = useRouter()
|
||||||
const navTabs = useNavTabs()
|
const navTabs = useNavTabs()
|
||||||
const { query } = useRoute()
|
const { query } = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const height = mainHeight(148)
|
const height = mainHeight(295)
|
||||||
const indicatorHeight = mainHeight(168)
|
const indicatorHeight = mainHeight(180)
|
||||||
const rowHeight = ref(0)
|
const rowHeight = ref(0)
|
||||||
const pageList: any = ref([])
|
const pageList: any = ref([])
|
||||||
const GridHeight = ref(0)
|
const GridHeight = ref(0)
|
||||||
@@ -167,6 +231,7 @@ const form: any = reactive({
|
|||||||
sort: '100',
|
sort: '100',
|
||||||
id: '',
|
id: '',
|
||||||
state: 1,
|
state: 1,
|
||||||
|
scope: 0,
|
||||||
icon: '',
|
icon: '',
|
||||||
pagePath: '',
|
pagePath: '',
|
||||||
remark: '',
|
remark: '',
|
||||||
@@ -205,6 +270,8 @@ const info = () => {
|
|||||||
activeNames1.value = []
|
activeNames1.value = []
|
||||||
componentTree().then(res => {
|
componentTree().then(res => {
|
||||||
treeComponents.value = res.data
|
treeComponents.value = res.data
|
||||||
|
tableName.value = tableName.value == '' ? treeComponents.value[0].name : tableName.value
|
||||||
|
tableName1.value = tableName1.value == '' ? treeComponents.value[0].children[0].name : tableName1.value
|
||||||
activeNames.value = treeComponents.value.map(item => item.id)
|
activeNames.value = treeComponents.value.map(item => item.id)
|
||||||
res.data.forEach(item => {
|
res.data.forEach(item => {
|
||||||
item.children.forEach(k => {
|
item.children.forEach(k => {
|
||||||
@@ -223,6 +290,7 @@ const info = () => {
|
|||||||
form.remark = res.data.remark
|
form.remark = res.data.remark
|
||||||
form.id = res.data.id
|
form.id = res.data.id
|
||||||
form.state = res.data.state
|
form.state = res.data.state
|
||||||
|
form.scope = res.data.userId == 0 ? 1 : 0
|
||||||
form.icon = res.data.icon
|
form.icon = res.data.icon
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
@@ -251,6 +319,10 @@ const tree2List = (list: any, id: any) => {
|
|||||||
// 返回结果数组
|
// 返回结果数组
|
||||||
return arr
|
return arr
|
||||||
}
|
}
|
||||||
|
const changeTab = (e: any) => {
|
||||||
|
console.log('🚀 ~ changeTab ~ e:', e)
|
||||||
|
tableName1.value = treeComponents.filter(item => item.name == e)[0].children[0].name
|
||||||
|
}
|
||||||
// 删除拖拽
|
// 删除拖拽
|
||||||
const removeItem = (id: string) => {
|
const removeItem = (id: string) => {
|
||||||
const index = layout.value.findIndex(item => item.i === id)
|
const index = layout.value.findIndex(item => item.i === id)
|
||||||
@@ -260,6 +332,7 @@ const removeItem = (id: string) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const wrapper = ref<HTMLElement>()
|
const wrapper = ref<HTMLElement>()
|
||||||
|
const PaneRef = ref<HTMLElement>()
|
||||||
const gridLayout = ref<InstanceType<typeof GridLayout>>()
|
const gridLayout = ref<InstanceType<typeof GridLayout>>()
|
||||||
|
|
||||||
const mouseAt = { x: -1, y: -1 }
|
const mouseAt = { x: -1, y: -1 }
|
||||||
@@ -365,6 +438,12 @@ const onSubmit = () => {
|
|||||||
if (layout.value.length == 0) {
|
if (layout.value.length == 0) {
|
||||||
return ElMessage.warning('页面设计不能为空!')
|
return ElMessage.warning('页面设计不能为空!')
|
||||||
}
|
}
|
||||||
|
console.log(123, findDuplicateNames(layout.value))
|
||||||
|
let repeat = findDuplicateNames(layout.value) || []
|
||||||
|
if (repeat.length > 0) {
|
||||||
|
return ElMessage.warning(repeat.join('、')+' 组件重复,请删除重复组件!')
|
||||||
|
}
|
||||||
|
|
||||||
// const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
|
// const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
|
||||||
// if (maxValue > 6) {
|
// if (maxValue > 6) {
|
||||||
// return ElMessage.warning('组件不能超出当前容器!')
|
// return ElMessage.warning('组件不能超出当前容器!')
|
||||||
@@ -381,21 +460,27 @@ const onSubmit = () => {
|
|||||||
|
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (form.id == '') {
|
if (form.id == '') {
|
||||||
await addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
await addDashboard({
|
||||||
async (res: any) => {
|
...form,
|
||||||
ElMessage.success('新增页面成功!')
|
containerConfig: JSON.stringify(layout.value),
|
||||||
// go(-1)
|
thumbnail: url,
|
||||||
await getMenu()
|
userId: form.scope == 1 ? '0' : adminInfo.id
|
||||||
}
|
}).then(async (res: any) => {
|
||||||
)
|
ElMessage.success('新增页面成功!')
|
||||||
|
// go(-1)
|
||||||
|
await getMenu()
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
await updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
|
await updateDashboard({
|
||||||
async (res: any) => {
|
...form,
|
||||||
ElMessage.success('修改页面成功!')
|
containerConfig: JSON.stringify(layout.value),
|
||||||
// go(-1)
|
thumbnail: url,
|
||||||
await getMenu()
|
userId: form.scope == 1 ? '0' : adminInfo.id
|
||||||
}
|
}).then(async (res: any) => {
|
||||||
)
|
ElMessage.success('修改页面成功!')
|
||||||
|
// go(-1)
|
||||||
|
await getMenu()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
await setTimeout(() => {
|
await setTimeout(() => {
|
||||||
router.push({
|
router.push({
|
||||||
@@ -406,17 +491,47 @@ const onSubmit = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 查找重复的name
|
||||||
|
const findDuplicateNames = (arr: any) => {
|
||||||
|
// 用于记录每个name出现的次数
|
||||||
|
const nameCount = {}
|
||||||
|
// 用于存储重复的name
|
||||||
|
const duplicates = []
|
||||||
|
|
||||||
|
// 遍历数组统计每个name的出现次数
|
||||||
|
arr.forEach(item => {
|
||||||
|
const name = item.name
|
||||||
|
if (nameCount[name]) {
|
||||||
|
nameCount[name]++
|
||||||
|
} else {
|
||||||
|
nameCount[name] = 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 筛选出出现次数大于1的name
|
||||||
|
for (const name in nameCount) {
|
||||||
|
if (nameCount[name] > 1) {
|
||||||
|
duplicates.push(name)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return duplicates
|
||||||
|
}
|
||||||
const getImg = throttle((path: string) => {
|
const getImg = throttle((path: string) => {
|
||||||
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
|
if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
info()
|
info()
|
||||||
|
nextTick(() => {
|
||||||
GridHeight.value = wrapper.value?.offsetWidth / 1.77777
|
GridHeight.value = PaneRef.value?.offsetHeight - 60 //wrapper.value?.offsetWidth / 1.77777
|
||||||
rowHeight.value = GridHeight.value / 6 - 11.5
|
setTimeout(() => {
|
||||||
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
|
console.log('🚀 ~ wrapper.value?.offsetWidth:', PaneRef.value?.offsetWidth)
|
||||||
document.addEventListener('dragover', syncMousePosition)
|
}, 500)
|
||||||
|
rowHeight.value = GridHeight.value / 6 - 11.5
|
||||||
|
document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
|
||||||
|
document.addEventListener('dragover', syncMousePosition)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
@@ -436,7 +551,7 @@ onBeforeUnmount(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
width: 24%;
|
width: 32%;
|
||||||
.el-form-item__content {
|
.el-form-item__content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -516,4 +631,24 @@ onBeforeUnmount(() => {
|
|||||||
:deep(.el-form--inline .el-form-item) {
|
:deep(.el-form--inline .el-form-item) {
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
|
:deep(.el-card__header) {
|
||||||
|
padding: 13px 20px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.xiaoshou {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.box-card {
|
||||||
|
width: 100%;
|
||||||
|
// border: 1px solid #000;
|
||||||
|
box-shadow: var(--el-box-shadow-light);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item class="top" label="组件排序" prop="sort">
|
<el-form-item class="top" label="组件排序" prop="sort">
|
||||||
<el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
|
<el-input v-model.number="form.sort" placeholder="请输入组件排序"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div style="width: 600px; height: 390px; overflow: hidden">
|
<div style="width: 600px; height: 390px; overflow: hidden">
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="cancel">取消</el-button>
|
<el-button @click="cancel">取消</el-button>
|
||||||
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button type="primary" @click="submit">保存</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -112,7 +112,7 @@ onMounted(() => {
|
|||||||
customDeptOption.value = dictData.getBasicData('System_Type')
|
customDeptOption.value = dictData.getBasicData('System_Type')
|
||||||
customDeptOption.value.forEach((item: any) => {
|
customDeptOption.value.forEach((item: any) => {
|
||||||
getFatherComponent({ systemType: item.id }).then(res => {
|
getFatherComponent({ systemType: item.id }).then(res => {
|
||||||
item.children = res.data
|
item.children = res.data.filter(item => item.name != '无')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@@ -133,36 +133,47 @@ const submit = () => {
|
|||||||
formRef.value.validate(async (valid: boolean) => {
|
formRef.value.validate(async (valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
let url = ''
|
let url = ''
|
||||||
|
ElMessage.info('正在保存请稍等!')
|
||||||
await html2canvas(document.querySelector('.GridLayout'), {
|
setTimeout(async () => {
|
||||||
scale: 2
|
await html2canvas(document.querySelector('.GridLayout'), {
|
||||||
}).then(canvas => {
|
// scale: 2
|
||||||
url = canvas.toDataURL('image/png')
|
scale: 1, // 降低缩放比例(2倍会让像素量翻倍,优先降到1)
|
||||||
})
|
useCORS: false, // 非跨域图片关闭CORS检测(减少网络请求)
|
||||||
if (title.value == '新增组件') {
|
logging: false, // 关闭日志输出(减少控制台开销)
|
||||||
await componentAdd({
|
letterRendering: true, // 优化文字渲染性能
|
||||||
...form.value,
|
allowTaint: true, // 允许跨域图片污染画布(避免额外校验)
|
||||||
systemType: form.value.system[0],
|
removeContainer: true, // 自动清理生成的临时容器
|
||||||
pid: form.value.system[1],
|
ignoreElements: el => {
|
||||||
image: url
|
// 忽略不可见/非关键元素(比如隐藏的弹窗、装饰性元素)
|
||||||
|
return el.style.display === 'none' || el.classList.contains('ignore-screenshot')
|
||||||
}).then(res => {
|
}
|
||||||
ElMessage.success('新增成功!')
|
}).then(canvas => {
|
||||||
emit('submit')
|
url = canvas.toDataURL('image/png')
|
||||||
cancel()
|
|
||||||
})
|
})
|
||||||
} else {
|
if (title.value == '新增组件') {
|
||||||
await componentEdit({
|
await componentAdd({
|
||||||
...form.value,
|
...form.value,
|
||||||
systemType: form.value.system[0],
|
systemType: form.value.system[0],
|
||||||
pid: form.value.system[1],
|
pid: form.value.system[1],
|
||||||
image: url
|
image: url
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
ElMessage.success('修改成功!')
|
ElMessage.success('新增成功!')
|
||||||
emit('submit')
|
emit('submit')
|
||||||
cancel()
|
cancel()
|
||||||
})
|
})
|
||||||
}
|
} else {
|
||||||
|
await componentEdit({
|
||||||
|
...form.value,
|
||||||
|
systemType: form.value.system[0],
|
||||||
|
pid: form.value.system[1],
|
||||||
|
image: url
|
||||||
|
}).then(res => {
|
||||||
|
ElMessage.success('修改成功!')
|
||||||
|
emit('submit')
|
||||||
|
cancel()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, 500)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="500px" :title="title" @close="cancel">
|
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="500px" :title="title" @close="cancel">
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
|
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
|
||||||
<el-form-item class="top" label="上级树">
|
<el-form-item class="top" label="上级树" prop="system">
|
||||||
<el-cascader
|
<!-- <el-cascader
|
||||||
v-model="form.system"
|
v-model="form.system"
|
||||||
:options="customDeptOption"
|
:options="customDeptOption"
|
||||||
:props="props"
|
:props="props"
|
||||||
@@ -11,14 +11,22 @@
|
|||||||
filterable
|
filterable
|
||||||
placeholder="请选择上级树"
|
placeholder="请选择上级树"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
/>
|
/> -->
|
||||||
|
<el-select v-model="form.system" placeholder="请选择上级树" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="item in customDeptOption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item class="top" label="树名称" prop="name">
|
<el-form-item class="top" label="树名称" prop="name">
|
||||||
<el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
|
<el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item class="top" label="树排序" prop="sort">
|
<el-form-item class="top" label="树排序" prop="sort">
|
||||||
<el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
|
<el-input v-model.number="form.sort" placeholder="请输入排序"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
@@ -48,10 +56,9 @@ const formRef = ref()
|
|||||||
const form = ref<anyObj>({
|
const form = ref<anyObj>({
|
||||||
name: '',
|
name: '',
|
||||||
sort: 100,
|
sort: 100,
|
||||||
system: [],
|
system: '',
|
||||||
timeKey: '3',
|
timeKey: '3',
|
||||||
code: 'base',
|
code: 'base'
|
||||||
|
|
||||||
})
|
})
|
||||||
const props = { label: 'name', value: 'id', checkStrictly: true }
|
const props = { label: 'name', value: 'id', checkStrictly: true }
|
||||||
const rules = {
|
const rules = {
|
||||||
@@ -69,9 +76,10 @@ const open = (text: string, data?: anyObj) => {
|
|||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
if (data) {
|
if (data) {
|
||||||
let Data = JSON.parse(JSON.stringify(data))
|
let Data = JSON.parse(JSON.stringify(data))
|
||||||
form.value.system = Data.systemType
|
form.value.system = Data.systemType//[]
|
||||||
form.value.name = Data.name
|
form.value.name = Data.name
|
||||||
form.value.sort = Data.sort
|
form.value.sort = Data.sort
|
||||||
|
form.value.id = Data.id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 查询父节点
|
// 查询父节点
|
||||||
@@ -113,8 +121,8 @@ const submit = () => {
|
|||||||
if (title.value == '新增树') {
|
if (title.value == '新增树') {
|
||||||
await componentAdd({
|
await componentAdd({
|
||||||
...form.value,
|
...form.value,
|
||||||
systemType: form.value.system[0],
|
systemType: form.value.system,
|
||||||
pid: form.value.system?.at(-1)
|
pid: '0' //form.value.system.length == 1 ? '0' : form.value.system
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
ElMessage.success('新增成功!')
|
ElMessage.success('新增成功!')
|
||||||
emit('submit')
|
emit('submit')
|
||||||
@@ -123,8 +131,8 @@ const submit = () => {
|
|||||||
} else {
|
} else {
|
||||||
await componentEdit({
|
await componentEdit({
|
||||||
...form.value,
|
...form.value,
|
||||||
systemType: form.value.system[0],
|
systemType: form.value.system,
|
||||||
pid: form.value.system[1]
|
pid: '0'//form.value.system.length == 1 ? '0' : form.value.system
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
ElMessage.success('修改成功!')
|
ElMessage.success('修改成功!')
|
||||||
emit('submit')
|
emit('submit')
|
||||||
|
|||||||
@@ -6,11 +6,81 @@
|
|||||||
<el-button type="primary" @click="add" icon="el-icon-Plus">新增组件</el-button>
|
<el-button type="primary" @click="add" icon="el-icon-Plus">新增组件</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table
|
<!-- <Table
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||||
:scroll-y="{ enabled: true }"
|
:scroll-y="{ enabled: true }"
|
||||||
/>
|
/> -->
|
||||||
|
<el-tabs v-model="tableName" type="border-card" @tab-change="changeTab">
|
||||||
|
<el-tab-pane v-for="item in tableStore.table.data" :key="item.name" :label="item.name" :name="item.name">
|
||||||
|
<el-tabs v-model="tableName1" tab-position="left">
|
||||||
|
<el-tab-pane v-for="k in item?.children" :key="k.name" :label="k.name" :name="k.name">
|
||||||
|
<template #label>
|
||||||
|
<span class="custom-tabs-label">
|
||||||
|
<span>{{ k.name }}</span>
|
||||||
|
|
||||||
|
<!-- <el-icon><Edit /></el-icon> -->
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-Edit"
|
||||||
|
link
|
||||||
|
class="ml10"
|
||||||
|
@click="editTree(k, 0)"
|
||||||
|
></el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-Delete"
|
||||||
|
link
|
||||||
|
class="ml0"
|
||||||
|
@click="del(k)"
|
||||||
|
></el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<div :style="height" style="overflow-y: auto; overflow-x: hidden">
|
||||||
|
<el-row :gutter="10" class="pl5 pr5 pt5">
|
||||||
|
<el-col :span="6" v-for="component in k.children" :key="component.id" class="mb10">
|
||||||
|
<el-card class="box-card" shadow="hover">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span style="display: flex; align-items: center">
|
||||||
|
{{ component.name }}
|
||||||
|
</span>
|
||||||
|
<div style="height: 32px">
|
||||||
|
<div style="display: flex; justify-content: end">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-Edit"
|
||||||
|
style="padding: 3px 0; color: blue"
|
||||||
|
type="text"
|
||||||
|
@click="editTree(component, 1)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-Delete"
|
||||||
|
style="padding: 3px 0; color: red"
|
||||||
|
type="text"
|
||||||
|
@click="del(component)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <img v-if="component.image" :src="component.image" class="image xiaoshou" /> -->
|
||||||
|
<el-image
|
||||||
|
style="width: 100%; height: 180px"
|
||||||
|
:src="component.image"
|
||||||
|
:preview-src-list="[component.image]"
|
||||||
|
show-progress
|
||||||
|
:initial-index="4"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
<Add ref="addRef" v-if="addFlag" @cancel="cancel" @submit="tableStore.index()" />
|
<Add ref="addRef" v-if="addFlag" @cancel="cancel" @submit="tableStore.index()" />
|
||||||
<!-- 新增树 -->
|
<!-- 新增树 -->
|
||||||
<Tree ref="treeRef" v-if="addFlag" @cancel="cancel" @submit="tableStore.index()" />
|
<Tree ref="treeRef" v-if="addFlag" @cancel="cancel" @submit="tableStore.index()" />
|
||||||
@@ -21,18 +91,23 @@ import { ref, onMounted, provide, nextTick } from 'vue'
|
|||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import Add from './add.vue'
|
import Add from './add.vue'
|
||||||
import Tree from './addTree.vue'
|
import Tree from './addTree.vue'
|
||||||
import { deleteSubassembly } from '@/api/user-boot/dept'
|
import { deleteSubassembly } from '@/api/user-boot/dept'
|
||||||
|
import { Edit, Delete } from '@element-plus/icons-vue'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'component'
|
name: 'component'
|
||||||
})
|
})
|
||||||
const addRef = ref()
|
const addRef = ref()
|
||||||
const addFlag = ref(false)
|
const addFlag = ref(false)
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
|
const height = ref(mainHeight(140))
|
||||||
const treeRef = ref()
|
const treeRef = ref()
|
||||||
|
const tableName = ref('')
|
||||||
|
const tableName1 = ref('')
|
||||||
const treeData: any = ref([])
|
const treeData: any = ref([])
|
||||||
const tableStore = new TableStore({
|
const tableStore = new TableStore({
|
||||||
url: '/user-boot/component/componentTree',
|
url: '/user-boot/component/componentTree',
|
||||||
@@ -61,7 +136,7 @@ const tableStore = new TableStore({
|
|||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-Plus',
|
icon: 'el-icon-Plus',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
|
disabled: row => row.systemType == null,
|
||||||
click: row => {
|
click: row => {
|
||||||
addFlag.value = true
|
addFlag.value = true
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -82,7 +157,7 @@ const tableStore = new TableStore({
|
|||||||
type: 'danger',
|
type: 'danger',
|
||||||
icon: 'el-icon-Delete',
|
icon: 'el-icon-Delete',
|
||||||
render: 'confirmButton',
|
render: 'confirmButton',
|
||||||
|
disabled: row => row.systemType == null,
|
||||||
popconfirm: {
|
popconfirm: {
|
||||||
confirmButtonText: '确认',
|
confirmButtonText: '确认',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
@@ -90,11 +165,10 @@ const tableStore = new TableStore({
|
|||||||
title: '确定删除?'
|
title: '确定删除?'
|
||||||
},
|
},
|
||||||
click: row => {
|
click: row => {
|
||||||
|
deleteSubassembly({ id: row.id }).then(() => {
|
||||||
deleteSubassembly({ id: row.id }).then(() => {
|
ElMessage.success('删除成功!')
|
||||||
ElMessage.success('删除成功!')
|
tableStore.index()
|
||||||
tableStore.index()
|
})
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -102,16 +176,22 @@ const tableStore = new TableStore({
|
|||||||
],
|
],
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
addFlag.value = false
|
addFlag.value = false
|
||||||
setTimeout(() => {
|
tableName.value = tableName.value == '' ? tableStore.table.data[0].name : tableName.value
|
||||||
tableRef.value?.getRef()?.setAllTreeExpand(true)
|
tableName1.value = tableName1.value == '' ? tableStore.table.data[0].children[0].name : tableName1.value
|
||||||
}, 0)
|
// setTimeout(() => {
|
||||||
tableStore.table.data.forEach((item: any) => {
|
// tableRef.value?.getRef()?.setAllTreeExpand(true)
|
||||||
item.state = 0
|
// }, 0)
|
||||||
})
|
// tableStore.table.data.forEach((item: any) => {
|
||||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
// item.state = 0
|
||||||
tableStore.table.data = treeData.value
|
// })
|
||||||
|
// treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||||
|
// tableStore.table.data = treeData.value
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const changeTab = (e: any) => {
|
||||||
|
console.log('🚀 ~ changeTab ~ e:', e)
|
||||||
|
tableName1.value = tableStore.table.data.filter(item => item.name == e)[0].children[0].name
|
||||||
|
}
|
||||||
const tree2List = (list: any, id: any) => {
|
const tree2List = (list: any, id: any) => {
|
||||||
//存储结果的数组
|
//存储结果的数组
|
||||||
let arr: any = []
|
let arr: any = []
|
||||||
@@ -132,6 +212,32 @@ const tree2List = (list: any, id: any) => {
|
|||||||
// 返回结果数组
|
// 返回结果数组
|
||||||
return arr
|
return arr
|
||||||
}
|
}
|
||||||
|
// 修改
|
||||||
|
const editTree = (row: any, num: number) => {
|
||||||
|
addFlag.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
if (num == 0) {
|
||||||
|
treeRef.value?.open('修改树', row)
|
||||||
|
} else {
|
||||||
|
addRef.value?.open('修改组件', row)
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
// 删除
|
||||||
|
const del = (row: any) => {
|
||||||
|
ElMessageBox.confirm('确定删除吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteSubassembly({ id: row.id }).then(() => {
|
||||||
|
ElMessage.success('删除成功!')
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
// 新增
|
// 新增
|
||||||
const add = () => {
|
const add = () => {
|
||||||
addFlag.value = true
|
addFlag.value = true
|
||||||
@@ -154,3 +260,100 @@ onMounted(() => {
|
|||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix::before,
|
||||||
|
.clearfix::after {
|
||||||
|
display: table;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
width: 100%;
|
||||||
|
// border: 1px solid #000;
|
||||||
|
box-shadow: var(--el-box-shadow-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.xiaoshou {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setstyle {
|
||||||
|
min-height: 200px;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0;
|
||||||
|
overflow: auto;
|
||||||
|
cursor: default !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-select-dropdown__wrap) {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tree) {
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
|
// 不可全选样式
|
||||||
|
.el-tree-node {
|
||||||
|
.is-leaf + .el-checkbox .el-checkbox__inner {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-checkbox .el-checkbox__inner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card__header) {
|
||||||
|
padding: 13px 20px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-pagination {
|
||||||
|
height: 58px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
background-color: var(--ba-bg-color-overlay);
|
||||||
|
padding: 13px 15px;
|
||||||
|
border-left: 1px solid #e4e7e9;
|
||||||
|
border-right: 1px solid #e4e7e9;
|
||||||
|
border-bottom: 1px solid #e4e7e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-pagination__sizes) {
|
||||||
|
.el-select {
|
||||||
|
min-width: 128px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
>
|
>
|
||||||
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
|
||||||
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
>
|
>
|
||||||
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
<el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
|
||||||
<el-button type="primary" icon="el-icon-Check" @click="preservation">保存</el-button>
|
<el-button type="primary" icon="el-icon-Check" @click="preservation">保存</el-button>
|
||||||
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
<el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,8 +12,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-form :rules="rules" ref="formRef" size="large" class="login-form form-one" :model="form">
|
<el-form :rules="rules" ref="formRef" size="large" class="login-form form-one" :model="form">
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input ref="usernameRef" v-model.trim="form.username" type="text" clearable placeholder="用户名"
|
<el-input
|
||||||
autocomplete="off">
|
ref="usernameRef"
|
||||||
|
v-model.trim="form.username"
|
||||||
|
type="text"
|
||||||
|
clearable
|
||||||
|
placeholder="用户名"
|
||||||
|
autocomplete="off"
|
||||||
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<span class="iconfont icon-yonghu" style="color: var(--el-color-primary)"></span>
|
<span class="iconfont icon-yonghu" style="color: var(--el-color-primary)"></span>
|
||||||
<!-- <Icon name="fa fa-user" style="color: var(--el-color-primary); font-size: 16px" /> -->
|
<!-- <Icon name="fa fa-user" style="color: var(--el-color-primary); font-size: 16px" /> -->
|
||||||
@@ -21,8 +27,14 @@
|
|||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<el-input ref="passwordRef" v-model.trim="form.password" type="password" clearable placeholder="密码"
|
<el-input
|
||||||
autocomplete="off">
|
ref="passwordRef"
|
||||||
|
v-model.trim="form.password"
|
||||||
|
type="password"
|
||||||
|
clearable
|
||||||
|
placeholder="密码"
|
||||||
|
autocomplete="off"
|
||||||
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<!-- <Icon name="local-password" style="color: var(--el-color-primary); font-size: 16px" /> -->
|
<!-- <Icon name="local-password" style="color: var(--el-color-primary); font-size: 16px" /> -->
|
||||||
<span class="iconfont icon-mima" style="color: var(--el-color-primary)"></span>
|
<span class="iconfont icon-mima" style="color: var(--el-color-primary)"></span>
|
||||||
@@ -30,8 +42,13 @@
|
|||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button :loading="state.submitLoading" class="submit-btn" round type="info"
|
<el-button
|
||||||
@click="onSubmit(formRef)">
|
:loading="state.submitLoading"
|
||||||
|
class="submit-btn"
|
||||||
|
round
|
||||||
|
type="info"
|
||||||
|
@click="onSubmit(formRef)"
|
||||||
|
>
|
||||||
登录
|
登录
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -105,7 +122,17 @@ onMounted(() => {
|
|||||||
timer = window.setTimeout(() => {
|
timer = window.setTimeout(() => {
|
||||||
pageBubble.init()
|
pageBubble.init()
|
||||||
}, 0)
|
}, 0)
|
||||||
|
fetchMqttUrl()
|
||||||
})
|
})
|
||||||
|
let buildUrl = 'ws://192.168.1.103:8083/mqtt' //27
|
||||||
|
const fetchMqttUrl = async () => {
|
||||||
|
const response = await fetch('/')
|
||||||
|
const mqttUrl = response.headers.get('X-Mqtt-Url')
|
||||||
|
const zutai = response.headers.get('X-Mqttzutai-Url')
|
||||||
|
|
||||||
|
window.localStorage.setItem('MQTTURL', mqttUrl || buildUrl)
|
||||||
|
window.localStorage.setItem('MQTTZUTAI', zutai || '')
|
||||||
|
}
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
clearTimeout(timer)
|
clearTimeout(timer)
|
||||||
|
|||||||
@@ -1,93 +1,93 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" :title="title">
|
<el-dialog class="cn-operate-dialog" width="500px" v-model.trim="dialogVisible" :title="title">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||||
<el-form-item label="新密码:" prop="newPwd" style="margin-top: 20px">
|
<el-form-item label="新密码:" prop="newPwd" style="margin-top: 20px">
|
||||||
<el-input v-model.trim="form.newPwd" type="password" placeholder="请输入新密码" show-password />
|
<el-input v-model.trim="form.newPwd" type="password" placeholder="请输入新密码" show-password />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="确认密码:" prop="confirmPwd" style="margin-top: 20px">
|
<el-form-item label="确认密码:" prop="confirmPwd" style="margin-top: 20px">
|
||||||
<el-input v-model.trim="form.confirmPwd" type="password" placeholder="请输入确认密码" show-password />
|
<el-input v-model.trim="form.confirmPwd" type="password" placeholder="请输入确认密码" show-password />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button type="primary" @click="submit">确认</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, inject } from 'vue'
|
import { ref, inject } from 'vue'
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { updateFirstPassword } from '@/api/user-boot/user'
|
import { updateFirstPassword } from '@/api/user-boot/user'
|
||||||
import { validatePwd } from '@/utils/common'
|
import { validatePwd } from '@/utils/common'
|
||||||
import { useAdminInfo } from '@/stores/adminInfo'
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
const title = ref('修改默认密码')
|
const title = ref('修改默认密码')
|
||||||
const formRef = ref()
|
const formRef = ref()
|
||||||
// 注意不要和表单ref的命名冲突
|
// 注意不要和表单ref的命名冲突
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
newPwd: '',
|
newPwd: '',
|
||||||
confirmPwd: '',
|
confirmPwd: '',
|
||||||
loginName: ''
|
loginName: ''
|
||||||
})
|
})
|
||||||
const rules = {
|
const rules = {
|
||||||
newPwd: [
|
newPwd: [
|
||||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||||
{
|
{
|
||||||
min: 6,
|
min: 6,
|
||||||
max: 16,
|
max: 16,
|
||||||
message: '长度在 6 到 16 个字符',
|
message: '长度在 6 到 16 个字符',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
},
|
},
|
||||||
{ validator: validatePwd, trigger: 'blur' }
|
{ validator: validatePwd, trigger: 'blur' }
|
||||||
],
|
],
|
||||||
confirmPwd: [
|
confirmPwd: [
|
||||||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||||
{
|
{
|
||||||
min: 6,
|
min: 6,
|
||||||
max: 16,
|
max: 16,
|
||||||
message: '长度在 6 到 16 个字符',
|
message: '长度在 6 到 16 个字符',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
validator: (rule: any, value: string, callback: any) => {
|
validator: (rule: any, value: string, callback: any) => {
|
||||||
if (value === '') {
|
if (value === '') {
|
||||||
callback(new Error('请再次输入密码'))
|
callback(new Error('请再次输入密码'))
|
||||||
} else if (value !== form.newPwd) {
|
} else if (value !== form.newPwd) {
|
||||||
callback(new Error('两次输入密码不一致!'))
|
callback(new Error('两次输入密码不一致!'))
|
||||||
} else {
|
} else {
|
||||||
callback()
|
callback()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
const open = (loginName: string) => {
|
const open = (loginName: string) => {
|
||||||
form.loginName = loginName
|
form.loginName = loginName
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
}
|
}
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
formRef.value.validate(async (valid: boolean) => {
|
formRef.value.validate(async (valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
updateFirstPassword({
|
updateFirstPassword({
|
||||||
name: form.loginName,
|
name: form.loginName,
|
||||||
password: form.confirmPwd
|
password: form.confirmPwd
|
||||||
}).then((res: any) => {
|
}).then((res: any) => {
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
ElMessage.success('密码修改成功, 请重新登录')
|
ElMessage.success('密码修改成功, 请重新登录')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({ open })
|
defineExpose({ open })
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user