Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3ffb11defa | ||
|
|
0b9aafc1b5 | ||
|
|
762965b1e4 | ||
|
|
a30379ab01 | ||
| 9f1fbf93cd | |||
| b5fc946ce2 | |||
|
|
1171d37a86 | ||
|
|
3fdb41c468 |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -23,3 +23,5 @@ dist-ssr
|
|||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
pnpm-lock.yaml
|
pnpm-lock.yaml
|
||||||
|
|
||||||
|
#test
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import createAxios from '@/utils/request'
|
import createAxios from '@/utils/request'
|
||||||
|
|
||||||
// 装置基础数据和模板数据
|
// 设备基础数据和模板数据
|
||||||
export function getDeviceData(deviceId: string, type: string, lineId: string) {
|
export function getDeviceData(deviceId: string, type: string, lineId: string) {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('deviceId', deviceId)
|
form.append('deviceId', deviceId)
|
||||||
@@ -142,3 +142,11 @@ export function getModuleState(data?: any) {
|
|||||||
params: data
|
params: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//获取运行取数
|
||||||
|
export function getRawData(data?: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-device-boot/pqsCommunicate/getRawData',
|
||||||
|
method: 'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import createAxios from "@/utils/request";
|
import createAxios from '@/utils/request'
|
||||||
|
|
||||||
//根据Id获取台账信息
|
//根据Id获取台账信息
|
||||||
export function getInfoById(id: any) {
|
export function getInfoById(id: any) {
|
||||||
@@ -11,7 +11,6 @@ export function getInfoById(id: any) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//工程查询通过id获取
|
//工程查询通过id获取
|
||||||
export function getEngineerById(id: any) {
|
export function getEngineerById(id: any) {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
@@ -23,7 +22,6 @@ export function getEngineerById(id: any) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//项目查询通过id获取
|
//项目查询通过id获取
|
||||||
export function getProjectById(id: any) {
|
export function getProjectById(id: any) {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
@@ -53,7 +51,7 @@ export function getById(id: any) {
|
|||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csline/getById',
|
url: '/cs-device-boot/csline/getById',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: form
|
data: form
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -75,13 +73,15 @@ export function addLedger(data: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//修改-删除项目
|
//修改-删除项目
|
||||||
export function deleteProject(id: any,name:any,area:any,description:any,status:any) {
|
export function deleteProject(id: any, name: any, area: any, description: any, status: any, sort: any, topoIds: any) {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('id', id)
|
form.append('id', id)
|
||||||
form.append('name', name)
|
form.append('name', name)
|
||||||
form.append('area', area)
|
form.append('area', area)
|
||||||
form.append('description', description)
|
form.append('description', description)
|
||||||
form.append('status', status)
|
form.append('status', status)
|
||||||
|
form.append('sort', sort)
|
||||||
|
form.append('topoIds', topoIds)
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/project/auditAppProject',
|
url: '/cs-device-boot/project/auditAppProject',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
@@ -105,7 +105,7 @@ export const deleteLine = (id: any) => {
|
|||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('id', id)
|
form.append('id', id)
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csline/delCldLine',
|
url: '/cs-device-boot/csline/delCldLine',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: form
|
data: form
|
||||||
})
|
})
|
||||||
@@ -120,7 +120,6 @@ export function updateEquipment(data: any) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//修改监测点
|
//修改监测点
|
||||||
export function updateLine(data: any) {
|
export function updateLine(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
@@ -134,8 +133,7 @@ export function updateLine(data: any) {
|
|||||||
export function pushLog() {
|
export function pushLog() {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csTerminalLogs/pushCldInfo',
|
url: '/cs-device-boot/csTerminalLogs/pushCldInfo',
|
||||||
method: 'post',
|
method: 'post'
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -143,7 +141,6 @@ export function pushLog() {
|
|||||||
export function queryPushResult() {
|
export function queryPushResult() {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csTerminalReply/queryData',
|
url: '/cs-device-boot/csTerminalReply/queryData',
|
||||||
method: 'post',
|
method: 'post'
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -14,7 +14,7 @@ export function getGroup(dataSet: string) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 装置分组实时数据
|
// 设备分组实时数据
|
||||||
export function deviceHisData(data: any) {
|
export function deviceHisData(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csGroup/deviceHistoryData',
|
url: '/cs-device-boot/csGroup/deviceHistoryData',
|
||||||
@@ -33,7 +33,7 @@ export function deviceHisData(data: any) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 装置分组历史数据
|
// 设备分组历史数据
|
||||||
export function deviceRtData(data: any) {
|
export function deviceRtData(data: any) {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('id', data.id)
|
form.append('id', data.id)
|
||||||
@@ -51,7 +51,7 @@ export function deviceRtData(data: any) {
|
|||||||
data: form
|
data: form
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 装置分组历史数据
|
// 设备分组历史数据
|
||||||
export function realTimeData(data: any) {
|
export function realTimeData(data: any) {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('id', data.id)
|
form.append('id', data.id)
|
||||||
@@ -76,7 +76,7 @@ export function getTestData(data: any) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 设备监控-删除装置测试项
|
// 设备监控-删除设备测试项
|
||||||
export function deleteItem(data: any) {
|
export function deleteItem(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/wlRecord/deleteItem',
|
url: '/cs-device-boot/wlRecord/deleteItem',
|
||||||
|
|||||||
@@ -1,18 +1,20 @@
|
|||||||
import createAxios from '@/utils/request'
|
import createAxios from '@/utils/request'
|
||||||
|
|
||||||
// 设备列表
|
// 设备列表
|
||||||
export function getDeviceTree() {
|
export function getDeviceTree(params?: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csLedger/deviceTree',
|
url: '/cs-device-boot/csLedger/deviceTree',
|
||||||
method: 'POST'
|
method: 'POST',
|
||||||
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监测点列表
|
// 监测点列表
|
||||||
export function getLineTree() {
|
export function getLineTree(params?: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/csLedger/lineTree',
|
url: '/cs-device-boot/csLedger/lineTree',
|
||||||
method: 'POST'
|
method: 'POST',
|
||||||
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 监测点列表治理
|
// 监测点列表治理
|
||||||
|
|||||||
@@ -79,4 +79,12 @@ export const addProject = (data: any) => {
|
|||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 修改项目
|
||||||
|
export const updateProjects = (data: any) => {
|
||||||
|
return request({
|
||||||
|
url: '/cs-device-boot/engineeringProjectRelation/updateProject',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -15,7 +15,54 @@ export function getFileServiceFileOrDir(data) {
|
|||||||
method: 'POST'
|
method: 'POST'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 监测设备-目录信息询问
|
||||||
|
export function listDir(data) {
|
||||||
|
return createAxios({
|
||||||
|
url: `/zl-event-boot/file/listDir`,
|
||||||
|
method: 'POST',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 下载文件
|
||||||
|
export function downloadFileFromFrontr(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: `/zl-event-boot/file/downloadFileFromFront`,
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 删除文件
|
||||||
|
export function deleteCld(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: `/zl-event-boot/file/delete`,
|
||||||
|
method: 'POST',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 新建文件
|
||||||
|
export function mkdir(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: `/zl-event-boot/file/mkdir`,
|
||||||
|
method: 'POST',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 上传文件
|
||||||
|
export function uploadFileToFront(obj: any) {
|
||||||
|
let form = new FormData()
|
||||||
|
form.append('file', obj.file)
|
||||||
|
form.append('devId', obj.devId)
|
||||||
|
form.append('dirPath', obj.dirPath)
|
||||||
|
return createAxios({
|
||||||
|
url: `/zl-event-boot/file/uploadFileToFront`,
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
},
|
||||||
|
data: form
|
||||||
|
})
|
||||||
|
}
|
||||||
//设备文件下载
|
//设备文件下载
|
||||||
export function downLoadDeviceFile(data) {
|
export function downLoadDeviceFile(data) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
@@ -38,7 +85,7 @@ export function downLoadDeviceFilePath(obj) {
|
|||||||
data: form
|
data: form
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//装置重启
|
//设备重启
|
||||||
export function reStartDevice(data) {
|
export function reStartDevice(data) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: `/cs-device-boot/EquipmentDelivery/rebootDevice?nDid=${data.nDid}`,
|
url: `/cs-device-boot/EquipmentDelivery/rebootDevice?nDid=${data.nDid}`,
|
||||||
@@ -46,7 +93,7 @@ export function reStartDevice(data) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//上传文件至装置
|
//上传文件至设备
|
||||||
export function uploadDeviceFile(data) {
|
export function uploadDeviceFile(data) {
|
||||||
let form = new FormData()
|
let form = new FormData()
|
||||||
form.append('file', data.file)
|
form.append('file', data.file)
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export function getMakeUpData(data: any) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//查询装置目录-文件
|
//查询设备目录-文件
|
||||||
export function getAskDirOrFile(data: any) {
|
export function getAskDirOrFile(data: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: `/cs-harmonic-boot/offlineDataUpload/askDirOrFile?fileType=${data.fileType}&nDid=${data.nDid}&path=${data.path}&prjName=${data.prjName}`,
|
url: `/cs-harmonic-boot/offlineDataUpload/askDirOrFile?fileType=${data.fileType}&nDid=${data.nDid}&path=${data.path}&prjName=${data.prjName}`,
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ export const portableDeviceRegister = (params: any) => {
|
|||||||
export const portableDeviceAccess = (data: any) => {
|
export const portableDeviceAccess = (data: any) => {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: `/access-boot/device/wlAccess?nDid=${data.nDid}`,
|
url: `/access-boot/device/wlAccess?nDid=${data.nDid}`,
|
||||||
method: 'POST',
|
method: 'POST'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 下载模版
|
// 下载模版
|
||||||
@@ -96,3 +96,10 @@ export function getExcelTemplate() {
|
|||||||
responseType: 'blob'
|
responseType: 'blob'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 查询工程信息列表
|
||||||
|
export function engineeringProject() {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-device-boot/engineeringProjectRelation/list',
|
||||||
|
method: 'post'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -147,8 +147,9 @@ const tableStore: any = new TableStore({
|
|||||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
formatter: function (a: any) {
|
formatter: function (a: any) {
|
||||||
var relVal = ''
|
var relVal = `<strong>${a.seriesName}</strong><br/>`
|
||||||
relVal = "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
|
||||||
|
relVal += "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
||||||
relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
|
relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
|
||||||
relVal += "<font style='color:" + "'>特征幅值:" + a.value[1].toFixed(2) + '%</font>'
|
relVal += "<font style='color:" + "'>特征幅值:" + a.value[1].toFixed(2) + '%</font>'
|
||||||
return relVal
|
return relVal
|
||||||
@@ -214,18 +215,18 @@ const tableStore: any = new TableStore({
|
|||||||
// [0.2, 10, '2023-01-01 10:00:00'],
|
// [0.2, 10, '2023-01-01 10:00:00'],
|
||||||
// [0.4, 50, '2023-01-01 11:00:00']
|
// [0.4, 50, '2023-01-01 11:00:00']
|
||||||
// ],
|
// ],
|
||||||
legendSymbol: 'circle',
|
legendSymbol: 'circle'
|
||||||
|
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
show: true,
|
// show: true,
|
||||||
trigger: 'item',
|
// trigger: 'item',
|
||||||
formatter: function (params: any) {
|
// formatter: function (params: any) {
|
||||||
return `<strong>可容忍事件</strong><br/>
|
// return `<strong>可容忍事件</strong><br/>
|
||||||
持续时间: ${params.value[0]}s<br/>
|
// 持续时间: ${params.value[0]}s<br/>
|
||||||
特征幅值: ${params.value[1].toFixed(2)}%<br/>
|
// 特征幅值: ${params.value[1].toFixed(2)}%<br/>
|
||||||
发生时间: ${params.value[2] || 'N/A'}`
|
// 发生时间: ${params.value[2] || 'N/A'}`
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '不可容忍事件',
|
name: '不可容忍事件',
|
||||||
|
|||||||
@@ -47,7 +47,6 @@ const init = () => {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
formatter: (params: any) => {
|
formatter: (params: any) => {
|
||||||
console.log('🚀 ~ init ~ params:', params)
|
|
||||||
if (!params || params.length === 0) return ''
|
if (!params || params.length === 0) return ''
|
||||||
|
|
||||||
// 使用第一个项目的轴标签作为时间标题
|
// 使用第一个项目的轴标签作为时间标题
|
||||||
@@ -90,8 +89,6 @@ const initData = async (row: any) => {
|
|||||||
let [min, max] = yMethod(res.data.map((item: any) => item.value.split(',')).flat())
|
let [min, max] = yMethod(res.data.map((item: any) => item.value.split(',')).flat())
|
||||||
|
|
||||||
// 从第一条数据中提取时间作为x轴数据
|
// 从第一条数据中提取时间作为x轴数据
|
||||||
const firstItem = res.data[0]
|
|
||||||
const xAxisData = firstItem.time.split(',')
|
|
||||||
|
|
||||||
// 定义相位颜色映射
|
// 定义相位颜色映射
|
||||||
const phaseColors: any = {
|
const phaseColors: any = {
|
||||||
@@ -107,6 +104,7 @@ const initData = async (row: any) => {
|
|||||||
return a.phasic.localeCompare(b.phasic)
|
return a.phasic.localeCompare(b.phasic)
|
||||||
})
|
})
|
||||||
.map((item: any) => {
|
.map((item: any) => {
|
||||||
|
const xAxisData = item.time.split(',')
|
||||||
const values = xAxisData.map((time: string, index: number) => {
|
const values = xAxisData.map((time: string, index: number) => {
|
||||||
// 将传入的日期与时间拼接成完整的时间字符串
|
// 将传入的日期与时间拼接成完整的时间字符串
|
||||||
const fullTime = `${row.time} ${time}`
|
const fullTime = `${row.time} ${time}`
|
||||||
|
|||||||
@@ -21,7 +21,8 @@
|
|||||||
isGroup
|
isGroup
|
||||||
></Table>
|
></Table>
|
||||||
<!-- 指标日趋势图 -->
|
<!-- 指标日趋势图 -->
|
||||||
<DailyTrendChart v-if="dialogTrendChart" ref="dailyTrendChartRef" @close="dialogTrendChart = false" />
|
<HarmonicRatio ref="harmonicRatioRef" v-if="dialogFlag" @close="onHarmonicRatioClose" :showIndex="false" />
|
||||||
|
<!-- <DailyTrendChart v-if="dialogTrendChart" ref="dailyTrendChartRef" @close="dialogTrendChart = false" /> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -31,9 +32,10 @@ import Table from '@/components/table/index.vue'
|
|||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import DailyTrendChart from '@/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue'
|
import DailyTrendChart from '@/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue'
|
||||||
import { getTime } from '@/utils/formatTime'
|
import { getTime } from '@/utils/formatTime'
|
||||||
|
import HarmonicRatio from '@/components/cockpit/overLimitStatistics/components/harmonicRatio.vue'
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: [String, Number] },
|
w: { type: [String, Number] },
|
||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
@@ -47,7 +49,7 @@ const prop = defineProps({
|
|||||||
const TableHeaderRef = ref()
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
const headerHeight = ref(57)
|
const headerHeight = ref(57)
|
||||||
|
const harmonicRatioRef: any = ref(null)
|
||||||
const dialogTrendChart = ref(false)
|
const dialogTrendChart = ref(false)
|
||||||
|
|
||||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
@@ -143,23 +145,14 @@ const tableStore: any = new TableStore({
|
|||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
// 定义 x 轴标签顺序
|
// 定义 x 轴标签顺序
|
||||||
const xAxisLabels = ['长时闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
|
||||||
|
|
||||||
// 根据指标名称顺序提取对应的 extent 数据
|
|
||||||
const chartData = xAxisLabels.map(label => {
|
|
||||||
// 在表格数据中查找对应指标名称的数据项
|
|
||||||
const item = tableStore.table.data.find((row: any) => row.name === label)
|
|
||||||
// 如果找到对应项,则返回 extent 值,否则返回 0,并保留两位小数
|
|
||||||
const extentValue = item ? item.extent || 0 : 0
|
|
||||||
return Math.round(extentValue * 100) / 100
|
|
||||||
})
|
|
||||||
echartList.value = {
|
echartList.value = {
|
||||||
title: {
|
title: {
|
||||||
text: '指标越限严重度'
|
text: '指标越限严重度'
|
||||||
},
|
},
|
||||||
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: xAxisLabels
|
data: tableStore.table.data.map((item: any) => item.name)
|
||||||
},
|
},
|
||||||
|
|
||||||
yAxis: {
|
yAxis: {
|
||||||
@@ -175,7 +168,7 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
name: '越限占比',
|
name: '越限占比',
|
||||||
data: chartData,
|
data: tableStore.table.data.map((item: any) => Math.floor(item.extent * 100) / 100),
|
||||||
barMaxWidth: 30
|
barMaxWidth: 30
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -188,15 +181,32 @@ const tableRef = ref()
|
|||||||
provide('tableRef', tableRef)
|
provide('tableRef', tableRef)
|
||||||
|
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
const codeMap = [
|
||||||
|
{ key: '闪变', code: 'flickerOvertime' },
|
||||||
|
{ key: '电压偏差', code: 'voltageDevOvertime' },
|
||||||
|
{ key: '三相', code: 'ubalanceOvertime' },
|
||||||
|
{ key: '谐波电压', code: 'uharm' },
|
||||||
|
{ key: '谐波电流', code: 'iharm' },
|
||||||
|
];
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
dialogTrendChart.value = true
|
dialogTrendChart.value = true
|
||||||
|
|
||||||
if (column.field == 'maxValue' && row.lineId) {
|
if (column.field == 'maxValue' ) {
|
||||||
nextTick(() => {
|
if(row.lineId==null){
|
||||||
dailyTrendChartRef.value.open(row)
|
ElMessage.info('暂无越限监测点!')
|
||||||
|
}else{
|
||||||
|
nextTick(() => {
|
||||||
|
// dailyTrendChartRef.value.open(row)
|
||||||
|
dialogFlag.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
|
||||||
|
const code = codeMap.find(item => row.name.includes(item.key))?.code || '';
|
||||||
|
harmonicRatioRef.value.openDialog(row,code,column.title.replace(/次/g, ""))
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -218,6 +228,14 @@ const setTime = () => {
|
|||||||
console.warn('获取时间失败,time 不是一个有效数组')
|
console.warn('获取时间失败,time 不是一个有效数组')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const dialogFlag=ref(false)
|
||||||
|
// 谐波弹窗关闭时的回调
|
||||||
|
const onHarmonicRatioClose = () => {
|
||||||
|
dialogFlag.value = false
|
||||||
|
// 重新打开指标越限详情弹窗
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
|
|||||||
@@ -93,15 +93,7 @@ const tableStore: any = new TableStore({
|
|||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '谐波电压越限(%)',
|
|
||||||
children: loop50('uharm')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '谐波电流越限(%)',
|
|
||||||
children: loop50('iharm')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '电压偏差越限(%)',
|
title: '电压偏差越限(%)',
|
||||||
field: 'voltageDevOvertime',
|
field: 'voltageDevOvertime',
|
||||||
width: '100',
|
width: '100',
|
||||||
@@ -119,6 +111,15 @@ const tableStore: any = new TableStore({
|
|||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电压越限(%)',
|
||||||
|
children: loop50('uharm')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电流越限(%)',
|
||||||
|
children: loop50('iharm')
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// title: '频率偏差越限(%)',
|
// title: '频率偏差越限(%)',
|
||||||
|
|||||||
@@ -186,7 +186,7 @@ const initProbabilityData = () => {
|
|||||||
var tips = ''
|
var tips = ''
|
||||||
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
||||||
tips += '越限程度: ' + params.seriesName + '</br>'
|
tips += '越限程度: ' + params.seriesName + '</br>'
|
||||||
tips += '越限次数: ' + params.value[2] + '</br>'
|
tips += '越限天数: ' + params.value[2] + '</br>'
|
||||||
return tips
|
return tips
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -228,7 +228,7 @@ const initProbabilityData = () => {
|
|||||||
},
|
},
|
||||||
zAxis3D: {
|
zAxis3D: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '越限次数',
|
name: '越限天数',
|
||||||
nameLocation: 'middle',
|
nameLocation: 'middle',
|
||||||
nameGap: 30,
|
nameGap: 30,
|
||||||
minInterval: 10
|
minInterval: 10
|
||||||
|
|||||||
@@ -185,7 +185,7 @@ const initProbabilityData = () => {
|
|||||||
var tips = ''
|
var tips = ''
|
||||||
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
||||||
tips += '越限程度: ' + params.seriesName + '</br>'
|
tips += '越限程度: ' + params.seriesName + '</br>'
|
||||||
tips += '越限次数: ' + params.value[2] + '</br>'
|
tips += '越限天数: ' + params.value[2] + '</br>'
|
||||||
return tips
|
return tips
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -227,7 +227,7 @@ const initProbabilityData = () => {
|
|||||||
},
|
},
|
||||||
zAxis3D: {
|
zAxis3D: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '越限次数',
|
name: '越限天数',
|
||||||
nameLocation: 'middle',
|
nameLocation: 'middle',
|
||||||
nameGap: 30,
|
nameGap: 30,
|
||||||
minInterval: 10
|
minInterval: 10
|
||||||
|
|||||||
@@ -93,15 +93,7 @@ const tableStore: any = new TableStore({
|
|||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||||
}
|
}
|
||||||
},
|
}, {
|
||||||
{
|
|
||||||
title: '谐波电压越限(分钟)',
|
|
||||||
children: loop50('uharm')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '谐波电流越限(分钟)',
|
|
||||||
children: loop50('iharm')
|
|
||||||
}, {
|
|
||||||
title: '电压偏差越限(分钟)',
|
title: '电压偏差越限(分钟)',
|
||||||
field: 'uaberranceOvertime',
|
field: 'uaberranceOvertime',
|
||||||
width: '100',
|
width: '100',
|
||||||
@@ -119,6 +111,14 @@ const tableStore: any = new TableStore({
|
|||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电压越限(分钟)',
|
||||||
|
children: loop50('uharm')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电流越限(分钟)',
|
||||||
|
children: loop50('iharm')
|
||||||
|
},
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// title: '频率偏差越限(分钟)',
|
// title: '频率偏差越限(分钟)',
|
||||||
|
|||||||
@@ -73,15 +73,7 @@ const tableStore: any = new TableStore({
|
|||||||
field: 'flicker',
|
field: 'flicker',
|
||||||
width: '80'
|
width: '80'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '谐波电压越限(分钟)',
|
|
||||||
children: loop50('voltage')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '谐波电流越限(分钟)',
|
|
||||||
children: loop50('harmonicCurrent')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '三相不平衡度越限(分钟)',
|
title: '三相不平衡度越限(分钟)',
|
||||||
field: 'flicker',
|
field: 'flicker',
|
||||||
width: '100'
|
width: '100'
|
||||||
@@ -95,7 +87,16 @@ const tableStore: any = new TableStore({
|
|||||||
title: '频率偏差越限(分钟)',
|
title: '频率偏差越限(分钟)',
|
||||||
field: 'flicker',
|
field: 'flicker',
|
||||||
width: '100'
|
width: '100'
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电压越限(分钟)',
|
||||||
|
children: loop50('voltage')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电流越限(分钟)',
|
||||||
|
children: loop50('harmonicCurrent')
|
||||||
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {},
|
beforeSearchFun: () => {},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
|
|||||||
@@ -92,15 +92,7 @@ const tableStore: any = new TableStore({
|
|||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '谐波电压越限(分钟)',
|
|
||||||
children: loop50('voltage')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '谐波电流越限(分钟)',
|
|
||||||
children: loop50('harmonicCurrent')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '三相不平衡度越限(分钟)',
|
title: '三相不平衡度越限(分钟)',
|
||||||
field: 'flicker',
|
field: 'flicker',
|
||||||
width: '100'
|
width: '100'
|
||||||
@@ -114,7 +106,16 @@ const tableStore: any = new TableStore({
|
|||||||
title: '频率偏差越限(分钟)',
|
title: '频率偏差越限(分钟)',
|
||||||
field: 'flicker',
|
field: 'flicker',
|
||||||
width: '100'
|
width: '100'
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电压越限(分钟)',
|
||||||
|
children: loop50('voltage')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电流越限(分钟)',
|
||||||
|
children: loop50('harmonicCurrent')
|
||||||
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {},
|
beforeSearchFun: () => {},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
|
|||||||
@@ -93,15 +93,7 @@ const tableStore: any = new TableStore({
|
|||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '谐波电压越限(%)',
|
|
||||||
children: loop50('uharm')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '谐波电流越限(%)',
|
|
||||||
children: loop50('iharm')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '电压偏差越限(%)',
|
title: '电压偏差越限(%)',
|
||||||
field: 'voltageDevOvertime',
|
field: 'voltageDevOvertime',
|
||||||
width: '100',
|
width: '100',
|
||||||
@@ -119,6 +111,15 @@ const tableStore: any = new TableStore({
|
|||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电压越限(%)',
|
||||||
|
children: loop50('uharm')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电流越限(%)',
|
||||||
|
children: loop50('iharm')
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// title: '频率偏差越限(%)',
|
// title: '频率偏差越限(%)',
|
||||||
|
|||||||
@@ -5,10 +5,22 @@
|
|||||||
ref="TableHeaderRef"
|
ref="TableHeaderRef"
|
||||||
:showReset="false"
|
:showReset="false"
|
||||||
@selectChange="selectChange"
|
@selectChange="selectChange"
|
||||||
|
|
||||||
v-if="fullscreen"
|
v-if="fullscreen"
|
||||||
:timeKeyList="prop.timeKey"
|
:timeKeyList="prop.timeKey"
|
||||||
></TableHeader>
|
>
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="关键字筛选">
|
||||||
|
<el-input
|
||||||
|
maxlength="32"
|
||||||
|
show-word-limit
|
||||||
|
style="width: 240px"
|
||||||
|
v-model.trim="tableStore.table.params.searchValue"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入监测点名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
<Table
|
<Table
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
@cell-click="cellClickEvent"
|
@cell-click="cellClickEvent"
|
||||||
@@ -189,7 +201,7 @@ const tableStore: any = new TableStore({
|
|||||||
field: 'volGrade',
|
field: 'volGrade',
|
||||||
minWidth: '80',
|
minWidth: '80',
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return row.cellValue==0?'/': row.cellValue+'kV' || '/'
|
return row.cellValue == 0 ? '/' : row.cellValue + 'kV' || '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -236,7 +248,8 @@ const tableStore: any = new TableStore({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作', fixed: 'right',
|
title: '操作',
|
||||||
|
fixed: 'right',
|
||||||
width: 150,
|
width: 150,
|
||||||
render: 'buttons',
|
render: 'buttons',
|
||||||
buttons: [
|
buttons: [
|
||||||
@@ -294,6 +307,7 @@ const tableStore: any = new TableStore({
|
|||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
provide('tableRef', tableRef)
|
provide('tableRef', tableRef)
|
||||||
tableStore.table.params.keywords = ''
|
tableStore.table.params.keywords = ''
|
||||||
|
tableStore.table.params.searchValue = ''
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
const setTime = () => {
|
const setTime = () => {
|
||||||
@@ -304,7 +318,6 @@ const setTime = () => {
|
|||||||
// ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
// ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||||
// : prop.timeValue
|
// : prop.timeValue
|
||||||
// )
|
// )
|
||||||
|
|
||||||
// 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]
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog draggable title="趋势图" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable :title="titles" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<!-- 总体指标占比详情谐波含有率 -->
|
<!-- 总体指标占比详情谐波含有率 -->
|
||||||
<div>
|
<div>
|
||||||
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
<el-form-item>
|
<el-form-item>
|
||||||
<DatePicker ref="datePickerRef"></DatePicker>
|
<DatePicker ref="datePickerRef"></DatePicker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="统计指标" label-width="80px">
|
<el-form-item label="统计指标" label-width="80px" v-if="props.showIndex">
|
||||||
<el-select
|
<el-select
|
||||||
multiple
|
multiple
|
||||||
:multiple-limit="2"
|
:multiple-limit="2"
|
||||||
@@ -107,9 +107,14 @@ defineOptions({
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
TrendList: {
|
TrendList: {
|
||||||
type: Array
|
type: Array
|
||||||
|
},
|
||||||
|
showIndex:{
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const titles = ref('趋势图')
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
// console.log("🚀 ~ props:", props.TrendList)
|
// console.log("🚀 ~ props:", props.TrendList)
|
||||||
const showEchart = ref(true)
|
const showEchart = ref(true)
|
||||||
@@ -268,6 +273,7 @@ const lineStyle = [{ type: 'solid' }, { type: 'dashed' }, { type: 'dotted' }]
|
|||||||
const init = async () => {
|
const init = async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
// 选择指标的时候切换legend内容和data数据
|
// 选择指标的时候切换legend内容和data数据
|
||||||
|
echartsData.value = {}
|
||||||
let list: any = []
|
let list: any = []
|
||||||
legendDictList.value?.selectedList?.map((item: any) => {
|
legendDictList.value?.selectedList?.map((item: any) => {
|
||||||
searchForm.value.index.map((vv: any) => {
|
searchForm.value.index.map((vv: any) => {
|
||||||
@@ -407,6 +413,7 @@ const setEchart = () => {
|
|||||||
formatter(params: any) {
|
formatter(params: any) {
|
||||||
const xname = params[0].value[0]
|
const xname = params[0].value[0]
|
||||||
let str = `${xname}<br>`
|
let str = `${xname}<br>`
|
||||||
|
|
||||||
params.forEach((el: any, index: any) => {
|
params.forEach((el: any, index: any) => {
|
||||||
let marker = ''
|
let marker = ''
|
||||||
|
|
||||||
@@ -651,6 +658,7 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
const openDialog = async (row: any, field: any, title: any) => {
|
const openDialog = async (row: any, field: any, title: any) => {
|
||||||
|
titles.value = `${row?.lineName ? `${row.lineName}_` : ''}趋势图`
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
trendRequestData.value = row
|
trendRequestData.value = row
|
||||||
|
|
||||||
|
|||||||
@@ -92,14 +92,6 @@ const tableStore: any = new TableStore({
|
|||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '谐波电压越限(%)',
|
|
||||||
children: loop50('uharm')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '谐波电流越限(%)',
|
|
||||||
children: loop50('iharm')
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '电压偏差越限(%)',
|
title: '电压偏差越限(%)',
|
||||||
@@ -119,6 +111,15 @@ const tableStore: any = new TableStore({
|
|||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电压越限(%)',
|
||||||
|
children: loop50('uharm')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '谐波电流越限(%)',
|
||||||
|
children: loop50('iharm')
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// title: '频率偏差越限(%)',
|
// title: '频率偏差越限(%)',
|
||||||
|
|||||||
@@ -5,10 +5,22 @@
|
|||||||
ref="TableHeaderRef"
|
ref="TableHeaderRef"
|
||||||
:showReset="false"
|
:showReset="false"
|
||||||
@selectChange="selectChange"
|
@selectChange="selectChange"
|
||||||
|
|
||||||
v-if="fullscreen"
|
v-if="fullscreen"
|
||||||
:timeKeyList="prop.timeKey"
|
:timeKeyList="prop.timeKey"
|
||||||
></TableHeader>
|
>
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="关键字筛选">
|
||||||
|
<el-input
|
||||||
|
maxlength="32"
|
||||||
|
show-word-limit
|
||||||
|
style="width: 240px"
|
||||||
|
v-model.trim="tableStore.table.params.searchValue"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入敏感负荷名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
<Table
|
<Table
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
@cell-click="cellClickEvent"
|
@cell-click="cellClickEvent"
|
||||||
@@ -66,7 +78,7 @@ const fullscreen = computed(() => {
|
|||||||
|
|
||||||
const OverLimitDetailsRef = ref()
|
const OverLimitDetailsRef = ref()
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/cs-harmonic-boot/pqSensitiveUser/getList',
|
url: '/cs-harmonic-boot/pqSensitiveUser/getListByUser',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
showPage: fullscreen.value ? true : false,
|
showPage: fullscreen.value ? true : false,
|
||||||
column: [
|
column: [
|
||||||
@@ -115,7 +127,7 @@ const tableStore: any = new TableStore({
|
|||||||
|
|
||||||
loadCallback: () => {}
|
loadCallback: () => {}
|
||||||
})
|
})
|
||||||
|
tableStore.table.params.searchValue = ''
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
provide('tableRef', tableRef)
|
provide('tableRef', tableRef)
|
||||||
|
|
||||||
@@ -137,7 +149,6 @@ const setTime = () => {
|
|||||||
// ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
// ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||||
// : prop.timeValue
|
// : prop.timeValue
|
||||||
// )
|
// )
|
||||||
|
|
||||||
// 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]
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
<el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
|
||||||
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
|
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="监测点">
|
<el-form-item label="监测点" v-if="props.showLine">
|
||||||
<el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称">
|
<el-select v-model="tableStore.table.params.lineId" filterable placeholder="请选择监测点名称">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
@@ -14,6 +14,21 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="暂态类型">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.eventType"
|
||||||
|
style="min-width: 150px"
|
||||||
|
clearable
|
||||||
|
placeholder="请选择暂态类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in eventList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef" isGroup :height="heightRef"></Table>
|
<Table ref="tableRef" isGroup :height="heightRef"></Table>
|
||||||
@@ -46,6 +61,13 @@ import { mainHeight } from '@/utils/layout'
|
|||||||
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 { getSimpleLine } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { getSimpleLine } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
|
interface Props {
|
||||||
|
showLine?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
showLine: true
|
||||||
|
})
|
||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
const waveFormAnalysisRef: any = ref(null)
|
const waveFormAnalysisRef: any = ref(null)
|
||||||
@@ -62,7 +84,11 @@ const heightRef = ref(mainHeight(168, 2.1).height)
|
|||||||
const selectChange = (flag: boolean, h: any) => {
|
const selectChange = (flag: boolean, h: any) => {
|
||||||
heightRef.value = mainHeight(h, 2.1).height
|
heightRef.value = mainHeight(h, 2.1).height
|
||||||
}
|
}
|
||||||
|
const eventList = [
|
||||||
|
{ label: '电压暂降', value: '1' },
|
||||||
|
{ label: '电压中断', value: '2' },
|
||||||
|
{ label: '电压暂升', value: '3' }
|
||||||
|
]
|
||||||
const getSimpleLineList = async () => {
|
const getSimpleLineList = async () => {
|
||||||
const res = await getSimpleLine()
|
const res = await getSimpleLine()
|
||||||
options.value = res.data
|
options.value = res.data
|
||||||
@@ -200,9 +226,10 @@ const tableStore: any = new TableStore({
|
|||||||
beforeSearchFun: () => {},
|
beforeSearchFun: () => {},
|
||||||
loadCallback: () => {}
|
loadCallback: () => {}
|
||||||
})
|
})
|
||||||
|
tableStore.table.params.eventType = ''
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
const open = async (time: any) => {
|
const open = async (time: any) => {
|
||||||
|
tableStore.table.params.eventType = ''
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
getSimpleLineList()
|
getSimpleLineList()
|
||||||
tableStore.table.params.lineId = ''
|
tableStore.table.params.lineId = ''
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
@selectChange="selectChange"
|
@selectChange="selectChange"
|
||||||
datePicker
|
datePicker
|
||||||
v-if="fullscreen"
|
v-if="fullscreen"
|
||||||
:timeKeyList="prop.timeKey"
|
:timeKeyList="prop.timeKey"
|
||||||
></TableHeader>
|
></TableHeader>
|
||||||
<el-calendar
|
<el-calendar
|
||||||
v-model="value"
|
v-model="value"
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-calendar>
|
</el-calendar>
|
||||||
<!-- 暂态事件列表 -->
|
<!-- 暂态事件列表 -->
|
||||||
<TransientList ref="transientListRef" />
|
<TransientList ref="transientListRef" :showLine="false" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -74,7 +74,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 }
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -14,6 +14,21 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="暂态类型">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.eventType"
|
||||||
|
style="min-width: 150px"
|
||||||
|
clearable
|
||||||
|
placeholder="请选择暂态类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in eventList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef" isGroup :height="heightRef"></Table>
|
<Table ref="tableRef" isGroup :height="heightRef"></Table>
|
||||||
@@ -62,7 +77,11 @@ const heightRef = ref(mainHeight(168, 2.2).height)
|
|||||||
const selectChange = (flag: boolean, h: any) => {
|
const selectChange = (flag: boolean, h: any) => {
|
||||||
heightRef.value = mainHeight(h, 2.2).height
|
heightRef.value = mainHeight(h, 2.2).height
|
||||||
}
|
}
|
||||||
|
const eventList = [
|
||||||
|
{ label: '电压暂降', value: '1' },
|
||||||
|
{ label: '电压中断', value: '2' },
|
||||||
|
{ label: '电压暂升', value: '3' }
|
||||||
|
]
|
||||||
const getSimpleLineList = async () => {
|
const getSimpleLineList = async () => {
|
||||||
const res = await getSimpleLine()
|
const res = await getSimpleLine()
|
||||||
options.value = res.data
|
options.value = res.data
|
||||||
@@ -201,9 +220,10 @@ const tableStore: any = new TableStore({
|
|||||||
beforeSearchFun: () => {},
|
beforeSearchFun: () => {},
|
||||||
loadCallback: () => {}
|
loadCallback: () => {}
|
||||||
})
|
})
|
||||||
|
tableStore.table.params.eventType = ''
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
const open = async (row: any, searchBeginTime: any, searchEndTime: any) => {
|
const open = async (row: any, searchBeginTime: any, searchEndTime: any) => {
|
||||||
|
tableStore.table.params.eventType = ''
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
getSimpleLineList()
|
getSimpleLineList()
|
||||||
tableStore.table.params.lineId = row.id
|
tableStore.table.params.lineId = row.id
|
||||||
|
|||||||
@@ -106,13 +106,15 @@ const initChart = () => {
|
|||||||
start: 0,
|
start: 0,
|
||||||
|
|
||||||
bottom: '20px',
|
bottom: '20px',
|
||||||
end: 100
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
start: 0,
|
start: 0,
|
||||||
height: 13,
|
height: 13,
|
||||||
bottom: '20px',
|
bottom: '20px',
|
||||||
end: 100
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
}
|
}
|
||||||
// {
|
// {
|
||||||
// show: true,
|
// show: true,
|
||||||
|
|||||||
@@ -748,8 +748,10 @@ const initWave = (
|
|||||||
rotation: 0,
|
rotation: 0,
|
||||||
y: -10
|
y: -10
|
||||||
},
|
},
|
||||||
max: rmscm[0]?.[1] * 1.06 || 0,
|
// max: rmscm[0]?.[1] * 1.06 || 0,
|
||||||
min: rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0,
|
// min: rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0,
|
||||||
|
max: Math.floor((rmscm[0]?.[1] * 1.06 || 0) * 1.1 * 10) / 10,
|
||||||
|
min: Math.floor((rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0) * 10) / 10,
|
||||||
boundaryGap: [0, '100%'],
|
boundaryGap: [0, '100%'],
|
||||||
showLastLabel: true,
|
showLastLabel: true,
|
||||||
opposite: false,
|
opposite: false,
|
||||||
@@ -780,11 +782,11 @@ const initWave = (
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '1%',
|
left: '60px',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
bottom: '40px',
|
bottom: '40px',
|
||||||
top: '60px',
|
top: '60px'
|
||||||
containLabel: true
|
// containLabel: true
|
||||||
},
|
},
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
@@ -1077,6 +1079,8 @@ const drawPics = (
|
|||||||
boundaryGap: [0, '100%'],
|
boundaryGap: [0, '100%'],
|
||||||
showLastLabel: true,
|
showLastLabel: true,
|
||||||
opposite: false,
|
opposite: false,
|
||||||
|
// max: Math.floor((rmscm[0]?.[1] * 1.06 || 0) * 1.1 * 10) / 10,
|
||||||
|
// min: Math.floor((rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0) * 10) / 10,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
color: props.DColor ? '#000' : echartsColor.WordColor
|
color: props.DColor ? '#000' : echartsColor.WordColor
|
||||||
@@ -1105,11 +1109,11 @@ const drawPics = (
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '1%',
|
left: '60px',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
bottom: '40px',
|
bottom: '40px',
|
||||||
top: '60px',
|
top: '60px'
|
||||||
containLabel: true
|
// containLabel: true
|
||||||
},
|
},
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -481,8 +481,10 @@ const initWave = (
|
|||||||
},
|
},
|
||||||
boundaryGap: [0, '100%'],
|
boundaryGap: [0, '100%'],
|
||||||
showLastLabel: true,
|
showLastLabel: true,
|
||||||
max: max.toFixed(2) * 1.1,
|
// max: max.toFixed(2) * 1.1,
|
||||||
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
|
// min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
|
||||||
|
max: Math.floor(max.toFixed(2) * 1.1 * 10) / 10,
|
||||||
|
min: Math.floor(min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1 * 10) / 10 ,
|
||||||
opposite: false,
|
opposite: false,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
@@ -512,11 +514,11 @@ const initWave = (
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '1%',
|
left: '60px',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
bottom: '40px',
|
bottom: '40px',
|
||||||
top: '60px',
|
top: '60px'
|
||||||
containLabel: true
|
// containLabel: true
|
||||||
},
|
},
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
@@ -789,8 +791,8 @@ const drawPics = (
|
|||||||
},
|
},
|
||||||
boundaryGap: [0, '100%'],
|
boundaryGap: [0, '100%'],
|
||||||
showLastLabel: true,
|
showLastLabel: true,
|
||||||
max: max.toFixed(2) * 1.1,
|
max: Math.floor(max.toFixed(2) * 1.1 * 10) / 10,
|
||||||
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
|
min: Math.floor(min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1 * 10) / 10 ,
|
||||||
opposite: false,
|
opposite: false,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
@@ -820,11 +822,11 @@ const drawPics = (
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '1%',
|
left: '60px',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
bottom: '40px',
|
bottom: '40px',
|
||||||
top: '60px',
|
top: '60px'
|
||||||
containLabel: true
|
// containLabel: true
|
||||||
},
|
},
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,35 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mac-address-input" :class="{ disabled: disabled }">
|
<div class="mac-address-input" :class="{ disabled: disabled }">
|
||||||
<el-input
|
<el-input
|
||||||
ref="inputRef"
|
ref="inputRef"
|
||||||
v-model="macValue"
|
placeholder="请输入设备mac地址"
|
||||||
type="text"
|
v-model="macValue"
|
||||||
maxlength="17"
|
type="text"
|
||||||
:disabled="disabled"
|
maxlength="17"
|
||||||
@input="handleInput"
|
:disabled="disabled"
|
||||||
@keydown="handleKeydown"
|
@input="handleInput"
|
||||||
@focus="handleFocus"
|
@keydown="handleKeydown"
|
||||||
@blur="handleBlur"
|
@focus="handleFocus"
|
||||||
@paste="handlePaste"
|
@blur="handleBlur"
|
||||||
/>
|
@paste="handlePaste"
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
modelValue?: string
|
modelValue?: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Emits {
|
interface Emits {
|
||||||
(e: 'update:modelValue', value: string): void
|
(e: 'update:modelValue', value: string): void
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
modelValue: '',
|
modelValue: '',
|
||||||
disabled: false
|
disabled: false
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits<Emits>()
|
const emit = defineEmits<Emits>()
|
||||||
@@ -42,35 +43,35 @@ const macValue = ref<string>('')
|
|||||||
|
|
||||||
// 解析传入的MAC地址
|
// 解析传入的MAC地址
|
||||||
const parseMacAddress = (mac: string): string => {
|
const parseMacAddress = (mac: string): string => {
|
||||||
if (!mac) return ''
|
if (!mac) return ''
|
||||||
|
|
||||||
// 移除非十六进制字符并转为大写
|
// 移除非十六进制字符并转为大写
|
||||||
const cleanMac = mac.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
const cleanMac = mac.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||||
|
|
||||||
// 按每2个字符分割并用冒号连接
|
// 按每2个字符分割并用冒号连接
|
||||||
let result = ''
|
let result = ''
|
||||||
for (let i = 0; i < cleanMac.length; i += 2) {
|
for (let i = 0; i < cleanMac.length; i += 2) {
|
||||||
if (i > 0) result += ':'
|
if (i > 0) result += ':'
|
||||||
result += cleanMac.substr(i, 2)
|
result += cleanMac.substr(i, 2)
|
||||||
}
|
}
|
||||||
return result.substring(0, 17) // 最多17个字符 (12个数字+5个冒号)
|
return result.substring(0, 17) // 最多17个字符 (12个数字+5个冒号)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 格式化MAC地址 - 改进版
|
// 格式化MAC地址 - 改进版
|
||||||
const formatMac = (value: string): string => {
|
const formatMac = (value: string): string => {
|
||||||
// 移除所有冒号
|
// 移除所有冒号
|
||||||
const cleanValue = value.replace(/:/g, '')
|
const cleanValue = value.replace(/:/g, '')
|
||||||
// 只保留十六进制字符并转为大写
|
// 只保留十六进制字符并转为大写
|
||||||
const hexOnly = cleanValue.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
const hexOnly = cleanValue.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||||
|
|
||||||
// 按每两个字符添加冒号,最多6段
|
// 按每两个字符添加冒号,最多6段
|
||||||
let formatted = ''
|
let formatted = ''
|
||||||
for (let i = 0; i < Math.min(hexOnly.length, 12); i += 2) {
|
for (let i = 0; i < Math.min(hexOnly.length, 12); i += 2) {
|
||||||
if (i > 0) formatted += ':'
|
if (i > 0) formatted += ':'
|
||||||
formatted += hexOnly.substr(i, 2)
|
formatted += hexOnly.substr(i, 2)
|
||||||
}
|
}
|
||||||
|
|
||||||
return formatted
|
return formatted
|
||||||
}
|
}
|
||||||
|
|
||||||
// 当前聚焦的输入框索引
|
// 当前聚焦的输入框索引
|
||||||
@@ -78,88 +79,86 @@ const focusedIndex = ref<number | null>(null)
|
|||||||
|
|
||||||
// 处理输入事件
|
// 处理输入事件
|
||||||
const handleInput = (value: string) => {
|
const handleInput = (value: string) => {
|
||||||
const formatted = formatMac(value)
|
const formatted = formatMac(value)
|
||||||
macValue.value = formatted
|
macValue.value = formatted
|
||||||
// 发出不带冒号的纯净值
|
// 发出不带冒号的纯净值
|
||||||
emit('update:modelValue', formatted.replace(/:/g, ''))
|
emit('update:modelValue', formatted.replace(/:/g, ''))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理键盘事件
|
// 处理键盘事件
|
||||||
const handleKeydown = (event: KeyboardEvent) => {
|
const handleKeydown = (event: KeyboardEvent) => {
|
||||||
const target = event.target as HTMLInputElement
|
const target = event.target as HTMLInputElement
|
||||||
|
|
||||||
// 处理退格键
|
// 处理退格键
|
||||||
if (event.key === 'Backspace') {
|
if (event.key === 'Backspace') {
|
||||||
// 处理在冒号前删除的情况
|
// 处理在冒号前删除的情况
|
||||||
const cursorPos = target.selectionStart || 0
|
const cursorPos = target.selectionStart || 0
|
||||||
if (cursorPos > 0 && macValue.value[cursorPos - 1] === ':' &&
|
if (cursorPos > 0 && macValue.value[cursorPos - 1] === ':' && target.selectionStart === target.selectionEnd) {
|
||||||
target.selectionStart === target.selectionEnd) {
|
event.preventDefault()
|
||||||
event.preventDefault()
|
// 删除冒号前的两个字符
|
||||||
// 删除冒号前的两个字符
|
const newValue = macValue.value.substring(0, cursorPos - 3) + macValue.value.substring(cursorPos)
|
||||||
const newValue = macValue.value.substring(0, cursorPos - 3) +
|
macValue.value = newValue
|
||||||
macValue.value.substring(cursorPos)
|
// 设置光标位置
|
||||||
macValue.value = newValue
|
setTimeout(() => {
|
||||||
// 设置光标位置
|
if (target.setSelectionRange) {
|
||||||
setTimeout(() => {
|
target.setSelectionRange(cursorPos - 3, cursorPos - 3)
|
||||||
if (target.setSelectionRange) {
|
}
|
||||||
target.setSelectionRange(cursorPos - 3, cursorPos - 3)
|
}, 0)
|
||||||
|
emit('update:modelValue', newValue.replace(/:/g, ''))
|
||||||
}
|
}
|
||||||
}, 0)
|
|
||||||
emit('update:modelValue', newValue.replace(/:/g, ''))
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理焦点事件
|
// 处理焦点事件
|
||||||
const handleFocus = () => {
|
const handleFocus = () => {
|
||||||
focusedIndex.value = 0
|
focusedIndex.value = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理失焦事件
|
// 处理失焦事件
|
||||||
const handleBlur = () => {
|
const handleBlur = () => {
|
||||||
focusedIndex.value = null
|
focusedIndex.value = null
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理粘贴事件
|
// 处理粘贴事件
|
||||||
const handlePaste = (event: ClipboardEvent) => {
|
const handlePaste = (event: ClipboardEvent) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
const pastedText = event.clipboardData?.getData('text') || ''
|
const pastedText = event.clipboardData?.getData('text') || ''
|
||||||
|
|
||||||
// 清理粘贴的文本
|
// 清理粘贴的文本
|
||||||
const cleanPastedText = pastedText.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
const cleanPastedText = pastedText.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||||
const formatted = formatMac(cleanPastedText)
|
const formatted = formatMac(cleanPastedText)
|
||||||
macValue.value = formatted
|
macValue.value = formatted
|
||||||
emit('update:modelValue', formatted.replace(/:/g, ''))
|
emit('update:modelValue', formatted.replace(/:/g, ''))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听modelValue变化
|
// 监听modelValue变化
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
(newVal) => {
|
newVal => {
|
||||||
const cleanNewVal = (newVal || '').replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
const cleanNewVal = (newVal || '').replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||||
const currentCleanValue = macValue.value.replace(/:/g, '')
|
const currentCleanValue = macValue.value.replace(/:/g, '')
|
||||||
|
|
||||||
if (cleanNewVal !== currentCleanValue) {
|
if (cleanNewVal !== currentCleanValue) {
|
||||||
macValue.value = parseMacAddress(cleanNewVal)
|
macValue.value = parseMacAddress(cleanNewVal)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.mac-address-input {
|
.mac-address-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-input__wrapper) {
|
:deep(.el-input__wrapper) {
|
||||||
input {
|
input {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-family: inherit; // 使用继承的字体而不是等宽字体
|
font-family: inherit; // 使用继承的字体而不是等宽字体
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
/>
|
/>
|
||||||
<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-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input maxlength="32" v-model.trim="filterText" 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>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
style='cursor: pointer' />
|
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-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
|
<el-input maxlength="32" v-model.trim='filterText' 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>
|
||||||
|
|||||||
@@ -13,18 +13,29 @@
|
|||||||
<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
|
<el-input
|
||||||
maxlength="32"
|
maxlength="32"
|
||||||
show-word-limit
|
|
||||||
v-model.trim="filterText"
|
v-model.trim="filterText"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
clearable
|
clearable
|
||||||
>
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
<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
|
<Icon
|
||||||
@click="onMenuCollapse"
|
@click="onMenuCollapse"
|
||||||
@@ -42,6 +53,8 @@
|
|||||||
v-model.trim="activeName"
|
v-model.trim="activeName"
|
||||||
style="flex: 1; height: 100%"
|
style="flex: 1; height: 100%"
|
||||||
@change="changeDevice"
|
@change="changeDevice"
|
||||||
|
v-if="treeType == '1'"
|
||||||
|
v-loading="loading"
|
||||||
>
|
>
|
||||||
<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">
|
||||||
@@ -52,7 +65,7 @@
|
|||||||
<el-tree
|
<el-tree
|
||||||
:style="{
|
:style="{
|
||||||
height:
|
height:
|
||||||
bxsDeviceData.length != 0
|
treeType.length != 0
|
||||||
? `calc(100vh - 380px - ${props.height}px)`
|
? `calc(100vh - 380px - ${props.height}px)`
|
||||||
: 'calc(100vh - 278px)'
|
: 'calc(100vh - 278px)'
|
||||||
}"
|
}"
|
||||||
@@ -142,6 +155,32 @@
|
|||||||
</el-tree>
|
</el-tree>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
|
<div v-if="treeType == '2'" v-loading="loading">
|
||||||
|
<el-tree
|
||||||
|
:style="{ height: `calc(100vh - 188px - ${props.height}px )` }"
|
||||||
|
ref="treeRef4"
|
||||||
|
:props="defaultProps"
|
||||||
|
highlight-current
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:data="data"
|
||||||
|
style="overflow: auto"
|
||||||
|
:default-expand-all="false"
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -154,13 +193,14 @@ import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
|
|||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/tree'
|
name: 'govern/tree'
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['changeDeviceType'])
|
const emit = defineEmits(['changeDeviceType', 'changeTreeType'])
|
||||||
interface Props {
|
interface Props {
|
||||||
width?: string
|
width?: string
|
||||||
canExpand?: boolean
|
canExpand?: boolean
|
||||||
type?: string
|
type?: string
|
||||||
data?: any
|
data?: any
|
||||||
height?: number
|
height?: number
|
||||||
|
engineering: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
@@ -168,8 +208,20 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
canExpand: true,
|
canExpand: true,
|
||||||
type: '',
|
type: '',
|
||||||
data: [],
|
data: [],
|
||||||
height: 0
|
height: 0,
|
||||||
|
engineering: false
|
||||||
})
|
})
|
||||||
|
const treeType = ref('1')
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
label: '设备',
|
||||||
|
value: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '工程',
|
||||||
|
value: '2'
|
||||||
|
}
|
||||||
|
]
|
||||||
const { proxy } = useCurrentInstance()
|
const { proxy } = useCurrentInstance()
|
||||||
const menuCollapse = ref(false)
|
const menuCollapse = ref(false)
|
||||||
const activeName = ref('0')
|
const activeName = ref('0')
|
||||||
@@ -219,7 +271,9 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
watch(filterText, val => {
|
watch(filterText, val => {
|
||||||
if (activeName.value == '0') {
|
if (treeType.value == '2') {
|
||||||
|
treeRef4.value!.filter(val)
|
||||||
|
} else if (activeName.value == '0') {
|
||||||
treeRef1.value!.filter(val)
|
treeRef1.value!.filter(val)
|
||||||
} else if (activeName.value == '1') {
|
} else if (activeName.value == '1') {
|
||||||
treeRef2.value!.filter(val)
|
treeRef2.value!.filter(val)
|
||||||
@@ -362,27 +416,44 @@ 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, treeRef3 })
|
const treeRef4 = ref<InstanceType<typeof ElTree>>()
|
||||||
|
defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
treeType.value = props.engineering ? '2' : '1'
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (zlDeviceData.value.length != 0) {
|
setActiveName()
|
||||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
|
||||||
activeName.value = '0'
|
|
||||||
}
|
|
||||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
|
||||||
activeName.value = '1'
|
|
||||||
}
|
|
||||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
|
|
||||||
activeName.value = '2'
|
|
||||||
}
|
|
||||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
|
||||||
activeName.value = ''
|
|
||||||
}
|
|
||||||
nextTick(() => {
|
|
||||||
changeDevice(activeName.value)
|
|
||||||
})
|
|
||||||
}, 500)
|
}, 500)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const setActiveName = () => {
|
||||||
|
if (zlDeviceData.value.length != 0) {
|
||||||
|
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||||
|
activeName.value = '0'
|
||||||
|
}
|
||||||
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||||
|
activeName.value = '1'
|
||||||
|
}
|
||||||
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
|
||||||
|
activeName.value = '2'
|
||||||
|
}
|
||||||
|
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||||
|
activeName.value = ''
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
changeDevice(activeName.value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const loading = ref(false)
|
||||||
|
const changeTreeType = (val: string) => {
|
||||||
|
loading.value = true
|
||||||
|
emit('changeTreeType', val)
|
||||||
|
if (val == '1') {
|
||||||
|
setActiveName()
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -412,4 +483,7 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
:deep(.el-input-group__prepend) {
|
||||||
|
background-color: var(--el-fill-color-blank);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,11 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tree ref="treRef" :width="width" :showPush="props.showPush" :data="tree" default-expand-all @changePointType="changePointType" @onAdd="onAdd"/>
|
<Tree
|
||||||
|
ref="treRef"
|
||||||
|
:width="width"
|
||||||
|
:showPush="props.showPush"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:data="tree"
|
||||||
|
@changePointType="changePointType"
|
||||||
|
@onAdd="onAdd"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||||
import Tree from '../index.vue'
|
import Tree from '../index.vue'
|
||||||
import { getLineTree,getCldTree } from '@/api/cs-device-boot/csLedger'
|
import { getLineTree, getCldTree } from '@/api/cs-device-boot/csLedger'
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
@@ -22,136 +30,61 @@ defineOptions({
|
|||||||
name: 'govern/deviceTree'
|
name: 'govern/deviceTree'
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy','onAdd'])
|
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const tree = ref()
|
const tree = ref()
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const treRef = ref()
|
const treRef = ref()
|
||||||
const width = ref('')
|
const width = ref('')
|
||||||
|
|
||||||
|
|
||||||
const info = (selectedNodeId?: string) => {
|
const info = (selectedNodeId?: string) => {
|
||||||
tree.value = []
|
tree.value = []
|
||||||
let arr1: any[] = []
|
let arr1: any[] = []
|
||||||
getCldTree().then(res => {
|
getCldTree().then(res => {
|
||||||
try {
|
res.data.icon = 'el-icon-Menu'
|
||||||
// 检查响应数据结构
|
res.data.color = config.getColorVal('elementUiPrimary')
|
||||||
let rootData = null;
|
res.data?.children.map((item: any) => {
|
||||||
if (Array.isArray(res.data)) {
|
item.icon = 'el-icon-HomeFilled'
|
||||||
// 旧的数据结构 - 数组
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
rootData = res.data.find((item: any) => item.name == '监测设备');
|
item.children.forEach((item: any) => {
|
||||||
} else if (res.data && res.data.name == '监测设备') {
|
item.icon = 'el-icon-List'
|
||||||
// 新的数据结构 - 单个对象
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
rootData = res.data;
|
item.children.forEach((item2: any) => {
|
||||||
}
|
// item2.icon = 'el-icon-List'
|
||||||
|
// item2.color = config.getColorVal('elementUiPrimary')
|
||||||
// 治理设备
|
item2.icon = 'el-icon-Platform'
|
||||||
if (rootData) {
|
item2.level = 2
|
||||||
rootData.icon = 'el-icon-Menu'
|
item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
rootData.level = 0
|
item2.children.forEach((item3: any) => {
|
||||||
rootData.color = config.getColorVal('elementUiPrimary')
|
item3.icon = 'el-icon-Platform'
|
||||||
// 确保根节点的 children 是数组
|
item3.color =
|
||||||
if (!Array.isArray(rootData.children)) {
|
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
rootData.children = []
|
arr1.push(item3)
|
||||||
}
|
|
||||||
rootData.children.forEach((item: any) => {
|
|
||||||
item.icon = 'el-icon-HomeFilled'
|
|
||||||
item.level = 1
|
|
||||||
item.color = config.getColorVal('elementUiPrimary')
|
|
||||||
// 确保 children 是数组
|
|
||||||
if (!Array.isArray(item.children)) {
|
|
||||||
item.children = []
|
|
||||||
}
|
|
||||||
item.children.forEach((item2: any) => {
|
|
||||||
item2.icon = 'el-icon-List'
|
|
||||||
item2.level = 2
|
|
||||||
item2.color = config.getColorVal('elementUiPrimary')
|
|
||||||
|
|
||||||
// 确保 children 是数组
|
|
||||||
if (!Array.isArray(item2.children)) {
|
|
||||||
item2.children = []
|
|
||||||
}
|
|
||||||
item2.children.forEach((item3: any) => {
|
|
||||||
item3.icon = 'el-icon-Platform'
|
|
||||||
item3.level = 3
|
|
||||||
item3.color =
|
|
||||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
|
||||||
|
|
||||||
// 确保 children 是数组
|
|
||||||
if (!Array.isArray(item3.children)) {
|
|
||||||
item3.children = []
|
|
||||||
}
|
|
||||||
|
|
||||||
item3.children.forEach((item4: any) => {
|
|
||||||
item4.icon = 'el-icon-Platform'
|
|
||||||
item4.level = 4
|
|
||||||
item4.color =
|
|
||||||
item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
|
||||||
arr1.push(item4)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
tree.value = [rootData] // 确保 tree.value 是数组
|
|
||||||
} else {
|
|
||||||
tree.value = []
|
|
||||||
}
|
|
||||||
nextTick(() => {
|
|
||||||
|
|
||||||
if (arr1.length) {
|
|
||||||
// 安全检查 treRef 和 treeRef 是否存在
|
|
||||||
console.log("🚀 ~ info ~ treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey:", treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey)
|
|
||||||
|
|
||||||
if (treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey) {
|
|
||||||
// 如果传入了要选中的节点ID,则选中该节点,否则选中第一个节点
|
|
||||||
console.log('selectedNodeId:', selectedNodeId);
|
|
||||||
if (selectedNodeId) {
|
|
||||||
treRef.value.treeRef.setCurrentKey(selectedNodeId);
|
|
||||||
// 查找对应的节点数据并触发事件
|
|
||||||
let selectedNode = null;
|
|
||||||
const findNode = (nodes: any[]) => {
|
|
||||||
for (const node of nodes) {
|
|
||||||
if (node.id === selectedNodeId) {
|
|
||||||
selectedNode = node;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (node.children && findNode(node.children)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
findNode(tree.value);
|
|
||||||
|
|
||||||
if (selectedNode) {
|
|
||||||
emit('init', {
|
|
||||||
level: selectedNode.level,
|
|
||||||
...selectedNode
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 初始化选中第一个节点
|
|
||||||
treRef.value.treeRef.setCurrentKey(arr1[0].id);
|
|
||||||
emit('init', {
|
|
||||||
level: 2,
|
|
||||||
...arr1[0]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
} catch (error) {
|
})
|
||||||
console.error('Error in processing getCldTree response:', error)
|
tree.value = [res.data]
|
||||||
}
|
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
//初始化选中
|
||||||
|
|
||||||
|
treRef.value?.treeRef.setCurrentKey(arr1[0].id)
|
||||||
|
// 注册父组件事件
|
||||||
|
emit('init', {
|
||||||
|
level: 3,
|
||||||
|
...arr1[0]
|
||||||
|
})
|
||||||
|
changePointType('4', arr1[0])
|
||||||
|
return
|
||||||
|
}, 500)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const changePointType = (val: any, obj: any) => {
|
const changePointType = (val: any, obj: any) => {
|
||||||
emit('pointTypeChange', val, obj)
|
// emit('pointTypeChange', val, obj)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onAdd = () => {
|
const onAdd = () => {
|
||||||
|
|||||||
@@ -1,11 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tree ref="treRef" :width="width" :showPush="props.showPush" :data="tree" default-expand-all @changePointType="changePointType" @onAdd="onAdd"/>
|
<Tree
|
||||||
|
ref="treRef"
|
||||||
|
:width="width"
|
||||||
|
:showPush="props.showPush"
|
||||||
|
:data="tree"
|
||||||
|
default-expand-all
|
||||||
|
@changePointType="changePointType"
|
||||||
|
@onAdd="onAdd"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||||
import Tree from '../index.vue'
|
import Tree from '../index.vue'
|
||||||
import { getLineTree,lineTree } from '@/api/cs-device-boot/csLedger'
|
import { getLineTree, lineTree } from '@/api/cs-device-boot/csLedger'
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
@@ -22,27 +30,26 @@ defineOptions({
|
|||||||
name: 'govern/deviceTree'
|
name: 'govern/deviceTree'
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy','onAdd'])
|
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const tree = ref()
|
const tree = ref()
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const treRef = ref()
|
const treRef = ref()
|
||||||
const width = ref('')
|
const width = ref('')
|
||||||
|
|
||||||
|
|
||||||
const info = (selectedNodeId?: string) => {
|
const info = (selectedNodeId?: string) => {
|
||||||
tree.value = []
|
tree.value = []
|
||||||
let arr1: any[] = []
|
let arr1: any[] = []
|
||||||
lineTree().then(res => {
|
lineTree().then(res => {
|
||||||
try {
|
try {
|
||||||
// 检查响应数据结构
|
// 检查响应数据结构
|
||||||
let rootData = null;
|
let rootData = null
|
||||||
if (Array.isArray(res.data)) {
|
if (Array.isArray(res.data)) {
|
||||||
// 旧的数据结构 - 数组
|
// 旧的数据结构 - 数组
|
||||||
rootData = res.data.find((item: any) => item.name == '监测设备');
|
rootData = res.data.find((item: any) => item.name == '监测设备')
|
||||||
} else if (res.data && res.data.name == '监测设备') {
|
} else if (res.data && res.data.name == '监测设备') {
|
||||||
// 新的数据结构 - 单个对象
|
// 新的数据结构 - 单个对象
|
||||||
rootData = res.data;
|
rootData = res.data
|
||||||
}
|
}
|
||||||
|
|
||||||
// 治理设备
|
// 治理设备
|
||||||
@@ -97,50 +104,51 @@ const info = (selectedNodeId?: string) => {
|
|||||||
tree.value = []
|
tree.value = []
|
||||||
}
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
|
||||||
if (arr1.length) {
|
if (arr1.length) {
|
||||||
// 安全检查 treRef 和 treeRef 是否存在
|
// 安全检查 treRef 和 treeRef 是否存在
|
||||||
console.log("🚀 ~ info ~ treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey:", treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey)
|
console.log(
|
||||||
|
'🚀 ~ info ~ treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey:',
|
||||||
|
treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey
|
||||||
|
)
|
||||||
|
|
||||||
if (treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey) {
|
if (treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey) {
|
||||||
// 如果传入了要选中的节点ID,则选中该节点,否则选中第一个节点
|
// 如果传入了要选中的节点ID,则选中该节点,否则选中第一个节点
|
||||||
console.log('selectedNodeId:', selectedNodeId);
|
console.log('selectedNodeId:', selectedNodeId)
|
||||||
if (selectedNodeId) {
|
if (selectedNodeId) {
|
||||||
treRef.value.treeRef.setCurrentKey(selectedNodeId);
|
treRef.value.treeRef.setCurrentKey(selectedNodeId)
|
||||||
// 查找对应的节点数据并触发事件
|
// 查找对应的节点数据并触发事件
|
||||||
let selectedNode = null;
|
let selectedNode = null
|
||||||
const findNode = (nodes: any[]) => {
|
const findNode = (nodes: any[]) => {
|
||||||
for (const node of nodes) {
|
for (const node of nodes) {
|
||||||
if (node.id === selectedNodeId) {
|
if (node.id === selectedNodeId) {
|
||||||
selectedNode = node;
|
selectedNode = node
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
if (node.children && findNode(node.children)) {
|
if (node.children && findNode(node.children)) {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return false;
|
return false
|
||||||
};
|
}
|
||||||
|
|
||||||
findNode(tree.value);
|
findNode(tree.value)
|
||||||
|
|
||||||
if (selectedNode) {
|
if (selectedNode) {
|
||||||
emit('init', {
|
emit('init', {
|
||||||
level: selectedNode.level,
|
level: selectedNode.level,
|
||||||
...selectedNode
|
...selectedNode
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 初始化选中第一个节点
|
// 初始化选中第一个节点
|
||||||
treRef.value.treeRef.setCurrentKey(arr1[0].id);
|
treRef.value.treeRef.setCurrentKey(arr1[0].id)
|
||||||
emit('init', {
|
emit('init', {
|
||||||
level: 2,
|
level: 2,
|
||||||
...arr1[0]
|
...arr1[0]
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -149,7 +157,6 @@ const info = (selectedNodeId?: string) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const changePointType = (val: any, obj: any) => {
|
const changePointType = (val: any, obj: any) => {
|
||||||
emit('pointTypeChange', val, obj)
|
emit('pointTypeChange', val, obj)
|
||||||
}
|
}
|
||||||
@@ -158,7 +165,8 @@ const onAdd = () => {
|
|||||||
emit('onAdd')
|
emit('onAdd')
|
||||||
}
|
}
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
querySysExcel({ id: dictData.state.area[0]?.id })
|
// id: dictData.state.area[0]?.id
|
||||||
|
querySysExcel({})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
info()
|
info()
|
||||||
|
|||||||
@@ -7,6 +7,8 @@
|
|||||||
:data="tree"
|
:data="tree"
|
||||||
:height="props.height"
|
:height="props.height"
|
||||||
@changeDeviceType="changeDeviceType"
|
@changeDeviceType="changeDeviceType"
|
||||||
|
@changeTreeType="info"
|
||||||
|
:engineering="props.engineering"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -16,6 +18,7 @@ import Tree from '../device.vue'
|
|||||||
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
import { throttle } from 'lodash'
|
import { throttle } from 'lodash'
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/deviceTree'
|
name: 'govern/deviceTree'
|
||||||
})
|
})
|
||||||
@@ -24,11 +27,13 @@ const props = withDefaults(
|
|||||||
showCheckbox?: boolean
|
showCheckbox?: boolean
|
||||||
defaultCheckedKeys?: any
|
defaultCheckedKeys?: any
|
||||||
height?: number
|
height?: number
|
||||||
|
engineering?: boolean
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
showCheckbox: false,
|
showCheckbox: false,
|
||||||
defaultCheckedKeys: [],
|
defaultCheckedKeys: [],
|
||||||
height: 0
|
height: 0,
|
||||||
|
engineering: false
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
|
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
|
||||||
@@ -38,112 +43,149 @@ const treRef = ref()
|
|||||||
const changeDeviceType = (val: any, obj: any) => {
|
const changeDeviceType = (val: any, obj: any) => {
|
||||||
emit('deviceTypeChange', val, obj)
|
emit('deviceTypeChange', val, obj)
|
||||||
}
|
}
|
||||||
getDeviceTree().then(res => {
|
|
||||||
let arr: any[] = []
|
const info = (type?: string) => {
|
||||||
let arr2: any[] = []
|
getDeviceTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
|
||||||
let arr3: any[] = []
|
let arr: any[] = []
|
||||||
//治理设备
|
let arr2: any[] = []
|
||||||
res.data.map((item: any) => {
|
let arr3: any[] = []
|
||||||
if (item.name == '治理设备') {
|
let arr4: any[] = []
|
||||||
item.children.forEach((item: any) => {
|
//治理设备
|
||||||
|
res.data.map((item: any) => {
|
||||||
|
if (type == '2') {
|
||||||
item.icon = 'el-icon-HomeFilled'
|
item.icon = 'el-icon-HomeFilled'
|
||||||
item.color = config.getColorVal('elementUiPrimary')
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
item.children.forEach((item2: any) => {
|
item.children.forEach((item: any) => {
|
||||||
item2.icon = 'el-icon-List'
|
item.icon = 'el-icon-List'
|
||||||
item2.color = config.getColorVal('elementUiPrimary')
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
item2.children.forEach((item3: any) => {
|
item.children.forEach((item2: any) => {
|
||||||
item3.pName = '治理设备'
|
item2.icon = 'el-icon-Platform'
|
||||||
item3.icon = 'el-icon-Platform'
|
item2.color = config.getColorVal('elementUiPrimary')
|
||||||
item3.level = 2
|
item2.color =
|
||||||
item3.color = config.getColorVal('elementUiPrimary')
|
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
if (item3.comFlag === 1) {
|
arr4.push(item2)
|
||||||
item3.color = '#e26257 !important'
|
|
||||||
}
|
|
||||||
arr.push(item3)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
|
||||||
} else if (item.name == '便携式设备') {
|
|
||||||
item.children.forEach((item: any) => {
|
|
||||||
item.icon = 'el-icon-Platform'
|
|
||||||
item.color = config.getColorVal('elementUiPrimary')
|
|
||||||
item.color = '#e26257 !important'
|
|
||||||
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
|
||||||
// item.disabled =true
|
|
||||||
item.pName = '便携式设备'
|
|
||||||
if (item.type == 'device') {
|
|
||||||
arr2.push(item)
|
|
||||||
}
|
|
||||||
item.children.forEach((item2: any) => {
|
|
||||||
item2.icon = 'el-icon-Platform'
|
|
||||||
item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
|
||||||
item2.pName = '便携式设备'
|
|
||||||
// item2.children.forEach((item3: any) => {
|
|
||||||
// item3.icon = 'el-icon-Platform'
|
|
||||||
// item3.color = config.getColorVal('elementUiPrimary')
|
|
||||||
// if (item3.comFlag === 1) {
|
|
||||||
// item3.color = '#e26257 !important'
|
|
||||||
// }
|
|
||||||
// arr.push(item3)
|
|
||||||
// })
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else if (item.name == '监测设备') {
|
|
||||||
item.children.forEach((item: any) => {
|
|
||||||
item.icon = 'el-icon-HomeFilled'
|
|
||||||
item.color = config.getColorVal('elementUiPrimary')
|
|
||||||
item.children.forEach((item2: any) => {
|
|
||||||
item2.icon = 'el-icon-List'
|
|
||||||
item2.color = config.getColorVal('elementUiPrimary')
|
|
||||||
item2.children.forEach((item3: any) => {
|
|
||||||
item3.pName = '监测设备'
|
|
||||||
item3.icon = 'el-icon-Platform'
|
|
||||||
item3.color = config.getColorVal('elementUiPrimary')
|
|
||||||
if (item3.comFlag === 1) {
|
|
||||||
item3.color = '#e26257 !important'
|
|
||||||
}
|
|
||||||
arr3.push(item3)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
tree.value = res.data
|
|
||||||
|
|
||||||
nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (arr.length > 0) {
|
|
||||||
treRef.value.treeRef1.setCurrentKey(arr[0].id)
|
|
||||||
// 注册父组件事件
|
|
||||||
emit('init', {
|
|
||||||
level: 2,
|
|
||||||
...arr[0]
|
|
||||||
})
|
|
||||||
return
|
|
||||||
} else if (arr2.length > 0) {
|
|
||||||
treRef.value.treeRef2.setCurrentKey(arr2[0].id)
|
|
||||||
// 注册父组件事件
|
|
||||||
emit('init', {
|
|
||||||
level: 2,
|
|
||||||
...arr2[0]
|
|
||||||
})
|
|
||||||
return
|
|
||||||
} else if (arr3.length > 0) {
|
|
||||||
console.log('🚀 ~ arr3:', arr3)
|
|
||||||
|
|
||||||
treRef.value.treeRef3.setCurrentKey(arr3[0].id)
|
|
||||||
// 注册父组件事件
|
|
||||||
emit('init', {
|
|
||||||
level: 2,
|
|
||||||
...arr3[0]
|
|
||||||
})
|
|
||||||
return
|
|
||||||
} else {
|
} else {
|
||||||
emit('init')
|
if (item.name == '治理设备') {
|
||||||
return
|
item.children.forEach((item: any) => {
|
||||||
|
item.icon = 'el-icon-HomeFilled'
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item.children.forEach((item2: any) => {
|
||||||
|
item2.icon = 'el-icon-List'
|
||||||
|
item2.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item2.children.forEach((item3: any) => {
|
||||||
|
item3.pName = '治理设备'
|
||||||
|
item3.icon = 'el-icon-Platform'
|
||||||
|
item3.level = 2
|
||||||
|
item3.color = config.getColorVal('elementUiPrimary')
|
||||||
|
if (item3.comFlag === 1) {
|
||||||
|
item3.color = '#e26257 !important'
|
||||||
|
}
|
||||||
|
arr.push(item3)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else if (item.name == '便携式设备') {
|
||||||
|
item.children.forEach((item: any) => {
|
||||||
|
item.icon = 'el-icon-Platform'
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item.color = '#e26257 !important'
|
||||||
|
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
|
// item.disabled =true
|
||||||
|
item.pName = '便携式设备'
|
||||||
|
if (item.type == 'device') {
|
||||||
|
arr2.push(item)
|
||||||
|
}
|
||||||
|
item.children.forEach((item2: any) => {
|
||||||
|
item2.icon = 'el-icon-Platform'
|
||||||
|
item2.color =
|
||||||
|
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
|
item2.pName = '便携式设备'
|
||||||
|
// item2.children.forEach((item3: any) => {
|
||||||
|
// item3.icon = 'el-icon-Platform'
|
||||||
|
// item3.color = config.getColorVal('elementUiPrimary')
|
||||||
|
// if (item3.comFlag === 1) {
|
||||||
|
// item3.color = '#e26257 !important'
|
||||||
|
// }
|
||||||
|
// arr.push(item3)
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else if (item.name == '监测设备') {
|
||||||
|
item.children.forEach((item: any) => {
|
||||||
|
item.icon = 'el-icon-HomeFilled'
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item.children.forEach((item2: any) => {
|
||||||
|
item2.icon = 'el-icon-List'
|
||||||
|
item2.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item2.children.forEach((item3: any) => {
|
||||||
|
item3.pName = '监测设备'
|
||||||
|
item3.icon = 'el-icon-Platform'
|
||||||
|
item3.color = config.getColorVal('elementUiPrimary')
|
||||||
|
if (item3.comFlag === 1) {
|
||||||
|
item3.color = '#e26257 !important'
|
||||||
|
}
|
||||||
|
arr3.push(item3)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, 500)
|
})
|
||||||
|
tree.value = res.data
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (type == '2') {
|
||||||
|
//初始化选中
|
||||||
|
|
||||||
|
treRef.value?.treeRef4.setCurrentKey(arr4[0].id)
|
||||||
|
// 注册父组件事件
|
||||||
|
emit('init', {
|
||||||
|
level: 2,
|
||||||
|
...arr4[0]
|
||||||
|
})
|
||||||
|
// changePointType('4', arr4[0])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (arr.length > 0) {
|
||||||
|
treRef.value.treeRef1.setCurrentKey(arr[0].id)
|
||||||
|
// 注册父组件事件
|
||||||
|
emit('init', {
|
||||||
|
level: 2,
|
||||||
|
...arr[0]
|
||||||
|
})
|
||||||
|
return
|
||||||
|
} else if (arr2.length > 0) {
|
||||||
|
treRef.value.treeRef2.setCurrentKey(arr2[0].id)
|
||||||
|
// 注册父组件事件
|
||||||
|
emit('init', {
|
||||||
|
level: 2,
|
||||||
|
...arr2[0]
|
||||||
|
})
|
||||||
|
return
|
||||||
|
} else if (arr3.length > 0) {
|
||||||
|
console.log('🚀 ~ arr3:', arr3)
|
||||||
|
|
||||||
|
treRef.value.treeRef3.setCurrentKey(arr3[0].id)
|
||||||
|
// 注册父组件事件
|
||||||
|
emit('init', {
|
||||||
|
level: 2,
|
||||||
|
...arr3[0]
|
||||||
|
})
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
emit('init')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}, 500)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
info(props.engineering ? '2' : '1')
|
||||||
})
|
})
|
||||||
|
|
||||||
throttle(
|
throttle(
|
||||||
|
|||||||
@@ -1,5 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tree ref="treRef" :width="width" :data="tree" default-expand-all @changePointType="changePointType" />
|
<Tree
|
||||||
|
ref="treRef"
|
||||||
|
:width="width"
|
||||||
|
:data="tree"
|
||||||
|
default-expand-all
|
||||||
|
@changePointType="changePointType"
|
||||||
|
@changeTreeType="info"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -27,80 +34,128 @@ const dictData = useDictData()
|
|||||||
const treRef = ref()
|
const treRef = ref()
|
||||||
const width = ref('')
|
const width = ref('')
|
||||||
|
|
||||||
const info = () => {
|
const info = (type?: string) => {
|
||||||
tree.value = []
|
tree.value = []
|
||||||
let arr1: any[] = []
|
let arr1: any[] = []
|
||||||
let arr2: any[] = []
|
let arr2: any[] = []
|
||||||
let arr3: any[] = []
|
let arr3: any[] = []
|
||||||
getLineTree().then(res => {
|
let arr4: any[] = []
|
||||||
|
getLineTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
|
||||||
//治理设备
|
//治理设备
|
||||||
|
|
||||||
res.data.map((item: any) => {
|
res.data.map((item: any) => {
|
||||||
if (item.name == '治理设备') {
|
if (type == '2') {
|
||||||
|
item.icon = 'el-icon-HomeFilled'
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
item.children.forEach((item: any) => {
|
item.children.forEach((item: any) => {
|
||||||
item.icon = 'el-icon-HomeFilled'
|
item.icon = 'el-icon-List'
|
||||||
item.level = 1
|
|
||||||
item.color = config.getColorVal('elementUiPrimary')
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
item.children.forEach((item2: any) => {
|
item.children.forEach((item2: any) => {
|
||||||
item2.icon = 'el-icon-List'
|
// item2.icon = 'el-icon-List'
|
||||||
item2.level = 1
|
// item2.color = config.getColorVal('elementUiPrimary')
|
||||||
item2.color = config.getColorVal('elementUiPrimary')
|
|
||||||
item2.children.forEach((item3: any) => {
|
|
||||||
item3.icon = 'el-icon-Platform'
|
|
||||||
item3.level = 2
|
|
||||||
item3.color =
|
|
||||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
|
||||||
item3.children.forEach((item4: any) => {
|
|
||||||
item4.icon = 'el-icon-Platform'
|
|
||||||
item4.color =
|
|
||||||
item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
|
||||||
// item4.color = '#e26257 !important'
|
|
||||||
arr1.push(item4)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else if (item.name == '便携式设备') {
|
|
||||||
item.children.forEach((item: any) => {
|
|
||||||
item.icon = 'el-icon-Platform'
|
|
||||||
item.color = config.getColorVal('elementUiPrimary')
|
|
||||||
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
|
||||||
item.children.forEach((item2: any) => {
|
|
||||||
item2.icon = 'el-icon-Platform'
|
item2.icon = 'el-icon-Platform'
|
||||||
|
item2.level = 2
|
||||||
item2.color =
|
item2.color =
|
||||||
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
arr2.push(item2)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else if (item.name == '监测设备') {
|
|
||||||
item.children.forEach((item: any) => {
|
|
||||||
item.icon = 'el-icon-HomeFilled'
|
|
||||||
item.level = 1
|
|
||||||
item.color = config.getColorVal('elementUiPrimary')
|
|
||||||
item.children.forEach((item2: any) => {
|
|
||||||
item2.icon = 'el-icon-List'
|
|
||||||
item2.level = 1
|
|
||||||
item2.color = config.getColorVal('elementUiPrimary')
|
|
||||||
item2.children.forEach((item3: any) => {
|
item2.children.forEach((item3: any) => {
|
||||||
item3.icon = 'el-icon-Platform'
|
item3.icon = 'el-icon-Platform'
|
||||||
item3.level = 1
|
|
||||||
item3.color =
|
item3.color =
|
||||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
item3.children.forEach((item4: any) => {
|
arr4.push(item3)
|
||||||
item4.icon = 'el-icon-Platform'
|
// item3.children.forEach((item4: any) => {
|
||||||
item4.color =
|
// item4.icon = 'el-icon-Platform'
|
||||||
item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
// item4.color =
|
||||||
// item4.color = '#e26257 !important'
|
// item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
arr3.push(item4)
|
|
||||||
})
|
// })
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
} else {
|
||||||
|
if (item.name == '治理设备') {
|
||||||
|
item.children.forEach((item: any) => {
|
||||||
|
item.icon = 'el-icon-HomeFilled'
|
||||||
|
item.level = 1
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item.children.forEach((item2: any) => {
|
||||||
|
item2.icon = 'el-icon-List'
|
||||||
|
item2.level = 1
|
||||||
|
item2.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item2.children.forEach((item3: any) => {
|
||||||
|
item3.icon = 'el-icon-Platform'
|
||||||
|
item3.level = 2
|
||||||
|
item3.color =
|
||||||
|
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
|
item3.children.forEach((item4: any) => {
|
||||||
|
item4.icon = 'el-icon-Platform'
|
||||||
|
item4.color =
|
||||||
|
item4.comFlag === 2
|
||||||
|
? config.getColorVal('elementUiPrimary')
|
||||||
|
: '#e26257 !important'
|
||||||
|
// item4.color = '#e26257 !important'
|
||||||
|
arr1.push(item4)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else if (item.name == '便携式设备') {
|
||||||
|
item.children.forEach((item: any) => {
|
||||||
|
item.icon = 'el-icon-Platform'
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
|
item.children.forEach((item2: any) => {
|
||||||
|
item2.icon = 'el-icon-Platform'
|
||||||
|
item2.color =
|
||||||
|
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
|
arr2.push(item2)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else if (item.name == '监测设备') {
|
||||||
|
item.children.forEach((item: any) => {
|
||||||
|
item.icon = 'el-icon-HomeFilled'
|
||||||
|
item.level = 1
|
||||||
|
item.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item.children.forEach((item2: any) => {
|
||||||
|
item2.icon = 'el-icon-List'
|
||||||
|
item2.level = 1
|
||||||
|
item2.color = config.getColorVal('elementUiPrimary')
|
||||||
|
item2.children.forEach((item3: any) => {
|
||||||
|
item3.icon = 'el-icon-Platform'
|
||||||
|
item3.level = 1
|
||||||
|
item3.color =
|
||||||
|
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
|
item3.children.forEach((item4: any) => {
|
||||||
|
item4.icon = 'el-icon-Platform'
|
||||||
|
item4.color =
|
||||||
|
item4.comFlag === 2
|
||||||
|
? config.getColorVal('elementUiPrimary')
|
||||||
|
: '#e26257 !important'
|
||||||
|
// item4.color = '#e26257 !important'
|
||||||
|
arr3.push(item4)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
tree.value = res.data
|
tree.value = res.data
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (arr1.length > 0) {
|
if (type == '2') {
|
||||||
|
//初始化选中
|
||||||
|
|
||||||
|
treRef.value?.treeRef4.setCurrentKey(arr4[0].id)
|
||||||
|
// 注册父组件事件
|
||||||
|
emit('init', {
|
||||||
|
level: 3,
|
||||||
|
...arr4[0]
|
||||||
|
})
|
||||||
|
changePointType('4', arr4[0])
|
||||||
|
return
|
||||||
|
} else if (arr1.length > 0) {
|
||||||
//初始化选中
|
//初始化选中
|
||||||
treRef.value?.treeRef1.setCurrentKey(arr1[0].id)
|
treRef.value?.treeRef1.setCurrentKey(arr1[0].id)
|
||||||
// 注册父组件事件
|
// 注册父组件事件
|
||||||
@@ -119,7 +174,6 @@ 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,
|
||||||
@@ -138,7 +192,8 @@ const changePointType = (val: any, obj: any) => {
|
|||||||
emit('pointTypeChange', val, obj)
|
emit('pointTypeChange', val, obj)
|
||||||
}
|
}
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
querySysExcel({ id: dictData.state.area[0]?.id })
|
// id: dictData.state.area[0]?.id
|
||||||
|
querySysExcel({})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
info()
|
info()
|
||||||
|
|||||||
@@ -3,13 +3,7 @@
|
|||||||
<div style="transition: all 0.3s; overflow: hidden; height: 100%">
|
<div style="transition: all 0.3s; overflow: hidden; height: 100%">
|
||||||
<div class="cn-tree">
|
<div class="cn-tree">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
<el-input
|
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
maxlength="32"
|
|
||||||
show-word-limit
|
|
||||||
v-model.trim="filterText"
|
|
||||||
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>
|
||||||
@@ -37,7 +31,7 @@
|
|||||||
:style="{ color: data.color }"
|
:style="{ color: data.color }"
|
||||||
v-if="data.icon"
|
v-if="data.icon"
|
||||||
/>
|
/>
|
||||||
<span style="margin-left: 5px;">{{ node.label }}</span>
|
<span style="margin-left: 5px">{{ node.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -157,7 +151,8 @@ const clickNode = (e: anyObj) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
querySysExcel({ id: dictData.state.area[0]?.id })
|
// id: dictData.state.area[0]?.id
|
||||||
|
querySysExcel({})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
getTreeList()
|
getTreeList()
|
||||||
|
|||||||
@@ -1,41 +1,61 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden;'>
|
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; 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"
|
||||||
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
<div style='display: flex; align-items: center' class='mb10'>
|
:class="menuCollapse ? 'unfold' : ''"
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
|
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" v-model.trim="filterText" 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-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
|
<el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
|
||||||
<template #content>
|
<template #content>
|
||||||
<span>台账推送</span>
|
<span>台账推送</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<Icon
|
<Icon
|
||||||
name="el-icon-Promotion"
|
name="el-icon-Promotion"
|
||||||
size="20"
|
size="20"
|
||||||
class="fold ml10 menu-collapse"
|
class="fold ml10 mr10 menu-collapse"
|
||||||
style="cursor: pointer;"
|
style="cursor: pointer"
|
||||||
:style="{ color: config.getColorVal('elementUiPrimary') }"
|
:style="{ color: config.getColorVal('elementUiPrimary') }"
|
||||||
@click="onAdd" />
|
@click="onAdd"
|
||||||
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
|
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
|
||||||
: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 - 190px)' }"
|
<el-tree
|
||||||
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
|
:style="{ height: 'calc(100vh - 190px)' }"
|
||||||
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
|
style="overflow: auto"
|
||||||
<template #default='{ node, data }'>
|
ref="treeRef"
|
||||||
<span class='custom-tree-node'>
|
:props="defaultProps"
|
||||||
<Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
|
highlight-current
|
||||||
v-if='data.icon' />
|
:default-expand-all="false"
|
||||||
<span style='margin-left: 4px'>{{ node.label }}</span>
|
@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>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
@@ -43,12 +63,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<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'
|
||||||
import { t } from 'vxe-table';
|
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
@@ -74,7 +92,7 @@ const defaultProps = {
|
|||||||
label: 'name',
|
label: 'name',
|
||||||
value: 'id'
|
value: 'id'
|
||||||
}
|
}
|
||||||
const emit = defineEmits(['checkTreeNodeChange','onAdd'])
|
const emit = defineEmits(['checkTreeNodeChange', 'onAdd'])
|
||||||
watch(filterText, val => {
|
watch(filterText, val => {
|
||||||
treeRef.value!.filter(val)
|
treeRef.value!.filter(val)
|
||||||
})
|
})
|
||||||
@@ -83,18 +101,16 @@ const onMenuCollapse = () => {
|
|||||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||||
}
|
}
|
||||||
const filterNode = (value: string, data: any, node: any) => {
|
const filterNode = (value: string, data: any, node: any) => {
|
||||||
console.log(value, data, node, 'filterNode');
|
console.log(value, data, node, 'filterNode')
|
||||||
if (!value) return true
|
if (!value) return true
|
||||||
// return data.name.includes(value)
|
// return data.name.includes(value)
|
||||||
if (data.name) {
|
if (data.name) {
|
||||||
|
|
||||||
return chooseNode(value, data, node)
|
return chooseNode(value, data, node)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符.
|
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符.
|
||||||
const chooseNode = (value: string, data: any, node: any) => {
|
const chooseNode = (value: string, data: any, node: any) => {
|
||||||
|
|
||||||
if (data.name.indexOf(value) !== -1) {
|
if (data.name.indexOf(value) !== -1) {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
@@ -132,13 +148,13 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
|
|||||||
defineExpose({ treeRef })
|
defineExpose({ treeRef })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.cn-tree {
|
.cn-tree {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10px;
|
// padding: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|||||||
@@ -13,11 +13,27 @@
|
|||||||
/>
|
/>
|
||||||
<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" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
|
<template #prefix>
|
||||||
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
|
</template>
|
||||||
|
</el-input> -->
|
||||||
|
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
|
<template #prepend>
|
||||||
|
<el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
<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>
|
||||||
|
<!-- -->
|
||||||
<Icon
|
<Icon
|
||||||
@click="onMenuCollapse"
|
@click="onMenuCollapse"
|
||||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
@@ -34,6 +50,8 @@
|
|||||||
v-model.trim="activeName"
|
v-model.trim="activeName"
|
||||||
style="flex: 1; height: 100%"
|
style="flex: 1; height: 100%"
|
||||||
@change="changeDevice"
|
@change="changeDevice"
|
||||||
|
v-if="treeType == '1'"
|
||||||
|
v-loading="loading"
|
||||||
>
|
>
|
||||||
<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">
|
||||||
@@ -43,7 +61,7 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
|
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
|
:style="{ height: treeType.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
|
||||||
ref="treeRef1"
|
ref="treeRef1"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
highlight-current
|
highlight-current
|
||||||
@@ -120,6 +138,33 @@
|
|||||||
</el-tree>
|
</el-tree>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
|
<div v-if="treeType == '2'" v-loading="loading">
|
||||||
|
<el-tree
|
||||||
|
:style="{ height: 'calc(100vh - 188px)' }"
|
||||||
|
class="pt10"
|
||||||
|
ref="treeRef4"
|
||||||
|
:props="defaultProps"
|
||||||
|
highlight-current
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:data="data"
|
||||||
|
style="overflow: auto"
|
||||||
|
:default-expand-all="false"
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -133,7 +178,7 @@ import { useRoute } from 'vue-router'
|
|||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/tree'
|
name: 'govern/tree'
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['changePointType'])
|
const emit = defineEmits(['changePointType', 'changeTreeType'])
|
||||||
interface Props {
|
interface Props {
|
||||||
width?: string
|
width?: string
|
||||||
canExpand?: boolean
|
canExpand?: boolean
|
||||||
@@ -157,6 +202,17 @@ const defaultProps = {
|
|||||||
label: 'name',
|
label: 'name',
|
||||||
value: 'id'
|
value: 'id'
|
||||||
}
|
}
|
||||||
|
const treeType = ref('1')
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
label: '设备',
|
||||||
|
value: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '工程',
|
||||||
|
value: '2'
|
||||||
|
}
|
||||||
|
]
|
||||||
//治理设备数据
|
//治理设备数据
|
||||||
const zlDeviceData = ref<any>([])
|
const zlDeviceData = ref<any>([])
|
||||||
const zlDevList = ref<any>([])
|
const zlDevList = ref<any>([])
|
||||||
@@ -196,7 +252,9 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
watch(filterText, val => {
|
watch(filterText, val => {
|
||||||
if (activeName.value == '0') {
|
if (treeType.value == '2') {
|
||||||
|
treeRef4.value!.filter(val)
|
||||||
|
} else if (activeName.value == '0') {
|
||||||
treeRef1.value!.filter(val)
|
treeRef1.value!.filter(val)
|
||||||
} else if (activeName.value == '1') {
|
} else if (activeName.value == '1') {
|
||||||
treeRef2.value!.filter(val)
|
treeRef2.value!.filter(val)
|
||||||
@@ -217,8 +275,6 @@ watch(process, val => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const changeDevice = (val: any) => {
|
const changeDevice = (val: any) => {
|
||||||
console.log('🚀 ~ changeDevice ~ val:', val)
|
|
||||||
|
|
||||||
let arr1: any = []
|
let arr1: any = []
|
||||||
//zlDeviceData
|
//zlDeviceData
|
||||||
zlDevList.value.forEach((item: any) => {
|
zlDevList.value.forEach((item: any) => {
|
||||||
@@ -299,7 +355,7 @@ function filterProcess(nodes: any) {
|
|||||||
// 递归处理子节点
|
// 递归处理子节点
|
||||||
const children = node.children ? filterProcess(node.children) : []
|
const children = node.children ? filterProcess(node.children) : []
|
||||||
|
|
||||||
// 对于装置层级(level=2),只保留 process 值匹配的节点
|
// 对于设备层级(level=2),只保留 process 值匹配的节点
|
||||||
if (node.level === 2) {
|
if (node.level === 2) {
|
||||||
if (node.process == process.value) {
|
if (node.process == process.value) {
|
||||||
return {
|
return {
|
||||||
@@ -381,27 +437,43 @@ 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, treeRef3 })
|
// 工程
|
||||||
|
const treeRef4 = ref<InstanceType<typeof ElTree>>()
|
||||||
|
defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (zlDeviceData.value.length != 0) {
|
setActiveName()
|
||||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
|
||||||
activeName.value = '0'
|
|
||||||
}
|
|
||||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
|
||||||
activeName.value = '1'
|
|
||||||
}
|
|
||||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
|
|
||||||
activeName.value = '2'
|
|
||||||
}
|
|
||||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
|
||||||
activeName.value = '2'
|
|
||||||
}
|
|
||||||
nextTick(() => {
|
|
||||||
changeDevice(activeName.value)
|
|
||||||
})
|
|
||||||
}, 500)
|
}, 500)
|
||||||
})
|
})
|
||||||
|
const setActiveName = () => {
|
||||||
|
if (zlDeviceData.value.length != 0) {
|
||||||
|
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||||
|
activeName.value = '0'
|
||||||
|
}
|
||||||
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||||
|
activeName.value = '1'
|
||||||
|
}
|
||||||
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
|
||||||
|
activeName.value = '2'
|
||||||
|
}
|
||||||
|
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||||
|
activeName.value = '2'
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
changeDevice(activeName.value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const loading = ref(false)
|
||||||
|
const changeTreeType = (val: string) => {
|
||||||
|
loading.value = true
|
||||||
|
emit('changeTreeType', val)
|
||||||
|
if (val == '1') {
|
||||||
|
setActiveName()
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -432,4 +504,7 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
:deep(.el-input-group__prepend) {
|
||||||
|
background-color: var(--el-fill-color-blank);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
style='cursor: pointer' />
|
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-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
|
<el-input maxlength="32" v-model.trim='filterText' 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>
|
||||||
|
|||||||
@@ -35,6 +35,15 @@ export const adminBaseRoute = {
|
|||||||
title: pageTitle('router.supplementaryRecruitment')
|
title: pageTitle('router.supplementaryRecruitment')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
// 在线补召
|
||||||
|
path: '/versionMaintenance',
|
||||||
|
name: 'versionMaintenance',
|
||||||
|
component: () => import('@/views/govern/manage/programVersion/comp/versionMaintenance.vue'),
|
||||||
|
meta: {
|
||||||
|
title: pageTitle('router.versionMaintenance')
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'cockpit',
|
path: 'cockpit',
|
||||||
name: '项目管理',
|
name: '项目管理',
|
||||||
|
|||||||
103
src/utils/downloadFile.ts
Normal file
103
src/utils/downloadFile.ts
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
import { ElMessage, ElMessageBox, ElInput, ElSegmented } from 'element-plus'
|
||||||
|
export const downLoadFile = (name: string, key: string, res: any) => {
|
||||||
|
let blob = new Blob([res], {
|
||||||
|
type: getFileType(key)
|
||||||
|
})
|
||||||
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a') // 创建a标签
|
||||||
|
link.href = url
|
||||||
|
link.download = name // 设置下载的文件名
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click() //执行下载
|
||||||
|
document.body.removeChild(link)
|
||||||
|
ElMessage.success('下载成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFileType = (url: string) => {
|
||||||
|
const ext = url.split('.').pop()?.toLowerCase() || ''
|
||||||
|
const mimeMap: Record<string, string> = {
|
||||||
|
// Excel
|
||||||
|
xls: 'application/vnd.ms-excel',
|
||||||
|
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||||
|
// CSV
|
||||||
|
csv: 'text/csv',
|
||||||
|
// Word
|
||||||
|
doc: 'application/msword',
|
||||||
|
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||||
|
// PDF
|
||||||
|
pdf: 'application/pdf',
|
||||||
|
// PowerPoint
|
||||||
|
ppt: 'application/vnd.ms-powerpoint',
|
||||||
|
pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||||||
|
// 图片
|
||||||
|
png: 'image/png',
|
||||||
|
gif: 'image/gif',
|
||||||
|
jpeg: 'image/jpeg',
|
||||||
|
jpg: 'image/jpeg',
|
||||||
|
bmp: 'image/bmp',
|
||||||
|
ico: 'image/vnd.microsoft.icon',
|
||||||
|
tif: 'image/tiff',
|
||||||
|
tiff: 'image/tiff',
|
||||||
|
svg: 'image/svg+xml',
|
||||||
|
webp: 'image/webp',
|
||||||
|
// 音频
|
||||||
|
mp3: 'audio/mpeg',
|
||||||
|
aac: 'audio/aac',
|
||||||
|
mid: 'audio/midi',
|
||||||
|
midi: 'audio/midi',
|
||||||
|
oga: 'audio/ogg',
|
||||||
|
wav: 'audio/wav',
|
||||||
|
weba: 'audio/webm',
|
||||||
|
// 视频
|
||||||
|
avi: 'video/x-msvideo',
|
||||||
|
mpeg: 'video/mpeg',
|
||||||
|
ogv: 'video/ogg',
|
||||||
|
webm: 'video/webm',
|
||||||
|
'3gp': 'video/3gpp',
|
||||||
|
'3g2': 'video/3gpp2',
|
||||||
|
// 网页/代码
|
||||||
|
html: 'text/html',
|
||||||
|
css: 'text/css',
|
||||||
|
js: 'text/javascript',
|
||||||
|
mjs: 'text/javascript',
|
||||||
|
json: 'application/json',
|
||||||
|
jsonld: 'application/ld+json',
|
||||||
|
xhtml: 'application/xhtml+xml',
|
||||||
|
xml: 'application/xml',
|
||||||
|
xul: 'application/vnd.mozilla.xul+xml',
|
||||||
|
// 文档
|
||||||
|
abw: 'application/x-abiword',
|
||||||
|
odp: 'application/vnd.oasis.opendocument.presentation',
|
||||||
|
ods: 'application/vnd.oasis.opendocument.spreadsheet',
|
||||||
|
odt: 'application/vnd.oasis.opendocument.text',
|
||||||
|
rtf: 'application/rtf',
|
||||||
|
txt: 'text/plain',
|
||||||
|
vsd: 'application/vnd.visio',
|
||||||
|
// 字体
|
||||||
|
otf: 'font/otf',
|
||||||
|
ttf: 'font/ttf',
|
||||||
|
woff: 'font/woff',
|
||||||
|
woff2: 'font/woff2',
|
||||||
|
eot: 'application/vnd.ms-fontobject',
|
||||||
|
// 压缩/归档
|
||||||
|
arc: 'application/x-freearc',
|
||||||
|
bz: 'application/x-bzip',
|
||||||
|
bz2: 'application/x-bzip2',
|
||||||
|
rar: 'application/x-rar-compressed',
|
||||||
|
tar: 'application/x-tar',
|
||||||
|
zip: 'application/zip',
|
||||||
|
'7z': 'application/x-7z-compressed',
|
||||||
|
// 其他
|
||||||
|
bin: 'application/octet-stream',
|
||||||
|
csh: 'application/x-csh',
|
||||||
|
epub: 'application/epub+zip',
|
||||||
|
azw: 'application/vnd.amazon.ebook',
|
||||||
|
ics: 'text/calendar',
|
||||||
|
jar: 'application/java-archive',
|
||||||
|
mpkg: 'application/vnd.apple.installer+xml',
|
||||||
|
ogx: 'application/ogg',
|
||||||
|
sh: 'application/x-sh',
|
||||||
|
swf: 'application/x-shockwave-flash'
|
||||||
|
}
|
||||||
|
return mimeMap[ext] || ''
|
||||||
|
}
|
||||||
@@ -4,7 +4,7 @@ import { ElLoading, ElMessage, ElNotification, type LoadingOptions } from 'eleme
|
|||||||
import { refreshToken } from '@/api/user-boot/user'
|
import { refreshToken } from '@/api/user-boot/user'
|
||||||
import router from '@/router/index'
|
import router from '@/router/index'
|
||||||
import { useAdminInfo } from '@/stores/adminInfo'
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
|
import { useNavTabs } from '@/stores/navTabs'
|
||||||
window.requests = []
|
window.requests = []
|
||||||
window.tokenRefreshing = false
|
window.tokenRefreshing = false
|
||||||
let loginExpireTimer: any = null
|
let loginExpireTimer: any = null
|
||||||
@@ -13,7 +13,7 @@ const loadingInstance: LoadingInstance = {
|
|||||||
target: null,
|
target: null,
|
||||||
count: 0
|
count: 0
|
||||||
}
|
}
|
||||||
|
const navTabs = useNavTabs()
|
||||||
/**
|
/**
|
||||||
* 根据运行环境获取基础请求URL
|
* 根据运行环境获取基础请求URL
|
||||||
*/
|
*/
|
||||||
@@ -164,6 +164,9 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
|
|||||||
message: response.data.message
|
message: response.data.message
|
||||||
})
|
})
|
||||||
adminInfo.removeToken()
|
adminInfo.removeToken()
|
||||||
|
navTabs.closeTabs()
|
||||||
|
window.localStorage.clear()
|
||||||
|
adminInfo.reset()
|
||||||
router.push({ name: 'login' })
|
router.push({ name: 'login' })
|
||||||
loginExpireTimer = null // 执行后清空定时器
|
loginExpireTimer = null // 执行后清空定时器
|
||||||
}, 100) // 可根据实际情况调整延迟时间
|
}, 100) // 可根据实际情况调整延迟时间
|
||||||
|
|||||||
@@ -100,6 +100,7 @@ const tableStore = new TableStore({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ title: '设备名称', field: 'equipmentName', align: 'center', width: 120 },
|
{ title: '设备名称', field: 'equipmentName', align: 'center', width: 120 },
|
||||||
|
{ title: '监测点名称', field: 'lineName', align: 'center', width: 140 },
|
||||||
{ title: '工程名称', field: 'engineeringName', align: 'center', width: 120 },
|
{ title: '工程名称', field: 'engineeringName', align: 'center', width: 120 },
|
||||||
{ title: '项目名称', field: 'projectName', align: 'center', width: 120 },
|
{ title: '项目名称', field: 'projectName', align: 'center', width: 120 },
|
||||||
{ title: '发生时刻', field: 'startTime', align: 'center', width: 180, sortable: true },
|
{ title: '发生时刻', field: 'startTime', align: 'center', width: 180, sortable: true },
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -179,7 +179,6 @@ const init = () => {
|
|||||||
opacity: 0.35,
|
opacity: 0.35,
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
|
||||||
borderWidth: 0
|
borderWidth: 0
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -141,7 +141,8 @@
|
|||||||
v-show="
|
v-show="
|
||||||
dataSet.includes('_items') ||
|
dataSet.includes('_items') ||
|
||||||
dataSet.indexOf('_history') != -1 ||
|
dataSet.indexOf('_history') != -1 ||
|
||||||
dataSet.indexOf('_moduleData') != -1
|
dataSet.indexOf('_moduleData') != -1||
|
||||||
|
dataSet.indexOf('_devRunTrend') != -1
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<DatePicker ref="datePickerRef"></DatePicker>
|
<DatePicker ref="datePickerRef"></DatePicker>
|
||||||
@@ -165,7 +166,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') && TrendList?.lineType == 1"
|
v-if="!dataSet.includes('_devRunTrend') &&!dataSet.includes('_moduleData') && TrendList?.lineType == 1"
|
||||||
:disabled="TrendList?.lineType != 1"
|
:disabled="TrendList?.lineType != 1"
|
||||||
@change="handleClick"
|
@change="handleClick"
|
||||||
>
|
>
|
||||||
@@ -525,6 +526,14 @@
|
|||||||
>
|
>
|
||||||
<moduleData ref="moduleDataRef" @onSubmit="handleClick" />
|
<moduleData ref="moduleDataRef" @onSubmit="handleClick" />
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 运行趋势 -->
|
||||||
|
<div
|
||||||
|
style="height: calc(100vh - 395px)"
|
||||||
|
v-if="dataSet.indexOf('_devRunTrend') != -1"
|
||||||
|
v-loading="tableLoading"
|
||||||
|
>
|
||||||
|
<operatingTrend ref="operatingTrendRef" @onSubmit="handleClick" />
|
||||||
|
</div>
|
||||||
<div v-if="!tableData" style="height: 42px"></div>
|
<div v-if="!tableData" style="height: 42px"></div>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
@@ -548,7 +557,8 @@ import {
|
|||||||
getOverLimitData,
|
getOverLimitData,
|
||||||
queryDictType,
|
queryDictType,
|
||||||
getById,
|
getById,
|
||||||
allModelData
|
allModelData,
|
||||||
|
getRawData
|
||||||
} from '@/api/cs-device-boot/EquipmentDelivery'
|
} from '@/api/cs-device-boot/EquipmentDelivery'
|
||||||
import { deviceHisData, deviceRtData, realTimeData, getTestData } from '@/api/cs-device-boot/csGroup'
|
import { deviceHisData, deviceRtData, realTimeData, getTestData } from '@/api/cs-device-boot/csGroup'
|
||||||
import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
|
import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
|
||||||
@@ -557,6 +567,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
|
|||||||
import Trend from './tabs/trend.vue' //趋势数据
|
import Trend from './tabs/trend.vue' //趋势数据
|
||||||
import realTime from './tabs/realtime.vue' //实时数据-主界面
|
import realTime from './tabs/realtime.vue' //实时数据-主界面
|
||||||
import realTrend from './tabs/components/realtrend.vue' //实时数据-实时趋势
|
import realTrend from './tabs/components/realtrend.vue' //实时数据-实时趋势
|
||||||
|
import operatingTrend from './tabs/operatingTrend.vue' //运行趋势
|
||||||
import harmonicSpectrum from './tabs/components/harmonicSpectrum.vue' //实时数据-谐波频谱子页面
|
import harmonicSpectrum from './tabs/components/harmonicSpectrum.vue' //实时数据-谐波频谱子页面
|
||||||
import recordWoves from './tabs/components/recordwoves.vue' //实时数据-实时录波子页面
|
import recordWoves from './tabs/components/recordwoves.vue' //实时数据-实时录波子页面
|
||||||
import offLineDataImport from './offLineDataImport/index.vue'
|
import offLineDataImport from './offLineDataImport/index.vue'
|
||||||
@@ -660,6 +671,7 @@ const volConTypeList = dictData.getBasicData('Dev_Connect')
|
|||||||
// }
|
// }
|
||||||
//谐波频谱
|
//谐波频谱
|
||||||
const realTrendRef = ref()
|
const realTrendRef = ref()
|
||||||
|
const operatingTrendRef = ref()
|
||||||
const changeTrendType = (val: any) => {
|
const changeTrendType = (val: any) => {
|
||||||
trendDataTime.value = ''
|
trendDataTime.value = ''
|
||||||
activeTrendName.value = val * 1
|
activeTrendName.value = val * 1
|
||||||
@@ -685,7 +697,7 @@ const handleTrend = async () => {
|
|||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
if (res.code == 'A0000') {
|
if (res.code == 'A0000') {
|
||||||
trendDataTime.value = ''
|
trendDataTime.value = ''
|
||||||
ElMessage.success('装置应答成功')
|
ElMessage.success('设备应答成功')
|
||||||
//每隔30s调用一下接口,通知后台推送mqtt消息
|
//每隔30s调用一下接口,通知后台推送mqtt消息
|
||||||
trendTimer.value = window.setInterval(() => {
|
trendTimer.value = window.setInterval(() => {
|
||||||
if (!dataSet.value.includes('_realtimedata')) return
|
if (!dataSet.value.includes('_realtimedata')) return
|
||||||
@@ -709,7 +721,7 @@ const handleTrend = async () => {
|
|||||||
// }
|
// }
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
ElMessage.warning('装置应答失败')
|
ElMessage.warning('设备应答失败')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
@@ -741,7 +753,7 @@ 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(() => {
|
||||||
@@ -771,7 +783,7 @@ const handleReturn = async () => {
|
|||||||
tableLoading.value = true
|
tableLoading.value = true
|
||||||
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
|
||||||
@@ -920,6 +932,10 @@ const nodeClick = async (e: anyObj, node: any) => {
|
|||||||
if (item.type === 'moduleData') {
|
if (item.type === 'moduleData') {
|
||||||
item.id = item.id + '_moduleData'
|
item.id = item.id + '_moduleData'
|
||||||
}
|
}
|
||||||
|
// 模块数据
|
||||||
|
if (item.type === 'devRunTrend') {
|
||||||
|
item.id = item.id + '_devRunTrend'
|
||||||
|
}
|
||||||
})
|
})
|
||||||
res.data.dataSetList = res.data.dataSetList.filter((item: any) => item.name != '历史统计数据')
|
res.data.dataSetList = res.data.dataSetList.filter((item: any) => item.name != '历史统计数据')
|
||||||
//便携式设备默认二次值
|
//便携式设备默认二次值
|
||||||
@@ -982,7 +998,7 @@ const getRealDataMqttMsg = async () => {
|
|||||||
await getBasicRealData(lineId.value)
|
await getBasicRealData(lineId.value)
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
if (res.code == 'A0000') {
|
if (res.code == 'A0000') {
|
||||||
ElMessage.success('装置应答成功')
|
ElMessage.success('设备应答成功')
|
||||||
mqttMessage.value = {}
|
mqttMessage.value = {}
|
||||||
|
|
||||||
realDataTimer.value = window.setInterval(async () => {
|
realDataTimer.value = window.setInterval(async () => {
|
||||||
@@ -1146,7 +1162,7 @@ const getRealDataMqttMsg = async () => {
|
|||||||
console.log('mqtt客户端已断开连接.....')
|
console.log('mqtt客户端已断开连接.....')
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
ElMessage.success('装置应答失败')
|
ElMessage.success('设备应答失败')
|
||||||
tableLoading.value = false
|
tableLoading.value = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -1316,6 +1332,39 @@ const handleClick = async (tab?: any) => {
|
|||||||
}, 0)
|
}, 0)
|
||||||
}, 0)
|
}, 0)
|
||||||
}
|
}
|
||||||
|
//运行趋势
|
||||||
|
if (dataSet.value.includes('_devRunTrend')) {
|
||||||
|
setTimeout(async () => {
|
||||||
|
if (tab.props != undefined) await (datePickerRef.value && datePickerRef.value?.setInterval(5))
|
||||||
|
|
||||||
|
let obj = {
|
||||||
|
// devId: deviceId.value, //e.id
|
||||||
|
lineId: [deviceId.value], //e.pid
|
||||||
|
startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
|
||||||
|
endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||||
|
}
|
||||||
|
await setTimeout(() => {
|
||||||
|
getRawData(obj)
|
||||||
|
.then((res: any) => {
|
||||||
|
|
||||||
|
tableLoading.value = false
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
|
||||||
|
operatingTrendRef.value?.setData(res.data)
|
||||||
|
}, 500)
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false
|
||||||
|
}, 1500)
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
setTimeout(() => {
|
||||||
|
tableLoading.value = false
|
||||||
|
}, 1500)
|
||||||
|
})
|
||||||
|
}, 0)
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
|
||||||
//查询当前指标
|
//查询当前指标
|
||||||
if (!dataSet.value.includes('_')) {
|
if (!dataSet.value.includes('_')) {
|
||||||
|
|||||||
@@ -241,7 +241,7 @@ const tableStore = new TableStore({
|
|||||||
width: '180',
|
width: '180',
|
||||||
render: 'buttons',
|
render: 'buttons',
|
||||||
buttons: [
|
buttons: [
|
||||||
//直连装置注册
|
//直连设备注册
|
||||||
{
|
{
|
||||||
title: '注册',
|
title: '注册',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
|
|||||||
165
src/views/govern/device/control/tabs/operatingTrend.vue
Normal file
165
src/views/govern/device/control/tabs/operatingTrend.vue
Normal file
@@ -0,0 +1,165 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="height">
|
||||||
|
<MyEchart v-if="list.length != 0" :options="options1" style="height: 100%; width: 100%" class="pt10" />
|
||||||
|
<el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import { max } from 'lodash'
|
||||||
|
const height = ref(mainHeight(290))
|
||||||
|
const list = ref([])
|
||||||
|
const options1 = ref({})
|
||||||
|
const setData = (data: any) => {
|
||||||
|
// list.value = [...fillDataFromFirstTime(data),...data]
|
||||||
|
list.value = data
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 补全离散数据(严格从数组第一个time开始,最后一个time结束)
|
||||||
|
* @param {Array} data 原始离散数据数组
|
||||||
|
* @param {number} interval 补全时间间隔(秒,默认10秒)
|
||||||
|
* @returns {Array} 补全后的连续数据
|
||||||
|
*/
|
||||||
|
function fillDataFromFirstTime(data, interval = 10) {
|
||||||
|
// 1. 基础校验
|
||||||
|
if (!Array.isArray(data) || data.length === 0) {
|
||||||
|
console.error('原始数据必须是非空数组')
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 锁定起始时间:直接取数组第一个元素的time(不做任何偏移)
|
||||||
|
const firstItem = data[0]
|
||||||
|
const startTime = new Date(firstItem.time)
|
||||||
|
const startTimestamp = startTime.getTime()
|
||||||
|
|
||||||
|
// 3. 锁定结束时间:取数组最后一个元素的time
|
||||||
|
const lastItem = data[data.length - 1]
|
||||||
|
const endTime = new Date(lastItem.time)
|
||||||
|
const endTimestamp = endTime.getTime()
|
||||||
|
|
||||||
|
// 4. 预处理:按时间排序(防止原始数据乱序)
|
||||||
|
const sortedData = [...data].sort((a, b) => new Date(a.time) - new Date(b.time))
|
||||||
|
|
||||||
|
// 5. 初始化状态(继承第一个数据的type)
|
||||||
|
let currentType = firstItem.type
|
||||||
|
let currentDesc = firstItem.description
|
||||||
|
let nextStatusIndex = 1 // 指向待切换的下一个状态点
|
||||||
|
|
||||||
|
const filledData = []
|
||||||
|
|
||||||
|
// 6. 核心循环:从第一个time开始,按间隔补全到最后一个time
|
||||||
|
for (let ts = startTimestamp; ts <= endTimestamp; ts += interval * 1000) {
|
||||||
|
const currentDate = new Date(ts)
|
||||||
|
// 格式化时间为和原始数据一致的 "YYYY-MM-DD HH:mm:ss" 格式
|
||||||
|
const formattedTime = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(
|
||||||
|
2,
|
||||||
|
'0'
|
||||||
|
)}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(
|
||||||
|
2,
|
||||||
|
'0'
|
||||||
|
)}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`
|
||||||
|
|
||||||
|
// 7. 检查是否到达下一个状态切换点
|
||||||
|
if (nextStatusIndex < sortedData.length) {
|
||||||
|
const nextStatusTime = new Date(sortedData[nextStatusIndex].time).getTime()
|
||||||
|
if (ts >= nextStatusTime) {
|
||||||
|
currentType = sortedData[nextStatusIndex].type
|
||||||
|
currentDesc = sortedData[nextStatusIndex].description
|
||||||
|
nextStatusIndex++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 8. 生成补全数据项(结构与原始数据完全一致)
|
||||||
|
filledData.push({
|
||||||
|
time: formattedTime,
|
||||||
|
devId: firstItem.devId,
|
||||||
|
description: currentDesc,
|
||||||
|
type: currentType
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return filledData
|
||||||
|
}
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
options1.value = {
|
||||||
|
title: {
|
||||||
|
text: '运行状态'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var res = params[0].data[0] + '<br/>运行状态:'
|
||||||
|
var texts = ''
|
||||||
|
if (params[0].data[1] === 1 || params[0].data[1] === '1') {
|
||||||
|
texts = '中断'
|
||||||
|
} else if (params[0].data[1] === 10 || params[0].data[1] === '10') {
|
||||||
|
texts = '正常'
|
||||||
|
}
|
||||||
|
res = res + texts
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
// type: 'category',
|
||||||
|
// data: data.updateTime
|
||||||
|
type: 'time',
|
||||||
|
name: '时间',
|
||||||
|
//
|
||||||
|
axisLabel: {
|
||||||
|
formatter: {
|
||||||
|
day: '{MM}-{dd}',
|
||||||
|
month: '{MM}',
|
||||||
|
year: '{yyyy}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '',
|
||||||
|
type: 'value',
|
||||||
|
max: 11,
|
||||||
|
interval: 1,
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
color: ['#ccc'],
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// 这里重新定义就可以
|
||||||
|
formatter: function (value: number) {
|
||||||
|
var texts = []
|
||||||
|
if (value === 1) {
|
||||||
|
texts.push('中断')
|
||||||
|
} else if (value === 10) {
|
||||||
|
texts.push('正常')
|
||||||
|
}
|
||||||
|
return texts
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '运行状态',
|
||||||
|
data: list.value.map((item: any, index: number) => [item.time, item.type == 0 ? 1 : 10]),
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
|
||||||
|
step: 'end'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
setData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main main" :style="{ height: pageHeight.height }">
|
<div class="default-main main" :style="{ height: pageHeight.height }">
|
||||||
<div class="main_left">
|
<div class="main_left">
|
||||||
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
|
<DeviceTree @node-click="nodeClick" @deviceTypeChange="deviceTypeChange"></DeviceTree>
|
||||||
</div>
|
</div>
|
||||||
<div class="main_right" v-loading="loading">
|
<div class="main_right" v-loading="loading">
|
||||||
<div class="right_nav">
|
<div class="right_nav">
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<!-- <el-button :icon="Refresh" @click="handleRestartDevice" type="primary" :loading="deviceRestartLoading">
|
<!-- <el-button :icon="Refresh" @click="handleRestartDevice" type="primary" :loading="deviceRestartLoading">
|
||||||
装置重启
|
设备重启
|
||||||
</el-button> -->
|
</el-button> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -197,22 +197,28 @@
|
|||||||
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
import { ref, watch, onMounted, onBeforeUnmount, h, inject } from 'vue'
|
import { ref, watch, onMounted, onBeforeUnmount, h, inject } from 'vue'
|
||||||
import { ElMessage, ElMessageBox, ElInput } from 'element-plus'
|
import { ElMessage, ElMessageBox, ElInput, ElSegmented } from 'element-plus'
|
||||||
import {
|
import {
|
||||||
getFileServiceFileOrDir,
|
getFileServiceFileOrDir,
|
||||||
uploadDeviceFile,
|
uploadDeviceFile,
|
||||||
reStartDevice,
|
reStartDevice,
|
||||||
addDeviceDir,
|
addDeviceDir,
|
||||||
delDeviceDir
|
delDeviceDir,
|
||||||
} from '@/api/cs-device-boot/fileService.ts'
|
listDir,
|
||||||
|
downloadFileFromFrontr,
|
||||||
|
deleteCld,
|
||||||
|
uploadFileToFront,
|
||||||
|
mkdir
|
||||||
|
} from '@/api/cs-device-boot/fileService'
|
||||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
import { Delete, Download, Upload, Plus, Refresh, Search } from '@element-plus/icons-vue'
|
import { Delete, Download, Upload, Plus, Refresh, Search } from '@element-plus/icons-vue'
|
||||||
import popup from './popup.vue'
|
import popup from './popup.vue'
|
||||||
import mqtt from 'mqtt'
|
import mqtt from 'mqtt'
|
||||||
import { useAdminInfo } from '@/stores/adminInfo'
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
import { passwordConfirm } from '@/api/user-boot/user'
|
import { passwordConfirm } from '@/api/user-boot/user'
|
||||||
|
import { downLoadFile } from '@/utils/downloadFile.ts'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/device/fileService'
|
name: 'govern/device/fileService/index'
|
||||||
})
|
})
|
||||||
const pageHeight = mainHeight(20)
|
const pageHeight = mainHeight(20)
|
||||||
const tableHeight = mainHeight(130)
|
const tableHeight = mainHeight(130)
|
||||||
@@ -220,31 +226,53 @@ const adminInfo = useAdminInfo()
|
|||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
//nDid
|
//nDid
|
||||||
const nDid = ref<string>('')
|
const nDid = ref<string>('')
|
||||||
|
const devId = ref<string>('')
|
||||||
//当前目录
|
//当前目录
|
||||||
const activePath = ref<string>('')
|
const activePath = ref<string>('')
|
||||||
//判断是否是根目录
|
//判断是否是根目录
|
||||||
const isRoot = ref<boolean>(true)
|
const isRoot = ref<boolean>(true)
|
||||||
//储存所有点击过的目录
|
//储存所有点击过的目录
|
||||||
const activePathList: any = ref([])
|
const activePathList: any = ref([])
|
||||||
|
const devConType = ref<string>('')
|
||||||
|
const deviceTypeChange = (val: any, obj: any) => {
|
||||||
|
nodeClick(obj)
|
||||||
|
}
|
||||||
const nodeClick = (e: any) => {
|
const nodeClick = (e: any) => {
|
||||||
if (e && (e.level == 2 || e.type == 'device')) {
|
if (e && (e.level == 2 || e.type == 'device')) {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
nDid.value = e.ndid
|
nDid.value = e.ndid
|
||||||
|
devId.value = e.id
|
||||||
dirList.value = []
|
dirList.value = []
|
||||||
activePathList.value = []
|
activePathList.value = []
|
||||||
activePath.value = '/'
|
activePath.value = '/'
|
||||||
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
|
devConType.value = e.devConType
|
||||||
.then((resp: any) => {
|
if (devConType.value == 'CLD') {
|
||||||
if (resp.code == 'A0000') {
|
listDir({ devId: devId.value, filePath: activePath.value })
|
||||||
dirList.value = resp.data
|
.then((resp: any) => {
|
||||||
currentDirList.value = resp.data
|
if (resp.code == 'A0000') {
|
||||||
activePathList.value = [{ path: activePath.value }]
|
dirList.value = resp.data
|
||||||
|
currentDirList.value = resp.data
|
||||||
|
activePathList.value = [{ path: activePath.value }]
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
})
|
||||||
})
|
} else {
|
||||||
.catch(e => {
|
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
|
||||||
loading.value = false
|
.then((resp: any) => {
|
||||||
})
|
if (resp.code == 'A0000') {
|
||||||
|
dirList.value = resp.data
|
||||||
|
currentDirList.value = resp.data
|
||||||
|
activePathList.value = [{ path: activePath.value }]
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//搜索文件或文件夹
|
//搜索文件或文件夹
|
||||||
@@ -291,11 +319,11 @@ const vNode = () => {
|
|||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
//装置重启
|
//设备重启
|
||||||
const deviceRestartLoading = ref<boolean>(false)
|
const deviceRestartLoading = ref<boolean>(false)
|
||||||
const handleRestartDevice = () => {
|
const handleRestartDevice = () => {
|
||||||
deviceRestartLoading.value = true
|
deviceRestartLoading.value = true
|
||||||
ElMessageBox.prompt('二次校验密码确认', '装置重启', {
|
ElMessageBox.prompt('二次校验密码确认', '设备重启', {
|
||||||
confirmButtonText: '确认',
|
confirmButtonText: '确认',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
customClass: 'customInput',
|
customClass: 'customInput',
|
||||||
@@ -360,21 +388,41 @@ const handleIntoDir = (row: any) => {
|
|||||||
if (activePathList.value.indexOf(obj.name) == -1) {
|
if (activePathList.value.indexOf(obj.name) == -1) {
|
||||||
activePathList.value.push({ path: obj.name })
|
activePathList.value.push({ path: obj.name })
|
||||||
}
|
}
|
||||||
getFileServiceFileOrDir(obj)
|
|
||||||
.then(res => {
|
if (devConType.value == 'CLD') {
|
||||||
dirList.value = res.data
|
listDir({ devId: devId.value, filePath: row.prjDataPath })
|
||||||
loading.value = false
|
.then((resp: any) => {
|
||||||
currentDirList.value = res.data
|
if (resp.code == 'A0000') {
|
||||||
activePathList.value.map((item: any, index: any) => {
|
dirList.value = resp.data
|
||||||
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
currentDirList.value = resp.data
|
||||||
activePathList.value.splice(index, 1)
|
activePathList.value.map((item: any, index: any) => {
|
||||||
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
||||||
|
activePathList.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
isRoot.value = false
|
.catch(e => {
|
||||||
})
|
loading.value = false
|
||||||
.catch(e => {
|
})
|
||||||
loading.value = false
|
} else {
|
||||||
})
|
getFileServiceFileOrDir(obj)
|
||||||
|
.then(res => {
|
||||||
|
dirList.value = res.data
|
||||||
|
loading.value = false
|
||||||
|
currentDirList.value = res.data
|
||||||
|
activePathList.value.map((item: any, index: any) => {
|
||||||
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
||||||
|
activePathList.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
isRoot.value = false
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//处理导航栏路径
|
//处理导航栏路径
|
||||||
@@ -406,19 +454,38 @@ const handleIntoByPath = async (val: any) => {
|
|||||||
}
|
}
|
||||||
activePath.value = val.path
|
activePath.value = val.path
|
||||||
loading.value = true
|
loading.value = true
|
||||||
getFileServiceFileOrDir(obj)
|
if (devConType.value == 'CLD') {
|
||||||
.then(res => {
|
listDir({ devId: devId.value, filePath: val.path })
|
||||||
dirList.value = res.data
|
.then((resp: any) => {
|
||||||
activePathList.value.map((item: any, index: any) => {
|
if (resp.code == 'A0000') {
|
||||||
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
dirList.value = resp.data
|
||||||
activePathList.value.splice(index, 1)
|
|
||||||
|
activePathList.value.map((item: any, index: any) => {
|
||||||
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
||||||
|
activePathList.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
loading.value = false
|
.catch(e => {
|
||||||
})
|
loading.value = false
|
||||||
.catch(e => {
|
})
|
||||||
loading.value = false
|
} else {
|
||||||
})
|
getFileServiceFileOrDir(obj)
|
||||||
|
.then(res => {
|
||||||
|
dirList.value = res.data
|
||||||
|
activePathList.value.map((item: any, index: any) => {
|
||||||
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
||||||
|
activePathList.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const form = ref({
|
const form = ref({
|
||||||
path: ''
|
path: ''
|
||||||
@@ -437,45 +504,84 @@ const formRef = ref()
|
|||||||
//重新加载当前页面菜单
|
//重新加载当前页面菜单
|
||||||
const reloadCurrentMenu = (msg: string) => {
|
const reloadCurrentMenu = (msg: string) => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
|
|
||||||
.then((resp: any) => {
|
|
||||||
if (resp.code == 'A0000') {
|
|
||||||
loading.value = false
|
|
||||||
dirList.value = resp.data
|
|
||||||
currentDirList.value = resp.data
|
|
||||||
activePathList.value.map((item: any, index: any) => {
|
|
||||||
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
|
||||||
activePathList.value.splice(index, 1)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
loading.value = false
|
|
||||||
|
|
||||||
if (!msg) return
|
if (devConType.value == 'CLD') {
|
||||||
ElMessage({ message: msg, type: 'success', duration: 5000 })
|
listDir({ devId: devId.value, filePath: activePath.value })
|
||||||
}
|
.then((resp: any) => {
|
||||||
})
|
if (resp.code == 'A0000') {
|
||||||
.catch(e => {
|
dirList.value = resp.data
|
||||||
loading.value = false
|
currentDirList.value = resp.data
|
||||||
})
|
activePathList.value.map((item: any, index: any) => {
|
||||||
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
||||||
|
activePathList.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
|
if (!msg) return
|
||||||
|
ElMessage({ message: msg, type: 'success', duration: 5000 })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
|
||||||
|
.then((resp: any) => {
|
||||||
|
if (resp.code == 'A0000') {
|
||||||
|
loading.value = false
|
||||||
|
dirList.value = resp.data
|
||||||
|
currentDirList.value = resp.data
|
||||||
|
activePathList.value.map((item: any, index: any) => {
|
||||||
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
||||||
|
activePathList.value.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
|
|
||||||
|
if (!msg) return
|
||||||
|
ElMessage({ message: msg, type: 'success', duration: 5000 })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//新建文件夹
|
//新建文件夹
|
||||||
const submitDeviceDir = () => {
|
const submitDeviceDir = () => {
|
||||||
formRef.value.validate((valid: any) => {
|
formRef.value.validate((valid: any) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
let obj = {
|
if (devConType.value == 'CLD') {
|
||||||
nDid: nDid.value,
|
let obj = {
|
||||||
path:
|
devId: devId.value,
|
||||||
activePath.value == '/'
|
filePath:
|
||||||
? activePath.value + form.value.path
|
activePath.value == '/'
|
||||||
: activePath.value + '/' + form.value.path
|
? activePath.value + form.value.path
|
||||||
}
|
: activePath.value + '/' + form.value.path
|
||||||
loading.value = true
|
|
||||||
addDeviceDir(obj).then((res: any) => {
|
|
||||||
if (res.code == 'A0000') {
|
|
||||||
reloadCurrentMenu(res.message)
|
|
||||||
addDeviceDirOpen.value = false
|
|
||||||
}
|
}
|
||||||
})
|
loading.value = true
|
||||||
|
mkdir(obj).then((res: any) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
reloadCurrentMenu(res.message)
|
||||||
|
addDeviceDirOpen.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
let obj = {
|
||||||
|
nDid: nDid.value,
|
||||||
|
path:
|
||||||
|
activePath.value == '/'
|
||||||
|
? activePath.value + form.value.path
|
||||||
|
: activePath.value + '/' + form.value.path
|
||||||
|
}
|
||||||
|
loading.value = true
|
||||||
|
addDeviceDir(obj).then((res: any) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
reloadCurrentMenu(res.message)
|
||||||
|
addDeviceDirOpen.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -507,13 +613,30 @@ const handleDelDirOrFile = (row: any) => {
|
|||||||
passwordConfirm(value)
|
passwordConfirm(value)
|
||||||
.then((resp: any) => {
|
.then((resp: any) => {
|
||||||
if (resp.code == 'A0000') {
|
if (resp.code == 'A0000') {
|
||||||
delDeviceDir({ nDid: nDid.value, path: row.prjDataPath }).then((res: any) => {
|
if (devConType.value == 'CLD') {
|
||||||
if (res.code == 'A0000') {
|
deleteCld({
|
||||||
reloadCurrentMenu(res.message)
|
devId: devId.value,
|
||||||
|
filePath: row.prjDataPath
|
||||||
// ElMessage({ message: res.message, type: 'success', duration: 5000 })
|
})
|
||||||
}
|
.then((res: any) => {
|
||||||
})
|
if (res.code == 'A0000') {
|
||||||
|
reloadCurrentMenu(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
delDeviceDir({ nDid: nDid.value, path: row.prjDataPath })
|
||||||
|
.then((res: any) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
reloadCurrentMenu(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
@@ -526,11 +649,21 @@ const changeType = ref<any>('')
|
|||||||
//下载文件
|
//下载文件
|
||||||
const fileRef = ref()
|
const fileRef = ref()
|
||||||
const handleDownLoad = async (row: any) => {
|
const handleDownLoad = async (row: any) => {
|
||||||
;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
|
if (devConType.value == 'CLD') {
|
||||||
// fileName.value = row?.prjDataPath.split('/')[row?.prjDataPath.split('/').length - 1]
|
ElMessage.info('下载中,请稍等...')
|
||||||
// localStorage.setItem('fileName', fileName.value)
|
downloadFileFromFrontr({
|
||||||
changeType.value = 'download'
|
devId: devId.value,
|
||||||
localStorage.setItem('changeType', changeType.value)
|
filePath: row.prjDataPath
|
||||||
|
}).then(res => {
|
||||||
|
downLoadFile(row.name, row.name, res)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
|
||||||
|
// fileName.value = row?.prjDataPath.split('/')[row?.prjDataPath.split('/').length - 1]
|
||||||
|
// localStorage.setItem('fileName', fileName.value)
|
||||||
|
changeType.value = 'download'
|
||||||
|
localStorage.setItem('changeType', changeType.value)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//上传文件
|
//上传文件
|
||||||
const fileName = ref<any>('')
|
const fileName = ref<any>('')
|
||||||
@@ -540,17 +673,32 @@ const handleUpload = (e: any, fileList: any, row: any) => {
|
|||||||
localStorage.setItem('fileName', fileName.value)
|
localStorage.setItem('fileName', fileName.value)
|
||||||
changeType.value = 'upload'
|
changeType.value = 'upload'
|
||||||
localStorage.setItem('changeType', changeType.value)
|
localStorage.setItem('changeType', changeType.value)
|
||||||
const obj = {
|
|
||||||
id: nDid.value,
|
if (devConType.value == 'CLD') {
|
||||||
file: e.raw,
|
const obj = {
|
||||||
filePath: row || row.prjDataPath
|
devId: devId.value,
|
||||||
}
|
file: e.raw,
|
||||||
uploadDeviceFile(obj).then((res: any) => {
|
dirPath: row || row.prjDataPath
|
||||||
if (res.code == 'A0000') {
|
|
||||||
reloadCurrentMenu(res.message)
|
|
||||||
status.value = 100
|
|
||||||
}
|
}
|
||||||
})
|
uploadFileToFront(obj).then((res: any) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
reloadCurrentMenu(res.message)
|
||||||
|
status.value = 100
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const obj = {
|
||||||
|
id: nDid.value,
|
||||||
|
file: e.raw,
|
||||||
|
filePath: row || row.prjDataPath
|
||||||
|
}
|
||||||
|
uploadDeviceFile(obj).then((res: any) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
reloadCurrentMenu(res.message)
|
||||||
|
status.value = 100
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
watch(
|
watch(
|
||||||
() => activePathList.value,
|
() => activePathList.value,
|
||||||
@@ -598,26 +746,28 @@ const mqttMessage = ref<any>({})
|
|||||||
const status: any = ref()
|
const status: any = ref()
|
||||||
function parseStringToObject(str: string) {
|
function parseStringToObject(str: string) {
|
||||||
const content = str.replace(/^{|}$/g, '')
|
const content = str.replace(/^{|}$/g, '')
|
||||||
const pairs = content.split(',')
|
|
||||||
const result: any = {}
|
const result: any = {}
|
||||||
pairs.forEach(pair => {
|
|
||||||
const [key, value] = pair.split(':')
|
// 正则匹配:key:value 格式,支持 value 里带 : / 等字符
|
||||||
// 尝试将数字转换为Number类型
|
const regex = /([^,:]+):([^,]+)(?=,|$)/g
|
||||||
result[key.trim()] = isNaN(Number(value)) ? value.trim() : Number(value)
|
let match
|
||||||
})
|
|
||||||
|
while ((match = regex.exec(content)) !== null) {
|
||||||
|
const key = match[1].trim()
|
||||||
|
const value = match[2].trim()
|
||||||
|
// 数字自动转 Number
|
||||||
|
result[key] = isNaN(Number(value)) ? value : Number(value)
|
||||||
|
}
|
||||||
|
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
mqttRef.value.on('message', (topic: any, message: any) => {
|
mqttRef.value.on('message', (topic: any, message: any) => {
|
||||||
// console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
|
// console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
|
||||||
|
|
||||||
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
||||||
|
|
||||||
let regex = /fileName:(.*?),allStep/
|
|
||||||
let regex1 = /allStep:(.*?),nowStep/
|
|
||||||
let regex2 = /nowStep:(.*?),userId/
|
|
||||||
let regex3 = /userId:(.*?)}/
|
|
||||||
|
|
||||||
mqttMessage.value = parseStringToObject(str)
|
mqttMessage.value = parseStringToObject(str)
|
||||||
|
if (adminInfo.id != mqttMessage.value.userId) return
|
||||||
|
|
||||||
// console.log("🚀 ~ str.match(regex3)[1]:", str.match(regex3)[1])
|
// console.log("🚀 ~ str.match(regex3)[1]:", str.match(regex3)[1])
|
||||||
status.value = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100))
|
status.value = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100))
|
||||||
fileRef.value.setStatus(mqttMessage.value)
|
fileRef.value.setStatus(mqttMessage.value)
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
<div :class="downLoading ? 'all_disabled' : ''">
|
<div :class="downLoading ? 'all_disabled' : ''">
|
||||||
<el-dialog v-model.trim="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
|
<el-dialog v-model.trim="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
|
||||||
<div v-loading="loading">
|
<div v-loading="loading">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="download_progress"
|
class="download_progress"
|
||||||
v-if="mqttFileName.includes(fileNameInfoMation) && status != 0 && status != 100"
|
v-if="mqttFileName.includes(fileNameInfoMation) && status != 0 && status != 100"
|
||||||
@@ -57,7 +58,7 @@ import {
|
|||||||
getFileServiceFileOrDir,
|
getFileServiceFileOrDir,
|
||||||
downLoadDeviceFile,
|
downLoadDeviceFile,
|
||||||
downLoadDeviceFilePath
|
downLoadDeviceFilePath
|
||||||
} from '@/api/cs-device-boot/fileService.ts'
|
} from '@/api/cs-device-boot/fileService'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { useAdminInfo } from '@/stores/adminInfo'
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
|
import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
:loading="deviceRestartLoading"
|
:loading="deviceRestartLoading"
|
||||||
>
|
>
|
||||||
装置重启
|
设备重启
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
<el-descriptions-item label="名称">
|
<el-descriptions-item label="名称">
|
||||||
@@ -237,11 +237,11 @@ const openGroup = () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//装置重启
|
//设备重启
|
||||||
const deviceRestartLoading = ref<boolean>(false)
|
const deviceRestartLoading = ref<boolean>(false)
|
||||||
const handleRestartDevice = () => {
|
const handleRestartDevice = () => {
|
||||||
deviceRestartLoading.value = true
|
deviceRestartLoading.value = true
|
||||||
ElMessageBox.prompt('二次校验密码确认', '装置重启', {
|
ElMessageBox.prompt('二次校验密码确认', '设备重启', {
|
||||||
confirmButtonText: '确认',
|
confirmButtonText: '确认',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
customClass: 'customInput',
|
customClass: 'customInput',
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 新增设备列表 -->
|
<!-- 新增设备列表 -->
|
||||||
<div class="device-list-section table-wrapper">
|
<!-- <div class="device-list-section table-wrapper">
|
||||||
<vxe-table v-bind="defaultAttribute" :data="deviceTableData" height="auto" style="width: 100%">
|
<vxe-table v-bind="defaultAttribute" :data="deviceTableData" height="auto" style="width: 100%">
|
||||||
<vxe-column field="name" title="设备名称"></vxe-column>
|
<vxe-column field="name" title="设备名称"></vxe-column>
|
||||||
<vxe-column title="操作" width="200px">
|
<vxe-column title="操作" width="200px">
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -107,7 +107,7 @@
|
|||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
>
|
>
|
||||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||||
<vxe-column field="name" title="设备名称"></vxe-column>
|
<vxe-column field="name" title="便携式设备名称"></vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -298,7 +298,7 @@ const addData = () => {
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-bottom: 10px;
|
// margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
style="cursor: pointer" />
|
style="cursor: pointer" />
|
||||||
<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" v-model.trim="filterText" 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>
|
||||||
|
|||||||
@@ -6,12 +6,13 @@
|
|||||||
:default-checked-keys="defaultCheckedKeys"
|
:default-checked-keys="defaultCheckedKeys"
|
||||||
@checkChange="checkChange"
|
@checkChange="checkChange"
|
||||||
:height="35"
|
:height="35"
|
||||||
|
:engineering="true"
|
||||||
></DeviceTree>
|
></DeviceTree>
|
||||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
||||||
<vxe-column field="enginerName" title="工程名称"></vxe-column>
|
<vxe-column field="enginerName" title="工程名称"></vxe-column>
|
||||||
<vxe-column field="projectName" title="项目名称"></vxe-column>
|
<vxe-column field="projectName" title="项目名称"></vxe-column>
|
||||||
<vxe-column field="deviceName" title="装置名称"></vxe-column>
|
<vxe-column field="deviceName" title="设备名称"></vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,12 +7,12 @@
|
|||||||
@close="emit('closePopup')"
|
@close="emit('closePopup')"
|
||||||
>
|
>
|
||||||
<el-form class="form-two" :model="form" label-width="100px" ref="formRef" :rules="rules">
|
<el-form class="form-two" :model="form" label-width="100px" ref="formRef" :rules="rules">
|
||||||
<el-form-item label="装置类型:" prop="type">
|
<el-form-item label="设备类型:" prop="type">
|
||||||
<!-- <el-select v-model.trim="form.type" filterable placeholder="请选择" @change="typeChange">
|
<!-- <el-select v-model.trim="form.type" filterable placeholder="请选择" @change="typeChange">
|
||||||
<el-option v-for="item in TypeOptions" :key="item.id" :label="item.name"
|
<el-option v-for="item in TypeOptions" :key="item.id" :label="item.name"
|
||||||
:value="item.id"></el-option>
|
:value="item.id"></el-option>
|
||||||
</el-select> -->
|
</el-select> -->
|
||||||
<el-select v-model.trim="form.type" placeholder="请选择装置类型" @change="formDevTypeChange" clearable>
|
<el-select v-model.trim="form.type" placeholder="请选择设备类型" @change="formDevTypeChange" clearable>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in devTypeOptions"
|
v-for="item in devTypeOptions"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
></el-option>
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="装置型号:" prop="devType">
|
<el-form-item label="设备型号:" prop="devType">
|
||||||
<!-- <el-select v-model.trim="form.devType" placeholder="请选择" filterable @change="devTypeChange">
|
<!-- <el-select v-model.trim="form.devType" placeholder="请选择" filterable @change="devTypeChange">
|
||||||
<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>
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
<el-select
|
<el-select
|
||||||
v-model.trim="form.devType"
|
v-model.trim="form.devType"
|
||||||
filterable
|
filterable
|
||||||
placeholder="请选择装置型号"
|
placeholder="请选择设备型号"
|
||||||
clearable
|
clearable
|
||||||
@change="devTypeChange"
|
@change="devTypeChange"
|
||||||
>
|
>
|
||||||
@@ -59,13 +59,13 @@
|
|||||||
placeholder="填写特殊类型(不填默认通用类型)"
|
placeholder="填写特殊类型(不填默认通用类型)"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="版本协议:" prop="versionAgreement">
|
<el-form-item label="协议版本:" prop="versionAgreement">
|
||||||
<el-input
|
<el-input
|
||||||
maxlength="32"
|
maxlength="32"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
v-model.trim="form.versionAgreement"
|
v-model.trim="form.versionAgreement"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder="请输入版本协议"
|
placeholder="请输入协议版本"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="版本日期:" prop="versionDate">
|
<el-form-item label="版本日期:" prop="versionDate">
|
||||||
@@ -154,11 +154,11 @@ const form = reactive<any>({
|
|||||||
file: []
|
file: []
|
||||||
})
|
})
|
||||||
const rules = {
|
const rules = {
|
||||||
type: [{ required: true, message: '请选择装置类型', trigger: 'change' }],
|
type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||||
devType: [{ required: true, message: '请选择装置型号', trigger: 'change' }],
|
devType: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
|
||||||
versionNo: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
|
versionNo: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
|
||||||
versionType: [{ required: true, message: '请输入版本类型', trigger: 'blur' }],
|
versionType: [{ required: true, message: '请输入版本类型', trigger: 'blur' }],
|
||||||
versionAgreement: [{ required: true, message: '请输入版本协议', trigger: 'blur' }],
|
versionAgreement: [{ required: true, message: '请输入协议版本', trigger: 'blur' }],
|
||||||
versionDate: [{ required: true, message: '请输入版本日期', trigger: 'blur' }],
|
versionDate: [{ required: true, message: '请输入版本日期', trigger: 'blur' }],
|
||||||
description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
|
description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
|
||||||
crcInfo: [{ required: true, message: '请输入CRC校验', trigger: 'blur' }],
|
crcInfo: [{ required: true, message: '请输入CRC校验', trigger: 'blur' }],
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
placeholder="请输入名称"
|
placeholder="请输入名称"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<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
|
<el-option
|
||||||
v-for="item in DevTypeOptions"
|
v-for="item in DevTypeOptions"
|
||||||
@@ -71,7 +71,7 @@ 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: 'devTypeName' },
|
{ title: '设备型号', field: 'devTypeName' },
|
||||||
{ title: '模板名称', field: 'name' },
|
{ title: '模板名称', field: 'name' },
|
||||||
{ title: '版本号', field: 'versionNo' },
|
{ title: '版本号', field: 'versionNo' },
|
||||||
{ title: '版本时间', field: 'versionDate', sortable: true },
|
{ title: '版本时间', field: 'versionDate', sortable: true },
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
<div class="default-main">
|
<div class="default-main">
|
||||||
<TableHeader ref="tableHeaderRef" :showReset="false" showExport>
|
<TableHeader ref="tableHeaderRef" :showReset="false" showExport>
|
||||||
<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" filterable placeholder="请选择设备型号" clearable>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in DevTypeOptions"
|
v-for="item in DevTypeOptions"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
@@ -55,9 +55,9 @@ 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: 'devTypeName' ,minWidth: '100'},
|
{ title: '设备型号', field: 'devTypeName' ,minWidth: '100'},
|
||||||
{ title: '版本号', field: 'versionNo' ,minWidth: '100'},
|
{ title: '版本号', field: 'versionNo' ,minWidth: '100'},
|
||||||
{ title: '版本协议', field: 'versionAgreement' ,minWidth: '100'},
|
{ title: '协议版本', field: 'versionAgreement' ,minWidth: '100'},
|
||||||
{ title: '版本日期', field: 'versionDate' ,minWidth: '100'},
|
{ title: '版本日期', field: 'versionDate' ,minWidth: '100'},
|
||||||
{ title: '归档日期', field: 'updateTime',minWidth: '150' },
|
{ title: '归档日期', field: 'updateTime',minWidth: '150' },
|
||||||
{ title: '描述', field: 'description',minWidth: '200' },
|
{ title: '描述', field: 'description',minWidth: '200' },
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog draggable class="cn-operate-dialog" width="520px" v-model.trim="dialogVisible" :title="title">
|
<el-dialog draggable class="cn-operate-dialog" width="540px" v-model.trim="dialogVisible" :title="title">
|
||||||
<el-form :inline="false" ref="formRef" :model="form" label-width="auto" class="form-one" :rules="rules">
|
<el-form :inline="false" ref="formRef" :model="form" label-width="auto" class="form-one" :rules="rules">
|
||||||
<el-form-item label="项目名称" prop="name">
|
<el-form-item label="项目名称" prop="name">
|
||||||
<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="请输入项目名称" />
|
||||||
@@ -23,14 +23,9 @@
|
|||||||
<el-form-item label="排序" prop="sort">
|
<el-form-item label="排序" prop="sort">
|
||||||
<el-input maxlength="32" show-word-limit-number v-model.number="form.sort" :min="0" />
|
<el-input maxlength="32" show-word-limit-number v-model.number="form.sort" :min="0" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="拓扑图" prop="sort">
|
<el-form-item label="拓扑图">
|
||||||
<div class="image-radio-group">
|
<div class="image-radio-group">
|
||||||
<div
|
<div class="image-radio-item" v-for="item in images" :key="item.id" @click="handleSelect(item.id)">
|
||||||
class="image-radio-item"
|
|
||||||
v-for="item in images"
|
|
||||||
:key="item.id"
|
|
||||||
@click="handleSelect(item.id)"
|
|
||||||
>
|
|
||||||
<el-radio :label="item.id" v-model="form.topoIds" class="hidden-radio">
|
<el-radio :label="item.id" v-model="form.topoIds" class="hidden-radio">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</el-radio>
|
</el-radio>
|
||||||
@@ -64,7 +59,7 @@ import TableStore from '@/utils/tableStore'
|
|||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { add, update } from '@/api/user-boot/role'
|
import { add, update } from '@/api/user-boot/role'
|
||||||
import { useAdminInfo } from '@/stores/adminInfo'
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
import { addProject, updateProject } from '@/api/cs-device-boot/edData'
|
import { addProject, updateProjects } from '@/api/cs-device-boot/edData'
|
||||||
import { getTopoTemplate } from '@/api/cs-device-boot/topologyTemplate'
|
import { getTopoTemplate } from '@/api/cs-device-boot/topologyTemplate'
|
||||||
import { getFileUrl } from '@/api/system-boot/file'
|
import { getFileUrl } from '@/api/system-boot/file'
|
||||||
const adminInfo = useAdminInfo()
|
const adminInfo = useAdminInfo()
|
||||||
@@ -123,14 +118,15 @@ const open = (text: string, List: any, data?: anyObj, id?: string) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
|
if (form.topoIds == '') {
|
||||||
|
return ElMessage.warning('请选择拓扑图!')
|
||||||
|
}
|
||||||
formRef.value.validate(async valid => {
|
formRef.value.validate(async valid => {
|
||||||
console.log("🚀 ~ submit ~ form.topoIds:", form.topoIds)
|
|
||||||
|
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (form.id) {
|
if (form.id) {
|
||||||
await updateProject({ ...form ,topoIds:[form.topoIds]})
|
await updateProjects({ ...form, topoIds: [form.topoIds] })
|
||||||
} else {
|
} else {
|
||||||
await addProject({ ...form,topoIds:[form.topoIds] })
|
await addProject({ ...form, topoIds: [form.topoIds] })
|
||||||
}
|
}
|
||||||
ElMessage.success('保存成功')
|
ElMessage.success('保存成功')
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
@@ -150,7 +146,11 @@ const getImageList = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleSelect = (filePath: any) => {
|
const handleSelect = (filePath: any) => {
|
||||||
form.topoIds = filePath
|
if (form.topoIds == filePath) {
|
||||||
|
form.topoIds = ''
|
||||||
|
} else {
|
||||||
|
form.topoIds = filePath
|
||||||
|
}
|
||||||
}
|
}
|
||||||
defineExpose({ open })
|
defineExpose({ open })
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,14 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main">
|
<div class="default-main">
|
||||||
<div style="display: flex">
|
<el-row v-loading="tableStore.table.loading">
|
||||||
<div style="width: 800px">
|
<el-col :span="11">
|
||||||
<div class="custom-table-header">
|
<div class="custom-table-header">
|
||||||
<div class="title">工程列表</div>
|
<div class="title">
|
||||||
|
工程列表
|
||||||
|
<el-input
|
||||||
|
class="ml10"
|
||||||
|
v-model="searchValue"
|
||||||
|
placeholder="请输入工程名称"
|
||||||
|
clearable
|
||||||
|
style="width: 240px"
|
||||||
|
@input="inpChaange"
|
||||||
|
/>
|
||||||
|
</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" @currentChange="currentChange" />
|
||||||
</div>
|
</el-col>
|
||||||
<div style="flex: 1">
|
<el-col :span="13">
|
||||||
<div class="custom-table-header">
|
<div class="custom-table-header">
|
||||||
<div class="title">項目列表</div>
|
<div class="title">項目列表</div>
|
||||||
|
|
||||||
@@ -25,17 +35,19 @@
|
|||||||
<vxe-column field="projectName" title="项目名称"></vxe-column>
|
<vxe-column field="projectName" title="项目名称"></vxe-column>
|
||||||
<vxe-column field="projectArea" title="地址"></vxe-column>
|
<vxe-column field="projectArea" title="地址"></vxe-column>
|
||||||
|
|
||||||
<vxe-column title="拓扑图">
|
<vxe-column field="projectRemark" title="备注"></vxe-column>
|
||||||
|
<vxe-column title="拓扑图" width="100px">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-image
|
<el-image
|
||||||
:hide-on-click-modal="true"
|
:hide-on-click-modal="true"
|
||||||
:preview-teleported="true"
|
:preview-teleported="true"
|
||||||
|
v-if="row.topologyInfo"
|
||||||
:preview-src-list="[row.topologyImageUrl]"
|
:preview-src-list="[row.topologyImageUrl]"
|
||||||
:src="getUrl(row) ? row.topologyImageUrl : ''"
|
:src="row.topologyImageUrl"
|
||||||
></el-image>
|
></el-image>
|
||||||
|
<span v-else>/</span>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="projectRemark" title="备注"></vxe-column>
|
|
||||||
<vxe-column field="projectSort" title="排序" width="80px"></vxe-column>
|
<vxe-column field="projectSort" title="排序" width="80px"></vxe-column>
|
||||||
<vxe-column title="操作" width="180px">
|
<vxe-column title="操作" width="180px">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
@@ -64,8 +76,8 @@
|
|||||||
</vxe-column>
|
</vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
</div>
|
</el-row>
|
||||||
<!-- 新增工程 -->
|
<!-- 新增工程 -->
|
||||||
<popup ref="popupRef" @save="save" />
|
<popup ref="popupRef" @save="save" />
|
||||||
<!-- 新增項目 -->
|
<!-- 新增項目 -->
|
||||||
@@ -78,7 +90,7 @@ import { Plus } from '@element-plus/icons-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 { delTemplate, deleteSysExcel, bandRelation, queryList } from '@/api/harmonic-boot/luckyexcel'
|
import { delTemplate, deleteSysExcel, bandRelation, queryList } from '@/api/harmonic-boot/luckyexcel'
|
||||||
import { deleteProject ,deleteEngineering} from '@/api/cs-device-boot/edData'
|
import { deleteProject, deleteEngineering } from '@/api/cs-device-boot/edData'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
@@ -92,13 +104,16 @@ defineOptions({
|
|||||||
const height = mainHeight(80)
|
const height = mainHeight(80)
|
||||||
const volConTypeList: any = dictData.getBasicData('Dev_Connect')
|
const volConTypeList: any = dictData.getBasicData('Dev_Connect')
|
||||||
import { getFileUrl } from '@/api/system-boot/file'
|
import { getFileUrl } from '@/api/system-boot/file'
|
||||||
|
|
||||||
const popupRef = ref()
|
const popupRef = ref()
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
const tableRef1 = ref()
|
const tableRef1 = ref()
|
||||||
const itemList = ref([])
|
const searchValue = ref('')
|
||||||
|
const itemList: any = ref([])
|
||||||
const menuListId = ref([])
|
const menuListId = ref([])
|
||||||
const itemAddRef = ref()
|
const itemAddRef = ref()
|
||||||
const engineeringId = ref('')
|
const engineeringId = ref('')
|
||||||
|
const tableList = ref([])
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/cs-device-boot/engineeringProjectRelation/list',
|
url: '/cs-device-boot/engineeringProjectRelation/list',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -161,17 +176,35 @@ const tableStore: any = new TableStore({
|
|||||||
],
|
],
|
||||||
|
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
if (engineeringId.value == '') {
|
tableList.value = JSON.parse(JSON.stringify(tableStore.table.data))
|
||||||
engineeringId.value = tableStore.table.data[0].engineeringId
|
setTableRow()
|
||||||
}
|
|
||||||
let list = tableStore.table.data.filter((item: any) => item.engineeringId == engineeringId.value)
|
|
||||||
tableRef.value.getRef().setCurrentRow(list[0])
|
|
||||||
itemList.value = list[0].projectInfoList
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
// 过滤
|
||||||
|
const inpChaange = (val: any) => {
|
||||||
|
engineeringId.value = ''
|
||||||
|
if (val == '') {
|
||||||
|
tableStore.table.data = tableList.value
|
||||||
|
} else {
|
||||||
|
tableStore.table.data = tableList.value.filter((item: any) => item.engineeringName.includes(val))
|
||||||
|
}
|
||||||
|
setTableRow()
|
||||||
|
}
|
||||||
|
const setTableRow = () => {
|
||||||
|
if (engineeringId.value == '') {
|
||||||
|
engineeringId.value = tableStore.table.data[0].engineeringId
|
||||||
|
}
|
||||||
|
let list = tableStore.table.data.filter((item: any) => item.engineeringId == engineeringId.value)
|
||||||
|
tableRef.value.getRef().setCurrentRow(list[0] ?? {})
|
||||||
|
itemList.value = list?.[0]?.projectInfoList ?? []
|
||||||
|
if (itemList.value.length > 0) {
|
||||||
|
itemList.value.forEach((item: any) => {
|
||||||
|
item.topologyImageUrl = getUrl(item)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
// 修改模版
|
// 修改模版
|
||||||
const itemModification = (row: any) => {
|
const itemModification = (row: any) => {
|
||||||
itemAddRef.value.open('新增项目', tableStore.table.data, row, engineeringId.value)
|
itemAddRef.value.open('新增项目', tableStore.table.data, row, engineeringId.value)
|
||||||
@@ -195,6 +228,11 @@ const add = () => {
|
|||||||
const currentChange = (data: any) => {
|
const currentChange = (data: any) => {
|
||||||
engineeringId.value = data.row.engineeringId
|
engineeringId.value = data.row.engineeringId
|
||||||
itemList.value = data.row.projectInfoList
|
itemList.value = data.row.projectInfoList
|
||||||
|
if (itemList.value.length > 0) {
|
||||||
|
itemList.value.forEach((item: any) => {
|
||||||
|
item.topologyImageUrl = getUrl(item)
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// 保存模版
|
// 保存模版
|
||||||
const save = () => {
|
const save = () => {
|
||||||
@@ -210,14 +248,11 @@ const save = () => {
|
|||||||
const imgList = ref([])
|
const imgList = ref([])
|
||||||
// 获取拓扑图
|
// 获取拓扑图
|
||||||
const getUrl = async (row: any) => {
|
const getUrl = async (row: any) => {
|
||||||
if (!row.topologyInfo || row.topologyInfo === '/') return false
|
if (!row.topologyInfo || row.topologyInfo === '/') return ''
|
||||||
try {
|
|
||||||
const res = await getFileUrl({ filePath: row.topologyInfo })
|
const res = await getFileUrl({ filePath: row.topologyInfo })
|
||||||
row.topologyImageUrl = res.data
|
row.topologyImageUrl = res.data
|
||||||
return true
|
return res.data
|
||||||
} catch (error) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@@ -151,7 +151,7 @@
|
|||||||
<el-form-item label="设备型号:" prop="devModel" class="top">
|
<el-form-item label="设备型号:" prop="devModel" class="top">
|
||||||
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
|
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in formDevModelOptionsFilter "
|
v-for="item in formDevModelOptionsFilter"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value"
|
:value="item.value"
|
||||||
@@ -164,6 +164,15 @@
|
|||||||
<el-option label="CLD" value="CLD"></el-option>
|
<el-option label="CLD" value="CLD"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="关联项目:" class="top">
|
||||||
|
<el-cascader
|
||||||
|
v-model.trim="form.association"
|
||||||
|
filterable
|
||||||
|
:options="engineeringList"
|
||||||
|
:props="props"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item label="排序:" class="top" prop="sort">
|
<el-form-item label="排序:" class="top" prop="sort">
|
||||||
<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>
|
||||||
@@ -198,7 +207,7 @@ import TableHeader from '@/components/table/header/index.vue'
|
|||||||
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
|
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
|
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
|
||||||
import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
|
import { downLoadFile } from '@/api/cs-system-boot/manage'
|
||||||
import {
|
import {
|
||||||
addEquipmentDelivery,
|
addEquipmentDelivery,
|
||||||
deleteEquipmentDelivery,
|
deleteEquipmentDelivery,
|
||||||
@@ -208,7 +217,8 @@ import {
|
|||||||
governDeviceRegister,
|
governDeviceRegister,
|
||||||
portableDeviceRegister,
|
portableDeviceRegister,
|
||||||
portableDeviceAccess,
|
portableDeviceAccess,
|
||||||
getExcelTemplate
|
getExcelTemplate,
|
||||||
|
engineeringProject
|
||||||
} from '@/api/cs-system-boot/device'
|
} from '@/api/cs-system-boot/device'
|
||||||
import html2canvas from 'html2canvas'
|
import html2canvas from 'html2canvas'
|
||||||
import { fullUrl } from '@/utils/common'
|
import { fullUrl } from '@/utils/common'
|
||||||
@@ -221,17 +231,27 @@ const showQrCode = ref(false)
|
|||||||
const devTypeOptions: any = ref([])
|
const devTypeOptions: any = ref([])
|
||||||
const devTypeOptions2: any = ref([])
|
const devTypeOptions2: any = ref([])
|
||||||
const devModelOptions2: any = ref([])
|
const devModelOptions2: any = ref([])
|
||||||
|
const engineeringList: any = ref([])
|
||||||
|
|
||||||
const deivce: any = ref({})
|
const deivce: any = ref({})
|
||||||
const ruleFormRef = ref()
|
const ruleFormRef = ref()
|
||||||
const form = reactive({
|
const form: any = reactive({
|
||||||
cntractNo: '',
|
cntractNo: '',
|
||||||
devAccessMethod: 'MQTT',
|
devAccessMethod: 'MQTT',
|
||||||
devModel: '',
|
devModel: '',
|
||||||
devType: '',
|
devType: '',
|
||||||
name: '',
|
name: '',
|
||||||
ndid: '',
|
ndid: '',
|
||||||
|
associatedEngineering: '',
|
||||||
|
associatedProject: '',
|
||||||
|
association: [],
|
||||||
sort: 0
|
sort: 0
|
||||||
})
|
})
|
||||||
|
const props = {
|
||||||
|
label: 'projectName',
|
||||||
|
value: 'projectId',
|
||||||
|
children: 'projectInfoList'
|
||||||
|
}
|
||||||
const rules = reactive({
|
const rules = reactive({
|
||||||
name: [{ required: true, message: '请输入设备名', trigger: 'blur' }],
|
name: [{ required: true, message: '请输入设备名', trigger: 'blur' }],
|
||||||
ndid: [{ required: true, message: '请输入网络设备id', trigger: 'blur' }],
|
ndid: [{ required: true, message: '请输入网络设备id', trigger: 'blur' }],
|
||||||
@@ -248,19 +268,21 @@ const dialogTitle = ref('新增设备')
|
|||||||
const loading = ref<boolean>(false)
|
const loading = ref<boolean>(false)
|
||||||
const devModelOptions: any = ref([])
|
const devModelOptions: any = ref([])
|
||||||
const queryTheDictionary = () => {
|
const queryTheDictionary = () => {
|
||||||
queryByCode('DEV_CLD').then(res => {
|
queryByCode('DEV_CLD')
|
||||||
|
.then(res => {
|
||||||
devTypeOptions2.value = res.data
|
devTypeOptions2.value = res.data
|
||||||
return queryCsDictTree(res.data.id).then(res => {
|
return queryCsDictTree(res.data.id).then(res => {
|
||||||
devModelOptions2.value = res.data.map((item: any) => {
|
devModelOptions2.value = res.data.map((item: any) => {
|
||||||
return {
|
return {
|
||||||
value: item.id,
|
value: item.id,
|
||||||
label: item.name,
|
label: item.name,
|
||||||
...item
|
...item
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}).then(() => {
|
})
|
||||||
queryByCode('Device_Type').then(async res => {
|
.then(() => {
|
||||||
|
queryByCode('Device_Type').then(async res => {
|
||||||
const id = res.data.id
|
const id = res.data.id
|
||||||
await queryCsDictTree(id).then(res => {
|
await queryCsDictTree(id).then(res => {
|
||||||
devTypeOptions.value = res.data.map((item: any) => {
|
devTypeOptions.value = res.data.map((item: any) => {
|
||||||
@@ -292,10 +314,10 @@ const queryTheDictionary = () => {
|
|||||||
})
|
})
|
||||||
await tableStore.index()
|
await tableStore.index()
|
||||||
})
|
})
|
||||||
}).catch(error => {
|
})
|
||||||
|
.catch(error => {
|
||||||
console.error('查询过程中出现错误:', error)
|
console.error('查询过程中出现错误:', error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const devModelOptionsFilter = computed(() => {
|
const devModelOptionsFilter = computed(() => {
|
||||||
return devModelOptions.value.filter((item: any) => {
|
return devModelOptions.value.filter((item: any) => {
|
||||||
@@ -308,7 +330,7 @@ const devModelOptionsFilter = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const formDevModelOptionsFilter = computed(() => {
|
const formDevModelOptionsFilter = computed(() => {
|
||||||
if(form.devAccessMethod === 'CLD'){
|
if (form.devAccessMethod === 'CLD') {
|
||||||
return devModelOptions2.value.filter((item: any) => {
|
return devModelOptions2.value.filter((item: any) => {
|
||||||
if (form.devType) {
|
if (form.devType) {
|
||||||
return item.pid == form.devType
|
return item.pid == form.devType
|
||||||
@@ -316,18 +338,17 @@ const formDevModelOptionsFilter = computed(() => {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}else{
|
} else {
|
||||||
return devModelOptions.value.filter((item: any) => {
|
return devModelOptions.value.filter((item: any) => {
|
||||||
if (form.devType) {
|
if (form.devType) {
|
||||||
return item.pid == form.devType
|
return item.pid == form.devType
|
||||||
} else {
|
} else {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
const formDevTypeOptions = computed(() => {
|
const formDevTypeOptions = computed(() => {
|
||||||
// 如果协议是CLD,使用devTypeOptions2,否则使用devTypeOptions
|
// 如果协议是CLD,使用devTypeOptions2,否则使用devTypeOptions
|
||||||
if (form.devAccessMethod === 'CLD') {
|
if (form.devAccessMethod === 'CLD') {
|
||||||
@@ -367,8 +388,8 @@ const tableStore = new TableStore({
|
|||||||
}
|
}
|
||||||
// 如果是MQTT协议,使用devTypeOptions查找
|
// 如果是MQTT协议,使用devTypeOptions查找
|
||||||
else if (row.row.devAccessMethod === 'MQTT') {
|
else if (row.row.devAccessMethod === 'MQTT') {
|
||||||
const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue);
|
const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue)
|
||||||
return item ? item.label : '/';
|
return item ? item.label : '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
minWidth: 120
|
minWidth: 120
|
||||||
@@ -378,8 +399,8 @@ const tableStore = new TableStore({
|
|||||||
field: 'devModel',
|
field: 'devModel',
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
const options = row.row.devAccessMethod === 'MQTT' ? devModelOptions.value : devModelOptions2.value
|
const options = row.row.devAccessMethod === 'MQTT' ? devModelOptions.value : devModelOptions2.value
|
||||||
const item = options.find((item: any) => item.value == row.cellValue);
|
const item = options.find((item: any) => item.value == row.cellValue)
|
||||||
return item ? item.label : '/';
|
return item ? item.label : '/'
|
||||||
},
|
},
|
||||||
minWidth: 120
|
minWidth: 120
|
||||||
},
|
},
|
||||||
@@ -488,12 +509,13 @@ const tableStore = new TableStore({
|
|||||||
minWidth: 80
|
minWidth: 80
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作', fixed: 'right',
|
title: '操作',
|
||||||
|
fixed: 'right',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 220,
|
width: 220,
|
||||||
render: 'buttons',
|
render: 'buttons',
|
||||||
buttons: [
|
buttons: [
|
||||||
//直连装置注册
|
//直连设备注册
|
||||||
// {
|
// {
|
||||||
// title: '注册',
|
// title: '注册',
|
||||||
// type: 'primary',
|
// type: 'primary',
|
||||||
@@ -677,7 +699,6 @@ const tableStore = new TableStore({
|
|||||||
useCORS: true
|
useCORS: true
|
||||||
}).then(canvas => {
|
}).then(canvas => {
|
||||||
let url = canvas.toDataURL('image/png')
|
let url = canvas.toDataURL('image/png')
|
||||||
console.log('🚀 ~ html2canvas ~ url:', url)
|
|
||||||
// 下载图片
|
// 下载图片
|
||||||
let a = document.createElement('a')
|
let a = document.createElement('a')
|
||||||
let event = new MouseEvent('click')
|
let event = new MouseEvent('click')
|
||||||
@@ -701,6 +722,10 @@ const tableStore = new TableStore({
|
|||||||
for (let key in form) {
|
for (let key in form) {
|
||||||
form[key] = row[key]
|
form[key] = row[key]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form.association = row.associatedProject
|
||||||
|
? [row.associatedEngineering, row.associatedProject]
|
||||||
|
: []
|
||||||
form.id = row.id
|
form.id = row.id
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -741,7 +766,6 @@ const tableStore = new TableStore({
|
|||||||
: ''
|
: ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.log('🚀 ~ loadCallback ~ tableStore.table:', tableStore.table)
|
|
||||||
tableKey.value += 1
|
tableKey.value += 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -877,6 +901,9 @@ const add = () => {
|
|||||||
const onSubmit = () => {
|
const onSubmit = () => {
|
||||||
ruleFormRef.value.validate((valid: any) => {
|
ruleFormRef.value.validate((valid: any) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
form.associatedEngineering = form.association ? form.association[0] : ''
|
||||||
|
form.associatedProject = form.association ? form.association[1] : ''
|
||||||
|
|
||||||
if (dialogTitle.value == '新增设备') {
|
if (dialogTitle.value == '新增设备') {
|
||||||
addEquipmentDelivery(form).then(res => {
|
addEquipmentDelivery(form).then(res => {
|
||||||
ElMessage.success('新增成功')
|
ElMessage.success('新增成功')
|
||||||
@@ -923,6 +950,9 @@ const resetForm = () => {
|
|||||||
devModel: '',
|
devModel: '',
|
||||||
devType: '',
|
devType: '',
|
||||||
name: '',
|
name: '',
|
||||||
|
associatedEngineering: '',
|
||||||
|
associatedProject: '',
|
||||||
|
association: [],
|
||||||
ndid: ''
|
ndid: ''
|
||||||
}
|
}
|
||||||
Object.assign(form, user)
|
Object.assign(form, user)
|
||||||
@@ -939,6 +969,15 @@ provide('tableStore', tableStore)
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
queryTheDictionary()
|
queryTheDictionary()
|
||||||
|
engineeringProject().then(res => {
|
||||||
|
engineeringList.value = res.data.filter(item => {
|
||||||
|
item.projectName = item.engineeringName
|
||||||
|
item.projectId = item.engineeringId
|
||||||
|
item.disabled = item.projectInfoList ? false : true
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
setTimeout(() => {}, 100)
|
setTimeout(() => {}, 100)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
157
src/views/govern/manage/programVersion/comp/form.vue
Normal file
157
src/views/govern/manage/programVersion/comp/form.vue
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog class="cn-operate-dialog" width="600px" v-model.trim="dialogVisible" :title="title">
|
||||||
|
<el-form :model="form" class="form-one" label-width="auto" ref="formRef" :rules="rules">
|
||||||
|
<el-form-item label="版本号" prop="substationName">
|
||||||
|
<el-input v-model.trim="form.substationName" placeholder="请输入版本号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="协议版本" prop="name">
|
||||||
|
<el-input v-model.trim="form.name" placeholder="请输入协议版本"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="版本日期" prop="name">
|
||||||
|
<el-input v-model.trim="form.name" placeholder="请输入版本日期"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备系列" prop="loadType">
|
||||||
|
<el-select v-model.trim="form.loadType" filterable clearable placeholder="请选择设备系列">
|
||||||
|
<el-option
|
||||||
|
v-for="item in DataTypeSelect"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="版本类型" prop="name">
|
||||||
|
<el-input v-model.trim="form.name" placeholder="请输入版本类型"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述" prop="name">
|
||||||
|
<el-input
|
||||||
|
maxlength="32"
|
||||||
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||||
|
type="textarea"
|
||||||
|
show-word-limit
|
||||||
|
v-model.trim="form.remark"
|
||||||
|
placeholder="请输入描述"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="上传升级文件" prop="name">
|
||||||
|
<el-upload
|
||||||
|
:limit="1"
|
||||||
|
accept=".bin"
|
||||||
|
:auto-upload="false"
|
||||||
|
:on-change="fileChange"
|
||||||
|
:on-exceed="fileExceed"
|
||||||
|
:on-remove="fileRemove"
|
||||||
|
:file-list="fileList"
|
||||||
|
>
|
||||||
|
<el-button type="primary">点击上传</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="CRC校验" prop="name">
|
||||||
|
<el-input v-model.trim="form.name" placeholder="请输入版本日期"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submit">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, inject } from 'vue'
|
||||||
|
import { reactive } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||||
|
import { saveUser, updateUser } from '@/api/cs-device-boot/sensitiveLoadMange'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
|
||||||
|
const TypeOptions = ref()
|
||||||
|
|
||||||
|
const dictData = useDictData()
|
||||||
|
const DataTypeSelect = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
|
const tableStore = inject('tableStore') as TableStore
|
||||||
|
const fileList: any = ref([])
|
||||||
|
const formRef = ref()
|
||||||
|
const form = reactive<any>({
|
||||||
|
loadType: [],
|
||||||
|
substationName: null,
|
||||||
|
installedCapacity: null,
|
||||||
|
name: null,
|
||||||
|
userAgreementCapacity: null,
|
||||||
|
id: null,
|
||||||
|
sort: 100
|
||||||
|
})
|
||||||
|
const rules = {
|
||||||
|
substationName: [{ required: true, message: '请输入所属厂站名称', trigger: 'blur' }],
|
||||||
|
name: [{ required: true, message: '请输入敏感用户名称', trigger: 'blur' }],
|
||||||
|
loadType: [{ required: true, message: '请输入请选择敏感负荷类型', trigger: 'blur' }],
|
||||||
|
installedCapacity: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
|
||||||
|
userAgreementCapacity: [{ required: true, message: '请输入装机容量', trigger: 'blur' }],
|
||||||
|
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const title = ref('新增')
|
||||||
|
const open = (text: string, data?: anyObj) => {
|
||||||
|
formRef.value?.resetFields()
|
||||||
|
title.value = text
|
||||||
|
dialogVisible.value = true
|
||||||
|
if (data) {
|
||||||
|
for (let key in form) {
|
||||||
|
form[key] = data[key]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (let key in form) {
|
||||||
|
form[key] = null
|
||||||
|
form.sort = 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const fileRemove = (e: any) => {
|
||||||
|
form.file = null
|
||||||
|
fileList.value = []
|
||||||
|
}
|
||||||
|
const fileChange = (e: any) => {
|
||||||
|
if (!beforeUpload(e.raw)) return
|
||||||
|
form.file = e.raw
|
||||||
|
fileList.value = [e.raw]
|
||||||
|
}
|
||||||
|
const fileExceed = (e: any) => {
|
||||||
|
ElMessage.error('只能上传一个文件')
|
||||||
|
}
|
||||||
|
// 处理上传前检查
|
||||||
|
const beforeUpload = (file: any) => {
|
||||||
|
const isWord = file.name.endsWith('.bin')
|
||||||
|
|
||||||
|
if (!isWord) {
|
||||||
|
ElMessage.error('请上传(.bin)格式文件!')
|
||||||
|
fileList.value = []
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 校验通过后允许上传,交由 http-request 处理
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
formRef.value.validate(async (valid: boolean) => {
|
||||||
|
if (valid) {
|
||||||
|
if (form.id) {
|
||||||
|
await updateUser(form)
|
||||||
|
} else {
|
||||||
|
await saveUser(form)
|
||||||
|
}
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
tableStore.index()
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main">
|
||||||
|
<TableHeader ref="tableHeaderRef" :showReset="false" showExport>
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="关键字筛选">
|
||||||
|
<el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输入关键字" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="设备系列">
|
||||||
|
<el-select
|
||||||
|
v-model.trim="tableStore.table.params.devType"
|
||||||
|
filterable
|
||||||
|
placeholder="请选择设备系列"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in DevTypeOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
<template #operation>
|
||||||
|
<el-button :icon="Plus" type="primary" @click="add">新增</el-button>
|
||||||
|
<el-button :icon="Back" @click="go(-1)">返回</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef" />
|
||||||
|
<!-- 新增 -->
|
||||||
|
<Form ref="formRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import { Plus, EditPen } from '@element-plus/icons-vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { Back, Setting, Search } from '@element-plus/icons-vue'
|
||||||
|
import Form from './form.vue'
|
||||||
|
defineOptions({
|
||||||
|
name: 'govern/manage/programVersion'
|
||||||
|
})
|
||||||
|
const dictData = useDictData()
|
||||||
|
const DevTypeOptions = ref()
|
||||||
|
const tableHeaderRef = ref()
|
||||||
|
const { push, go } = useRouter()
|
||||||
|
const formRef = ref()
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/cs-device-boot/edData/queryEdDataPage',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
field: 'index',
|
||||||
|
title: '序号',
|
||||||
|
width: '80',
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: '设备系列', field: 'devTypeName', minWidth: '100' },
|
||||||
|
{ title: '版本号', field: 'versionNo', minWidth: '100' },
|
||||||
|
{ title: '协议版本', field: 'versionAgreement', minWidth: '100' },
|
||||||
|
{ title: '版本日期', field: 'versionDate', minWidth: '100' },
|
||||||
|
{ title: '修改人员', field: 'versionDate', minWidth: '100' },
|
||||||
|
{ title: '修改日期', field: 'versionDate', minWidth: '100' },
|
||||||
|
|
||||||
|
{ title: '描述', field: 'versionDate', minWidth: '100' },
|
||||||
|
{ title: '版本类型', field: 'versionDate', minWidth: '100' },
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
render: 'switch',
|
||||||
|
width: 100,
|
||||||
|
field: 'usageStatus',
|
||||||
|
activeText: '启用',
|
||||||
|
inactiveText: '停用',
|
||||||
|
inactiveValue: '0',
|
||||||
|
activeValue: '1',
|
||||||
|
onChangeField: (row: any, value: any) => {
|
||||||
|
// console.log("🚀 ~ row:", row)
|
||||||
|
// ElMessageBox.prompt('二次校验密码确认', '', {
|
||||||
|
// confirmButtonText: '确认',
|
||||||
|
// cancelButtonText: '取消',
|
||||||
|
// customClass: 'customInput',
|
||||||
|
// inputType: 'text',
|
||||||
|
// beforeClose: (action, instance, done) => {
|
||||||
|
// if (action === 'confirm') {
|
||||||
|
// if (instance.inputValue == null) {
|
||||||
|
// return ElMessage.warning('请输入密码')
|
||||||
|
// } else if (instance.inputValue?.length > 32) {
|
||||||
|
// return ElMessage.warning(
|
||||||
|
// '密码长度不能超过32位,当前密码长度为' + instance.inputValue.length
|
||||||
|
// )
|
||||||
|
// } else {
|
||||||
|
// done()
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// done()
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }).then(({ value }) => {
|
||||||
|
// passwordConfirm(value).then(res => {
|
||||||
|
// editEquipmentDelivery({
|
||||||
|
// ...row,
|
||||||
|
// status: row.status == 5 ? 1 : row.status == 6 ? 2 : row.status,
|
||||||
|
// usageStatus: row.usageStatus == 1 ? 0 : 1
|
||||||
|
// }).then(res => {
|
||||||
|
// ElMessage.success(row.usageStatus == 1 ? '设备停用成功!' : '设备启用成功!')
|
||||||
|
// tableStore.index()
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
fixed: 'right',
|
||||||
|
align: 'center',
|
||||||
|
width: '120',
|
||||||
|
render: 'buttons',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
name: 'productSetting',
|
||||||
|
title: '修改',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'el-icon-EditPen',
|
||||||
|
render: 'basicButton'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'productSetting',
|
||||||
|
title: '删除',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'el-icon-EditPen',
|
||||||
|
render: 'basicButton'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
loadCallback: () => {}
|
||||||
|
})
|
||||||
|
queryByCode('Device_Type').then(res => {
|
||||||
|
const id = res.data.id
|
||||||
|
queryByid(id).then(res1 => {
|
||||||
|
res1.data.map((item: any, index: any) => {
|
||||||
|
if (item.pid == id) {
|
||||||
|
res1.data.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
DevTypeOptions.value = res1.data
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.devType = ''
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
const add = () => {
|
||||||
|
formRef.value.open('新增版本')
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
tableHeaderRef.value.onComSearch()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
183
src/views/govern/manage/programVersion/index.vue
Normal file
183
src/views/govern/manage/programVersion/index.vue
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main">
|
||||||
|
<TableHeader ref="tableHeaderRef" :showReset="false" showExport>
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="关键字筛选">
|
||||||
|
<el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输入关键字" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="通讯状态">
|
||||||
|
<el-select
|
||||||
|
v-model.trim="tableStore.table.params.devType"
|
||||||
|
filterable
|
||||||
|
placeholder="请选择通讯状态"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in DevTypeOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备型号">
|
||||||
|
<el-select
|
||||||
|
v-model.trim="tableStore.table.params.devType"
|
||||||
|
filterable
|
||||||
|
placeholder="请选择设备型号"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in DevTypeOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备系列">
|
||||||
|
<el-select
|
||||||
|
v-model.trim="tableStore.table.params.devType"
|
||||||
|
filterable
|
||||||
|
placeholder="请选择设备系列"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in DevTypeOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="升级设备筛选">
|
||||||
|
<el-select
|
||||||
|
v-model.trim="tableStore.table.params.devType"
|
||||||
|
filterable
|
||||||
|
placeholder="请选择升级设备筛选"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in DevTypeOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
<template #operation>
|
||||||
|
<el-button :icon="EditPen" type="primary" class="ml10" @click="maintenance">终端版本维护</el-button>
|
||||||
|
<el-button :icon="Share" type="primary" class="ml10">批量升级</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import { Share, EditPen } from '@element-plus/icons-vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
defineOptions({
|
||||||
|
name: 'govern/manage/programVersion'
|
||||||
|
})
|
||||||
|
const dictData = useDictData()
|
||||||
|
const DevTypeOptions = ref()
|
||||||
|
const tableHeaderRef = ref()
|
||||||
|
const { push, options, currentRoute } = useRouter()
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/cs-device-boot/edData/queryEdDataPage',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{ type: 'checkbox', width: '60' },
|
||||||
|
{
|
||||||
|
field: 'index',
|
||||||
|
title: '序号',
|
||||||
|
width: '80',
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: '设备名称', field: 'devTypeName', minWidth: '100' },
|
||||||
|
{ title: '版本号', field: 'versionNo', minWidth: '100' },
|
||||||
|
{ title: '协议版本', field: 'versionAgreement', minWidth: '100' },
|
||||||
|
{ title: '版本日期', field: 'versionDate', minWidth: '100' },
|
||||||
|
{ title: '设备系列', field: 'versionDate', minWidth: '100' },
|
||||||
|
{ title: '设备型号', field: 'versionDate', minWidth: '100' },
|
||||||
|
{ title: '供电公司', field: 'versionDate', minWidth: '100' },
|
||||||
|
{ title: '变电站', field: 'versionDate', minWidth: '100' },
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
field: 'status',
|
||||||
|
render: 'tag',
|
||||||
|
minWidth: '80',
|
||||||
|
custom: {
|
||||||
|
0: 'error',
|
||||||
|
1: 'success'
|
||||||
|
},
|
||||||
|
replaceValue: {
|
||||||
|
0: '禁用',
|
||||||
|
1: '启用'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: '更新时间', field: 'versionDate', minWidth: '100' },
|
||||||
|
{ title: '修改人员', field: 'versionDate', minWidth: '100' },
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
fixed: 'right',
|
||||||
|
align: 'center',
|
||||||
|
width: '120',
|
||||||
|
render: 'buttons',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
name: 'productSetting',
|
||||||
|
title: '升级',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'el-icon-EditPen',
|
||||||
|
render: 'basicButton'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'productSetting',
|
||||||
|
title: '升级日志',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'el-icon-EditPen',
|
||||||
|
render: 'basicButton'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
loadCallback: () => {}
|
||||||
|
})
|
||||||
|
queryByCode('Device_Type').then(res => {
|
||||||
|
const id = res.data.id
|
||||||
|
queryByid(id).then(res1 => {
|
||||||
|
res1.data.map((item: any, index: any) => {
|
||||||
|
if (item.pid == id) {
|
||||||
|
res1.data.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
DevTypeOptions.value = res1.data
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 版本维护
|
||||||
|
const maintenance = () => {
|
||||||
|
push({
|
||||||
|
// path: '/versionMaintenance'
|
||||||
|
path: '/govern/manage/basic/version'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
tableStore.table.params.devType = ''
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
onMounted(() => {
|
||||||
|
tableHeaderRef.value.onComSearch()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
263
src/views/govern/manage/realTime/index.vue
Normal file
263
src/views/govern/manage/realTime/index.vue
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main manage-realTime" :style="{ height: pageHeight.height }">
|
||||||
|
<DeviceTree @node-click="nodeClick" @init="" @deviceTypeChange=""></DeviceTree>
|
||||||
|
<div class="manage-realTime-right">
|
||||||
|
<div class="time-container">
|
||||||
|
<div>
|
||||||
|
<div>系统时间:{{ realTime }}</div>
|
||||||
|
<div>终端时间:{{ deviceTime }}</div>
|
||||||
|
</div>
|
||||||
|
<el-button icon="el-icon-RefreshLeft" type="primary" @click="synchronizeTime">对时</el-button>
|
||||||
|
</div>
|
||||||
|
<div :style="echartHeight" class="pl10 pr10">
|
||||||
|
<MyEchart :options="echartsData" />
|
||||||
|
</div>
|
||||||
|
<div class="pl10 pr10">
|
||||||
|
<el-table :data="tableData" border stripe :show-header="false" class="custom-table">
|
||||||
|
<el-table-column prop="label1" />
|
||||||
|
<el-table-column prop="label2" />
|
||||||
|
<el-table-column prop="value1" />
|
||||||
|
<el-table-column prop="label3" />
|
||||||
|
<el-table-column prop="value2" />
|
||||||
|
<el-table-column prop="label4" />
|
||||||
|
<el-table-column prop="value3" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { formatToDateTime } from '@/utils/dateUtil'
|
||||||
|
defineOptions({
|
||||||
|
name: 'govern/manage/realTime'
|
||||||
|
})
|
||||||
|
|
||||||
|
//页面属性
|
||||||
|
const pageHeight = mainHeight(20)
|
||||||
|
const echartHeight = mainHeight(180)
|
||||||
|
const realTime = ref<string>('')
|
||||||
|
const deviceTime = ref<string>('')
|
||||||
|
const timer = ref<any>(null)
|
||||||
|
const echartsData = ref<any>({
|
||||||
|
title: {
|
||||||
|
text: '终端性能'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
bottom: 0,
|
||||||
|
data: ['CPU1使用率', 'CPU2使用率', '内存使用率', '磁盘使用率']
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
name: '时间',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: {
|
||||||
|
day: '{MM}-{dd}',
|
||||||
|
month: '{MM}',
|
||||||
|
year: '{yyyy}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '%',
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'CPU1使用率',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
smooth: true,
|
||||||
|
data: [
|
||||||
|
['2025-01-01 08:00:00', 10],
|
||||||
|
['2025-01-01 09:00:00', 10],
|
||||||
|
['2025-01-01 010:00:00', 10]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'CPU2使用率',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
smooth: true,
|
||||||
|
data: [
|
||||||
|
['2025-01-01 08:00:00', 11],
|
||||||
|
['2025-01-01 09:00:00', 11],
|
||||||
|
['2025-01-01 010:00:00', 11]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '内存使用率',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
smooth: true,
|
||||||
|
data: [
|
||||||
|
['2025-01-01 08:00:00', 12],
|
||||||
|
['2025-01-01 09:00:00', 12],
|
||||||
|
['2025-01-01 010:00:00', 12]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '磁盘使用率',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
smooth: true,
|
||||||
|
data: [
|
||||||
|
['2025-01-01 08:00:00', 13],
|
||||||
|
['2025-01-01 09:00:00', 13],
|
||||||
|
['2025-01-01 010:00:00', 13]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableData = ref([
|
||||||
|
{
|
||||||
|
label1: 'cpu1负载(%)',
|
||||||
|
label2: '使用:',
|
||||||
|
value1: '43',
|
||||||
|
label3: '剩余:',
|
||||||
|
value2: '57',
|
||||||
|
label4: '',
|
||||||
|
value3: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label1: 'cpu2负载(%)',
|
||||||
|
label2: '使用:',
|
||||||
|
value1: '/',
|
||||||
|
label3: '剩余:',
|
||||||
|
value2: '/',
|
||||||
|
label4: '',
|
||||||
|
value3: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label1: '终端内存详情(MB)',
|
||||||
|
label2: '内存总量:',
|
||||||
|
value1: '489',
|
||||||
|
label3: '已使用:',
|
||||||
|
value2: '143',
|
||||||
|
label4: '未使用:',
|
||||||
|
value3: '346.00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label1: '主存储器详情(GB)',
|
||||||
|
label2: '主存储器总量:',
|
||||||
|
value1: '6.44',
|
||||||
|
label3: '已使用:',
|
||||||
|
value2: '6.03',
|
||||||
|
label4: '未使用:',
|
||||||
|
value3: '0.41'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label1: '其余信息',
|
||||||
|
label2: '最后对时对标:',
|
||||||
|
value1: '1970-01-01 08:00:00',
|
||||||
|
label3: '信号强度(dBm):',
|
||||||
|
value2: '-',
|
||||||
|
label4: '',
|
||||||
|
value3: ''
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const nodeClick = async (e: anyObj) => {
|
||||||
|
console.log('点击设备树节点')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
console.log('close')
|
||||||
|
}
|
||||||
|
|
||||||
|
const synchronizeTime = async () => {
|
||||||
|
console.log('对时')
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
timer.value = setInterval(() => {
|
||||||
|
realTime.value = formatToDateTime(new Date())
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
// 在组件卸载时清除定时器
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer.value) {
|
||||||
|
clearInterval(timer.value)
|
||||||
|
timer.value = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.manage-realTime {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px 10px 10px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid #ebeef5; // 加个边框方便查看效果
|
||||||
|
|
||||||
|
.time-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end; // 让内容靠右
|
||||||
|
align-items: center; // 让内容垂直居中(避免高度不一致时偏移)
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button * {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__cell) {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1. 加深表格边框线条 */
|
||||||
|
:deep(.custom-table.el-table) {
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.custom-table .el-table__cell) {
|
||||||
|
border: 0.5px solid #dcdfe6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2. 第 1、2、4、6 列显示深色背景 */
|
||||||
|
:deep(.custom-table .el-table__row .el-table__cell:nth-child(1)) {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第 3、5、7 列显示白色背景 */
|
||||||
|
:deep(.custom-table .el-table__row .el-table__cell:nth-child(3)),
|
||||||
|
:deep(.custom-table .el-table__row .el-table__cell:nth-child(5)),
|
||||||
|
:deep(.custom-table .el-table__row .el-table__cell:nth-child(7)) {
|
||||||
|
// background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -3,347 +3,324 @@ import Excel from 'exceljs'
|
|||||||
|
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
|
|
||||||
const exportExcel = function(luckysheet, value) {
|
const exportExcel = function (luckysheet, value) {
|
||||||
// 参数为luckysheet.getluckysheetfile()获取的对象
|
// 参数为luckysheet.getluckysheetfile()获取的对象
|
||||||
// 1.创建工作簿,可以为工作簿添加属性
|
// 1.创建工作簿,可以为工作簿添加属性
|
||||||
const workbook = new Excel.Workbook()
|
const workbook = new Excel.Workbook()
|
||||||
// 2.创建表格,第二个参数可以配置创建什么样的工作表
|
// 2.创建表格,第二个参数可以配置创建什么样的工作表
|
||||||
if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
|
if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
|
||||||
luckysheet = [luckysheet]
|
luckysheet = [luckysheet]
|
||||||
}
|
}
|
||||||
luckysheet.forEach(function(table) {
|
luckysheet.forEach(function (table) {
|
||||||
if (table.data.length === 0) return true
|
if (table.data.length === 0) return true
|
||||||
// ws.getCell('B2').fill = fills.
|
// ws.getCell('B2').fill = fills.
|
||||||
const worksheet = workbook.addWorksheet(table.name)
|
const worksheet = workbook.addWorksheet(table.name)
|
||||||
const merge = (table.config && table.config.merge) || {}
|
const merge = (table.config && table.config.merge) || {}
|
||||||
const borderInfo = (table.config && table.config.borderInfo) || {}
|
const borderInfo = (table.config && table.config.borderInfo) || {}
|
||||||
// 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
|
// 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
|
||||||
setStyleAndValue(table.data, worksheet)
|
setStyleAndValue(table.data, worksheet)
|
||||||
setMerge(merge, worksheet)
|
setMerge(merge, worksheet)
|
||||||
setBorder(borderInfo, worksheet)
|
setBorder(borderInfo, worksheet)
|
||||||
return true
|
return true
|
||||||
})
|
|
||||||
|
|
||||||
// return
|
|
||||||
// 4.写入 buffer
|
|
||||||
const buffer = workbook.xlsx.writeBuffer().then(data => {
|
|
||||||
// console.log('data', data)
|
|
||||||
const blob = new Blob([data], {
|
|
||||||
type: 'application/vnd.ms-excel;charset=utf-8'
|
|
||||||
})
|
})
|
||||||
console.log("导出成功!")
|
|
||||||
FileSaver.saveAs(blob, `${value}.xlsx`)
|
|
||||||
})
|
|
||||||
return buffer
|
|
||||||
}
|
|
||||||
|
|
||||||
var setMerge = function(luckyMerge = {}, worksheet) {
|
// return
|
||||||
const mergearr = Object.values(luckyMerge)
|
// 4.写入 buffer
|
||||||
mergearr.forEach(function(elem) {
|
const buffer = workbook.xlsx.writeBuffer().then(data => {
|
||||||
// elem格式:{r: 0, c: 0, rs: 1, cs: 2}
|
// console.log('data', data)
|
||||||
// 按开始行,开始列,结束行,结束列合并(相当于 K10:M12)
|
const blob = new Blob([data], {
|
||||||
worksheet.mergeCells(
|
type: 'application/vnd.ms-excel;charset=utf-8'
|
||||||
elem.r + 1,
|
|
||||||
elem.c + 1,
|
|
||||||
elem.r + elem.rs,
|
|
||||||
elem.c + elem.cs
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
var setBorder = function(luckyBorderInfo, worksheet) {
|
|
||||||
if (!Array.isArray(luckyBorderInfo)) return
|
|
||||||
// console.log('luckyBorderInfo', luckyBorderInfo)
|
|
||||||
luckyBorderInfo.forEach(function(elem) {
|
|
||||||
// 现在只兼容到borderType 为range的情况
|
|
||||||
// console.log('ele', elem)
|
|
||||||
if (elem.rangeType === 'range') {
|
|
||||||
let border = borderConvert(elem.borderType, elem.style, elem.color)
|
|
||||||
let rang = elem.range[0]
|
|
||||||
// console.log('range', rang)
|
|
||||||
let row = rang.row
|
|
||||||
let column = rang.column
|
|
||||||
for (let i = row[0] + 1; i < row[1] + 2; i++) {
|
|
||||||
for (let y = column[0] + 1; y < column[1] + 2; y++) {
|
|
||||||
worksheet.getCell(i, y).border = border
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (elem.rangeType === 'cell') {
|
|
||||||
// col_index: 2
|
|
||||||
// row_index: 1
|
|
||||||
// b: {
|
|
||||||
// color: '#d0d4e3'
|
|
||||||
// style: 1
|
|
||||||
// }
|
|
||||||
const { col_index, row_index } = elem.value
|
|
||||||
const borderData = Object.assign({}, elem.value)
|
|
||||||
delete borderData.col_index
|
|
||||||
delete borderData.row_index
|
|
||||||
let border = addborderToCell(borderData, row_index, col_index)
|
|
||||||
// console.log('bordre', border, borderData)
|
|
||||||
worksheet.getCell(row_index + 1, col_index + 1).border = border
|
|
||||||
}
|
|
||||||
// console.log(rang.column_focus + 1, rang.row_focus + 1)
|
|
||||||
// worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border
|
|
||||||
})
|
|
||||||
}
|
|
||||||
var setStyleAndValue = function(cellArr, worksheet) {
|
|
||||||
if (!Array.isArray(cellArr)) return
|
|
||||||
cellArr.forEach(function(row, rowid) {
|
|
||||||
row.every(function(cell, columnid) {
|
|
||||||
if (!cell) return true
|
|
||||||
let fill = fillConvert(cell.bg)
|
|
||||||
|
|
||||||
let font = fontConvert(
|
|
||||||
cell.ff,
|
|
||||||
cell.fc,
|
|
||||||
cell.bl,
|
|
||||||
cell.it,
|
|
||||||
cell.fs,
|
|
||||||
cell.cl,
|
|
||||||
cell.ul
|
|
||||||
)
|
|
||||||
let alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr)
|
|
||||||
let value = ''
|
|
||||||
|
|
||||||
if (cell.f) {
|
|
||||||
value = { formula: cell.f, result: cell.v }
|
|
||||||
} else if (!cell.v && cell.ct && cell.ct.s) {
|
|
||||||
// xls转为xlsx之后,内部存在不同的格式,都会进到富文本里,即值不存在与cell.v,而是存在于cell.ct.s之后
|
|
||||||
// value = cell.ct.s[0].v
|
|
||||||
cell.ct.s.forEach(arr => {
|
|
||||||
value += arr.v
|
|
||||||
})
|
})
|
||||||
} else {
|
console.log('导出成功!')
|
||||||
value = cell.v
|
FileSaver.saveAs(blob, `${value}.xlsx`)
|
||||||
}
|
|
||||||
// style 填入到_value中可以实现填充色
|
|
||||||
let letter = createCellPos(columnid)
|
|
||||||
let target = worksheet.getCell(letter + (rowid + 1))
|
|
||||||
// console.log('1233', letter + (rowid + 1))
|
|
||||||
for (const key in fill) {
|
|
||||||
target.fill = fill
|
|
||||||
break
|
|
||||||
}
|
|
||||||
target.font = font
|
|
||||||
target.alignment = alignment
|
|
||||||
target.value = value
|
|
||||||
|
|
||||||
return true
|
|
||||||
})
|
})
|
||||||
})
|
return buffer
|
||||||
}
|
}
|
||||||
|
|
||||||
var fillConvert = function(bg) {
|
var setMerge = function (luckyMerge = {}, worksheet) {
|
||||||
if (!bg) {
|
const mergearr = Object.values(luckyMerge)
|
||||||
return {}
|
mergearr.forEach(function (elem) {
|
||||||
}
|
// elem格式:{r: 0, c: 0, rs: 1, cs: 2}
|
||||||
// const bgc = bg.replace('#', '')
|
// 按开始行,开始列,结束行,结束列合并(相当于 K10:M12)
|
||||||
let fill = {
|
worksheet.mergeCells(elem.r + 1, elem.c + 1, elem.r + elem.rs, elem.c + elem.cs)
|
||||||
type: 'pattern',
|
})
|
||||||
pattern: 'solid',
|
|
||||||
fgColor: { argb: bg.replace('#', '') }
|
|
||||||
}
|
|
||||||
return fill
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var fontConvert = function(
|
var setBorder = function (luckyBorderInfo, worksheet) {
|
||||||
ff = 0,
|
if (!Array.isArray(luckyBorderInfo)) return
|
||||||
fc = '#000000',
|
// console.log('luckyBorderInfo', luckyBorderInfo)
|
||||||
bl = 0,
|
luckyBorderInfo.forEach(function (elem) {
|
||||||
it = 0,
|
// 现在只兼容到borderType 为range的情况
|
||||||
fs = 10,
|
// console.log('ele', elem)
|
||||||
cl = 0,
|
if (elem.rangeType === 'range') {
|
||||||
ul = 0
|
let border = borderConvert(elem.borderType, elem.style, elem.color)
|
||||||
) {
|
let rang = elem.range[0]
|
||||||
// luckysheet:ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
|
// console.log('range', rang)
|
||||||
const luckyToExcel = {
|
let row = rang.row
|
||||||
0: '微软雅黑',
|
let column = rang.column
|
||||||
1: '宋体(Song)',
|
for (let i = row[0] + 1; i < row[1] + 2; i++) {
|
||||||
2: '黑体(ST Heiti)',
|
for (let y = column[0] + 1; y < column[1] + 2; y++) {
|
||||||
3: '楷体(ST Kaiti)',
|
worksheet.getCell(i, y).border = border
|
||||||
4: '仿宋(ST FangSong)',
|
}
|
||||||
5: '新宋体(ST Song)',
|
}
|
||||||
6: '华文新魏',
|
}
|
||||||
7: '华文行楷',
|
if (elem.rangeType === 'cell') {
|
||||||
8: '华文隶书',
|
// col_index: 2
|
||||||
9: 'Arial',
|
// row_index: 1
|
||||||
10: 'Times New Roman ',
|
// b: {
|
||||||
11: 'Tahoma ',
|
// color: '#d0d4e3'
|
||||||
12: 'Verdana',
|
// style: 1
|
||||||
num2bl: function(num) {
|
// }
|
||||||
return num === 0 ? false : true
|
const { col_index, row_index } = elem.value
|
||||||
|
const borderData = Object.assign({}, elem.value)
|
||||||
|
delete borderData.col_index
|
||||||
|
delete borderData.row_index
|
||||||
|
let border = addborderToCell(borderData, row_index, col_index)
|
||||||
|
// console.log('bordre', border, borderData)
|
||||||
|
worksheet.getCell(row_index + 1, col_index + 1).border = border
|
||||||
|
}
|
||||||
|
// console.log(rang.column_focus + 1, rang.row_focus + 1)
|
||||||
|
// worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border
|
||||||
|
})
|
||||||
|
}
|
||||||
|
var setStyleAndValue = function (cellArr, worksheet) {
|
||||||
|
if (!Array.isArray(cellArr)) return
|
||||||
|
cellArr.forEach(function (row, rowid) {
|
||||||
|
row.every(function (cell, columnid) {
|
||||||
|
if (!cell) return true
|
||||||
|
let fill = fillConvert(cell.bg)
|
||||||
|
|
||||||
|
let font = fontConvert(cell.ff, cell.fc, cell.bl, cell.it, cell.fs, cell.cl, cell.ul)
|
||||||
|
let alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr)
|
||||||
|
let value = ''
|
||||||
|
|
||||||
|
if (cell.f) {
|
||||||
|
value = { formula: cell.f, result: cell.v }
|
||||||
|
} else if (!cell.v && cell.ct && cell.ct.s) {
|
||||||
|
// xls转为xlsx之后,内部存在不同的格式,都会进到富文本里,即值不存在与cell.v,而是存在于cell.ct.s之后
|
||||||
|
// value = cell.ct.s[0].v
|
||||||
|
cell.ct.s.forEach(arr => {
|
||||||
|
value += arr.v
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
value = cell.v
|
||||||
|
}
|
||||||
|
// style 填入到_value中可以实现填充色
|
||||||
|
let letter = createCellPos(columnid)
|
||||||
|
let target = worksheet.getCell(letter + (rowid + 1))
|
||||||
|
// console.log('1233', letter + (rowid + 1))
|
||||||
|
for (const key in fill) {
|
||||||
|
target.fill = fill
|
||||||
|
break
|
||||||
|
}
|
||||||
|
target.font = font
|
||||||
|
target.alignment = alignment
|
||||||
|
target.value = value
|
||||||
|
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
var fillConvert = function (bg) {
|
||||||
|
if (!bg) {
|
||||||
|
return {}
|
||||||
}
|
}
|
||||||
}
|
// const bgc = bg.replace('#', '')
|
||||||
// 出现Bug,导入的时候ff为luckyToExcel的val
|
let fill = {
|
||||||
|
type: 'pattern',
|
||||||
let font = {
|
pattern: 'solid',
|
||||||
name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
|
fgColor: { argb: bg.replace('#', '') }
|
||||||
family: 1,
|
}
|
||||||
size: fs,
|
return fill
|
||||||
color: { argb: fc.replace('#', '') },
|
|
||||||
bold: luckyToExcel.num2bl(bl),
|
|
||||||
italic: luckyToExcel.num2bl(it),
|
|
||||||
underline: luckyToExcel.num2bl(ul),
|
|
||||||
strike: luckyToExcel.num2bl(cl)
|
|
||||||
}
|
|
||||||
|
|
||||||
return font
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var alignmentConvert = function(
|
var fontConvert = function (ff = 0, fc = '#000000', bl = 0, it = 0, fs = 10, cl = 0, ul = 0) {
|
||||||
vt = 'default',
|
// luckysheet:ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
|
||||||
ht = 'default',
|
const luckyToExcel = {
|
||||||
tb = 'default',
|
0: '微软雅黑',
|
||||||
tr = 'default'
|
1: '宋体(Song)',
|
||||||
) {
|
2: '黑体(ST Heiti)',
|
||||||
// luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
|
3: '楷体(ST Kaiti)',
|
||||||
const luckyToExcel = {
|
4: '仿宋(ST FangSong)',
|
||||||
vertical: {
|
5: '新宋体(ST Song)',
|
||||||
0: 'middle',
|
6: '华文新魏',
|
||||||
1: 'top',
|
7: '华文行楷',
|
||||||
2: 'bottom',
|
8: '华文隶书',
|
||||||
default: 'top'
|
9: 'Arial',
|
||||||
},
|
10: 'Times New Roman ',
|
||||||
horizontal: {
|
11: 'Tahoma ',
|
||||||
0: 'center',
|
12: 'Verdana',
|
||||||
1: 'left',
|
num2bl: function (num) {
|
||||||
2: 'right',
|
return num === 0 ? false : true
|
||||||
default: 'left'
|
}
|
||||||
},
|
|
||||||
wrapText: {
|
|
||||||
0: false,
|
|
||||||
1: false,
|
|
||||||
2: true,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
textRotation: {
|
|
||||||
0: 0,
|
|
||||||
1: 45,
|
|
||||||
2: -45,
|
|
||||||
3: 'vertical',
|
|
||||||
4: 90,
|
|
||||||
5: -90,
|
|
||||||
default: 0
|
|
||||||
}
|
}
|
||||||
}
|
// 出现Bug,导入的时候ff为luckyToExcel的val
|
||||||
|
|
||||||
let alignment = {
|
let font = {
|
||||||
vertical: luckyToExcel.vertical[vt],
|
name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
|
||||||
horizontal: luckyToExcel.horizontal[ht],
|
family: 1,
|
||||||
wrapText: luckyToExcel.wrapText[tb],
|
size: fs,
|
||||||
textRotation: luckyToExcel.textRotation[tr]
|
color: { argb: fc.replace('#', '') },
|
||||||
}
|
bold: luckyToExcel.num2bl(bl),
|
||||||
return alignment
|
italic: luckyToExcel.num2bl(it),
|
||||||
|
underline: luckyToExcel.num2bl(ul),
|
||||||
|
strike: luckyToExcel.num2bl(cl)
|
||||||
|
}
|
||||||
|
|
||||||
|
return font
|
||||||
}
|
}
|
||||||
|
|
||||||
var borderConvert = function(borderType, style = 1, color = '#000') {
|
var alignmentConvert = function (vt = 'default', ht = 'default', tb = 'default', tr = 'default') {
|
||||||
// 对应luckysheet的config中borderinfo的的参数
|
// luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
|
||||||
if (!borderType) {
|
const luckyToExcel = {
|
||||||
return {}
|
vertical: {
|
||||||
}
|
0: 'middle',
|
||||||
const luckyToExcel = {
|
1: 'top',
|
||||||
type: {
|
2: 'bottom',
|
||||||
'border-all': 'all',
|
default: 'top'
|
||||||
'border-top': 'top',
|
},
|
||||||
'border-right': 'right',
|
horizontal: {
|
||||||
'border-bottom': 'bottom',
|
0: 'center',
|
||||||
'border-left': 'left'
|
1: 'left',
|
||||||
},
|
2: 'right',
|
||||||
style: {
|
default: 'left'
|
||||||
0: 'none',
|
},
|
||||||
1: 'thin',
|
wrapText: {
|
||||||
2: 'hair',
|
0: false,
|
||||||
3: 'dotted',
|
1: false,
|
||||||
4: 'dashDot', // 'Dashed',
|
2: true,
|
||||||
5: 'dashDot',
|
default: false
|
||||||
6: 'dashDotDot',
|
},
|
||||||
7: 'double',
|
textRotation: {
|
||||||
8: 'medium',
|
0: 0,
|
||||||
9: 'mediumDashed',
|
1: 45,
|
||||||
10: 'mediumDashDot',
|
2: -45,
|
||||||
11: 'mediumDashDotDot',
|
3: 'vertical',
|
||||||
12: 'slantDashDot',
|
4: 90,
|
||||||
13: 'thick'
|
5: -90,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
let template = {
|
let alignment = {
|
||||||
style: luckyToExcel.style[style],
|
vertical: luckyToExcel.vertical[vt],
|
||||||
color: { argb: color.replace('#', '') }
|
horizontal: luckyToExcel.horizontal[ht],
|
||||||
}
|
wrapText: luckyToExcel.wrapText[tb],
|
||||||
let border = {}
|
textRotation: luckyToExcel.textRotation[tr]
|
||||||
if (luckyToExcel.type[borderType] === 'all') {
|
}
|
||||||
border['top'] = template
|
return alignment
|
||||||
border['right'] = template
|
}
|
||||||
border['bottom'] = template
|
|
||||||
border['left'] = template
|
var borderConvert = function (borderType, style = 1, color = '#000') {
|
||||||
} else {
|
// 对应luckysheet的config中borderinfo的的参数
|
||||||
border[luckyToExcel.type[borderType]] = template
|
if (!borderType) {
|
||||||
}
|
return {}
|
||||||
// console.log('border', border)
|
}
|
||||||
return border
|
const luckyToExcel = {
|
||||||
|
type: {
|
||||||
|
'border-all': 'all',
|
||||||
|
'border-top': 'top',
|
||||||
|
'border-right': 'right',
|
||||||
|
'border-bottom': 'bottom',
|
||||||
|
'border-left': 'left'
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
0: 'none',
|
||||||
|
1: 'thin',
|
||||||
|
2: 'hair',
|
||||||
|
3: 'dotted',
|
||||||
|
4: 'dashDot', // 'Dashed',
|
||||||
|
5: 'dashDot',
|
||||||
|
6: 'dashDotDot',
|
||||||
|
7: 'double',
|
||||||
|
8: 'medium',
|
||||||
|
9: 'mediumDashed',
|
||||||
|
10: 'mediumDashDot',
|
||||||
|
11: 'mediumDashDotDot',
|
||||||
|
12: 'slantDashDot',
|
||||||
|
13: 'thick'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let template = {
|
||||||
|
style: luckyToExcel.style[style],
|
||||||
|
color: { argb: color.replace('#', '') }
|
||||||
|
}
|
||||||
|
let border = {}
|
||||||
|
if (luckyToExcel.type[borderType] === 'all') {
|
||||||
|
border['top'] = template
|
||||||
|
border['right'] = template
|
||||||
|
border['bottom'] = template
|
||||||
|
border['left'] = template
|
||||||
|
} else {
|
||||||
|
border[luckyToExcel.type[borderType]] = template
|
||||||
|
}
|
||||||
|
// console.log('border', border)
|
||||||
|
return border
|
||||||
}
|
}
|
||||||
|
|
||||||
function addborderToCell(borders, row_index, col_index) {
|
function addborderToCell(borders, row_index, col_index) {
|
||||||
let border = {}
|
let border = {}
|
||||||
const luckyExcel = {
|
const luckyExcel = {
|
||||||
type: {
|
type: {
|
||||||
l: 'left',
|
l: 'left',
|
||||||
r: 'right',
|
r: 'right',
|
||||||
b: 'bottom',
|
b: 'bottom',
|
||||||
t: 'top'
|
t: 'top'
|
||||||
},
|
},
|
||||||
style: {
|
style: {
|
||||||
0: 'none',
|
0: 'none',
|
||||||
1: 'thin',
|
1: 'thin',
|
||||||
2: 'hair',
|
2: 'hair',
|
||||||
3: 'dotted',
|
3: 'dotted',
|
||||||
4: 'dashDot', // 'Dashed',
|
4: 'dashDot', // 'Dashed',
|
||||||
5: 'dashDot',
|
5: 'dashDot',
|
||||||
6: 'dashDotDot',
|
6: 'dashDotDot',
|
||||||
7: 'double',
|
7: 'double',
|
||||||
8: 'medium',
|
8: 'medium',
|
||||||
9: 'mediumDashed',
|
9: 'mediumDashed',
|
||||||
10: 'mediumDashDot',
|
10: 'mediumDashDot',
|
||||||
11: 'mediumDashDotDot',
|
11: 'mediumDashDotDot',
|
||||||
12: 'slantDashDot',
|
12: 'slantDashDot',
|
||||||
13: 'thick'
|
13: 'thick'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
// console.log('borders', borders)
|
||||||
// console.log('borders', borders)
|
for (const bor in borders) {
|
||||||
for (const bor in borders) {
|
const borderItem = borders[bor]
|
||||||
// console.log(bor)
|
// 同时判断边框对象 和 color 属性都存在
|
||||||
if (borders[bor].color.indexOf('rgb') === -1) {
|
if (!borderItem || !borderItem.color) {
|
||||||
border[luckyExcel.type[bor]] = {
|
continue
|
||||||
style: luckyExcel.style[borders[bor].style],
|
}
|
||||||
color: { argb: borders[bor].color.replace('#', '') }
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
border[luckyExcel.type[bor]] = {
|
|
||||||
style: luckyExcel.style[borders[bor].style],
|
|
||||||
color: { argb: borders[bor].color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return border
|
if (borderItem.color.indexOf('rgb') === -1) {
|
||||||
|
border[luckyExcel.type[bor]] = {
|
||||||
|
style: luckyExcel.style[borderItem.style],
|
||||||
|
color: { argb: borderItem.color.replace('#', '') }
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
border[luckyExcel.type[bor]] = {
|
||||||
|
style: luckyExcel.style[borderItem.style],
|
||||||
|
color: { argb: borderItem.color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return border
|
||||||
}
|
}
|
||||||
|
|
||||||
function createCellPos(n) {
|
function createCellPos(n) {
|
||||||
let ordA = 'A'.charCodeAt(0)
|
let ordA = 'A'.charCodeAt(0)
|
||||||
|
|
||||||
let ordZ = 'Z'.charCodeAt(0)
|
let ordZ = 'Z'.charCodeAt(0)
|
||||||
let len = ordZ - ordA + 1
|
let len = ordZ - ordA + 1
|
||||||
let s = ''
|
let s = ''
|
||||||
while (n >= 0) {
|
while (n >= 0) {
|
||||||
s = String.fromCharCode((n % len) + ordA) + s
|
s = String.fromCharCode((n % len) + ordA) + s
|
||||||
|
|
||||||
n = Math.floor(n / len) - 1
|
n = Math.floor(n / len) - 1
|
||||||
}
|
}
|
||||||
return s
|
return s
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export { exportExcel }
|
||||||
exportExcel
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main">
|
<div class="default-main">
|
||||||
<div v-show="show && lookShow" style="display: flex">
|
<el-row v-show="show && lookShow">
|
||||||
<div style="width: 600px">
|
<el-col :span="10">
|
||||||
<div class="custom-table-header">
|
<div class="custom-table-header">
|
||||||
<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" @currentChange="currentChange" />
|
||||||
</div>
|
</el-col>
|
||||||
<div style="flex: 1">
|
<el-col :span="14">
|
||||||
<div class="custom-table-header">
|
<div class="custom-table-header">
|
||||||
<div class="title">模版绑定</div>
|
<div class="title">模版绑定</div>
|
||||||
|
|
||||||
@@ -61,8 +61,9 @@
|
|||||||
</vxe-column>
|
</vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
</div>
|
</el-row>
|
||||||
|
|
||||||
<luckysheet ref="luckysheetRef" v-if="!show" @shutDown="shutDown" />
|
<luckysheet ref="luckysheetRef" v-if="!show" @shutDown="shutDown" />
|
||||||
<!-- 查看 -->
|
<!-- 查看 -->
|
||||||
<look ref="lookRef" v-if="!lookShow" @shutDown="shutDown" />
|
<look ref="lookRef" v-if="!lookShow" @shutDown="shutDown" />
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<el-input v-model.trim="form.name" placeholder="请输入敏感用户名称"></el-input>
|
<el-input v-model.trim="form.name" placeholder="请输入敏感用户名称"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="敏感负荷类型" prop="loadType">
|
<el-form-item label="敏感负荷类型" prop="loadType">
|
||||||
<el-select v-model.trim="form.loadType" filterable clearable placeholder="请选择数据分类">
|
<el-select v-model.trim="form.loadType" filterable clearable placeholder="请选择敏感负荷类型">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in DataTypeSelect"
|
v-for="item in DataTypeSelect"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
|
|||||||
@@ -1,6 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main">
|
<div class="default-main">
|
||||||
<TableHeader :showReset="false" showExport>
|
<TableHeader :showReset="false" showExport>
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="关键字筛选">
|
||||||
|
<el-input
|
||||||
|
maxlength="32"
|
||||||
|
show-word-limit
|
||||||
|
style="width: 240px"
|
||||||
|
v-model.trim="tableStore.table.params.searchValue"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入敏感负荷名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</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>
|
||||||
|
|||||||
@@ -108,8 +108,8 @@ const info = async (list: any) => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
let relVal = ''
|
var relVal = `<strong>${a.seriesName}</strong><br/>`
|
||||||
relVal = "<font style='color:" + "'>供电公司:" + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
relVal += "<font style='color:" + "'>供电公司:" + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||||
relVal += "<font style='color:" + "'>变电站:" + ' ' + ' ' + a[0].value[4] + '</font><br/>'
|
relVal += "<font style='color:" + "'>变电站:" + ' ' + ' ' + a[0].value[4] + '</font><br/>'
|
||||||
relVal += "<font style='color:" + "'>发生时刻:" + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
relVal += "<font style='color:" + "'>发生时刻:" + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||||
relVal +=
|
relVal +=
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user