Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

方案数据&新增方案&新增/修改测试项页面

Browse Source
This commit is contained in:
zhujiyan
2024-06-13 20:21:25 +08:00
parent d76037e7b6
commit 730512468a
8 changed files with 1794 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -17,6 +17,8 @@
"axios": "^1.6.2",
"crypto-js": "^4.2.0",
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9",
"echarts-liquidfill": "^3.1.0",
"echarts4": "npm:echarts@^4.9.0",
"element-plus": "^2.7.5",
"html2canvas": "^1.4.1",

31
pnpm-lock.yaml generated
View File

@@ -32,6 +32,12 @@ importers:
echarts:
specifier: ^5.4.3
version: 5.4.3
echarts-gl:
specifier: ^2.0.9
version: 2.0.9(echarts@5.4.3)
echarts-liquidfill:
specifier: ^3.1.0
version: 3.1.0(echarts@5.4.3)
echarts4:
specifier: npm:echarts@^4.9.0
version: echarts@4.9.0
@@ -824,6 +830,9 @@ packages:
resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==, tarball: https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz}
engines: {node: '>= 8.10.0'}
claygl@1.3.0:
resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==, tarball: https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz}
color-convert@1.9.3:
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
@@ -888,6 +897,16 @@ packages:
dom7@3.0.0:
resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==}
echarts-gl@2.0.9:
resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==, tarball: https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz}
peerDependencies:
echarts: ^5.1.2
echarts-liquidfill@3.1.0:
resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==, tarball: https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz}
peerDependencies:
echarts: ^5.0.1
echarts@4.9.0:
resolution: {integrity: sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==}
@@ -2269,6 +2288,8 @@ snapshots:
optionalDependencies:
fsevents: 2.3.3
claygl@1.3.0: {}
color-convert@1.9.3:
dependencies:
color-name: 1.1.3
@@ -2319,6 +2340,16 @@ snapshots:
dependencies:
ssr-window: 3.0.0
echarts-gl@2.0.9(echarts@5.4.3):
dependencies:
claygl: 1.3.0
echarts: 5.4.3
zrender: 5.4.4
echarts-liquidfill@3.1.0(echarts@5.4.3):
dependencies:
echarts: 5.4.3
echarts@4.9.0:
dependencies:
zrender: 4.3.2

156
src/components/echarts/MyEchart.vue
View File

