修改测试bug

This commit is contained in:
guanj
2026-01-06 11:35:11 +08:00
parent d25f16bcc7
commit 5d3d16f8ec
12 changed files with 497 additions and 442 deletions

View File

@@ -14,7 +14,7 @@
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.lineId" :key="item.lineId"
:label="item.name" :label="item.lineName"
:value="item.lineId" :value="item.lineId"
/> />
</el-select> </el-select>
@@ -34,7 +34,7 @@ import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import HarmonicRatio from '@/components/cockpit/gridSideStatistics/components/harmonicRatio.vue' import HarmonicRatio from '@/components/cockpit/gridSideStatistics/components/harmonicRatio.vue'
import { cslineList } from '@/api/harmonic-boot/cockpit/cockpit' import { cslineList ,governLineList} from '@/api/harmonic-boot/cockpit/cockpit'
const dialogVisible: any = ref(false) const dialogVisible: any = ref(false)
const harmonicRatioRef: any = ref(null) const harmonicRatioRef: any = ref(null)
@@ -139,8 +139,10 @@ const tableStore: any = new TableStore({
provide('tableStore', tableStore) provide('tableStore', tableStore)
tableStore.table.params.sortBy = '' tableStore.table.params.sortBy = ''
tableStore.table.params.orderBy = '' tableStore.table.params.orderBy = ''
const time:any=ref([])
const open = async (row: any,searchBeginTime:any,searchEndTime:any) => { const open = async (row: any,searchBeginTime:any,searchEndTime:any) => {
dialogVisible.value = true dialogVisible.value = true
time.value=[searchBeginTime,searchEndTime]
initCSlineList() initCSlineList()
tableStore.table.params.lineId = row.lineId tableStore.table.params.lineId = row.lineId
@@ -175,8 +177,19 @@ const onHarmonicRatioClose = () => {
} }
const initCSlineList = async () => { const initCSlineList = async () => {
const res = await cslineList({}) // const res = await cslineList({})
options.value = res.data const res = await governLineList({
endTime:time.value[1],
keywords:"",
pageNum:1,
pageSize:10000,
searchBeginTime:time.value[0],
searchEndTime:time.value[1],
startTime:time.value[0],
timeFlag:1
})
options.value = res.data.records
} }

View File

@@ -6,7 +6,8 @@
:showReset="false" :showReset="false"
@selectChange="selectChange" @selectChange="selectChange"
datePicker datePicker
v-if="fullscreen" :timeKeyList="prop.timeKey" v-if="fullscreen"
:timeKeyList="prop.timeKey"
></TableHeader> ></TableHeader>
<Table <Table
ref="tableRef" ref="tableRef"
@@ -17,27 +18,29 @@
<OverLimitDetails ref="OverLimitDetailsRef" /> <OverLimitDetails ref="OverLimitDetailsRef" />
<!-- 上传对话框 --> <!-- 上传对话框 -->
<el-dialog v-model="uploadDialogVisible" title="上传报告" width="500px" @closed="handleDialogClosed"> <el-dialog v-model="uploadDialogVisible" title="上传报告" append-to-body width="500px" @closed="handleDialogClosed">
<el-upload <el-upload
ref="uploadRef" ref="uploadRef"
class="upload-demo" class="upload-demo"
:auto-upload="true" action=""
accept=".doc,.docx,.PDF"
:on-change="handleChange" :on-change="handleChange"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:http-request="handleUpload"
:limit="1" :limit="1"
:auto-upload="false"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:on-remove="handleRemove"
:file-list="fileList" :file-list="fileList"
> >
<el-button type="primary">点击上传</el-button> <el-button type="primary">点击上传</el-button>
<template #tip> <template #tip>
<div class="el-upload__tip">只能上传Word或PDF文件且不超过10MB</div> <div class="el-upload__tip">上传Word或PDF文件</div>
</template> </template>
</el-upload> </el-upload>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="uploadDialogVisible = false">取消</el-button> <el-button @click="uploadDialogVisible = false">取消</el-button>
<el-button type="primary" @click="uploadDialogVisible = false">确定</el-button> <el-button type="primary" @click="handleUpload">确定</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@@ -59,7 +62,7 @@ const prop = defineProps({
h: { type: [String, Number] }, h: { type: [String, Number] },
width: { type: [String, Number] }, width: { type: [String, Number] },
height: { type: [String, Number] }, height: { type: [String, Number] },
timeKey: { type: Array as () => string[] }, timeKey: { type: Array as () => string[] },
timeValue: { type: Object }, timeValue: { type: Object },
interval: { type: Number } interval: { type: Number }
}) })
@@ -279,14 +282,18 @@ const handleDialogClosed = () => {
} }
// 处理文件超出限制 // 处理文件超出限制
const handleExceed = (files: any, fileList: any) => { const handleExceed = (files: any) => {
ElMessage.warning('只能上传一个文件,请先删除已选择的文件') ElMessage.warning('只能上传一个文件,请先删除已选择的文件')
} }
const handleRemove = (files: any) => {
fileList.value = []
}
// 文件变更处理函数 // 文件变更处理函数
const handleChange = (file: any, fileList: any) => { const handleChange = (file: any) => {
// 在这里直接处理文件上传逻辑 // 在这里直接处理文件上传逻辑
beforeUpload(file.raw) // 注意使用 file.raw 获取原始文件对象 // beforeUpload(file.raw) // 注意使用 file.raw 获取原始文件对象
fileList.value = [file] // 只保留最新选择的文件
} }
// 处理上传前检查 // 处理上传前检查
@@ -303,11 +310,7 @@ const beforeUpload = (file: any) => {
const isLt10M = file.size / 1024 / 1024 < 10 const isLt10M = file.size / 1024 / 1024 < 10
if (!isValidType) { if (!isValidType) {
ElMessage.error('上传文件只能是 Word 文档(.doc/.docx) 或 PDF 文件(.pdf)!') ElMessage.error('上传(.doc/.docx/.pdf)格式文件!')
return false
}
if (!isLt10M) {
ElMessage.error('上传文件大小不能超过 10MB!')
return false return false
} }
@@ -315,10 +318,12 @@ const beforeUpload = (file: any) => {
return true return true
} }
const handleUpload = async (options: any) => { const handleUpload = async () => {
const { file } = options console.log(123, fileList.value)
// return
const formData = new FormData() const formData = new FormData()
formData.append('file', file) formData.append('file', fileList.value[0]?.raw)
formData.append('lineId', currentUploadRow.value?.lineId || currentUploadRow.value?.id || '') formData.append('lineId', currentUploadRow.value?.lineId || currentUploadRow.value?.id || '')
try { try {

View File

@@ -21,8 +21,8 @@
<el-image <el-image
:hide-on-click-modal="true" :hide-on-click-modal="true"
:preview-teleported="true" :preview-teleported="true"
:preview-src-list="[fieldValue]" :preview-src-list="[imgList[fieldValue]]"
:src="fieldValue.length > 100 ? fieldValue : getUrl(fieldValue)" :src="fieldValue.length > 100 ? fieldValue : getUrl(fieldValue) ? imgList[fieldValue] : ''"
></el-image> ></el-image>
</div> </div>
@@ -226,10 +226,12 @@ const handlerCommand = (item: OptButton) => {
break break
} }
} }
const imgList: any = ref({})
const getUrl = (url: string) => { const getUrl = (url: string) => {
getFileUrl({ filePath: url }).then(res => { getFileUrl({ filePath: url }).then(res => {
return res.data imgList.value[url] = res.data
}) })
return true
} }
</script> </script>

View File

@@ -35,7 +35,6 @@ const config = useConfig()
const tree = ref() const tree = ref()
const treRef = ref() const treRef = ref()
const changeDeviceType = (val: any, obj: any) => { const changeDeviceType = (val: any, obj: any) => {
console.log('🚀 ~ changeDeviceType ~ val:', val, obj)
emit('deviceTypeChange', val, obj) emit('deviceTypeChange', val, obj)
} }
getDeviceTree().then(res => { getDeviceTree().then(res => {
@@ -105,7 +104,6 @@ getDeviceTree().then(res => {
}) })
} }
}) })
console.log('🚀 ~ file: deviceTree.vue ~ line 18 ~ getDeviceTree ~ tree:', arr, arr2, arr3)
tree.value = res.data tree.value = res.data
nextTick(() => { nextTick(() => {

View File

@@ -1,109 +1,123 @@
<template> <template>
<el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title"> <el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
<el-scrollbar> <el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" class="form-one" ref="formRef"> <el-form :inline="false" :model="form" label-width="120px" :rules="rules" class="form-one" ref="formRef">
<el-form-item label="校验密码:" prop="password"> <el-form-item label="校验密码:" prop="password">
<el-input v-model.trim="form.password" type="password" placeholder="请输入校验密码" show-password /> <el-input v-model.trim="form.password" type="password" placeholder="请输入校验密码" show-password />
</el-form-item> </el-form-item>
<el-form-item label="新密码:" prop="newPwd"> <el-form-item label="新密码:" prop="newPwd">
<el-input v-model.trim="form.newPwd" type="password" placeholder="请输入新密码" show-password /> <el-input v-model.trim="form.newPwd" type="password" placeholder="请输入新密码" show-password />
</el-form-item> </el-form-item>
<el-form-item label="确认密码:" prop="confirmPwd"> <el-form-item label="确认密码:" prop="confirmPwd">
<el-input v-model.trim="form.confirmPwd" type="password" placeholder="请输入确认密码" show-password /> <el-input
</el-form-item> v-model.trim="form.confirmPwd"
</el-form> type="password"
</el-scrollbar> placeholder="请输入确认密码"
<template #footer> show-password
<span class="dialog-footer"> />
<el-button @click="dialogVisible = false">取消</el-button> </el-form-item>
<el-button type="primary" @click="submit">确认</el-button> </el-form>
</span> </el-scrollbar>
</template> <template #footer>
</el-dialog> <span class="dialog-footer">
</template> <el-button @click="dialogVisible = false">取消</el-button>
<script lang="ts" setup> <el-button type="primary" @click="submit">确认</el-button>
import { ref, inject } from 'vue' </span>
import { reactive } from 'vue' </template>
import { ElMessage } from 'element-plus' </el-dialog>
import { passwordConfirm, updatePassword } from '@/api/user-boot/user' </template>
import { validatePwd } from '@/utils/common' <script lang="ts" setup>
import { useAdminInfo } from '@/stores/adminInfo' import { ref, inject } from 'vue'
import { reactive } from 'vue'
const adminInfo = useAdminInfo() import { ElMessage } from 'element-plus'
const dialogVisible = ref(false) import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
const title = ref('修改密码') import { validatePwd } from '@/utils/common'
const formRef = ref() import { useAdminInfo } from '@/stores/adminInfo'
// 注意不要和表单ref的命名冲突 import router from '@/router'
const form = reactive({ import { useNavTabs } from '@/stores/navTabs'
password: '', const adminInfo = useAdminInfo()
newPwd: '', const navTabs = useNavTabs()
confirmPwd: '' const dialogVisible = ref(false)
}) const title = ref('修改密码')
const rules = { const formRef = ref()
password: [ // 注意不要和表单ref的命名冲突
{ required: true, message: '请输入校验密码', trigger: 'blur' }, const form = reactive({
{ password: '',
min: 6, newPwd: '',
max: 16, confirmPwd: ''
message: '长度在 6 到 16 个字符', })
trigger: 'blur' const rules = {
} password: [
], { required: true, message: '请输入校验密码', trigger: 'blur' },
newPwd: [ {
{ required: true, message: '请输入密码', trigger: 'blur' }, min: 6,
{ max: 16,
min: 6, message: '长度在 6 到 16 个字符',
max: 16, trigger: 'blur'
message: '长度在 6 到 16 个字符', }
trigger: 'blur' ],
}, newPwd: [
{ validator: validatePwd, trigger: 'blur' } { required: true, message: '请输入密码', trigger: 'blur' },
], {
confirmPwd: [ min: 6,
{ required: true, message: '请确认密码', trigger: 'blur' }, max: 16,
{ message: '长度在 6 到 16 个字符',
min: 6, trigger: 'blur'
max: 16, },
message: '长度在 6 到 16 个字符', { validator: validatePwd, trigger: 'blur' }
trigger: 'blur' ],
}, confirmPwd: [
{ { required: true, message: '请确认密码', trigger: 'blur' },
validator: (rule: any, value: string, callback: any) => { {
if (value === '') { min: 6,
callback(new Error('请再次输入密码')) max: 16,
} else if (value !== form.newPwd) { message: '长度在 6 到 16 个字符',
callback(new Error('两次输入密码不一致!')) trigger: 'blur'
} else { },
callback() {
} validator: (rule: any, value: string, callback: any) => {
}, if (value === '') {
trigger: 'blur', callback(new Error('请再次输入密码'))
required: true } else if (value !== form.newPwd) {
} callback(new Error('两次输入密码不一致!'))
] } else {
} callback()
}
const open = () => { },
dialogVisible.value = true trigger: 'blur',
form.password = '' required: true
form.newPwd = '' }
form.confirmPwd = '' ]
} }
const submit = () => {
formRef.value.validate(async (valid: boolean) => { const open = () => {
if (valid) { dialogVisible.value = true
passwordConfirm(form.password).then(res => { form.password = ''
updatePassword({ form.newPwd = ''
id: adminInfo.$state.userIndex, form.confirmPwd = ''
newPassword: form.newPwd }
}).then((res: any) => { const submit = () => {
ElMessage.success('密码修改成功') formRef.value.validate(async (valid: boolean) => {
dialogVisible.value = false if (valid) {
}) passwordConfirm(form.password).then(res => {
}) updatePassword({
} id: adminInfo.$state.userIndex,
}) newPassword: form.newPwd
} }).then(async (res: any) => {
ElMessage.success('密码修改成功')
defineExpose({ open }) dialogVisible.value = false
</script>
setTimeout(() => {
navTabs.closeTabs()
window.localStorage.clear()
adminInfo.reset()
router.push({ name: 'login' })
}, 0)
})
})
}
})
}
defineExpose({ open })
</script>

View File

@@ -65,6 +65,7 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
if ( if (
!( !(
config.url == '/system-boot/file/upload' || config.url == '/system-boot/file/upload' ||
config.url == '/system-boot/file/getFileUrl' ||
config.url == '/harmonic-boot/grid/getAssessOverview' || config.url == '/harmonic-boot/grid/getAssessOverview' ||
config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData' || config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData' ||
config.url == '/cs-device-boot/csline/list' || config.url == '/cs-device-boot/csline/list' ||

View File

@@ -1,6 +1,6 @@
<template> <template>
<el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" :title="title"> <el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" :title="title">
<el-form :model="form" label-width="auto" class="form-two" :rules="rules"> <el-form :model="form" ref="formRef" label-width="auto" class="form-two" :rules="rules">
<el-form-item label="用户名" prop="name"> <el-form-item label="用户名" prop="name">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入昵称" /> <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入昵称" />
</el-form-item> </el-form-item>
@@ -138,6 +138,7 @@ const form = reactive({
emailNotice: 0, emailNotice: 0,
type: 0 type: 0
}) })
const formRef = ref()
const rules: Partial<Record<string, Arrayable<FormItemRule>>> = { const rules: Partial<Record<string, Arrayable<FormItemRule>>> = {
name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }], name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
role: [{ required: true, message: '角色不能为空', trigger: 'blur' }], role: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
@@ -224,9 +225,10 @@ queryRole()
const dialogVisible = ref(false) const dialogVisible = ref(false)
const title = ref('新增菜单') const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => { const open = (text: string, data?: anyObj) => {
formRef.value?.resetFields()
title.value = text title.value = text
dialogVisible.value = true dialogVisible.value = true
console.log("🚀 ~ open ~ data:", data)
if (data) { if (data) {
for (let key in form) { for (let key in form) {
form[key] = data[key] form[key] = data[key]
@@ -251,19 +253,23 @@ const open = (text: string, data?: anyObj) => {
} }
} }
const submit = async () => { const submit = async () => {
let obj = JSON.parse(JSON.stringify(form)) formRef.value.validate(async (valid: any) => {
obj.limitTime = obj.limitTime.join('-') if (valid) {
delete obj.password let obj = JSON.parse(JSON.stringify(form))
if (form.id) { obj.limitTime = obj.limitTime.join('-')
await edit(obj) delete obj.password
ElMessage.success('修改成功') if (form.id) {
} else { await edit(obj)
form.type = adminInfo.$state.userType + 1 ElMessage.success('修改成功')
await add(obj) } else {
ElMessage.success('新增成功') form.type = adminInfo.$state.userType + 1
} await add(obj)
tableStore.index() ElMessage.success('新增成功')
dialogVisible.value = false }
tableStore.index()
dialogVisible.value = false
}
})
} }
const changeValue = () => {} const changeValue = () => {}

View File

@@ -27,7 +27,7 @@
<el-input <el-input
maxlength="32" maxlength="32"
show-word-limit show-word-limit
style="width: 200px; height: 32px" style="width: 240px; height: 32px"
placeholder="请输入文件或文件夹名称" placeholder="请输入文件或文件夹名称"
clearable clearable
v-model.trim="filterText" v-model.trim="filterText"

View File

@@ -1,108 +1,119 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<TableHeader> <TableHeader>
<template v-slot:operation> <template v-slot:operation>
<el-upload <el-upload
action="" action=""
class="upload-demo" class="upload-demo"
:show-file-list="false" accept=".svg,.png,.jpg,.jpeg"
:auto-upload="false" :show-file-list="false"
:on-change="chooseImage" :auto-upload="false"
> :on-change="chooseImage"
<el-button :icon="Plus" type="primary" class="ml10">新增拓扑图</el-button> >
</el-upload> <el-button :icon="Plus" type="primary" class="ml10">新增拓扑图</el-button>
</template> </el-upload>
</TableHeader> </template>
<Table ref="tableRef" /> </TableHeader>
<popupEdit ref="popupRef"></popupEdit> <Table ref="tableRef" />
</div> <popupEdit ref="popupRef"></popupEdit>
</template> </div>
<script setup lang="ts"> </template>
import { Plus } from '@element-plus/icons-vue' <script setup lang="ts">
import { ref, onMounted, provide } from 'vue' import { Plus } from '@element-plus/icons-vue'
import TableStore from '@/utils/tableStore' import { ref, onMounted, provide } from 'vue'
import Table from '@/components/table/index.vue' import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue' import Table from '@/components/table/index.vue'
import popupEdit from './popupEdit.vue' import TableHeader from '@/components/table/header/index.vue'
import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate' import popupEdit from './popupEdit.vue'
import { ElMessage } from 'element-plus' import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
import { ElMessage } from 'element-plus'
defineOptions({
name: 'govern/manage/gplot' defineOptions({
}) name: 'govern/manage/gplot'
const tableRef = ref() })
const popupRef = ref() const tableRef = ref()
const tableStore = new TableStore({ const popupRef = ref()
showPage: false, const tableStore = new TableStore({
url: '/cs-device-boot/topologyTemplate/queryImage', showPage: false,
method: 'POST', url: '/cs-device-boot/topologyTemplate/queryImage',
column: [ method: 'POST',
{ title: '序号', width: 80,formatter: (row: any) => { column: [
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 {
} }, title: '序号',
{ title: '拓扑图模版名称', field: 'name', align: 'center' }, width: 80,
{ title: '监测点数量', field: 'pointNum', align: 'center' }, formatter: (row: any) => {
{ title: '拓扑图', field: 'filePath', align: 'center', render: 'image' }, return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
{ }
title: '操作', },
align: 'center', { title: '拓扑图模版名称', field: 'name', align: 'center' },
width: '180', { title: '监测点数量', field: 'pointNum', align: 'center' },
render: 'buttons', { title: '拓扑图', field: 'filePath', align: 'center', render: 'image' },
buttons: [ {
{ title: '操作',
name: 'edit', align: 'center',
title: '编辑', width: '180',
type: 'primary', render: 'buttons',
icon: 'el-icon-EditPen', buttons: [
render: 'basicButton', {
click: row => { name: 'edit',
popupRef.value.open( row) title: '编辑',
} type: 'primary',
}, icon: 'el-icon-EditPen',
{ render: 'basicButton',
name: 'del', click: row => {
title: '删除', popupRef.value.open(row)
type: 'danger', }
icon: 'el-icon-Delete', },
render: 'confirmButton', {
popconfirm: { name: 'del',
confirmButtonText: '确认', title: '删除',
cancelButtonText: '取消', type: 'danger',
confirmButtonType: 'danger', icon: 'el-icon-Delete',
title: '确定删除该菜单吗?' render: 'confirmButton',
}, popconfirm: {
click: row => { confirmButtonText: '确认',
deleteTopoTemplate(row.id).then(res => { cancelButtonText: '取消',
ElMessage.success('删除成功') confirmButtonType: 'danger',
tableStore.index() title: '确定删除该菜单吗?'
}) },
} click: row => {
} deleteTopoTemplate(row.id).then(res => {
] ElMessage.success('删除成功')
} tableStore.index()
], })
loadCallback: () => { }
tableStore.table.data.forEach((item: any) => { }
item.pointNum = item.csLineTopologyTemplateVOList.length ]
}) }
} ],
}) loadCallback: () => {
provide('tableStore', tableStore) tableStore.table.data.forEach((item: any) => {
item.pointNum = item.csLineTopologyTemplateVOList.length
onMounted(() => { })
tableStore.table.ref = tableRef.value }
tableStore.index() })
tableStore.table.loading = false provide('tableStore', tableStore)
})
const addMenu = () => { onMounted(() => {
// console.log(popupRef) tableStore.table.ref = tableRef.value
popupRef.value.open('新增菜单') tableStore.index()
} tableStore.table.loading = false
const chooseImage = e => { })
console.warn(e) const addMenu = () => {
uploadTopo(e.raw).then(res => { // console.log(popupRef)
ElMessage.success('新增成功') popupRef.value.open('新增菜单')
tableStore.index() }
}) const chooseImage = e => {
} const isWord =
</script> e.name.endsWith('.svg') || e.name.endsWith('.png') || e.name.endsWith('.jpg') || e.name.endsWith('.jpeg')
if (!isWord) {
return ElMessage.error('请上传图片或svg文件!')
}
uploadTopo(e.raw).then(res => {
ElMessage.success('新增成功')
tableStore.index()
})
}
</script>

View File

@@ -1,149 +1,154 @@
<template> <template>
<el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" title="编辑拓扑图信息"> <el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" title="编辑拓扑图信息">
<el-form :label-width="140"> <el-form :label-width="140">
<el-form-item label="拓扑图:" style="height: auto !important"> <el-form-item label="拓扑图:" style="height: auto !important">
<div class="gplot-content"> <div class="gplot-content">
<VueDraggableResizable class-name-draggable="gplot-content-item" <VueDraggableResizable class-name-draggable="gplot-content-item"
class-name-active="gplot-content-item-active" :active="editorIndex == index" :resizable="false" class-name-active="gplot-content-item-active" :active="editorIndex == index" :resizable="false"
:parent="true" :x="item.left" :y="item.top" :w="item.width" :h="item.height" :parent="true" :x="item.left" :y="item.top" :w="item.width" :h="item.height"
@dragStart="editorIndex = index" @dragging="resize" v-for="(item, index) in pointList" @dragStart="editorIndex = index" @dragging="resize" v-for="(item, index) in pointList"
:key="index" :isResizable="false"> :key="index" :isResizable="false">
<div class="text" style="line-height: 20px; white-space: nowrap" <div class="text" style="line-height: 20px; white-space: nowrap"
:style="{ color: item.name === '监测点' ? 'red' : 'black' }"> :style="{ color: item.name === '监测点' ? 'red' : 'black' }">
{{ item.name }} {{ item.name }}
</div> </div>
</VueDraggableResizable> </VueDraggableResizable>
<img :src="imgUrl" class="gplot-content" <img :src="imgUrl" class="gplot-content"
style="border: 1px solid #dcdfe6; position: unset; user-select: none" draggable="false" /> style="border: 1px solid #dcdfe6; position: unset; user-select: none" draggable="false" />
<div>注意监测点不要移出圈</div> <div>注意监测点不要移出圈</div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="监测点位置:" v-if="editorIndex > -1"> <el-form-item label="监测点位置:" v-if="editorIndex > -1">
<div style="display: flex"> <div style="display: flex">
<el-select v-model.trim="pointList[editorIndex].position" placeholder="请选择" style="flex: 1" <el-select v-model.trim="pointList[editorIndex].position" placeholder="请选择" style="flex: 1"
@change="positionChange"> @change="positionChange">
<el-option v-for="item in linePosition" :key="item.id" :label="item.name" <el-option v-for="item in linePosition" :key="item.id" :label="item.name"
:value="item.id"></el-option> :value="item.id"></el-option>
</el-select> </el-select>
<el-button class="ml20" type="danger" @click="deletePoint" icon="el-icon-Delete">删除</el-button> <el-button class="ml20" type="danger" @click="deletePoint" icon="el-icon-Delete">删除</el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label=" "> <el-form-item label=" ">
<el-button type="primary" @click="addPoint">添加监测点</el-button> <el-button type="primary" @click="addPoint">添加监测点</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button> <el-button type="primary" @click="submit">确认</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, inject } from 'vue' import { ref, inject } from 'vue'
import { reactive } from 'vue' import { reactive } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import { fullUrl } from '@/utils/common' import { fullUrl } from '@/utils/common'
import VueDraggableResizable from 'vue-draggable-resizable' import VueDraggableResizable from 'vue-draggable-resizable'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { addLineTemplate } from '@/api/cs-device-boot/lineTemplate' import { addLineTemplate } from '@/api/cs-device-boot/lineTemplate'
defineOptions({ defineOptions({
name: 'govern/manage/gplot/popupEdit' name: 'govern/manage/gplot/popupEdit'
}) })
const tableStore = inject('tableStore') as TableStore const tableStore = inject('tableStore') as TableStore
const editorIndex = ref(-1) const editorIndex = ref(-1)
const pointList = ref<any[]>([]) const pointList = ref<any[]>([])
const topoId = ref() const topoId = ref()
const imgUrl = ref('') const imgUrl = ref('')
const linePosition = useDictData().getBasicData('Line_Position') const linePosition = useDictData().getBasicData('Line_Position')
const dialogVisible = ref(false) const dialogVisible = ref(false)
const open = (data: anyObj) => { const open = (data: anyObj) => {
pointList.value = data.csLineTopologyTemplateVOList.map((item: any) => { pointList.value = data.csLineTopologyTemplateVOList.map((item: any) => {
return { return {
name: linePosition.find(item2 => { name: linePosition.find(item2 => {
return item2.id == item.linePostion return item2.id == item.linePostion
})?.name, })?.name,
position: item.linePostion, position: item.linePostion,
width: 'auto', width: 'auto',
height: 20, height: 20,
top: item.lng, top: item.lng,
left: item.lat left: item.lat
} }
}) })
topoId.value = data.id topoId.value = data.id
imgUrl.value = fullUrl(data.filePath) imgUrl.value = fullUrl(data.filePath)
dialogVisible.value = true dialogVisible.value = true
} }
const positionChange = (e: string) => { const positionChange = (e: string) => {
pointList.value[editorIndex.value].name = linePosition.find((item: any) => { pointList.value[editorIndex.value].name = linePosition.find((item: any) => {
return item.id == e return item.id == e
})?.name })?.name
} }
const resize = (left: number, top: number) => { const resize = (left: number, top: number) => {
const dom = pointList.value[editorIndex.value] const dom = pointList.value[editorIndex.value]
dom.left = left dom.left = left
dom.top = top dom.top = top
} }
const addPoint = () => { const addPoint = () => {
pointList.value.push({ pointList.value.push({
name: '监测点', name: '监测点',
position: '', position: '',
width: 'auto', width: 'auto',
height: 20, height: 20,
top: 100, top: 100,
left: 100 left: 100
}) })
editorIndex.value = pointList.value.length - 1 editorIndex.value = pointList.value.length - 1
} }
const deletePoint = () => { const deletePoint = () => {
pointList.value.splice(editorIndex.value, 1) pointList.value.splice(editorIndex.value, 1)
editorIndex.value = -1 editorIndex.value = -1
} }
const submit = async () => { const submit = async () => {
let allSelect = pointList.value.some(item => item.position === '') let allSelect = pointList.value.some(item => item.position === '')
if (allSelect) {
ElMessage.warning('请完善所有监测点位置') if (pointList.value.length == 0) {
return ElMessage.warning('请添加监测点!')
} return
let arr = pointList.value.map(item => { }
return { if (allSelect) {
linePostion: item.position, ElMessage.warning('请完善所有监测点位置!')
lat: item.left, return
lng: item.top, }
topoId: topoId.value let arr = pointList.value.map(item => {
} return {
}) linePostion: item.position,
addLineTemplate(arr).then(res => { lat: item.left,
ElMessage.success('保存成功') lng: item.top,
tableStore.index() topoId: topoId.value
dialogVisible.value = false }
}) })
} addLineTemplate(arr).then(res => {
ElMessage.success('保存成功')
defineExpose({ open }) tableStore.index()
</script> dialogVisible.value = false
})
<style lang="scss"> }
@import 'vue-draggable-resizable/style.css';
defineExpose({ open })
.gplot-content { </script>
position: relative;
width: 375px; <style lang="scss">
object-fit: cover; @import 'vue-draggable-resizable/style.css';
overflow: hidden;
.gplot-content {
.gplot-content-item { position: relative;
border-color: transparent; width: 375px;
cursor: move; object-fit: cover;
overflow: hidden;
&-active {
border-color: red; .gplot-content-item {
} border-color: transparent;
} cursor: move;
}
</style> &-active {
border-color: red;
}
}
}
</style>

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<TableHeader date-picker> <TableHeader :showReset="false">
<template #operation> <template #operation>
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button> <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
</template> </template>
@@ -21,7 +21,7 @@ import { Plus } from '@element-plus/icons-vue'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
defineOptions({ defineOptions({
name: 'govern/device/sensitiveLoadMange' name: 'govern/sensitiveLoadMange/index'
}) })
const detail = ref() const detail = ref()

View File

@@ -1,15 +1,14 @@
<template> <template>
<el-dialog width="500px" v-model.trim="dialogVisible" :title="title"> <el-dialog width="500px" v-model.trim="dialogVisible" :title="title">
<el-form :model="form" ref="formRef" class="form-one" label-width="auto" :rules="rules">
<el-form :model="form" class="form-one" label-width="auto"> <el-form-item label="名称" prop="name">
<el-form-item label="名称">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入名称" /> <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入名称" />
</el-form-item> </el-form-item>
<el-form-item label="编码"> <el-form-item label="编码" prop="code">
<el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入编码" /> <el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入编码" />
</el-form-item> </el-form-item>
<el-form-item label="类型" v-if="title == '新增'|| title == '编辑'"> <el-form-item label="类型" v-if="title == '新增' || title == '编辑'" >
<el-select v-model.trim="form.type" placeholder="请选择类型"> <el-select v-model.trim="form.type" placeholder="请选择类型" clearable>
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" /> <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -17,10 +16,9 @@
<el-input maxlength="32" show-word-limit v-model.trim="form.remark" placeholder="请输入备注" /> <el-input maxlength="32" show-word-limit v-model.trim="form.remark" placeholder="请输入备注" />
</el-form-item> </el-form-item>
<el-form-item label="排序"> <el-form-item label="排序" prop="sort">
<el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" /> <el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@@ -49,29 +47,35 @@ const form = reactive({
name: '', name: '',
code: '', code: '',
remark: '', remark: '',
// type: 2, type: 2,
sort: 100, sort: 100,
pid: '', pid: '',
id: '' id: ''
}) })
const formRef = ref()
const rules = {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const options = ref([ const options = ref([
{ name: '通用指标', value: 2 }, { name: '通用指标', value: 2 },
{ name: 'APF模块', value: 3 }, { name: 'APF模块', value: 3 },
{ name: '星型接线', value: 4 }, { name: '星型接线', value: 4 },
{ name: '角型接线', value: 5 }, { name: '角型接线', value: 5 },
{ name: 'V型接线', value: 6 }, { name: 'V型接线', value: 6 },
{ name: '驾驶舱指标', value: 7 }, { name: '驾驶舱指标', value: 7 }
]) ])
const dialogVisible = ref(false) const dialogVisible = ref(false)
const title = ref('新增菜单') const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => { const open = (text: string, data?: anyObj) => {
formRef.value?.resetFields()
title.value = text title.value = text
for (let key in form) { for (let key in form) {
form[key] = data ? data[key] : '' form[key] = data ? data[key] : ''
if (key == 'sort') { if (key == 'sort') {
form[key] = data?.sort ? data[key] : 100 form[key] = data?.sort ? data[key] : 100
// console.log("🚀 ~ open ~ form[key]:", form[key]) // console.log("🚀 ~ open ~ form[key]:", form[key])
} }
@@ -80,28 +84,24 @@ const open = (text: string, data?: anyObj) => {
} }
const submit = async () => { const submit = async () => {
// 非空校验 // 非空校验
for (let key in form) { formRef.value.validate(async valid => {
if (key != 'pid' && key != 'id' && key != 'sort') { if (valid) {
if (!form[key]) { if (form.id) {
ElMessage.warning('请填写完整信息') await updateStatistical(form).then(res => {
return ElMessage.success('编辑成功')
})
} else {
if (!form.pid) {
form.pid = tableStore.table.params.pid
}
await addDictTree(form).then(res => {
ElMessage.success('新增成功')
})
} }
emits('over')
dialogVisible.value = false
} }
} })
if (form.id) {
await updateStatistical(form).then(res => {
ElMessage.success('编辑成功')
})
} else {
if (!form.pid) {
form.pid = tableStore.table.params.pid
}
await addDictTree(form).then(res => {
ElMessage.success('新增成功')
})
}
emits('over')
dialogVisible.value = false
} }
defineExpose({ open }) defineExpose({ open })