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
|
||||
*.sw?
|
||||
pnpm-lock.yaml
|
||||
|
||||
#test
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
// 装置基础数据和模板数据
|
||||
// 设备基础数据和模板数据
|
||||
export function getDeviceData(deviceId: string, type: string, lineId: string) {
|
||||
let form = new FormData()
|
||||
form.append('deviceId', deviceId)
|
||||
@@ -142,3 +142,11 @@ export function getModuleState(data?: any) {
|
||||
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获取台账信息
|
||||
export function getInfoById(id: any) {
|
||||
@@ -11,7 +11,6 @@ export function getInfoById(id: any) {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//工程查询通过id获取
|
||||
export function getEngineerById(id: any) {
|
||||
let form = new FormData()
|
||||
@@ -23,7 +22,6 @@ export function getEngineerById(id: any) {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//项目查询通过id获取
|
||||
export function getProjectById(id: any) {
|
||||
let form = new FormData()
|
||||
@@ -53,7 +51,7 @@ export function getById(id: any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csline/getById',
|
||||
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()
|
||||
form.append('id', id)
|
||||
form.append('name', name)
|
||||
form.append('area', area)
|
||||
form.append('description', description)
|
||||
form.append('status', status)
|
||||
form.append('sort', sort)
|
||||
form.append('topoIds', topoIds)
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/project/auditAppProject',
|
||||
method: 'post',
|
||||
@@ -105,7 +105,7 @@ export const deleteLine = (id: any) => {
|
||||
let form = new FormData()
|
||||
form.append('id', id)
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csline/delCldLine',
|
||||
url: '/cs-device-boot/csline/delCldLine',
|
||||
method: 'POST',
|
||||
data: form
|
||||
})
|
||||
@@ -120,7 +120,6 @@ export function updateEquipment(data: any) {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//修改监测点
|
||||
export function updateLine(data: any) {
|
||||
return createAxios({
|
||||
@@ -134,8 +133,7 @@ export function updateLine(data: any) {
|
||||
export function pushLog() {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csTerminalLogs/pushCldInfo',
|
||||
method: 'post',
|
||||
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -143,7 +141,6 @@ export function pushLog() {
|
||||
export function queryPushResult() {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csTerminalReply/queryData',
|
||||
method: 'post',
|
||||
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
@@ -14,7 +14,7 @@ export function getGroup(dataSet: string) {
|
||||
})
|
||||
}
|
||||
|
||||
// 装置分组实时数据
|
||||
// 设备分组实时数据
|
||||
export function deviceHisData(data: any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csGroup/deviceHistoryData',
|
||||
@@ -33,7 +33,7 @@ export function deviceHisData(data: any) {
|
||||
})
|
||||
}
|
||||
|
||||
// 装置分组历史数据
|
||||
// 设备分组历史数据
|
||||
export function deviceRtData(data: any) {
|
||||
let form = new FormData()
|
||||
form.append('id', data.id)
|
||||
@@ -51,7 +51,7 @@ export function deviceRtData(data: any) {
|
||||
data: form
|
||||
})
|
||||
}
|
||||
// 装置分组历史数据
|
||||
// 设备分组历史数据
|
||||
export function realTimeData(data: any) {
|
||||
let form = new FormData()
|
||||
form.append('id', data.id)
|
||||
@@ -76,7 +76,7 @@ export function getTestData(data: any) {
|
||||
data
|
||||
})
|
||||
}
|
||||
// 设备监控-删除装置测试项
|
||||
// 设备监控-删除设备测试项
|
||||
export function deleteItem(data: any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/deleteItem',
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
// 设备列表
|
||||
export function getDeviceTree() {
|
||||
export function getDeviceTree(params?: any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csLedger/deviceTree',
|
||||
method: 'POST'
|
||||
method: 'POST',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 监测点列表
|
||||
export function getLineTree() {
|
||||
export function getLineTree(params?: any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/csLedger/lineTree',
|
||||
method: 'POST'
|
||||
method: 'POST',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 监测点列表治理
|
||||
|
||||
@@ -79,4 +79,12 @@ export const addProject = (data: any) => {
|
||||
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'
|
||||
})
|
||||
}
|
||||
|
||||
// 监测设备-目录信息询问
|
||||
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) {
|
||||
return createAxios({
|
||||
@@ -38,7 +85,7 @@ export function downLoadDeviceFilePath(obj) {
|
||||
data: form
|
||||
})
|
||||
}
|
||||
//装置重启
|
||||
//设备重启
|
||||
export function reStartDevice(data) {
|
||||
return createAxios({
|
||||
url: `/cs-device-boot/EquipmentDelivery/rebootDevice?nDid=${data.nDid}`,
|
||||
@@ -46,7 +93,7 @@ export function reStartDevice(data) {
|
||||
})
|
||||
}
|
||||
|
||||
//上传文件至装置
|
||||
//上传文件至设备
|
||||
export function uploadDeviceFile(data) {
|
||||
let form = new FormData()
|
||||
form.append('file', data.file)
|
||||
|
||||
@@ -8,7 +8,7 @@ export function getMakeUpData(data: any) {
|
||||
})
|
||||
}
|
||||
|
||||
//查询装置目录-文件
|
||||
//查询设备目录-文件
|
||||
export function getAskDirOrFile(data: any) {
|
||||
return createAxios({
|
||||
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) => {
|
||||
return createAxios({
|
||||
url: `/access-boot/device/wlAccess?nDid=${data.nDid}`,
|
||||
method: 'POST',
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
// 下载模版
|
||||
@@ -96,3 +96,10 @@ export function getExcelTemplate() {
|
||||
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)',
|
||||
borderWidth: 0,
|
||||
formatter: function (a: any) {
|
||||
var relVal = ''
|
||||
relVal = "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
||||
var relVal = `<strong>${a.seriesName}</strong><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[1].toFixed(2) + '%</font>'
|
||||
return relVal
|
||||
@@ -214,18 +215,18 @@ const tableStore: any = new TableStore({
|
||||
// [0.2, 10, '2023-01-01 10:00:00'],
|
||||
// [0.4, 50, '2023-01-01 11:00:00']
|
||||
// ],
|
||||
legendSymbol: 'circle',
|
||||
legendSymbol: 'circle'
|
||||
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
formatter: function (params: any) {
|
||||
return `<strong>可容忍事件</strong><br/>
|
||||
持续时间: ${params.value[0]}s<br/>
|
||||
特征幅值: ${params.value[1].toFixed(2)}%<br/>
|
||||
发生时间: ${params.value[2] || 'N/A'}`
|
||||
}
|
||||
}
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// trigger: 'item',
|
||||
// formatter: function (params: any) {
|
||||
// return `<strong>可容忍事件</strong><br/>
|
||||
// 持续时间: ${params.value[0]}s<br/>
|
||||
// 特征幅值: ${params.value[1].toFixed(2)}%<br/>
|
||||
// 发生时间: ${params.value[2] || 'N/A'}`
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
|
||||
@@ -47,7 +47,6 @@ const init = () => {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
console.log('🚀 ~ init ~ params:', params)
|
||||
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())
|
||||
|
||||
// 从第一条数据中提取时间作为x轴数据
|
||||
const firstItem = res.data[0]
|
||||
const xAxisData = firstItem.time.split(',')
|
||||
|
||||
// 定义相位颜色映射
|
||||
const phaseColors: any = {
|
||||
@@ -107,6 +104,7 @@ const initData = async (row: any) => {
|
||||
return a.phasic.localeCompare(b.phasic)
|
||||
})
|
||||
.map((item: any) => {
|
||||
const xAxisData = item.time.split(',')
|
||||
const values = xAxisData.map((time: string, index: number) => {
|
||||
// 将传入的日期与时间拼接成完整的时间字符串
|
||||
const fullTime = `${row.time} ${time}`
|
||||
|
||||
@@ -21,7 +21,8 @@
|
||||
isGroup
|
||||
></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>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -31,9 +32,10 @@ import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import DailyTrendChart from '@/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue'
|
||||
import { getTime } from '@/utils/formatTime'
|
||||
|
||||
import HarmonicRatio from '@/components/cockpit/overLimitStatistics/components/harmonicRatio.vue'
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
h: { type: [String, Number] },
|
||||
@@ -47,7 +49,7 @@ const prop = defineProps({
|
||||
const TableHeaderRef = ref()
|
||||
|
||||
const headerHeight = ref(57)
|
||||
|
||||
const harmonicRatioRef: any = ref(null)
|
||||
const dialogTrendChart = ref(false)
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
@@ -143,23 +145,14 @@ const tableStore: any = new TableStore({
|
||||
},
|
||||
loadCallback: () => {
|
||||
// 定义 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 = {
|
||||
title: {
|
||||
text: '指标越限严重度'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
data: xAxisLabels
|
||||
data: tableStore.table.data.map((item: any) => item.name)
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
@@ -175,7 +168,7 @@ const tableStore: any = new TableStore({
|
||||
{
|
||||
type: 'bar',
|
||||
name: '越限占比',
|
||||
data: chartData,
|
||||
data: tableStore.table.data.map((item: any) => Math.floor(item.extent * 100) / 100),
|
||||
barMaxWidth: 30
|
||||
}
|
||||
]
|
||||
@@ -188,15 +181,32 @@ const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
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) => {
|
||||
dialogTrendChart.value = true
|
||||
|
||||
if (column.field == 'maxValue' && row.lineId) {
|
||||
nextTick(() => {
|
||||
dailyTrendChartRef.value.open(row)
|
||||
if (column.field == 'maxValue' ) {
|
||||
if(row.lineId==null){
|
||||
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 不是一个有效数组')
|
||||
}
|
||||
}
|
||||
const dialogFlag=ref(false)
|
||||
// 谐波弹窗关闭时的回调
|
||||
const onHarmonicRatioClose = () => {
|
||||
dialogFlag.value = false
|
||||
// 重新打开指标越限详情弹窗
|
||||
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
|
||||
@@ -93,15 +93,7 @@ const tableStore: any = new TableStore({
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(%)',
|
||||
children: loop50('uharm')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(%)',
|
||||
children: loop50('iharm')
|
||||
},
|
||||
{
|
||||
{
|
||||
title: '电压偏差越限(%)',
|
||||
field: 'voltageDevOvertime',
|
||||
width: '100',
|
||||
@@ -119,6 +111,15 @@ const tableStore: any = new TableStore({
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(%)',
|
||||
children: loop50('uharm')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(%)',
|
||||
children: loop50('iharm')
|
||||
},
|
||||
|
||||
|
||||
// {
|
||||
// title: '频率偏差越限(%)',
|
||||
|
||||
@@ -186,7 +186,7 @@ const initProbabilityData = () => {
|
||||
var tips = ''
|
||||
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
||||
tips += '越限程度: ' + params.seriesName + '</br>'
|
||||
tips += '越限次数: ' + params.value[2] + '</br>'
|
||||
tips += '越限天数: ' + params.value[2] + '</br>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
@@ -228,7 +228,7 @@ const initProbabilityData = () => {
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
name: '越限次数',
|
||||
name: '越限天数',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 30,
|
||||
minInterval: 10
|
||||
|
||||
@@ -185,7 +185,7 @@ const initProbabilityData = () => {
|
||||
var tips = ''
|
||||
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
||||
tips += '越限程度: ' + params.seriesName + '</br>'
|
||||
tips += '越限次数: ' + params.value[2] + '</br>'
|
||||
tips += '越限天数: ' + params.value[2] + '</br>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
@@ -227,7 +227,7 @@ const initProbabilityData = () => {
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
name: '越限次数',
|
||||
name: '越限天数',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 30,
|
||||
minInterval: 10
|
||||
|
||||
@@ -93,15 +93,7 @@ const tableStore: any = new TableStore({
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('uharm')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('iharm')
|
||||
}, {
|
||||
}, {
|
||||
title: '电压偏差越限(分钟)',
|
||||
field: 'uaberranceOvertime',
|
||||
width: '100',
|
||||
@@ -119,6 +111,14 @@ const tableStore: any = new TableStore({
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('uharm')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('iharm')
|
||||
},
|
||||
|
||||
// {
|
||||
// title: '频率偏差越限(分钟)',
|
||||
|
||||
@@ -73,15 +73,7 @@ const tableStore: any = new TableStore({
|
||||
field: 'flicker',
|
||||
width: '80'
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('voltage')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('harmonicCurrent')
|
||||
},
|
||||
{
|
||||
{
|
||||
title: '三相不平衡度越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
@@ -95,7 +87,16 @@ const tableStore: any = new TableStore({
|
||||
title: '频率偏差越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('voltage')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('harmonicCurrent')
|
||||
},
|
||||
|
||||
],
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {
|
||||
|
||||
@@ -92,15 +92,7 @@ const tableStore: any = new TableStore({
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('voltage')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('harmonicCurrent')
|
||||
},
|
||||
{
|
||||
{
|
||||
title: '三相不平衡度越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
@@ -114,7 +106,16 @@ const tableStore: any = new TableStore({
|
||||
title: '频率偏差越限(分钟)',
|
||||
field: 'flicker',
|
||||
width: '100'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(分钟)',
|
||||
children: loop50('voltage')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(分钟)',
|
||||
children: loop50('harmonicCurrent')
|
||||
},
|
||||
|
||||
],
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {
|
||||
|
||||
@@ -93,15 +93,7 @@ const tableStore: any = new TableStore({
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(%)',
|
||||
children: loop50('uharm')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(%)',
|
||||
children: loop50('iharm')
|
||||
},
|
||||
{
|
||||
{
|
||||
title: '电压偏差越限(%)',
|
||||
field: 'voltageDevOvertime',
|
||||
width: '100',
|
||||
@@ -119,6 +111,15 @@ const tableStore: any = new TableStore({
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(%)',
|
||||
children: loop50('uharm')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(%)',
|
||||
children: loop50('iharm')
|
||||
},
|
||||
|
||||
|
||||
// {
|
||||
// title: '频率偏差越限(%)',
|
||||
|
||||
@@ -5,10 +5,22 @@
|
||||
ref="TableHeaderRef"
|
||||
:showReset="false"
|
||||
@selectChange="selectChange"
|
||||
|
||||
v-if="fullscreen"
|
||||
: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
|
||||
ref="tableRef"
|
||||
@cell-click="cellClickEvent"
|
||||
@@ -189,7 +201,7 @@ const tableStore: any = new TableStore({
|
||||
field: 'volGrade',
|
||||
minWidth: '80',
|
||||
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,
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
@@ -294,6 +307,7 @@ const tableStore: any = new TableStore({
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.keywords = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const setTime = () => {
|
||||
@@ -304,7 +318,6 @@ const setTime = () => {
|
||||
// ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||
// : prop.timeValue
|
||||
// )
|
||||
|
||||
// if (Array.isArray(time)) {
|
||||
// tableStore.table.params.searchBeginTime = time[0]
|
||||
// tableStore.table.params.searchEndTime = time[1]
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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>
|
||||
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
||||
@@ -7,7 +7,7 @@
|
||||
<el-form-item>
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计指标" label-width="80px">
|
||||
<el-form-item label="统计指标" label-width="80px" v-if="props.showIndex">
|
||||
<el-select
|
||||
multiple
|
||||
:multiple-limit="2"
|
||||
@@ -107,9 +107,14 @@ defineOptions({
|
||||
const props = defineProps({
|
||||
TrendList: {
|
||||
type: Array
|
||||
},
|
||||
showIndex:{
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
const titles = ref('趋势图')
|
||||
const dialogVisible: any = ref(false)
|
||||
// console.log("🚀 ~ props:", props.TrendList)
|
||||
const showEchart = ref(true)
|
||||
@@ -268,6 +273,7 @@ const lineStyle = [{ type: 'solid' }, { type: 'dashed' }, { type: 'dotted' }]
|
||||
const init = async () => {
|
||||
loading.value = true
|
||||
// 选择指标的时候切换legend内容和data数据
|
||||
echartsData.value = {}
|
||||
let list: any = []
|
||||
legendDictList.value?.selectedList?.map((item: any) => {
|
||||
searchForm.value.index.map((vv: any) => {
|
||||
@@ -407,6 +413,7 @@ const setEchart = () => {
|
||||
formatter(params: any) {
|
||||
const xname = params[0].value[0]
|
||||
let str = `${xname}<br>`
|
||||
|
||||
params.forEach((el: any, index: any) => {
|
||||
let marker = ''
|
||||
|
||||
@@ -651,6 +658,7 @@ watch(
|
||||
)
|
||||
|
||||
const openDialog = async (row: any, field: any, title: any) => {
|
||||
titles.value = `${row?.lineName ? `${row.lineName}_` : ''}趋势图`
|
||||
dialogVisible.value = true
|
||||
trendRequestData.value = row
|
||||
|
||||
|
||||
@@ -92,14 +92,6 @@ const tableStore: any = new TableStore({
|
||||
customTemplate: (row: any) => {
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(%)',
|
||||
children: loop50('uharm')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(%)',
|
||||
children: loop50('iharm')
|
||||
},
|
||||
{
|
||||
title: '电压偏差越限(%)',
|
||||
@@ -119,6 +111,15 @@ const tableStore: any = new TableStore({
|
||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '谐波电压越限(%)',
|
||||
children: loop50('uharm')
|
||||
},
|
||||
{
|
||||
title: '谐波电流越限(%)',
|
||||
children: loop50('iharm')
|
||||
},
|
||||
|
||||
|
||||
// {
|
||||
// title: '频率偏差越限(%)',
|
||||
|
||||
@@ -5,10 +5,22 @@
|
||||
ref="TableHeaderRef"
|
||||
:showReset="false"
|
||||
@selectChange="selectChange"
|
||||
|
||||
v-if="fullscreen"
|
||||
: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
|
||||
ref="tableRef"
|
||||
@cell-click="cellClickEvent"
|
||||
@@ -66,7 +78,7 @@ const fullscreen = computed(() => {
|
||||
|
||||
const OverLimitDetailsRef = ref()
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/cs-harmonic-boot/pqSensitiveUser/getList',
|
||||
url: '/cs-harmonic-boot/pqSensitiveUser/getListByUser',
|
||||
method: 'POST',
|
||||
showPage: fullscreen.value ? true : false,
|
||||
column: [
|
||||
@@ -115,7 +127,7 @@ const tableStore: any = new TableStore({
|
||||
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
tableStore.table.params.searchValue = ''
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
@@ -137,7 +149,6 @@ const setTime = () => {
|
||||
// ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||
// : prop.timeValue
|
||||
// )
|
||||
|
||||
// if (Array.isArray(time)) {
|
||||
// tableStore.table.params.searchBeginTime = time[0]
|
||||
// tableStore.table.params.searchEndTime = time[1]
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
|
||||
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="监测点">
|
||||
<el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称">
|
||||
<el-form-item label="监测点" v-if="props.showLine">
|
||||
<el-select v-model="tableStore.table.params.lineId" filterable placeholder="请选择监测点名称">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@@ -14,6 +14,21 @@
|
||||
/>
|
||||
</el-select>
|
||||
</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>
|
||||
</TableHeader>
|
||||
<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 { analyseWave } from '@/api/common'
|
||||
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 waveFormAnalysisRef: any = ref(null)
|
||||
@@ -62,7 +84,11 @@ const heightRef = ref(mainHeight(168, 2.1).height)
|
||||
const selectChange = (flag: boolean, h: any) => {
|
||||
heightRef.value = mainHeight(h, 2.1).height
|
||||
}
|
||||
|
||||
const eventList = [
|
||||
{ label: '电压暂降', value: '1' },
|
||||
{ label: '电压中断', value: '2' },
|
||||
{ label: '电压暂升', value: '3' }
|
||||
]
|
||||
const getSimpleLineList = async () => {
|
||||
const res = await getSimpleLine()
|
||||
options.value = res.data
|
||||
@@ -200,9 +226,10 @@ const tableStore: any = new TableStore({
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
tableStore.table.params.eventType = ''
|
||||
provide('tableStore', tableStore)
|
||||
const open = async (time: any) => {
|
||||
tableStore.table.params.eventType = ''
|
||||
dialogVisible.value = true
|
||||
getSimpleLineList()
|
||||
tableStore.table.params.lineId = ''
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
:timeKeyList="prop.timeKey"
|
||||
:timeKeyList="prop.timeKey"
|
||||
></TableHeader>
|
||||
<el-calendar
|
||||
v-model="value"
|
||||
@@ -58,7 +58,7 @@
|
||||
</template>
|
||||
</el-calendar>
|
||||
<!-- 暂态事件列表 -->
|
||||
<TransientList ref="transientListRef" />
|
||||
<TransientList ref="transientListRef" :showLine="false" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -74,7 +74,7 @@ const prop = defineProps({
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: Array as () => string[] },
|
||||
timeKey: { type: Array as () => string[] },
|
||||
timeValue: { type: Object },
|
||||
interval: { type: Number }
|
||||
})
|
||||
|
||||
@@ -14,6 +14,21 @@
|
||||
/>
|
||||
</el-select>
|
||||
</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>
|
||||
</TableHeader>
|
||||
<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) => {
|
||||
heightRef.value = mainHeight(h, 2.2).height
|
||||
}
|
||||
|
||||
const eventList = [
|
||||
{ label: '电压暂降', value: '1' },
|
||||
{ label: '电压中断', value: '2' },
|
||||
{ label: '电压暂升', value: '3' }
|
||||
]
|
||||
const getSimpleLineList = async () => {
|
||||
const res = await getSimpleLine()
|
||||
options.value = res.data
|
||||
@@ -201,9 +220,10 @@ const tableStore: any = new TableStore({
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
|
||||
tableStore.table.params.eventType = ''
|
||||
provide('tableStore', tableStore)
|
||||
const open = async (row: any, searchBeginTime: any, searchEndTime: any) => {
|
||||
tableStore.table.params.eventType = ''
|
||||
dialogVisible.value = true
|
||||
getSimpleLineList()
|
||||
tableStore.table.params.lineId = row.id
|
||||
|
||||
@@ -106,13 +106,15 @@ const initChart = () => {
|
||||
start: 0,
|
||||
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
end: 100,
|
||||
filterMode: 'none'
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
end: 100,
|
||||
filterMode: 'none'
|
||||
}
|
||||
// {
|
||||
// show: true,
|
||||
|
||||
@@ -748,8 +748,10 @@ const initWave = (
|
||||
rotation: 0,
|
||||
y: -10
|
||||
},
|
||||
max: rmscm[0]?.[1] * 1.06 || 0,
|
||||
min: rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0,
|
||||
// max: rmscm[0]?.[1] * 1.06 || 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%'],
|
||||
showLastLabel: true,
|
||||
opposite: false,
|
||||
@@ -780,11 +782,11 @@ const initWave = (
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
left: '60px',
|
||||
right: '45px',
|
||||
bottom: '40px',
|
||||
top: '60px',
|
||||
containLabel: true
|
||||
top: '60px'
|
||||
// containLabel: true
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
@@ -1077,6 +1079,8 @@ const drawPics = (
|
||||
boundaryGap: [0, '100%'],
|
||||
showLastLabel: true,
|
||||
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: {
|
||||
fontSize: '12px',
|
||||
color: props.DColor ? '#000' : echartsColor.WordColor
|
||||
@@ -1105,11 +1109,11 @@ const drawPics = (
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
left: '60px',
|
||||
right: '45px',
|
||||
bottom: '40px',
|
||||
top: '60px',
|
||||
containLabel: true
|
||||
top: '60px'
|
||||
// containLabel: true
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
|
||||
@@ -481,8 +481,10 @@ const initWave = (
|
||||
},
|
||||
boundaryGap: [0, '100%'],
|
||||
showLastLabel: true,
|
||||
max: max.toFixed(2) * 1.1,
|
||||
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.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,
|
||||
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,
|
||||
nameTextStyle: {
|
||||
fontSize: '12px',
|
||||
@@ -512,11 +514,11 @@ const initWave = (
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
left: '60px',
|
||||
right: '45px',
|
||||
bottom: '40px',
|
||||
top: '60px',
|
||||
containLabel: true
|
||||
top: '60px'
|
||||
// containLabel: true
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
@@ -789,8 +791,8 @@ const drawPics = (
|
||||
},
|
||||
boundaryGap: [0, '100%'],
|
||||
showLastLabel: true,
|
||||
max: max.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,
|
||||
nameTextStyle: {
|
||||
fontSize: '12px',
|
||||
@@ -820,11 +822,11 @@ const drawPics = (
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
left: '60px',
|
||||
right: '45px',
|
||||
bottom: '40px',
|
||||
top: '60px',
|
||||
containLabel: true
|
||||
top: '60px'
|
||||
// containLabel: true
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
|
||||
@@ -1,35 +1,36 @@
|
||||
<template>
|
||||
<div class="mac-address-input" :class="{ disabled: disabled }">
|
||||
<el-input
|
||||
ref="inputRef"
|
||||
v-model="macValue"
|
||||
type="text"
|
||||
maxlength="17"
|
||||
:disabled="disabled"
|
||||
@input="handleInput"
|
||||
@keydown="handleKeydown"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@paste="handlePaste"
|
||||
/>
|
||||
</div>
|
||||
<div class="mac-address-input" :class="{ disabled: disabled }">
|
||||
<el-input
|
||||
ref="inputRef"
|
||||
placeholder="请输入设备mac地址"
|
||||
v-model="macValue"
|
||||
type="text"
|
||||
maxlength="17"
|
||||
:disabled="disabled"
|
||||
@input="handleInput"
|
||||
@keydown="handleKeydown"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@paste="handlePaste"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue?: string
|
||||
disabled?: boolean
|
||||
modelValue?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: '',
|
||||
disabled: false
|
||||
modelValue: '',
|
||||
disabled: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
@@ -42,35 +43,35 @@ const macValue = ref<string>('')
|
||||
|
||||
// 解析传入的MAC地址
|
||||
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个字符分割并用冒号连接
|
||||
let result = ''
|
||||
for (let i = 0; i < cleanMac.length; i += 2) {
|
||||
if (i > 0) result += ':'
|
||||
result += cleanMac.substr(i, 2)
|
||||
}
|
||||
return result.substring(0, 17) // 最多17个字符 (12个数字+5个冒号)
|
||||
// 按每2个字符分割并用冒号连接
|
||||
let result = ''
|
||||
for (let i = 0; i < cleanMac.length; i += 2) {
|
||||
if (i > 0) result += ':'
|
||||
result += cleanMac.substr(i, 2)
|
||||
}
|
||||
return result.substring(0, 17) // 最多17个字符 (12个数字+5个冒号)
|
||||
}
|
||||
|
||||
// 格式化MAC地址 - 改进版
|
||||
const formatMac = (value: string): string => {
|
||||
// 移除所有冒号
|
||||
const cleanValue = value.replace(/:/g, '')
|
||||
// 只保留十六进制字符并转为大写
|
||||
const hexOnly = cleanValue.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||
// 移除所有冒号
|
||||
const cleanValue = value.replace(/:/g, '')
|
||||
// 只保留十六进制字符并转为大写
|
||||
const hexOnly = cleanValue.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||
|
||||
// 按每两个字符添加冒号,最多6段
|
||||
let formatted = ''
|
||||
for (let i = 0; i < Math.min(hexOnly.length, 12); i += 2) {
|
||||
if (i > 0) formatted += ':'
|
||||
formatted += hexOnly.substr(i, 2)
|
||||
}
|
||||
// 按每两个字符添加冒号,最多6段
|
||||
let formatted = ''
|
||||
for (let i = 0; i < Math.min(hexOnly.length, 12); i += 2) {
|
||||
if (i > 0) formatted += ':'
|
||||
formatted += hexOnly.substr(i, 2)
|
||||
}
|
||||
|
||||
return formatted
|
||||
return formatted
|
||||
}
|
||||
|
||||
// 当前聚焦的输入框索引
|
||||
@@ -78,88 +79,86 @@ const focusedIndex = ref<number | null>(null)
|
||||
|
||||
// 处理输入事件
|
||||
const handleInput = (value: string) => {
|
||||
const formatted = formatMac(value)
|
||||
macValue.value = formatted
|
||||
// 发出不带冒号的纯净值
|
||||
emit('update:modelValue', formatted.replace(/:/g, ''))
|
||||
const formatted = formatMac(value)
|
||||
macValue.value = formatted
|
||||
// 发出不带冒号的纯净值
|
||||
emit('update:modelValue', formatted.replace(/:/g, ''))
|
||||
}
|
||||
|
||||
// 处理键盘事件
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const target = event.target as HTMLInputElement
|
||||
|
||||
// 处理退格键
|
||||
if (event.key === 'Backspace') {
|
||||
// 处理在冒号前删除的情况
|
||||
const cursorPos = target.selectionStart || 0
|
||||
if (cursorPos > 0 && macValue.value[cursorPos - 1] === ':' &&
|
||||
target.selectionStart === target.selectionEnd) {
|
||||
event.preventDefault()
|
||||
// 删除冒号前的两个字符
|
||||
const newValue = macValue.value.substring(0, cursorPos - 3) +
|
||||
macValue.value.substring(cursorPos)
|
||||
macValue.value = newValue
|
||||
// 设置光标位置
|
||||
setTimeout(() => {
|
||||
if (target.setSelectionRange) {
|
||||
target.setSelectionRange(cursorPos - 3, cursorPos - 3)
|
||||
// 处理退格键
|
||||
if (event.key === 'Backspace') {
|
||||
// 处理在冒号前删除的情况
|
||||
const cursorPos = target.selectionStart || 0
|
||||
if (cursorPos > 0 && macValue.value[cursorPos - 1] === ':' && target.selectionStart === target.selectionEnd) {
|
||||
event.preventDefault()
|
||||
// 删除冒号前的两个字符
|
||||
const newValue = macValue.value.substring(0, cursorPos - 3) + macValue.value.substring(cursorPos)
|
||||
macValue.value = newValue
|
||||
// 设置光标位置
|
||||
setTimeout(() => {
|
||||
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 = () => {
|
||||
focusedIndex.value = 0
|
||||
focusedIndex.value = 0
|
||||
}
|
||||
|
||||
// 处理失焦事件
|
||||
const handleBlur = () => {
|
||||
focusedIndex.value = null
|
||||
focusedIndex.value = null
|
||||
}
|
||||
|
||||
// 处理粘贴事件
|
||||
const handlePaste = (event: ClipboardEvent) => {
|
||||
event.preventDefault()
|
||||
const pastedText = event.clipboardData?.getData('text') || ''
|
||||
event.preventDefault()
|
||||
const pastedText = event.clipboardData?.getData('text') || ''
|
||||
|
||||
// 清理粘贴的文本
|
||||
const cleanPastedText = pastedText.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||
const formatted = formatMac(cleanPastedText)
|
||||
macValue.value = formatted
|
||||
emit('update:modelValue', formatted.replace(/:/g, ''))
|
||||
// 清理粘贴的文本
|
||||
const cleanPastedText = pastedText.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||
const formatted = formatMac(cleanPastedText)
|
||||
macValue.value = formatted
|
||||
emit('update:modelValue', formatted.replace(/:/g, ''))
|
||||
}
|
||||
|
||||
// 监听modelValue变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
const cleanNewVal = (newVal || '').replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||
const currentCleanValue = macValue.value.replace(/:/g, '')
|
||||
() => props.modelValue,
|
||||
newVal => {
|
||||
const cleanNewVal = (newVal || '').replace(/[^0-9a-fA-F]/g, '').toUpperCase()
|
||||
const currentCleanValue = macValue.value.replace(/:/g, '')
|
||||
|
||||
if (cleanNewVal !== currentCleanValue) {
|
||||
macValue.value = parseMacAddress(cleanNewVal)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
if (cleanNewVal !== currentCleanValue) {
|
||||
macValue.value = parseMacAddress(cleanNewVal)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mac-address-input {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
input {
|
||||
text-transform: uppercase;
|
||||
font-family: inherit; // 使用继承的字体而不是等宽字体
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
input {
|
||||
text-transform: uppercase;
|
||||
font-family: inherit; // 使用继承的字体而不是等宽字体
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,7 +14,7 @@
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
style='cursor: pointer' />
|
||||
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
||||
<div style='display: flex; align-items: center' class='mb10'>
|
||||
<el-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||||
<el-input maxlength="32" v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||||
<template #prefix>
|
||||
<Icon name='el-icon-Search' style='font-size: 16px' />
|
||||
</template>
|
||||
|
||||
@@ -13,18 +13,29 @@
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<!-- <el-form-item> -->
|
||||
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="filterText"
|
||||
autocomplete="off"
|
||||
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>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<!-- </el-form-item> -->
|
||||
<Icon
|
||||
@click="onMenuCollapse"
|
||||
@@ -42,6 +53,8 @@
|
||||
v-model.trim="activeName"
|
||||
style="flex: 1; height: 100%"
|
||||
@change="changeDevice"
|
||||
v-if="treeType == '1'"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
||||
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
|
||||
@@ -52,7 +65,7 @@
|
||||
<el-tree
|
||||
:style="{
|
||||
height:
|
||||
bxsDeviceData.length != 0
|
||||
treeType.length != 0
|
||||
? `calc(100vh - 380px - ${props.height}px)`
|
||||
: 'calc(100vh - 278px)'
|
||||
}"
|
||||
@@ -142,6 +155,32 @@
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
</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>
|
||||
</template>
|
||||
@@ -154,13 +193,14 @@ import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
const emit = defineEmits(['changeDeviceType'])
|
||||
const emit = defineEmits(['changeDeviceType', 'changeTreeType'])
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
type?: string
|
||||
data?: any
|
||||
height?: number
|
||||
engineering: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@@ -168,8 +208,20 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
canExpand: true,
|
||||
type: '',
|
||||
data: [],
|
||||
height: 0
|
||||
height: 0,
|
||||
engineering: false
|
||||
})
|
||||
const treeType = ref('1')
|
||||
const options = [
|
||||
{
|
||||
label: '设备',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '工程',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const activeName = ref('0')
|
||||
@@ -219,7 +271,9 @@ watch(
|
||||
)
|
||||
|
||||
watch(filterText, val => {
|
||||
if (activeName.value == '0') {
|
||||
if (treeType.value == '2') {
|
||||
treeRef4.value!.filter(val)
|
||||
} else if (activeName.value == '0') {
|
||||
treeRef1.value!.filter(val)
|
||||
} else if (activeName.value == '1') {
|
||||
treeRef2.value!.filter(val)
|
||||
@@ -362,27 +416,44 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef2 = 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(() => {
|
||||
treeType.value = props.engineering ? '2' : '1'
|
||||
setTimeout(() => {
|
||||
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)
|
||||
})
|
||||
setActiveName()
|
||||
}, 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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -412,4 +483,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.el-input-group__prepend) {
|
||||
background-color: var(--el-fill-color-blank);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,19 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, onMounted, defineProps } from '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 { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
@@ -22,136 +30,61 @@ defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy','onAdd'])
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const width = ref('')
|
||||
|
||||
|
||||
const info = (selectedNodeId?: string) => {
|
||||
tree.value = []
|
||||
let arr1: any[] = []
|
||||
getCldTree().then(res => {
|
||||
try {
|
||||
// 检查响应数据结构
|
||||
let rootData = null;
|
||||
if (Array.isArray(res.data)) {
|
||||
// 旧的数据结构 - 数组
|
||||
rootData = res.data.find((item: any) => item.name == '监测设备');
|
||||
} else if (res.data && res.data.name == '监测设备') {
|
||||
// 新的数据结构 - 单个对象
|
||||
rootData = res.data;
|
||||
}
|
||||
|
||||
// 治理设备
|
||||
if (rootData) {
|
||||
rootData.icon = 'el-icon-Menu'
|
||||
rootData.level = 0
|
||||
rootData.color = config.getColorVal('elementUiPrimary')
|
||||
// 确保根节点的 children 是数组
|
||||
if (!Array.isArray(rootData.children)) {
|
||||
rootData.children = []
|
||||
}
|
||||
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)
|
||||
})
|
||||
})
|
||||
res.data.icon = 'el-icon-Menu'
|
||||
res.data.color = config.getColorVal('elementUiPrimary')
|
||||
res.data?.children.map((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-List'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
// item2.icon = 'el-icon-List'
|
||||
// item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.level = 2
|
||||
item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color =
|
||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
arr1.push(item3)
|
||||
})
|
||||
})
|
||||
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) => {
|
||||
emit('pointTypeChange', val, obj)
|
||||
// emit('pointTypeChange', val, obj)
|
||||
}
|
||||
|
||||
const onAdd = () => {
|
||||
|
||||
@@ -1,11 +1,19 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, onMounted, defineProps } from '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 { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
@@ -22,27 +30,26 @@ defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy','onAdd'])
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const width = ref('')
|
||||
|
||||
|
||||
const info = (selectedNodeId?: string) => {
|
||||
tree.value = []
|
||||
let arr1: any[] = []
|
||||
lineTree().then(res => {
|
||||
try {
|
||||
// 检查响应数据结构
|
||||
let rootData = null;
|
||||
let rootData = null
|
||||
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 == '监测设备') {
|
||||
// 新的数据结构 - 单个对象
|
||||
rootData = res.data;
|
||||
rootData = res.data
|
||||
}
|
||||
|
||||
// 治理设备
|
||||
@@ -97,50 +104,51 @@ const info = (selectedNodeId?: string) => {
|
||||
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)
|
||||
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);
|
||||
console.log('selectedNodeId:', selectedNodeId)
|
||||
if (selectedNodeId) {
|
||||
treRef.value.treeRef.setCurrentKey(selectedNodeId);
|
||||
treRef.value.treeRef.setCurrentKey(selectedNodeId)
|
||||
// 查找对应的节点数据并触发事件
|
||||
let selectedNode = null;
|
||||
let selectedNode = null
|
||||
const findNode = (nodes: any[]) => {
|
||||
for (const node of nodes) {
|
||||
if (node.id === selectedNodeId) {
|
||||
selectedNode = node;
|
||||
return true;
|
||||
selectedNode = node
|
||||
return true
|
||||
}
|
||||
if (node.children && findNode(node.children)) {
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
return false
|
||||
}
|
||||
|
||||
findNode(tree.value);
|
||||
findNode(tree.value)
|
||||
|
||||
if (selectedNode) {
|
||||
emit('init', {
|
||||
level: selectedNode.level,
|
||||
...selectedNode
|
||||
});
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 初始化选中第一个节点
|
||||
treRef.value.treeRef.setCurrentKey(arr1[0].id);
|
||||
treRef.value.treeRef.setCurrentKey(arr1[0].id)
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr1[0]
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
@@ -149,7 +157,6 @@ const info = (selectedNodeId?: string) => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const changePointType = (val: any, obj: any) => {
|
||||
emit('pointTypeChange', val, obj)
|
||||
}
|
||||
@@ -158,7 +165,8 @@ const onAdd = () => {
|
||||
emit('onAdd')
|
||||
}
|
||||
if (props.template) {
|
||||
querySysExcel({ id: dictData.state.area[0]?.id })
|
||||
// id: dictData.state.area[0]?.id
|
||||
querySysExcel({})
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
:data="tree"
|
||||
:height="props.height"
|
||||
@changeDeviceType="changeDeviceType"
|
||||
@changeTreeType="info"
|
||||
:engineering="props.engineering"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -16,6 +18,7 @@ import Tree from '../device.vue'
|
||||
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { throttle } from 'lodash'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
@@ -24,11 +27,13 @@ const props = withDefaults(
|
||||
showCheckbox?: boolean
|
||||
defaultCheckedKeys?: any
|
||||
height?: number
|
||||
engineering?: boolean
|
||||
}>(),
|
||||
{
|
||||
showCheckbox: false,
|
||||
defaultCheckedKeys: [],
|
||||
height: 0
|
||||
height: 0,
|
||||
engineering: false
|
||||
}
|
||||
)
|
||||
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
|
||||
@@ -38,112 +43,149 @@ const treRef = ref()
|
||||
const changeDeviceType = (val: any, obj: any) => {
|
||||
emit('deviceTypeChange', val, obj)
|
||||
}
|
||||
getDeviceTree().then(res => {
|
||||
let arr: any[] = []
|
||||
let arr2: any[] = []
|
||||
let arr3: any[] = []
|
||||
//治理设备
|
||||
res.data.map((item: any) => {
|
||||
if (item.name == '治理设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
|
||||
const info = (type?: string) => {
|
||||
getDeviceTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
|
||||
let arr: any[] = []
|
||||
let arr2: any[] = []
|
||||
let arr3: any[] = []
|
||||
let arr4: any[] = []
|
||||
//治理设备
|
||||
res.data.map((item: any) => {
|
||||
if (type == '2') {
|
||||
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)
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-List'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.color =
|
||||
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
arr4.push(item2)
|
||||
})
|
||||
})
|
||||
})
|
||||
} 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 {
|
||||
emit('init')
|
||||
return
|
||||
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.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(
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -27,80 +34,128 @@ const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const width = ref('')
|
||||
|
||||
const info = () => {
|
||||
const info = (type?: string) => {
|
||||
tree.value = []
|
||||
let arr1: any[] = []
|
||||
let arr2: any[] = []
|
||||
let arr3: any[] = []
|
||||
getLineTree().then(res => {
|
||||
let arr4: any[] = []
|
||||
getLineTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
|
||||
//治理设备
|
||||
|
||||
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.icon = 'el-icon-HomeFilled'
|
||||
item.level = 1
|
||||
item.icon = 'el-icon-List'
|
||||
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-List'
|
||||
// item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.level = 2
|
||||
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)
|
||||
})
|
||||
arr4.push(item3)
|
||||
// item3.children.forEach((item4: any) => {
|
||||
// item4.icon = 'el-icon-Platform'
|
||||
// item4.color =
|
||||
// item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
|
||||
// })
|
||||
})
|
||||
})
|
||||
})
|
||||
} 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
|
||||
|
||||
nextTick(() => {
|
||||
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)
|
||||
// 注册父组件事件
|
||||
@@ -119,7 +174,6 @@ const info = () => {
|
||||
})
|
||||
return
|
||||
} else if (arr3.length > 0) {
|
||||
|
||||
treRef.value?.treeRef3?.setCurrentKey(arr3[0].id)
|
||||
emit('init', {
|
||||
level: 2,
|
||||
@@ -138,7 +192,8 @@ const changePointType = (val: any, obj: any) => {
|
||||
emit('pointTypeChange', val, obj)
|
||||
}
|
||||
if (props.template) {
|
||||
querySysExcel({ id: dictData.state.area[0]?.id })
|
||||
// id: dictData.state.area[0]?.id
|
||||
querySysExcel({})
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
|
||||
@@ -3,13 +3,7 @@
|
||||
<div style="transition: all 0.3s; overflow: hidden; height: 100%">
|
||||
<div class="cn-tree">
|
||||
<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>
|
||||
@@ -37,7 +31,7 @@
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 5px;">{{ node.label }}</span>
|
||||
<span style="margin-left: 5px">{{ node.label }}</span>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
@@ -157,7 +151,8 @@ const clickNode = (e: anyObj) => {
|
||||
}
|
||||
|
||||
if (props.template) {
|
||||
querySysExcel({ id: dictData.state.area[0]?.id })
|
||||
// id: dictData.state.area[0]?.id
|
||||
querySysExcel({})
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
getTreeList()
|
||||
|
||||
@@ -1,41 +1,61 @@
|
||||
<template>
|
||||
<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'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 mt20 menu-collapse'
|
||||
style='cursor: pointer' />
|
||||
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
||||
<div style='display: flex; align-items: center' class='mb10'>
|
||||
<el-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||||
<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'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prefix>
|
||||
<Icon name='el-icon-Search' style='font-size: 16px' />
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
|
||||
<template #content>
|
||||
<span>台账推送</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<span>台账推送</span>
|
||||
</template>
|
||||
|
||||
<Icon
|
||||
<Icon
|
||||
name="el-icon-Promotion"
|
||||
size="20"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer;"
|
||||
class="fold ml10 mr10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
:style="{ color: config.getColorVal('elementUiPrimary') }"
|
||||
@click="onAdd" />
|
||||
@click="onAdd"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
|
||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
|
||||
style='cursor: pointer' v-if='props.canExpand' /> -->
|
||||
</div>
|
||||
|
||||
<el-tree :style="{ height: 'calc(100vh - 190px)' }"
|
||||
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
|
||||
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
|
||||
<template #default='{ node, data }'>
|
||||
<span class='custom-tree-node'>
|
||||
<Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
|
||||
v-if='data.icon' />
|
||||
<span style='margin-left: 4px'>{{ node.label }}</span>
|
||||
<el-tree
|
||||
:style="{ height: 'calc(100vh - 190px)' }"
|
||||
style="overflow: auto"
|
||||
ref="treeRef"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:default-expand-all="false"
|
||||
@check-change="checkTreeNodeChange"
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
@@ -43,12 +63,10 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { emit } from 'process';
|
||||
import { ref, watch } from 'vue'
|
||||
import { t } from 'vxe-table';
|
||||
import { useConfig } from '@/stores/config'
|
||||
|
||||
defineOptions({
|
||||
@@ -74,7 +92,7 @@ const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const emit = defineEmits(['checkTreeNodeChange','onAdd'])
|
||||
const emit = defineEmits(['checkTreeNodeChange', 'onAdd'])
|
||||
watch(filterText, val => {
|
||||
treeRef.value!.filter(val)
|
||||
})
|
||||
@@ -83,18 +101,16 @@ const onMenuCollapse = () => {
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
console.log(value, data, node, 'filterNode');
|
||||
console.log(value, data, node, 'filterNode')
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
@@ -132,13 +148,13 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
// padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
|
||||
@@ -13,11 +13,27 @@
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
||||
<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>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- -->
|
||||
<Icon
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
@@ -34,6 +50,8 @@
|
||||
v-model.trim="activeName"
|
||||
style="flex: 1; height: 100%"
|
||||
@change="changeDevice"
|
||||
v-if="treeType == '1'"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
||||
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
|
||||
@@ -43,7 +61,7 @@
|
||||
</el-select>
|
||||
|
||||
<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"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
@@ -120,6 +138,33 @@
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
</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>
|
||||
</template>
|
||||
@@ -133,7 +178,7 @@ import { useRoute } from 'vue-router'
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
const emit = defineEmits(['changePointType'])
|
||||
const emit = defineEmits(['changePointType', 'changeTreeType'])
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
@@ -157,6 +202,17 @@ const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const treeType = ref('1')
|
||||
const options = [
|
||||
{
|
||||
label: '设备',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '工程',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
//治理设备数据
|
||||
const zlDeviceData = ref<any>([])
|
||||
const zlDevList = ref<any>([])
|
||||
@@ -196,7 +252,9 @@ watch(
|
||||
)
|
||||
|
||||
watch(filterText, val => {
|
||||
if (activeName.value == '0') {
|
||||
if (treeType.value == '2') {
|
||||
treeRef4.value!.filter(val)
|
||||
} else if (activeName.value == '0') {
|
||||
treeRef1.value!.filter(val)
|
||||
} else if (activeName.value == '1') {
|
||||
treeRef2.value!.filter(val)
|
||||
@@ -217,8 +275,6 @@ watch(process, val => {
|
||||
})
|
||||
|
||||
const changeDevice = (val: any) => {
|
||||
console.log('🚀 ~ changeDevice ~ val:', val)
|
||||
|
||||
let arr1: any = []
|
||||
//zlDeviceData
|
||||
zlDevList.value.forEach((item: any) => {
|
||||
@@ -299,7 +355,7 @@ function filterProcess(nodes: any) {
|
||||
// 递归处理子节点
|
||||
const children = node.children ? filterProcess(node.children) : []
|
||||
|
||||
// 对于装置层级(level=2),只保留 process 值匹配的节点
|
||||
// 对于设备层级(level=2),只保留 process 值匹配的节点
|
||||
if (node.level === 2) {
|
||||
if (node.process == process.value) {
|
||||
return {
|
||||
@@ -381,27 +437,43 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef2 = 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(() => {
|
||||
setTimeout(() => {
|
||||
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)
|
||||
})
|
||||
setActiveName()
|
||||
}, 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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -432,4 +504,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.el-input-group__prepend) {
|
||||
background-color: var(--el-fill-color-blank);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
style='cursor: pointer' />
|
||||
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
||||
<div style='display: flex; align-items: center' class='mb10'>
|
||||
<el-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||||
<el-input maxlength="32" v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||||
<template #prefix>
|
||||
<Icon name='el-icon-Search' style='font-size: 16px' />
|
||||
</template>
|
||||
|
||||
@@ -35,6 +35,15 @@ export const adminBaseRoute = {
|
||||
title: pageTitle('router.supplementaryRecruitment')
|
||||
}
|
||||
},
|
||||
{
|
||||
// 在线补召
|
||||
path: '/versionMaintenance',
|
||||
name: 'versionMaintenance',
|
||||
component: () => import('@/views/govern/manage/programVersion/comp/versionMaintenance.vue'),
|
||||
meta: {
|
||||
title: pageTitle('router.versionMaintenance')
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'cockpit',
|
||||
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 router from '@/router/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
window.requests = []
|
||||
window.tokenRefreshing = false
|
||||
let loginExpireTimer: any = null
|
||||
@@ -13,7 +13,7 @@ const loadingInstance: LoadingInstance = {
|
||||
target: null,
|
||||
count: 0
|
||||
}
|
||||
|
||||
const navTabs = useNavTabs()
|
||||
/**
|
||||
* 根据运行环境获取基础请求URL
|
||||
*/
|
||||
@@ -164,6 +164,9 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
|
||||
message: response.data.message
|
||||
})
|
||||
adminInfo.removeToken()
|
||||
navTabs.closeTabs()
|
||||
window.localStorage.clear()
|
||||
adminInfo.reset()
|
||||
router.push({ name: 'login' })
|
||||
loginExpireTimer = null // 执行后清空定时器
|
||||
}, 100) // 可根据实际情况调整延迟时间
|
||||
|
||||
@@ -100,6 +100,7 @@ const tableStore = new TableStore({
|
||||
}
|
||||
},
|
||||
{ title: '设备名称', field: 'equipmentName', align: 'center', width: 120 },
|
||||
{ title: '监测点名称', field: 'lineName', align: 'center', width: 140 },
|
||||
{ title: '工程名称', field: 'engineeringName', align: 'center', width: 120 },
|
||||
{ title: '项目名称', field: 'projectName', align: 'center', width: 120 },
|
||||
{ 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,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0
|
||||
},
|
||||
|
||||
|
||||
@@ -141,7 +141,8 @@
|
||||
v-show="
|
||||
dataSet.includes('_items') ||
|
||||
dataSet.indexOf('_history') != -1 ||
|
||||
dataSet.indexOf('_moduleData') != -1
|
||||
dataSet.indexOf('_moduleData') != -1||
|
||||
dataSet.indexOf('_devRunTrend') != -1
|
||||
"
|
||||
>
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
@@ -165,7 +166,7 @@
|
||||
</el-select> -->
|
||||
<el-radio-group
|
||||
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"
|
||||
@change="handleClick"
|
||||
>
|
||||
@@ -525,6 +526,14 @@
|
||||
>
|
||||
<moduleData ref="moduleDataRef" @onSubmit="handleClick" />
|
||||
</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>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@@ -548,7 +557,8 @@ import {
|
||||
getOverLimitData,
|
||||
queryDictType,
|
||||
getById,
|
||||
allModelData
|
||||
allModelData,
|
||||
getRawData
|
||||
} from '@/api/cs-device-boot/EquipmentDelivery'
|
||||
import { deviceHisData, deviceRtData, realTimeData, getTestData } from '@/api/cs-device-boot/csGroup'
|
||||
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 realTime from './tabs/realtime.vue' //实时数据-主界面
|
||||
import realTrend from './tabs/components/realtrend.vue' //实时数据-实时趋势
|
||||
import operatingTrend from './tabs/operatingTrend.vue' //运行趋势
|
||||
import harmonicSpectrum from './tabs/components/harmonicSpectrum.vue' //实时数据-谐波频谱子页面
|
||||
import recordWoves from './tabs/components/recordwoves.vue' //实时数据-实时录波子页面
|
||||
import offLineDataImport from './offLineDataImport/index.vue'
|
||||
@@ -660,6 +671,7 @@ const volConTypeList = dictData.getBasicData('Dev_Connect')
|
||||
// }
|
||||
//谐波频谱
|
||||
const realTrendRef = ref()
|
||||
const operatingTrendRef = ref()
|
||||
const changeTrendType = (val: any) => {
|
||||
trendDataTime.value = ''
|
||||
activeTrendName.value = val * 1
|
||||
@@ -685,7 +697,7 @@ const handleTrend = async () => {
|
||||
.then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
trendDataTime.value = ''
|
||||
ElMessage.success('装置应答成功')
|
||||
ElMessage.success('设备应答成功')
|
||||
//每隔30s调用一下接口,通知后台推送mqtt消息
|
||||
trendTimer.value = window.setInterval(() => {
|
||||
if (!dataSet.value.includes('_realtimedata')) return
|
||||
@@ -709,7 +721,7 @@ const handleTrend = async () => {
|
||||
// }
|
||||
})
|
||||
} else {
|
||||
ElMessage.warning('装置应答失败')
|
||||
ElMessage.warning('设备应答失败')
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
@@ -741,7 +753,7 @@ const handleHarmonicSpectrum = async () => {
|
||||
// getRealDataMqttMsg()
|
||||
await getBasicRealData(lineId.value).then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('装置应答成功')
|
||||
ElMessage.success('设备应答成功')
|
||||
// mqttMessage.value = {}
|
||||
|
||||
realDataTimer.value = window.setInterval(() => {
|
||||
@@ -771,7 +783,7 @@ const handleReturn = async () => {
|
||||
tableLoading.value = true
|
||||
await getBasicRealData(lineId.value).then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('装置应答成功')
|
||||
ElMessage.success('设备应答成功')
|
||||
// mqttMessage.value = {}
|
||||
realDataTimer.value = window.setInterval(() => {
|
||||
if (!dataSet.value.includes('_realtimedata')) return
|
||||
@@ -920,6 +932,10 @@ const nodeClick = async (e: anyObj, node: any) => {
|
||||
if (item.type === '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 != '历史统计数据')
|
||||
//便携式设备默认二次值
|
||||
@@ -982,7 +998,7 @@ const getRealDataMqttMsg = async () => {
|
||||
await getBasicRealData(lineId.value)
|
||||
.then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('装置应答成功')
|
||||
ElMessage.success('设备应答成功')
|
||||
mqttMessage.value = {}
|
||||
|
||||
realDataTimer.value = window.setInterval(async () => {
|
||||
@@ -1146,7 +1162,7 @@ const getRealDataMqttMsg = async () => {
|
||||
console.log('mqtt客户端已断开连接.....')
|
||||
})
|
||||
} else {
|
||||
ElMessage.success('装置应答失败')
|
||||
ElMessage.success('设备应答失败')
|
||||
tableLoading.value = false
|
||||
}
|
||||
})
|
||||
@@ -1316,6 +1332,39 @@ const handleClick = async (tab?: any) => {
|
||||
}, 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('_')) {
|
||||
|
||||
@@ -241,7 +241,7 @@ const tableStore = new TableStore({
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
//直连装置注册
|
||||
//直连设备注册
|
||||
{
|
||||
title: '注册',
|
||||
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>
|
||||
<div class="default-main main" :style="{ height: pageHeight.height }">
|
||||
<div class="main_left">
|
||||
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
|
||||
<DeviceTree @node-click="nodeClick" @deviceTypeChange="deviceTypeChange"></DeviceTree>
|
||||
</div>
|
||||
<div class="main_right" v-loading="loading">
|
||||
<div class="right_nav">
|
||||
@@ -19,7 +19,7 @@
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<!-- <el-button :icon="Refresh" @click="handleRestartDevice" type="primary" :loading="deviceRestartLoading">
|
||||
装置重启
|
||||
设备重启
|
||||
</el-button> -->
|
||||
</div>
|
||||
|
||||
@@ -197,22 +197,28 @@
|
||||
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
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 {
|
||||
getFileServiceFileOrDir,
|
||||
uploadDeviceFile,
|
||||
reStartDevice,
|
||||
addDeviceDir,
|
||||
delDeviceDir
|
||||
} from '@/api/cs-device-boot/fileService.ts'
|
||||
delDeviceDir,
|
||||
listDir,
|
||||
downloadFileFromFrontr,
|
||||
deleteCld,
|
||||
uploadFileToFront,
|
||||
mkdir
|
||||
} from '@/api/cs-device-boot/fileService'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { Delete, Download, Upload, Plus, Refresh, Search } from '@element-plus/icons-vue'
|
||||
import popup from './popup.vue'
|
||||
import mqtt from 'mqtt'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { passwordConfirm } from '@/api/user-boot/user'
|
||||
import { downLoadFile } from '@/utils/downloadFile.ts'
|
||||
defineOptions({
|
||||
name: 'govern/device/fileService'
|
||||
name: 'govern/device/fileService/index'
|
||||
})
|
||||
const pageHeight = mainHeight(20)
|
||||
const tableHeight = mainHeight(130)
|
||||
@@ -220,31 +226,53 @@ const adminInfo = useAdminInfo()
|
||||
const loading = ref(false)
|
||||
//nDid
|
||||
const nDid = ref<string>('')
|
||||
const devId = ref<string>('')
|
||||
//当前目录
|
||||
const activePath = ref<string>('')
|
||||
//判断是否是根目录
|
||||
const isRoot = ref<boolean>(true)
|
||||
//储存所有点击过的目录
|
||||
const activePathList: any = ref([])
|
||||
const devConType = ref<string>('')
|
||||
const deviceTypeChange = (val: any, obj: any) => {
|
||||
nodeClick(obj)
|
||||
}
|
||||
const nodeClick = (e: any) => {
|
||||
if (e && (e.level == 2 || e.type == 'device')) {
|
||||
loading.value = true
|
||||
nDid.value = e.ndid
|
||||
devId.value = e.id
|
||||
dirList.value = []
|
||||
activePathList.value = []
|
||||
activePath.value = '/'
|
||||
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
|
||||
.then((resp: any) => {
|
||||
if (resp.code == 'A0000') {
|
||||
dirList.value = resp.data
|
||||
currentDirList.value = resp.data
|
||||
activePathList.value = [{ path: activePath.value }]
|
||||
devConType.value = e.devConType
|
||||
if (devConType.value == 'CLD') {
|
||||
listDir({ devId: devId.value, filePath: activePath.value })
|
||||
.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
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} else {
|
||||
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
|
||||
.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 handleRestartDevice = () => {
|
||||
deviceRestartLoading.value = true
|
||||
ElMessageBox.prompt('二次校验密码确认', '装置重启', {
|
||||
ElMessageBox.prompt('二次校验密码确认', '设备重启', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
customClass: 'customInput',
|
||||
@@ -360,21 +388,41 @@ const handleIntoDir = (row: any) => {
|
||||
if (activePathList.value.indexOf(obj.name) == -1) {
|
||||
activePathList.value.push({ path: obj.name })
|
||||
}
|
||||
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)
|
||||
|
||||
if (devConType.value == 'CLD') {
|
||||
listDir({ devId: devId.value, filePath: row.prjDataPath })
|
||||
.then((resp: any) => {
|
||||
if (resp.code == 'A0000') {
|
||||
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
|
||||
}
|
||||
})
|
||||
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
|
||||
loading.value = true
|
||||
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)
|
||||
if (devConType.value == 'CLD') {
|
||||
listDir({ devId: devId.value, filePath: val.path })
|
||||
.then((resp: any) => {
|
||||
if (resp.code == 'A0000') {
|
||||
dirList.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
|
||||
}
|
||||
})
|
||||
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({
|
||||
path: ''
|
||||
@@ -437,45 +504,84 @@ const formRef = ref()
|
||||
//重新加载当前页面菜单
|
||||
const reloadCurrentMenu = (msg: string) => {
|
||||
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
|
||||
ElMessage({ message: msg, type: 'success', duration: 5000 })
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
loading.value = false
|
||||
})
|
||||
if (devConType.value == 'CLD') {
|
||||
listDir({ devId: devId.value, filePath: activePath.value })
|
||||
.then((resp: any) => {
|
||||
if (resp.code == 'A0000') {
|
||||
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
|
||||
})
|
||||
} 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 = () => {
|
||||
formRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
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
|
||||
if (devConType.value == 'CLD') {
|
||||
let obj = {
|
||||
devId: devId.value,
|
||||
filePath:
|
||||
activePath.value == '/'
|
||||
? activePath.value + form.value.path
|
||||
: activePath.value + '/' + form.value.path
|
||||
}
|
||||
})
|
||||
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)
|
||||
.then((resp: any) => {
|
||||
if (resp.code == 'A0000') {
|
||||
delDeviceDir({ nDid: nDid.value, path: row.prjDataPath }).then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
reloadCurrentMenu(res.message)
|
||||
|
||||
// ElMessage({ message: res.message, type: 'success', duration: 5000 })
|
||||
}
|
||||
})
|
||||
if (devConType.value == 'CLD') {
|
||||
deleteCld({
|
||||
devId: devId.value,
|
||||
filePath: row.prjDataPath
|
||||
})
|
||||
.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 => {
|
||||
@@ -526,11 +649,21 @@ const changeType = ref<any>('')
|
||||
//下载文件
|
||||
const fileRef = ref()
|
||||
const handleDownLoad = async (row: any) => {
|
||||
;(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)
|
||||
if (devConType.value == 'CLD') {
|
||||
ElMessage.info('下载中,请稍等...')
|
||||
downloadFileFromFrontr({
|
||||
devId: devId.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>('')
|
||||
@@ -540,17 +673,32 @@ const handleUpload = (e: any, fileList: any, row: any) => {
|
||||
localStorage.setItem('fileName', fileName.value)
|
||||
changeType.value = 'upload'
|
||||
localStorage.setItem('changeType', changeType.value)
|
||||
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
|
||||
|
||||
if (devConType.value == 'CLD') {
|
||||
const obj = {
|
||||
devId: devId.value,
|
||||
file: e.raw,
|
||||
dirPath: row || row.prjDataPath
|
||||
}
|
||||
})
|
||||
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(
|
||||
() => activePathList.value,
|
||||
@@ -598,26 +746,28 @@ const mqttMessage = ref<any>({})
|
||||
const status: any = ref()
|
||||
function parseStringToObject(str: string) {
|
||||
const content = str.replace(/^{|}$/g, '')
|
||||
const pairs = content.split(',')
|
||||
const result: any = {}
|
||||
pairs.forEach(pair => {
|
||||
const [key, value] = pair.split(':')
|
||||
// 尝试将数字转换为Number类型
|
||||
result[key.trim()] = isNaN(Number(value)) ? value.trim() : Number(value)
|
||||
})
|
||||
|
||||
// 正则匹配:key:value 格式,支持 value 里带 : / 等字符
|
||||
const regex = /([^,:]+):([^,]+)(?=,|$)/g
|
||||
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
|
||||
}
|
||||
mqttRef.value.on('message', (topic: any, message: any) => {
|
||||
// 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 regex = /fileName:(.*?),allStep/
|
||||
let regex1 = /allStep:(.*?),nowStep/
|
||||
let regex2 = /nowStep:(.*?),userId/
|
||||
let regex3 = /userId:(.*?)}/
|
||||
|
||||
mqttMessage.value = parseStringToObject(str)
|
||||
if (adminInfo.id != mqttMessage.value.userId) return
|
||||
|
||||
// console.log("🚀 ~ str.match(regex3)[1]:", str.match(regex3)[1])
|
||||
status.value = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100))
|
||||
fileRef.value.setStatus(mqttMessage.value)
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<div :class="downLoading ? 'all_disabled' : ''">
|
||||
<el-dialog v-model.trim="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
|
||||
<div v-loading="loading">
|
||||
|
||||
<div
|
||||
class="download_progress"
|
||||
v-if="mqttFileName.includes(fileNameInfoMation) && status != 0 && status != 100"
|
||||
@@ -57,7 +58,7 @@ import {
|
||||
getFileServiceFileOrDir,
|
||||
downLoadDeviceFile,
|
||||
downLoadDeviceFilePath
|
||||
} from '@/api/cs-device-boot/fileService.ts'
|
||||
} from '@/api/cs-device-boot/fileService'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
type="primary"
|
||||
:loading="deviceRestartLoading"
|
||||
>
|
||||
装置重启
|
||||
设备重启
|
||||
</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="名称">
|
||||
@@ -237,11 +237,11 @@ const openGroup = () => {
|
||||
})
|
||||
})
|
||||
}
|
||||
//装置重启
|
||||
//设备重启
|
||||
const deviceRestartLoading = ref<boolean>(false)
|
||||
const handleRestartDevice = () => {
|
||||
deviceRestartLoading.value = true
|
||||
ElMessageBox.prompt('二次校验密码确认', '装置重启', {
|
||||
ElMessageBox.prompt('二次校验密码确认', '设备重启', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
customClass: 'customInput',
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</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-column field="name" title="设备名称"></vxe-column>
|
||||
<vxe-column title="操作" width="200px">
|
||||
@@ -33,7 +33,7 @@
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
style="width: 100%"
|
||||
>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="设备名称"></vxe-column>
|
||||
<vxe-column field="name" title="便携式设备名称"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -298,7 +298,7 @@ const addData = () => {
|
||||
min-height: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 10px;
|
||||
// margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
style="cursor: pointer" />
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
||||
<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>
|
||||
|
||||
@@ -6,12 +6,13 @@
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
@checkChange="checkChange"
|
||||
:height="35"
|
||||
:engineering="true"
|
||||
></DeviceTree>
|
||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
||||
<vxe-column field="enginerName" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
@close="emit('closePopup')"
|
||||
>
|
||||
<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-option v-for="item in TypeOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</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
|
||||
v-for="item in devTypeOptions"
|
||||
:key="item.value"
|
||||
@@ -21,7 +21,7 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</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-option v-for="item in DevTypeOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
@@ -29,7 +29,7 @@
|
||||
<el-select
|
||||
v-model.trim="form.devType"
|
||||
filterable
|
||||
placeholder="请选择装置型号"
|
||||
placeholder="请选择设备型号"
|
||||
clearable
|
||||
@change="devTypeChange"
|
||||
>
|
||||
@@ -59,13 +59,13 @@
|
||||
placeholder="填写特殊类型(不填默认通用类型)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="版本协议:" prop="versionAgreement">
|
||||
<el-form-item label="协议版本:" prop="versionAgreement">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="form.versionAgreement"
|
||||
autocomplete="off"
|
||||
placeholder="请输入版本协议"
|
||||
placeholder="请输入协议版本"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="版本日期:" prop="versionDate">
|
||||
@@ -154,11 +154,11 @@ const form = reactive<any>({
|
||||
file: []
|
||||
})
|
||||
const rules = {
|
||||
type: [{ required: true, message: '请选择装置类型', trigger: 'change' }],
|
||||
devType: [{ required: true, message: '请选择装置型号', trigger: 'change' }],
|
||||
type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||
devType: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
|
||||
versionNo: [{ 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' }],
|
||||
description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
|
||||
crcInfo: [{ required: true, message: '请输入CRC校验', trigger: 'blur' }],
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="装置型号">
|
||||
<el-form-item label="设备型号">
|
||||
<el-select v-model.trim="tableStore.table.params.devType" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
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
|
||||
}
|
||||
},
|
||||
{ title: '装置型号', field: 'devTypeName' },
|
||||
{ title: '设备型号', field: 'devTypeName' },
|
||||
{ title: '模板名称', field: 'name' },
|
||||
{ title: '版本号', field: 'versionNo' },
|
||||
{ title: '版本时间', field: 'versionDate', sortable: true },
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div class="default-main">
|
||||
<TableHeader ref="tableHeaderRef" :showReset="false" showExport>
|
||||
<template #select>
|
||||
<el-form-item label="装置型号:">
|
||||
<el-select v-model.trim="tableStore.table.params.devType" placeholder="请选择装置型号" clearable>
|
||||
<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"
|
||||
@@ -55,9 +55,9 @@ const tableStore = new TableStore({
|
||||
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: 'versionAgreement' ,minWidth: '100'},
|
||||
{ title: '协议版本', field: 'versionAgreement' ,minWidth: '100'},
|
||||
{ title: '版本日期', field: 'versionDate' ,minWidth: '100'},
|
||||
{ title: '归档日期', field: 'updateTime',minWidth: '150' },
|
||||
{ title: '描述', field: 'description',minWidth: '200' },
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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-item label="项目名称" prop="name">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入项目名称" />
|
||||
@@ -23,14 +23,9 @@
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input maxlength="32" show-word-limit-number v-model.number="form.sort" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="拓扑图" prop="sort">
|
||||
<el-form-item label="拓扑图">
|
||||
<div class="image-radio-group">
|
||||
<div
|
||||
class="image-radio-item"
|
||||
v-for="item in images"
|
||||
:key="item.id"
|
||||
@click="handleSelect(item.id)"
|
||||
>
|
||||
<div 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">
|
||||
{{ item.name }}
|
||||
</el-radio>
|
||||
@@ -64,7 +59,7 @@ import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { add, update } from '@/api/user-boot/role'
|
||||
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 { getFileUrl } from '@/api/system-boot/file'
|
||||
const adminInfo = useAdminInfo()
|
||||
@@ -123,14 +118,15 @@ const open = (text: string, List: any, data?: anyObj, id?: string) => {
|
||||
}
|
||||
}
|
||||
const submit = async () => {
|
||||
if (form.topoIds == '') {
|
||||
return ElMessage.warning('请选择拓扑图!')
|
||||
}
|
||||
formRef.value.validate(async valid => {
|
||||
console.log("🚀 ~ submit ~ form.topoIds:", form.topoIds)
|
||||
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
await updateProject({ ...form ,topoIds:[form.topoIds]})
|
||||
await updateProjects({ ...form, topoIds: [form.topoIds] })
|
||||
} else {
|
||||
await addProject({ ...form,topoIds:[form.topoIds] })
|
||||
await addProject({ ...form, topoIds: [form.topoIds] })
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
@@ -150,7 +146,11 @@ const getImageList = async () => {
|
||||
}
|
||||
|
||||
const handleSelect = (filePath: any) => {
|
||||
form.topoIds = filePath
|
||||
if (form.topoIds == filePath) {
|
||||
form.topoIds = ''
|
||||
} else {
|
||||
form.topoIds = filePath
|
||||
}
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,24 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div style="display: flex">
|
||||
<div style="width: 800px">
|
||||
<el-row v-loading="tableStore.table.loading">
|
||||
<el-col :span="11">
|
||||
<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>
|
||||
</div>
|
||||
<Table ref="tableRef" @currentChange="currentChange" />
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
</el-col>
|
||||
<el-col :span="13">
|
||||
<div class="custom-table-header">
|
||||
<div class="title">項目列表</div>
|
||||
|
||||
@@ -25,17 +35,19 @@
|
||||
<vxe-column field="projectName" 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 }">
|
||||
<el-image
|
||||
:hide-on-click-modal="true"
|
||||
:preview-teleported="true"
|
||||
v-if="row.topologyInfo"
|
||||
:preview-src-list="[row.topologyImageUrl]"
|
||||
:src="getUrl(row) ? row.topologyImageUrl : ''"
|
||||
:src="row.topologyImageUrl"
|
||||
></el-image>
|
||||
<span v-else>/</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="projectRemark" title="备注"></vxe-column>
|
||||
<vxe-column field="projectSort" title="排序" width="80px"></vxe-column>
|
||||
<vxe-column title="操作" width="180px">
|
||||
<template #default="{ row }">
|
||||
@@ -64,8 +76,8 @@
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 新增工程 -->
|
||||
<popup ref="popupRef" @save="save" />
|
||||
<!-- 新增項目 -->
|
||||
@@ -78,7 +90,7 @@ import { Plus } from '@element-plus/icons-vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
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 { ElMessage } from 'element-plus'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
@@ -92,13 +104,16 @@ defineOptions({
|
||||
const height = mainHeight(80)
|
||||
const volConTypeList: any = dictData.getBasicData('Dev_Connect')
|
||||
import { getFileUrl } from '@/api/system-boot/file'
|
||||
|
||||
const popupRef = ref()
|
||||
const tableRef = ref()
|
||||
const tableRef1 = ref()
|
||||
const itemList = ref([])
|
||||
const searchValue = ref('')
|
||||
const itemList: any = ref([])
|
||||
const menuListId = ref([])
|
||||
const itemAddRef = ref()
|
||||
const engineeringId = ref('')
|
||||
const tableList = ref([])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/cs-device-boot/engineeringProjectRelation/list',
|
||||
method: 'POST',
|
||||
@@ -161,17 +176,35 @@ const tableStore: any = new TableStore({
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
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
|
||||
tableList.value = JSON.parse(JSON.stringify(tableStore.table.data))
|
||||
setTableRow()
|
||||
}
|
||||
})
|
||||
|
||||
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) => {
|
||||
itemAddRef.value.open('新增项目', tableStore.table.data, row, engineeringId.value)
|
||||
@@ -195,6 +228,11 @@ const add = () => {
|
||||
const currentChange = (data: any) => {
|
||||
engineeringId.value = data.row.engineeringId
|
||||
itemList.value = data.row.projectInfoList
|
||||
if (itemList.value.length > 0) {
|
||||
itemList.value.forEach((item: any) => {
|
||||
item.topologyImageUrl = getUrl(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
// 保存模版
|
||||
const save = () => {
|
||||
@@ -210,14 +248,11 @@ const save = () => {
|
||||
const imgList = ref([])
|
||||
// 获取拓扑图
|
||||
const getUrl = async (row: any) => {
|
||||
if (!row.topologyInfo || row.topologyInfo === '/') return false
|
||||
try {
|
||||
const res = await getFileUrl({ filePath: row.topologyInfo })
|
||||
row.topologyImageUrl = res.data
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
if (!row.topologyInfo || row.topologyInfo === '/') return ''
|
||||
|
||||
const res = await getFileUrl({ filePath: row.topologyInfo })
|
||||
row.topologyImageUrl = res.data
|
||||
return res.data
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -151,7 +151,7 @@
|
||||
<el-form-item label="设备型号:" prop="devModel" class="top">
|
||||
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="item in formDevModelOptionsFilter "
|
||||
v-for="item in formDevModelOptionsFilter"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@@ -164,6 +164,15 @@
|
||||
<el-option label="CLD" value="CLD"></el-option>
|
||||
</el-select>
|
||||
</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-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
|
||||
</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 { ElMessage, ElMessageBox } from 'element-plus'
|
||||
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 {
|
||||
addEquipmentDelivery,
|
||||
deleteEquipmentDelivery,
|
||||
@@ -208,7 +217,8 @@ import {
|
||||
governDeviceRegister,
|
||||
portableDeviceRegister,
|
||||
portableDeviceAccess,
|
||||
getExcelTemplate
|
||||
getExcelTemplate,
|
||||
engineeringProject
|
||||
} from '@/api/cs-system-boot/device'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { fullUrl } from '@/utils/common'
|
||||
@@ -221,17 +231,27 @@ const showQrCode = ref(false)
|
||||
const devTypeOptions: any = ref([])
|
||||
const devTypeOptions2: any = ref([])
|
||||
const devModelOptions2: any = ref([])
|
||||
const engineeringList: any = ref([])
|
||||
|
||||
const deivce: any = ref({})
|
||||
const ruleFormRef = ref()
|
||||
const form = reactive({
|
||||
const form: any = reactive({
|
||||
cntractNo: '',
|
||||
devAccessMethod: 'MQTT',
|
||||
devModel: '',
|
||||
devType: '',
|
||||
name: '',
|
||||
ndid: '',
|
||||
associatedEngineering: '',
|
||||
associatedProject: '',
|
||||
association: [],
|
||||
sort: 0
|
||||
})
|
||||
const props = {
|
||||
label: 'projectName',
|
||||
value: 'projectId',
|
||||
children: 'projectInfoList'
|
||||
}
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入设备名', trigger: 'blur' }],
|
||||
ndid: [{ required: true, message: '请输入网络设备id', trigger: 'blur' }],
|
||||
@@ -248,19 +268,21 @@ const dialogTitle = ref('新增设备')
|
||||
const loading = ref<boolean>(false)
|
||||
const devModelOptions: any = ref([])
|
||||
const queryTheDictionary = () => {
|
||||
queryByCode('DEV_CLD').then(res => {
|
||||
queryByCode('DEV_CLD')
|
||||
.then(res => {
|
||||
devTypeOptions2.value = res.data
|
||||
return queryCsDictTree(res.data.id).then(res => {
|
||||
devModelOptions2.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
}).then(() => {
|
||||
queryByCode('Device_Type').then(async res => {
|
||||
})
|
||||
.then(() => {
|
||||
queryByCode('Device_Type').then(async res => {
|
||||
const id = res.data.id
|
||||
await queryCsDictTree(id).then(res => {
|
||||
devTypeOptions.value = res.data.map((item: any) => {
|
||||
@@ -292,10 +314,10 @@ const queryTheDictionary = () => {
|
||||
})
|
||||
await tableStore.index()
|
||||
})
|
||||
}).catch(error => {
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('查询过程中出现错误:', error)
|
||||
})
|
||||
|
||||
}
|
||||
const devModelOptionsFilter = computed(() => {
|
||||
return devModelOptions.value.filter((item: any) => {
|
||||
@@ -308,7 +330,7 @@ const devModelOptionsFilter = computed(() => {
|
||||
})
|
||||
|
||||
const formDevModelOptionsFilter = computed(() => {
|
||||
if(form.devAccessMethod === 'CLD'){
|
||||
if (form.devAccessMethod === 'CLD') {
|
||||
return devModelOptions2.value.filter((item: any) => {
|
||||
if (form.devType) {
|
||||
return item.pid == form.devType
|
||||
@@ -316,18 +338,17 @@ const formDevModelOptionsFilter = computed(() => {
|
||||
return true
|
||||
}
|
||||
})
|
||||
}else{
|
||||
} else {
|
||||
return devModelOptions.value.filter((item: any) => {
|
||||
if (form.devType) {
|
||||
return item.pid == form.devType
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
})
|
||||
if (form.devType) {
|
||||
return item.pid == form.devType
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const formDevTypeOptions = computed(() => {
|
||||
// 如果协议是CLD,使用devTypeOptions2,否则使用devTypeOptions
|
||||
if (form.devAccessMethod === 'CLD') {
|
||||
@@ -367,8 +388,8 @@ const tableStore = new TableStore({
|
||||
}
|
||||
// 如果是MQTT协议,使用devTypeOptions查找
|
||||
else if (row.row.devAccessMethod === 'MQTT') {
|
||||
const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue);
|
||||
return item ? item.label : '/';
|
||||
const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue)
|
||||
return item ? item.label : '/'
|
||||
}
|
||||
},
|
||||
minWidth: 120
|
||||
@@ -378,8 +399,8 @@ const tableStore = new TableStore({
|
||||
field: 'devModel',
|
||||
formatter: row => {
|
||||
const options = row.row.devAccessMethod === 'MQTT' ? devModelOptions.value : devModelOptions2.value
|
||||
const item = options.find((item: any) => item.value == row.cellValue);
|
||||
return item ? item.label : '/';
|
||||
const item = options.find((item: any) => item.value == row.cellValue)
|
||||
return item ? item.label : '/'
|
||||
},
|
||||
minWidth: 120
|
||||
},
|
||||
@@ -488,12 +509,13 @@ const tableStore = new TableStore({
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
title: '操作', fixed: 'right',
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
width: 220,
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
//直连装置注册
|
||||
//直连设备注册
|
||||
// {
|
||||
// title: '注册',
|
||||
// type: 'primary',
|
||||
@@ -677,7 +699,6 @@ const tableStore = new TableStore({
|
||||
useCORS: true
|
||||
}).then(canvas => {
|
||||
let url = canvas.toDataURL('image/png')
|
||||
console.log('🚀 ~ html2canvas ~ url:', url)
|
||||
// 下载图片
|
||||
let a = document.createElement('a')
|
||||
let event = new MouseEvent('click')
|
||||
@@ -701,6 +722,10 @@ const tableStore = new TableStore({
|
||||
for (let key in form) {
|
||||
form[key] = row[key]
|
||||
}
|
||||
|
||||
form.association = row.associatedProject
|
||||
? [row.associatedEngineering, row.associatedProject]
|
||||
: []
|
||||
form.id = row.id
|
||||
}
|
||||
},
|
||||
@@ -741,7 +766,6 @@ const tableStore = new TableStore({
|
||||
: ''
|
||||
}
|
||||
})
|
||||
console.log('🚀 ~ loadCallback ~ tableStore.table:', tableStore.table)
|
||||
tableKey.value += 1
|
||||
}
|
||||
})
|
||||
@@ -877,6 +901,9 @@ const add = () => {
|
||||
const onSubmit = () => {
|
||||
ruleFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
form.associatedEngineering = form.association ? form.association[0] : ''
|
||||
form.associatedProject = form.association ? form.association[1] : ''
|
||||
|
||||
if (dialogTitle.value == '新增设备') {
|
||||
addEquipmentDelivery(form).then(res => {
|
||||
ElMessage.success('新增成功')
|
||||
@@ -923,6 +950,9 @@ const resetForm = () => {
|
||||
devModel: '',
|
||||
devType: '',
|
||||
name: '',
|
||||
associatedEngineering: '',
|
||||
associatedProject: '',
|
||||
association: [],
|
||||
ndid: ''
|
||||
}
|
||||
Object.assign(form, user)
|
||||
@@ -939,6 +969,15 @@ provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
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)
|
||||
})
|
||||
|
||||
|
||||
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'
|
||||
|
||||
const exportExcel = function(luckysheet, value) {
|
||||
// 参数为luckysheet.getluckysheetfile()获取的对象
|
||||
// 1.创建工作簿,可以为工作簿添加属性
|
||||
const workbook = new Excel.Workbook()
|
||||
// 2.创建表格,第二个参数可以配置创建什么样的工作表
|
||||
if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
|
||||
luckysheet = [luckysheet]
|
||||
}
|
||||
luckysheet.forEach(function(table) {
|
||||
if (table.data.length === 0) return true
|
||||
// ws.getCell('B2').fill = fills.
|
||||
const worksheet = workbook.addWorksheet(table.name)
|
||||
const merge = (table.config && table.config.merge) || {}
|
||||
const borderInfo = (table.config && table.config.borderInfo) || {}
|
||||
// 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
|
||||
setStyleAndValue(table.data, worksheet)
|
||||
setMerge(merge, worksheet)
|
||||
setBorder(borderInfo, worksheet)
|
||||
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'
|
||||
const exportExcel = function (luckysheet, value) {
|
||||
// 参数为luckysheet.getluckysheetfile()获取的对象
|
||||
// 1.创建工作簿,可以为工作簿添加属性
|
||||
const workbook = new Excel.Workbook()
|
||||
// 2.创建表格,第二个参数可以配置创建什么样的工作表
|
||||
if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
|
||||
luckysheet = [luckysheet]
|
||||
}
|
||||
luckysheet.forEach(function (table) {
|
||||
if (table.data.length === 0) return true
|
||||
// ws.getCell('B2').fill = fills.
|
||||
const worksheet = workbook.addWorksheet(table.name)
|
||||
const merge = (table.config && table.config.merge) || {}
|
||||
const borderInfo = (table.config && table.config.borderInfo) || {}
|
||||
// 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
|
||||
setStyleAndValue(table.data, worksheet)
|
||||
setMerge(merge, worksheet)
|
||||
setBorder(borderInfo, worksheet)
|
||||
return true
|
||||
})
|
||||
console.log("导出成功!")
|
||||
FileSaver.saveAs(blob, `${value}.xlsx`)
|
||||
})
|
||||
return buffer
|
||||
}
|
||||
|
||||
var setMerge = function(luckyMerge = {}, worksheet) {
|
||||
const mergearr = Object.values(luckyMerge)
|
||||
mergearr.forEach(function(elem) {
|
||||
// elem格式:{r: 0, c: 0, rs: 1, cs: 2}
|
||||
// 按开始行,开始列,结束行,结束列合并(相当于 K10:M12)
|
||||
worksheet.mergeCells(
|
||||
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
|
||||
// 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'
|
||||
})
|
||||
} 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
|
||||
console.log('导出成功!')
|
||||
FileSaver.saveAs(blob, `${value}.xlsx`)
|
||||
})
|
||||
})
|
||||
return buffer
|
||||
}
|
||||
|
||||
var fillConvert = function(bg) {
|
||||
if (!bg) {
|
||||
return {}
|
||||
}
|
||||
// const bgc = bg.replace('#', '')
|
||||
let fill = {
|
||||
type: 'pattern',
|
||||
pattern: 'solid',
|
||||
fgColor: { argb: bg.replace('#', '') }
|
||||
}
|
||||
return fill
|
||||
var setMerge = function (luckyMerge = {}, worksheet) {
|
||||
const mergearr = Object.values(luckyMerge)
|
||||
mergearr.forEach(function (elem) {
|
||||
// elem格式:{r: 0, c: 0, rs: 1, cs: 2}
|
||||
// 按开始行,开始列,结束行,结束列合并(相当于 K10:M12)
|
||||
worksheet.mergeCells(elem.r + 1, elem.c + 1, elem.r + elem.rs, elem.c + elem.cs)
|
||||
})
|
||||
}
|
||||
|
||||
var fontConvert = function(
|
||||
ff = 0,
|
||||
fc = '#000000',
|
||||
bl = 0,
|
||||
it = 0,
|
||||
fs = 10,
|
||||
cl = 0,
|
||||
ul = 0
|
||||
) {
|
||||
// luckysheet:ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
|
||||
const luckyToExcel = {
|
||||
0: '微软雅黑',
|
||||
1: '宋体(Song)',
|
||||
2: '黑体(ST Heiti)',
|
||||
3: '楷体(ST Kaiti)',
|
||||
4: '仿宋(ST FangSong)',
|
||||
5: '新宋体(ST Song)',
|
||||
6: '华文新魏',
|
||||
7: '华文行楷',
|
||||
8: '华文隶书',
|
||||
9: 'Arial',
|
||||
10: 'Times New Roman ',
|
||||
11: 'Tahoma ',
|
||||
12: 'Verdana',
|
||||
num2bl: function(num) {
|
||||
return num === 0 ? false : true
|
||||
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 {
|
||||
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 {}
|
||||
}
|
||||
}
|
||||
// 出现Bug,导入的时候ff为luckyToExcel的val
|
||||
|
||||
let font = {
|
||||
name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
|
||||
family: 1,
|
||||
size: fs,
|
||||
color: { argb: fc.replace('#', '') },
|
||||
bold: luckyToExcel.num2bl(bl),
|
||||
italic: luckyToExcel.num2bl(it),
|
||||
underline: luckyToExcel.num2bl(ul),
|
||||
strike: luckyToExcel.num2bl(cl)
|
||||
}
|
||||
|
||||
return font
|
||||
// const bgc = bg.replace('#', '')
|
||||
let fill = {
|
||||
type: 'pattern',
|
||||
pattern: 'solid',
|
||||
fgColor: { argb: bg.replace('#', '') }
|
||||
}
|
||||
return fill
|
||||
}
|
||||
|
||||
var alignmentConvert = function(
|
||||
vt = 'default',
|
||||
ht = 'default',
|
||||
tb = 'default',
|
||||
tr = 'default'
|
||||
) {
|
||||
// luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
|
||||
const luckyToExcel = {
|
||||
vertical: {
|
||||
0: 'middle',
|
||||
1: 'top',
|
||||
2: 'bottom',
|
||||
default: 'top'
|
||||
},
|
||||
horizontal: {
|
||||
0: 'center',
|
||||
1: 'left',
|
||||
2: 'right',
|
||||
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
|
||||
var fontConvert = function (ff = 0, fc = '#000000', bl = 0, it = 0, fs = 10, cl = 0, ul = 0) {
|
||||
// luckysheet:ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
|
||||
const luckyToExcel = {
|
||||
0: '微软雅黑',
|
||||
1: '宋体(Song)',
|
||||
2: '黑体(ST Heiti)',
|
||||
3: '楷体(ST Kaiti)',
|
||||
4: '仿宋(ST FangSong)',
|
||||
5: '新宋体(ST Song)',
|
||||
6: '华文新魏',
|
||||
7: '华文行楷',
|
||||
8: '华文隶书',
|
||||
9: 'Arial',
|
||||
10: 'Times New Roman ',
|
||||
11: 'Tahoma ',
|
||||
12: 'Verdana',
|
||||
num2bl: function (num) {
|
||||
return num === 0 ? false : true
|
||||
}
|
||||
}
|
||||
}
|
||||
// 出现Bug,导入的时候ff为luckyToExcel的val
|
||||
|
||||
let alignment = {
|
||||
vertical: luckyToExcel.vertical[vt],
|
||||
horizontal: luckyToExcel.horizontal[ht],
|
||||
wrapText: luckyToExcel.wrapText[tb],
|
||||
textRotation: luckyToExcel.textRotation[tr]
|
||||
}
|
||||
return alignment
|
||||
let font = {
|
||||
name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
|
||||
family: 1,
|
||||
size: fs,
|
||||
color: { argb: fc.replace('#', '') },
|
||||
bold: luckyToExcel.num2bl(bl),
|
||||
italic: luckyToExcel.num2bl(it),
|
||||
underline: luckyToExcel.num2bl(ul),
|
||||
strike: luckyToExcel.num2bl(cl)
|
||||
}
|
||||
|
||||
return font
|
||||
}
|
||||
|
||||
var borderConvert = function(borderType, style = 1, color = '#000') {
|
||||
// 对应luckysheet的config中borderinfo的的参数
|
||||
if (!borderType) {
|
||||
return {}
|
||||
}
|
||||
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'
|
||||
var alignmentConvert = function (vt = 'default', ht = 'default', tb = 'default', tr = 'default') {
|
||||
// luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
|
||||
const luckyToExcel = {
|
||||
vertical: {
|
||||
0: 'middle',
|
||||
1: 'top',
|
||||
2: 'bottom',
|
||||
default: 'top'
|
||||
},
|
||||
horizontal: {
|
||||
0: 'center',
|
||||
1: 'left',
|
||||
2: 'right',
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
|
||||
let alignment = {
|
||||
vertical: luckyToExcel.vertical[vt],
|
||||
horizontal: luckyToExcel.horizontal[ht],
|
||||
wrapText: luckyToExcel.wrapText[tb],
|
||||
textRotation: luckyToExcel.textRotation[tr]
|
||||
}
|
||||
return alignment
|
||||
}
|
||||
|
||||
var borderConvert = function (borderType, style = 1, color = '#000') {
|
||||
// 对应luckysheet的config中borderinfo的的参数
|
||||
if (!borderType) {
|
||||
return {}
|
||||
}
|
||||
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) {
|
||||
let border = {}
|
||||
const luckyExcel = {
|
||||
type: {
|
||||
l: 'left',
|
||||
r: 'right',
|
||||
b: 'bottom',
|
||||
t: 'top'
|
||||
},
|
||||
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 border = {}
|
||||
const luckyExcel = {
|
||||
type: {
|
||||
l: 'left',
|
||||
r: 'right',
|
||||
b: 'bottom',
|
||||
t: 'top'
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('borders', borders)
|
||||
for (const bor in borders) {
|
||||
// console.log(bor)
|
||||
if (borders[bor].color.indexOf('rgb') === -1) {
|
||||
border[luckyExcel.type[bor]] = {
|
||||
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 }
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('borders', borders)
|
||||
for (const bor in borders) {
|
||||
const borderItem = borders[bor]
|
||||
// 同时判断边框对象 和 color 属性都存在
|
||||
if (!borderItem || !borderItem.color) {
|
||||
continue
|
||||
}
|
||||
|
||||
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) {
|
||||
let ordA = 'A'.charCodeAt(0)
|
||||
let ordA = 'A'.charCodeAt(0)
|
||||
|
||||
let ordZ = 'Z'.charCodeAt(0)
|
||||
let len = ordZ - ordA + 1
|
||||
let s = ''
|
||||
while (n >= 0) {
|
||||
s = String.fromCharCode((n % len) + ordA) + s
|
||||
let ordZ = 'Z'.charCodeAt(0)
|
||||
let len = ordZ - ordA + 1
|
||||
let s = ''
|
||||
while (n >= 0) {
|
||||
s = String.fromCharCode((n % len) + ordA) + s
|
||||
|
||||
n = Math.floor(n / len) - 1
|
||||
}
|
||||
return s
|
||||
n = Math.floor(n / len) - 1
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
||||
export {
|
||||
exportExcel
|
||||
}
|
||||
export { exportExcel }
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div v-show="show && lookShow" style="display: flex">
|
||||
<div style="width: 600px">
|
||||
<el-row v-show="show && lookShow">
|
||||
<el-col :span="10">
|
||||
<div class="custom-table-header">
|
||||
<div class="title">报表列表</div>
|
||||
<el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增报表</el-button>
|
||||
</div>
|
||||
<Table ref="tableRef" @currentChange="currentChange" />
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="custom-table-header">
|
||||
<div class="title">模版绑定</div>
|
||||
|
||||
@@ -61,8 +61,9 @@
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<luckysheet ref="luckysheetRef" v-if="!show" @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-form-item>
|
||||
<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
|
||||
v-for="item in DataTypeSelect"
|
||||
:key="item.id"
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<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>
|
||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
|
||||
</template>
|
||||
|
||||
@@ -108,8 +108,8 @@ const info = async (list: any) => {
|
||||
return
|
||||
}
|
||||
|
||||
let relVal = ''
|
||||
relVal = "<font style='color:" + "'>供电公司:" + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
var relVal = `<strong>${a.seriesName}</strong><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[2] + '</font><br/>'
|
||||
relVal +=
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user