@@ -6,14 +6,22 @@
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
// import echarts from './echarts'
import * as echarts from 'echarts' // 全引入
import 'echarts-gl'
import 'echarts-liquidfill'
import 'echarts/lib/component/dataZoom'
import { color, gradeColor3 } from './color'
import { useConfig } from '@/stores/config'
const config = useConfig()
color[0] = config.layout.elementUiPrimary[0]
const chartRef = ref<HTMLDivElement>()
const props = defineProps(['options'])
let chart: echarts.ECharts | any = null
const resizeHandler = () => {
// 不在视野中的时候不进行resize
if (!chartRef.value) return
if (chartRef.value.offsetHeight == 0) return
chart.getZr().painter.getViewportRoot().style.display = 'none'
requestAnimationFrame(() => {
chart.resize()
@@ -24,18 +32,17 @@ const initChart = () => {
chart?.dispose()
chart = echarts.init(chartRef.value as HTMLDivElement)
chart.setOption({
const options = {
title: {
left: 'center',
textStyle: {
// textStyle: {
color: '#000',
fontSize: 18
},
...(props.options.title || null)
fontSize: 18,
// },
...(props.options?.title || null)
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
@@ -43,76 +50,93 @@ const initChart = () => {
fontSize: 16
}
},
textStyle: {
// textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
fontSize: 14,
// },
backgroundColor: 'rgba(0,0,0,0.35)',
borderWidth: 0,
...(props.options.tooltip || null)
...(props.options?.tooltip || null)
},
legend: {
right: 20,
top: 0,
itemGap: 10,
itemStyle: {},
textStyle: {
// textStyle: {
fontSize: 12,
padding: [2, 0, 0, 0] //[上、右、下、左]
},
padding: [2, 0, 0, 0], //[上、右、下、左]
// },
itemWidth: 15,
itemHeight: 10,
...(props.options.legend || null)
...(props.options?.legend || null)
},
grid: {
top: '50px',
left: '10px',
right: '60px',
bottom: '40px',
containLabel: true
left: '30px',
right: '70px',
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
containLabel: true,
...(props.options?.grid || null)
},
xAxis: handlerXAxis(),
yAxis: handlerYAxis(),
dataZoom: [
xAxis: props.options?.xAxis ? handlerXAxis() : null,
yAxis: props.options?.yAxis ? handlerYAxis() : null,
dataZoom: props.options?.dataZoom || [
{
type: 'inside',
height: 13,
start: 0,
bottom: '20px',
end: 100,
...(props.options.dataZoom || null)
end: 100
},
{
start: 0,
height: 13,
bottom: '20px',
end: 100,
...(props.options.dataZoom || null)
end: 100
}
],
color: [
...(props.options.color || ''),
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3'
],
...props.options.options
})
color: props.options?.color || color,
series: props.options?.series,
...props.options?.options
}
handlerBar(options)
// 处理柱状图
chart.setOption(options)
setTimeout(() => {
chart.resize()
}, 0)
}
const handlerBar = (options: any) => {
if (Array.isArray(options.series)) {
options.series.forEach((item: any) => {
if (item.type === 'bar') {
item.barMinHeight = 10
item.barMaxWidth = 20
item.itemStyle = Object.assign(
{
color: (params: any) => {
if (params.value == 0 || params.value == 3.14159) {
return '#ccc'
} else {
return props.options?.color
? props.options?.color[params.seriesIndex]
: color[params.seriesIndex]
}
}
},
item.itemStyle
)
}
})
}
}
const handlerYAxis = () => {
let temp = {
type: 'value',
nameGap: 15,
nameTextStyle: {
color: '#000'
},
@@ -130,24 +154,24 @@ const handlerYAxis = () => {
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#000'],
color: ['#ccc'],
type: 'dashed',
opacity: 0.5
}
}
}
// props.options.xAxis 是数组还是对象
if (Array.isArray(props.options.yAxis)) {
return props.options.yAxis.map((item: any) => {
// props.options?.xAxis 是数组还是对象
if (Array.isArray(props.options?.yAxis)) {
return props.options?.yAxis.map((item: any) => {
return {
...item,
...temp
...temp,
...item
}
})
} else {
return {
...temp,
...props.options.yAxis
...props.options?.yAxis
}
}
}
@@ -161,35 +185,47 @@ const handlerXAxis = () => {
}
},
axisLabel: {
textStyle: {
// textStyle: {
fontFamily: 'dinproRegular',
color: '#000',
fontSize: '12'
}
// }
}
}
// props.options.xAxis 是数组还是对象
if (Array.isArray(props.options.xAxis)) {
return props.options.xAxis.map((item: any) => {
// props.options?.xAxis 是数组还是对象
if (Array.isArray(props.options?.xAxis)) {
return props.options?.xAxis.map((item: any) => {
return {
...item,
...temp
...temp,
...item
}
})
} else {
return {
...temp,
...props.options.xAxis
...props.options?.xAxis
}
}
}
let throttle: ReturnType<typeof setTimeout>
// 动态计算table高度
const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
if (throttle) {
clearTimeout(throttle)
}
throttle = setTimeout(() => {
resizeHandler()
}, 100)
}
})
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
resizeObserver.observe(chartRef.value!)
})
defineExpose({ initChart })
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
resizeObserver.unobserve(chartRef.value!)
chart?.dispose()
})
watch(

14
src/components/echarts/color.ts Normal file
View File

@@ -0,0 +1,14 @@
export let color = [
'#07CCCA',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3'
]
export const gradeColor3 = ['#339966', '#FFCC33', '#CC0000']
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#CC0000']

445
src/views/govern/terminal/deviceLedger/index.vue Normal file
View File

@@ -0,0 +1,445 @@
<template>
<div class="default-main">
<TableHeader>
<template #select>
<el-form-item label="设备类型">
<!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<el-select
v-model="tableStore.table.params.devType"
clearable
@change="devTypeChange"
placeholder="请选择设备类型"
>
<el-option
v-for="item in devTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="设备型号">
<el-select v-model="tableStore.table.params.devModel" clearable placeholder="请选择设备型号">
<el-option
v-for="item in devModelOptionsFilter"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="通讯协议">
<el-select v-model="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
<el-option label="MQTT" value="mqtt"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="tableStore.table.params.status" clearable placeholder="请选择状态">
<el-option label="未注册" :value="1"></el-option>
<el-option label="注册" :value="2"></el-option>
<el-option label="接入" :value="3"></el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
模版下载
</el-button>
<el-upload
style="display: inline-block"
action=""
accept=".xlsx"
class="upload-demo"
:show-file-list="false"
:auto-upload="false"
:on-change="bulkImport"
>
<el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
</el-upload>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<el-dialog
:title="dialogTitle"
v-model="dialogFormVisible"
:close-on-click-modal="false"
:before-close="resetForm"
draggable
width="40%"
>
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label="设备名称:" prop="name">
<el-input
v-model="form.name"
autocomplete="off"
clearable
placeholder="请输入（项目名称+设备名称）"
></el-input>
</el-form-item>
<el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input v-model="form.ndid" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select v-model="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
<el-option
v-for="item in devTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model="form.devModel" placeholder="请选择" clearable>
<el-option
v-for="item in formDevModelOptionsFilter"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model="form.devAccessMethod" placeholder="请选择" clearable>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="合同号:" prop="cntractNo" class="top">
<el-input v-model="form.cntractNo" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
<div class="qrcode-label">
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
addEquipmentDelivery,
deleteEquipmentDelivery,
editEquipmentDelivery,
batchImportDevice,
resetEquipmentDelivery,
governDeviceRegister,
portableDeviceRegister,
portableDeviceAccess
} from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common'
defineOptions({
name: 'govern/log/debug'
})
const devTypeOptions: any = ref([])
const deivce: any = ref({})
const ruleFormRef = ref()
const form = reactive({
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
})
const rules = reactive({
name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
devType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
devModel: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }]
})
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增设备')
const devModelOptions: any = ref([])
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
devModelOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (tableStore.table.params.devType) {
return item.pid == tableStore.table.params.devType
} else {
return true
}
})
})
const formDevModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
})
const tableStore = new TableStore({
url: '/cs-device-boot/EquipmentDelivery/list',
method: 'POST',
column: [
{ title: '设备名称', field: 'name' },
{
title: '设备类型',
field: 'devType',
formatter: row => {
return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '设备型号',
field: 'devModel',
formatter: row => {
return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '通讯协议',
field: 'devAccessMethod',
formatter: row => {
return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
}
},
{ title: '录入时间', field: 'createTime' },
{ title: '网络设备ID', field: 'ndid' },
{
title: '状态',
field: 'status',
width: 100,
render: 'tag',
custom: {
1: 'warning',
2: 'success',
3: 'primary',
4: 'primary'
},
replaceValue: {
1: '未注册',
2: '注册',
3: '接入',
4: '已取消'
}
// formatter: row => {
// return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
// },
},
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '编辑设备'
for (let key in form) {
form[key] = row[key]
}
form.id = row.id
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'basicButton',
click: row => {
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteEquipmentDelivery(row.id).then(res => {
ElMessage.success('删除成功!')
tableStore.onTableAction('search', {})
})
})
.catch(e => {})
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
tableStore.table.params.orderBy = 'desc'
// 设备类型
const devTypeChange = (e: any) => {
if (!e) {
return
}
tableStore.table.params.devModel = ''
}
// 下载模版
const downLoadFile = () => {
window.open(window.location.origin + '/api/cs-device-boot/EquipmentDelivery/getExcelTemplate')
}
// 导入模版
const bulkImport = (e: any) => {
batchImportDevice(e.raw).then((res: any) => {
if (res.type === 'application/json') {
const reader = new FileReader()
reader.readAsText(res)
reader.onload = (e: any) => {
let data = JSON.parse(e.target.result)
if (data.code === 'A0000') {
ElMessage.success(data.message)
tableStore.onTableAction('search', {})
} else {
ElMessage.error(data.message)
}
}
} else {
ElMessage.error('导入失败!')
let url = window.URL.createObjectURL(res)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '导入失败.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
})
}
// 新增
const add = () => {
dialogFormVisible.value = true
dialogTitle.value = '新增设备'
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增设备') {
addEquipmentDelivery(form).then(res => {
ElMessage.success('新增成功')
resetForm()
tableStore.onTableAction('search', {})
})
} else {
editEquipmentDelivery(form).then(res => {
ElMessage.success('修改成功')
resetForm()
tableStore.onTableAction('search', {})
})
}
}
})
}
// 清空表格
const resetForm = () => {
ruleFormRef.value.resetFields()
dialogFormVisible.value = false
nextTick(() => {
// 模拟待编辑数据
let user = {
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
}
Object.assign(form, user)
})
}
const formDevTypeChange = (e: any) => {
if (!e) {
return
}
form.devModel = ''
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
const addMenu = () => {}
</script>
<style lang="scss" scoped>
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
height: 140px;
}
}
</style>

445
src/views/govern/terminal/deviceMonitor/index.vue Normal file
View File

@@ -0,0 +1,445 @@
<template>
<div class="default-main">
<TableHeader>
<template #select>
<el-form-item label="设备类型">
<!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<el-select
v-model="tableStore.table.params.devType"
clearable
@change="devTypeChange"
placeholder="请选择设备类型"
>
<el-option
v-for="item in devTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="设备型号">
<el-select v-model="tableStore.table.params.devModel" clearable placeholder="请选择设备型号">
<el-option
v-for="item in devModelOptionsFilter"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="通讯协议">
<el-select v-model="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
<el-option label="MQTT" value="mqtt"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="tableStore.table.params.status" clearable placeholder="请选择状态">
<el-option label="未注册" :value="1"></el-option>
<el-option label="注册" :value="2"></el-option>
<el-option label="接入" :value="3"></el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
模版下载
</el-button>
<el-upload
style="display: inline-block"
action=""
accept=".xlsx"
class="upload-demo"
:show-file-list="false"
:auto-upload="false"
:on-change="bulkImport"
>
<el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
</el-upload>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<el-dialog
:title="dialogTitle"
v-model="dialogFormVisible"
:close-on-click-modal="false"
:before-close="resetForm"
draggable
width="40%"
>
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label="设备名称:" prop="name">
<el-input
v-model="form.name"
autocomplete="off"
clearable
placeholder="请输入（项目名称+设备名称）"
></el-input>
</el-form-item>
<el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input v-model="form.ndid" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select v-model="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
<el-option
v-for="item in devTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model="form.devModel" placeholder="请选择" clearable>
<el-option
v-for="item in formDevModelOptionsFilter"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model="form.devAccessMethod" placeholder="请选择" clearable>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="合同号:" prop="cntractNo" class="top">
<el-input v-model="form.cntractNo" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
<div class="qrcode-label">
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
addEquipmentDelivery,
deleteEquipmentDelivery,
editEquipmentDelivery,
batchImportDevice,
resetEquipmentDelivery,
governDeviceRegister,
portableDeviceRegister,
portableDeviceAccess
} from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common'
defineOptions({
name: 'govern/log/debug'
})
const devTypeOptions: any = ref([])
const deivce: any = ref({})
const ruleFormRef = ref()
const form = reactive({
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
})
const rules = reactive({
name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
devType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
devModel: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }]
})
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增设备')
const devModelOptions: any = ref([])
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
devModelOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (tableStore.table.params.devType) {
return item.pid == tableStore.table.params.devType
} else {
return true
}
})
})
const formDevModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
})
const tableStore = new TableStore({
url: '/cs-device-boot/EquipmentDelivery/list',
method: 'POST',
column: [
{ title: '设备名称', field: 'name' },
{
title: '设备类型',
field: 'devType',
formatter: row => {
return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '设备型号',
field: 'devModel',
formatter: row => {
return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '通讯协议',
field: 'devAccessMethod',
formatter: row => {
return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
}
},
{ title: '录入时间', field: 'createTime' },
{ title: '网络设备ID', field: 'ndid' },
{
title: '状态',
field: 'status',
width: 100,
render: 'tag',
custom: {
1: 'warning',
2: 'success',
3: 'primary',
4: 'primary'
},
replaceValue: {
1: '未注册',
2: '注册',
3: '接入',
4: '已取消'
}
// formatter: row => {
// return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
// },
},
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '编辑设备'
for (let key in form) {
form[key] = row[key]
}
form.id = row.id
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'basicButton',
click: row => {
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteEquipmentDelivery(row.id).then(res => {
ElMessage.success('删除成功!')
tableStore.onTableAction('search', {})
})
})
.catch(e => {})
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
tableStore.table.params.orderBy = 'desc'
// 设备类型
const devTypeChange = (e: any) => {
if (!e) {
return
}
tableStore.table.params.devModel = ''
}
// 下载模版
const downLoadFile = () => {
window.open(window.location.origin + '/api/cs-device-boot/EquipmentDelivery/getExcelTemplate')
}
// 导入模版
const bulkImport = (e: any) => {
batchImportDevice(e.raw).then((res: any) => {
if (res.type === 'application/json') {
const reader = new FileReader()
reader.readAsText(res)
reader.onload = (e: any) => {
let data = JSON.parse(e.target.result)
if (data.code === 'A0000') {
ElMessage.success(data.message)
tableStore.onTableAction('search', {})
} else {
ElMessage.error(data.message)
}
}
} else {
ElMessage.error('导入失败!')
let url = window.URL.createObjectURL(res)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '导入失败.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
})
}
// 新增
const add = () => {
dialogFormVisible.value = true
dialogTitle.value = '新增设备'
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增设备') {
addEquipmentDelivery(form).then(res => {
ElMessage.success('新增成功')
resetForm()
tableStore.onTableAction('search', {})
})
} else {
editEquipmentDelivery(form).then(res => {
ElMessage.success('修改成功')
resetForm()
tableStore.onTableAction('search', {})
})
}
}
})
}
// 清空表格
const resetForm = () => {
ruleFormRef.value.resetFields()
dialogFormVisible.value = false
nextTick(() => {
// 模拟待编辑数据
let user = {
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
}
Object.assign(form, user)
})
}
const formDevTypeChange = (e: any) => {
if (!e) {
return
}
form.devModel = ''
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
const addMenu = () => {}
</script>
<style lang="scss" scoped>
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
height: 140px;
}
}
</style>

504
src/views/govern/terminal/planData/index.vue Normal file
View File

@@ -0,0 +1,504 @@
<template>
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
<div class="device-manage-right" v-if="deviceData">
<el-descriptions title="测试项信息" class="mb10" :column="4" border>
<template #extra>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0)">新增方案</el-button>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(1)">
新增测试项
</el-button>
</template>
<el-descriptions-item label="测试项名称">
{{ deviceData.name }}
</el-descriptions-item>
<el-descriptions-item label="PT变比">
{{ echoName(deviceData.devType, devTypeOptions) }}
</el-descriptions-item>
<el-descriptions-item label="CT变比">
{{ deviceData.devAccessMethod }}
</el-descriptions-item>
<el-descriptions-item label="统计间隔">
{{ deviceData.ndid }}
</el-descriptions-item>
<el-descriptions-item label="电压等级">
{{ echoName(deviceData.devModel, devModelOptions) }}
</el-descriptions-item>
<el-descriptions-item label="接线方式">
{{ deviceData.time }}
</el-descriptions-item>
<el-descriptions-item label="起始时间">
{{ deviceData.time }}
</el-descriptions-item>
<el-descriptions-item label="结束时间">
{{ deviceData.time }}
</el-descriptions-item>
<el-descriptions-item label="安装位置">
{{ echoName(deviceData.devModel, devModelOptions) }}
</el-descriptions-item>
<el-descriptions-item label="操作">
<el-button type="primary" icon="el-icon-EditPen" @click="handleOpen(2)">修改</el-button>
<el-button type="primary" icon="el-icon-InfoFilled" @click="handleOpen(3)">
设备信息
</el-button>
</el-descriptions-item>
</el-descriptions>
<div class="history_title">
<p>历史趋势</p>
</div>
<div class="history_header">
<el-form :model="form" class="history_select">
<el-form-item label="统计指标">
<el-select v-model="form.index" placeholder="请选择统计指标" clearable>
<el-option
v-for="item in rankOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型">
<el-select v-model="form.type" placeholder="请选择值类型" clearable>
<el-option
v-for="item in rankOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="history_searchBtn">
<el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button>
<el-button type="primary" icon="el-icon-Download" @click="handleExport">报表导出</el-button>
</div>
</div>
<div class="history_chart">
<MyEchart :options="echartsData" v-if="echartsData" />
</div>
<!-- <el-tabs v-model="dataSet" type="border-card" class="device-manage-box-card" @tab-click="handleClick">
<el-tab-pane
lazy
:label="item.name"
:name="item.id"
v-for="(item, index) in deviceData.dataSetList"
:key="index"
></el-tab-pane>
<div :style="{ height: tableHeight }" v-loading="tableLoading">
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
<vxe-column type="seq" title="序号" width="80"></vxe-column>
<vxe-column field="name" title="数据名称"></vxe-column>
<vxe-column field="phasic" title="相别"></vxe-column>
<vxe-column field="type" title="数据类型"></vxe-column>
<vxe-column field="unit" title="单位"></vxe-column>
<vxe-column field="startTimes" title="开始次数"></vxe-column>
<vxe-column field="endTimes" title="结束次数"></vxe-column>
</vxe-table>
</div>
</el-tabs> -->
</div>
<el-empty v-else description="请选择设备" class="device-manage-right" />
<MangePopup ref="mangePopup" />
</div>
</template>
<script lang="ts" setup>
import MangePopup from './popup.vue'
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import { mainHeight } from '@/utils/layout'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
// import { getTargetById } from '@/api/cs-device-boot/csDatalistay'
import { getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
defineOptions({
name: 'govern/device/manage'
})
const pageHeight = mainHeight(20)
const loading = ref(true)
const tableLoading = ref(false)
const getGroupLoading = ref(false)
const deviceData = ref<any>(null)
const dataSet = ref('')
const devTypeOptions = ref([])
const devModelOptions = ref([])
const tableData = ref([])
const tableHeight = mainHeight(235).height
const form = ref({})
form.value = {
index: '',
type: ''
}
const rankOptions = ref([
{
value: '1',
label: '1级'
},
{
value: '2',
label: '2级'
},
{
value: '3',
label: '3级'
}
])
const nodeClick = (e: anyObj) => {
if (!e) {
loading.value = false
return
}
if (e.level == 2) {
loading.value = true
getDeviceData(e.id, 'rt').then((res: any) => {
deviceData.value = res.data
loading.value = false
if (res.data.dataSetList.length === 0) {
dataSet.value = ''
tableData.value = []
} else {
dataSet.value = res.data.dataSetList[0].id
handleClick()
}
})
}
}
const handleClick = () => {
tableLoading.value = true
tableData.value = []
setTimeout(() => {
// getTargetById(dataSet.value).then(res => {
// tableData.value = res.data
// tableLoading.value = false
// })
}, 100)
}
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
devModelOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
const echoName = (value: any, list: any[]) => {
return list.find(item => item.value == value)?.label
}
const mangePopup = ref()
const handleOpen = (val: any) => {
mangePopup.value.open(val)
}
const echartsData = ref<any>(null)
//加载echarts图表
const init = () => {
echartsData.value = null
loading.value = true
// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
return item[0]
})
const valueList = data.map(function (item) {
return item[1]
})
const iconThree =
'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
const iconDanger =
'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
echartsData.value = {
options: {
title: [
{
left: 'center',
text: '10KV 母线_监测点 相电压有效值'
}
],
// backgroundColor: '#1B232E',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
// textStyle: {
// color: 'rgba(255, 255, 255, 1)'
// },
// backgroundColor: 'rgba(0, 0, 0, 0.8)',
// borderColor: 'rgba(219, 230, 255, 0.8)'
},
legend: {
//legend使用iconfont图标
data: [
{
name: 'A相',
icon: iconThree
},
{
name: 'B相',
icon: iconThree
},
{
name: 'C相',
icon: iconThree
},
{
name: '暂降',
icon: iconDanger
}
],
x: 'right',
textStyle: {
// color: 'white',
fontSize: 14
},
top: 10,
right: 50,
itemWidth: 20,
itemHeight: 10,
itemGap: 15
},
grid: {
left: '1%',
right: '5%',
bottom: '2%',
top: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12
},
data: ['01:12', '02:12', '03:12', '04:12', '05:12', '06:12', '07:12', '08:12', '09:12', '10:12'],
axisLine: {
lineStyle: {
color: '#43485E'
}
}
}
],
yAxis: [
{
type: 'value',
name: 'KV',
axisLabel: {
color: '#A9AEB2',
fontSize: 12
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
// color: 'white'
}
},
nameTextStyle: {
color: '#A9AEB2',
fontSize: '12'
},
splitLine: {
show: false,
lineStyle: {
color: ['#43485E'],
width: 1,
type: 'solid'
}
}
}
],
dataZoom: [
{
type: 'inside',
show: true,
realtime: true,
start: 0,
end: 100
},
{
type: 'slider',
realtime: true,
start: 0,
end: 100,
textStyle: {
// color: 'white'
},
bottom: 0,
borderColor: '#0e2038',
dataBackground: {
areaStyle: {
// color: 'white'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: '#DAA521',
lineStyle: {
color: '#DAA521'
}
}
},
data: [80, 90, 70, 60, 50, 40, 30, 50, 60, 70]
},
{
name: 'B相',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: '#2E8B58',
lineStyle: {
color: '#2E8B58'
}
}
},
data: [70, 55, 36, 55, 42, 30, 25, 24, 23, 21]
},
{
name: 'C相',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: '#A5292A',
lineStyle: {
color: '#A5292A'
}
}
},
data: [45, 53, 32, 29, 45, 36, 39, 34, 32, 31]
},
{
name: '暂降',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: '#d81e06',
lineStyle: {
color: '#d81e06'
}
}
},
data: []
}
]
}
}
}
//搜素
const handleSearch = () => {
console.log(form.value, '搜索')
}
//导出
const handleExport = () => {
console.log(form.value, '导出')
}
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
.device-manage {
display: flex;
height: calc(100vh - 100px);
// overflow-y: auto;
&-right {
// overflow: auto;
flex: 1;
padding: 10px 10px 10px 0;
.el-descriptions__header {
height: 36px;
margin-bottom: 7px;
display: flex;
align-items: center;
}
}
.device-manage-right {
overflow: hidden;
flex: 1 !important;
padding: 10px 10px 10px 0;
.el-descriptions__header {
height: 36px;
margin-bottom: 7px;
display: flex;
align-items: center;
}
}
}
.history_title {
width: 100%;
p {
height: 32px;
line-height: 32px;
font-size: 16px;
font-weight: bold;
}
}
.history_header {
display: flex;
.history_select {
width: 65%;
display: flex;
justify-content: flex-start;
.el-select {
margin-right: 10px;
}
}
.history_searchBtn {
flex: 1;
display: flex;
justify-content: flex-end;
}
}
.history_chart {
width: 100%;
height: calc(100vh - 400px);
margin-top: 10px;
}
</style>

257
src/views/govern/terminal/planData/popup.vue Normal file
View File

@@ -0,0 +1,257 @@
<template>
<el-dialog
class="cn-operate-dialog device-manage-popup"
v-model="dialogVisible"
:title="title"
draggable
:style="{ width: activeFormIndex == 0 ? '500px' : '65%' }"
>
<el-form
:model="form"
scroll-to-error
:class="activeFormIndex == 0 ? 'form-one' : 'form-two'"
label-width="120px"
>
<!-- 新增方案数据 -->
<el-form-item label="统计指标：" v-if="activeFormIndex == 0">
<el-select v-model="form.index" placeholder="请选择统计指标" clearable>
<el-option
v-for="item in rankOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型：" v-if="activeFormIndex == 0">
<el-select v-model="form.type" placeholder="请选择值类型" clearable>
<el-option
v-for="item in rankOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- 新增/修改测试项数据 多个循环处理-->
<div v-if="activeFormIndex == 1 || activeFormIndex == 2">
<div class="form-two monitor" v-for="(item, index) in form?.monitorList" :key="index">
<div class="monitor_add">
<el-button v-if="index == 0" :icon="Plus" circle @click="handleAddMointor"></el-button>
<el-button v-if="index != 0" :icon="Minus" circle @click="handleDelMointor(index)"></el-button>
</div>
<el-divider content-position="left">测试项信息{{ index + 1 }}</el-divider>
<el-form-item label="测试项名称：">
<el-input v-model="item.name" placeholder="请输入测试项名称" />
</el-form-item>
<el-form-item label="测量间隔：">
<el-input v-model="item.name" placeholder="请输入测量间隔" />
</el-form-item>
<el-form-item label="电压等级：">
<el-select v-model="item.voltageLevel" placeholder="请选择电压等级" clearable>
<el-option
v-for="item in rankOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="接线方式：">
<el-select v-model="item.line" placeholder="请选择接线方式" clearable>
<el-option
v-for="item in rankOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="最小短路容量：">
<el-input
v-model="item.minShortCircuitCapacity"
oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
autocomplete="off"
placeholder="请选择最小短路容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="用户协议容量：">
<el-input
v-model="item.userAgreementCapacity"
autocomplete="off"
oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
placeholder="请输入用户协议容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="基准短路容量：">
<el-input
v-model="item.baseShortCircuitCapacity"
oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
placeholder="请输入基准短路容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="供电设备容量：">
<el-input
v-model="item.pccEquipmentCapacity"
oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
placeholder="请输入供电设备容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="PT变比：" prop="pt1">
<el-input
style="width: 48%"
v-model="item.pt1"
autocomplete="off"
placeholder="请输入PT变比"
oninput="value=value.replace(/[^0-9.]/g,'')"
/>
<el-input
style="width: 48%"
v-model="item.pt2"
autocomplete="off"
placeholder="请输入PT变比"
oninput="value=value.replace(/[^0-9.]/g,'')"
/>
</el-form-item>
<el-form-item label="CT变比：" prop="ct1">
<el-input
v-model="item.ct1"
style="width: 48%"
autocomplete="off"
oninput="value=value.replace(/[^0-9.]/g,'')"
placeholder="请输入CT变比"
/>
<el-input
v-model="item.ct2"
style="width: 48%"
autocomplete="off"
oninput="value=value.replace(/[^0-9.]/g,'')"
placeholder="请输入CT变比"
/>
</el-form-item>
<el-form-item label="监测位置：">
<el-input v-model="item.position" placeholder="请输入监测位置" />
</el-form-item>
</div>
</div>
<!-- 设备信息列表 -->
</el-form>
<template #footer="">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
const dialogVisible = ref(false)
const form = ref({})
form.value = {
index: '',
type: '',
//测试项数据
monitorList: [
{
name: '', //测试项名称
interval: '', //测量间隔
voltageLevel: '', //电压等级
line: '', //接线方式
minShortCircuitCapacity: '', //最小短路容量
userAgreementCapacity: '', //用户协议容量
baseShortCircuitCapacity: '', //基准短路容量
pccEquipmentCapacity: '', //供电设备容量
pt1: 1, //pt变比1
pt2: 1, //pt变比2
ct1: 300, //ct变比1
ct2: 5, //ct变比2
position: '' //监测位置
}
]
}
const rankOptions = ref([
{
value: '1',
label: '1级'
},
{
value: '2',
label: '2级'
},
{
value: '3',
label: '3级'
}
])
const submit = () => {
console.log('submit!')
}
const title: any = ref('')
const activeFormIndex: any = ref(null)
const open = (val: any) => {
activeFormIndex.value = val
title.value = val == 0 ? '新增方案' : val == 1 ? '新增测试项' : val == 2 ? '修改' : '设备信息'
dialogVisible.value = true
}
//添加测试项
const handleAddMointor = () => {
form.value.monitorList = [
{
name: '', //测试项名称
interval: '', //测量间隔
voltageLevel: '', //电压等级
line: '', //接线方式
minShortCircuitCapacity: '', //最小短路容量
userAgreementCapacity: '', //用户协议容量
baseShortCircuitCapacity: '', //基准短路容量
pccEquipmentCapacity: '', //供电设备容量
pt1: 1, //pt变比1
pt2: 1, //pt变比2
ct1: 300, //ct变比1
ct2: 5, //ct变比2
position: '' //监测位置
},
...form.value.monitorList
]
}
//移除测试项
const handleDelMointor = index => {
form.value.monitorList.splice(index, 1)
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
display: flex !important;
justify-content: space-between !important;
}
.monitor {
position: relative;
padding: 10px 50px;
.monitor_add {
position: absolute;
right: 5px;
top: 10px;
}
}
</style>