1025 lines
38 KiB
Vue
1025 lines
38 KiB
Vue
<script lang="ts">
|
||
export default {
|
||
name: "record",
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import Eldialog from '@/components/seccmsdialog/eldialog.vue'
|
||
import Page from '@/components/Pagination/page.vue'
|
||
import point from '@/components/IntelligentPoint/point.vue'
|
||
import point1 from '@/components/IntelligentPoint/index.vue'
|
||
import { ElMessageBox, ElMessage, ElTable, ElProgress } from 'element-plus'
|
||
import { downloadFile } from '@/utils/index';
|
||
import {
|
||
getTreefirst,
|
||
getDeviceByType
|
||
} from '@/api/device';
|
||
import {
|
||
getMainDeviceByType,
|
||
getAlgorithmArrangePage,
|
||
saveAlgorithmArrange,
|
||
callAlgorithmArrange,
|
||
getArrangeDeviceById,
|
||
updateAlgorithmArrange,
|
||
saveArrangeDevice,
|
||
getArrangeDeviceInfo,
|
||
createArrangeById,
|
||
downloadArrangeReport,
|
||
deleteAlgorithmArrange
|
||
} from '@/api/pointSolution';
|
||
import { Plus } from '@element-plus/icons-vue'
|
||
import type { UploadProps } from 'element-plus'
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import camera from '@/assets/point/1.svg'
|
||
import voiceprint from '@/assets/point/2.svg'
|
||
import partial from '@/assets/point/3.svg'
|
||
import humidity from '@/assets/point/4.svg'
|
||
import Viewfile from '@/components/Viewfile/index.vue'
|
||
const userStore = useUserStore();
|
||
onMounted(() => {
|
||
getType()
|
||
getdata()
|
||
})
|
||
//获取类型一类
|
||
const stationarr: any = ref([])
|
||
const businessTypearr: any = ref([])
|
||
const stationTypearr: any = ref([])
|
||
const EquipmentTypearr: any = ref([])
|
||
const arrangeDeviceTypearr: any = ref([])
|
||
function currency(list: any, itemcode: any) {
|
||
let dictname = ''
|
||
list.forEach((element: any) => {
|
||
if (element.itemcode == itemcode) {
|
||
dictname = element.dictname
|
||
}
|
||
})
|
||
return dictname
|
||
}
|
||
function currency1(list: any, itemcode: any) {
|
||
let dictname: any = []
|
||
itemcode = itemcode.split(',')
|
||
list.forEach((element: any) => {
|
||
itemcode.forEach((item: any) => {
|
||
if (element.itemcode == item) {
|
||
dictname.push(element.dictname)
|
||
}
|
||
})
|
||
})
|
||
return dictname.join(',')
|
||
}
|
||
function getType() {
|
||
getTreefirst().then((res: any) => {
|
||
stationarr.value = res.data
|
||
})
|
||
getDeviceByType({ dictcode: 'businessType' }).then((res: any) => {
|
||
businessTypearr.value = res.data
|
||
})
|
||
getDeviceByType({ dictcode: 'stationType' }).then((res: any) => {
|
||
stationTypearr.value = res.data
|
||
})
|
||
getDeviceByType({ dictcode: 'EquipmentType' }).then((res: any) => {
|
||
EquipmentTypearr.value = res.data
|
||
})
|
||
getDeviceByType({ dictcode: 'arrangeDeviceType' }).then((res: any) => {
|
||
arrangeDeviceTypearr.value = res.data
|
||
})
|
||
}
|
||
|
||
|
||
////
|
||
const pointbgurl = ref('')
|
||
const smallurl: any = ref([
|
||
|
||
])
|
||
//获取图片尺寸
|
||
const imgsize: any = ref({})
|
||
const getNetworkImageSize = (url: any) => {
|
||
return new Promise((resolve) => {
|
||
const img = new Image();
|
||
img.crossOrigin = "anonymous"; // 处理跨域问题
|
||
img.onload = () => resolve({
|
||
width: img.naturalWidth,
|
||
height: img.naturalHeight
|
||
});
|
||
img.src = url;
|
||
});
|
||
};
|
||
|
||
function handlePositionChange(val: any, file: any) {
|
||
console.log(val)
|
||
console.log(file)
|
||
const form: any = {
|
||
algorithmArrangeDevice: [],
|
||
arrangeId: '',
|
||
}
|
||
const pintarr: any = []
|
||
val.forEach((item: any) => {
|
||
pintarr.push({
|
||
id: item.id ? item.id : '',
|
||
areaId: item.areaId,
|
||
areaName: item.areaName,
|
||
patroldeviceType: item.patroldeviceType,
|
||
patroldevicePos: JSON.stringify({
|
||
x: item.x,
|
||
y: item.y
|
||
}),
|
||
})
|
||
})
|
||
form.algorithmArrangeDevice = pintarr
|
||
form.arrangeId = budian.value.id
|
||
console.log(form)
|
||
|
||
const formData = new FormData();
|
||
formData.append('data', new Blob([JSON.stringify(form)], { type: 'application/json' }));
|
||
formData.append('file', file); // 假设这是用户选择的图片文件
|
||
saveArrangeDevice(formData).then((res: any) => {
|
||
console.log(res)
|
||
if (res.code == 0) {
|
||
ElMessage.success('修改保存成功')
|
||
diatuzhi.value = false
|
||
getcoordinate(false)
|
||
getpointtable()
|
||
}
|
||
|
||
|
||
})
|
||
}
|
||
//控制行变色
|
||
const tableRowClassName = ({
|
||
row,
|
||
rowIndex,
|
||
}: {
|
||
row: any
|
||
rowIndex: number
|
||
}) => {
|
||
if (rowIndex % 2 === 0) {
|
||
return 'warning-row'
|
||
} else if (rowIndex % 2 === 1) {
|
||
return 'success-row'
|
||
}
|
||
return ''
|
||
}
|
||
const rules = ref({
|
||
arrangeName: [
|
||
{ required: true, message: '请输入布点方案名称', trigger: 'blur' },
|
||
],
|
||
stationCode: [
|
||
{ required: true, message: '请选择变电站', trigger: 'change' },
|
||
],
|
||
businessType: [
|
||
{ required: true, message: '请选择业务类型', trigger: 'change' },
|
||
],
|
||
deviceTypeList1: [
|
||
{ required: true, message: '请选择主设备类型', trigger: 'change' },
|
||
],
|
||
})
|
||
//方案列表
|
||
const dataform: any = ref({
|
||
size: 20,
|
||
current: 1,
|
||
})
|
||
const total = ref(0)
|
||
const tableData = ref([{}])
|
||
const tablelosading = ref(false)
|
||
function getdata() {
|
||
tablelosading.value = true
|
||
getAlgorithmArrangePage(dataform.value).then((res: any) => {
|
||
tablelosading.value = false
|
||
tableData.value = res.data.records
|
||
dataform.value.size = res.data.size
|
||
dataform.value.current = res.data.current
|
||
total.value = res.data.total
|
||
})
|
||
}
|
||
//查看
|
||
const dialogVisible = ref(false)
|
||
function lookprogramme(row: any) {
|
||
|
||
}
|
||
function handleClose() {
|
||
dialogVisible.value = false
|
||
}
|
||
//删除
|
||
function delprogramme(row: any) {
|
||
ElMessageBox.confirm('确定要删除此布点方案吗?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
deleteAlgorithmArrange({ id: row.id }).then((res: any) => {
|
||
ElMessage.success('删除成功')
|
||
getdata()
|
||
})
|
||
})
|
||
}
|
||
//新增——修改布点设置
|
||
const programme = ref(false)
|
||
const infoForm = ref()
|
||
const schemeform: any = ref({
|
||
arrangeName: '',//布点方案名称
|
||
stationCode: '',//站点id
|
||
stationType: '',//站点类型
|
||
voltLevel: '',//电压等级
|
||
businessType: '',//业务类型；1：远程智能巡视；2：一次设备在线监测；3：智能锁控；4：动环监测
|
||
deviceTypeList1: [],//主设备类型
|
||
deviceTypeList: '',//主设备类型
|
||
})
|
||
function addprogramme() {
|
||
programme.value = true
|
||
active.value = 1
|
||
reset()
|
||
|
||
}
|
||
function editprogramme(row: any) {
|
||
budian.value = row
|
||
programme.value = true
|
||
active.value = 1
|
||
schemeform.value = row
|
||
schemeform.value.deviceTypeList1 = row.deviceTypeList.split(',')
|
||
if (row.imageUrl) {
|
||
imageUrl.value = userStore.imgUrl + row.imageUrl
|
||
} else {
|
||
imageUrl.value = ''
|
||
}
|
||
// imageUrl.value = userStore.imgUrl + row.imageUrl
|
||
confirmClick()
|
||
}
|
||
function goprogramme() {
|
||
programme.value = false
|
||
budian.value = ''
|
||
getdata()
|
||
}
|
||
function typevol() {
|
||
const arr = stationarr.value.find((item: any) => item.stationCode == schemeform.value.stationCode);
|
||
schemeform.value.stationType = arr.stationType
|
||
schemeform.value.voltLevel = arr.voltLevel
|
||
schemeform.value.stationId = arr.stationId
|
||
schemeform.value.stationName = arr.stationName
|
||
}
|
||
function reset() {
|
||
schemeform.value = {
|
||
arrangeName: '',//布点方案名称
|
||
stationCode: '',//站点id
|
||
stationType: '',//站点类型
|
||
voltLevel: '',//电压等级
|
||
businessType: '',//业务类型；1：远程智能巡视；2：一次设备在线监测；3：智能锁控；4：动环监测
|
||
deviceTypeList1: [],//主设备类型
|
||
deviceTypeList: '',//主设备类型
|
||
}
|
||
if (infoForm.value != null) infoForm.value.resetFields();
|
||
imageUrl.value = ''
|
||
uploadFile.value = null
|
||
numdata.value.length = 0
|
||
}
|
||
const numdata = ref([])
|
||
const numloading = ref(false)
|
||
function confirmClick() {
|
||
if (schemeform.value.stationCode) {
|
||
numloading.value = true
|
||
let deviceTypeList = JSON.parse(JSON.stringify(schemeform.value.deviceTypeList1))
|
||
getMainDeviceByType({ stationCode: schemeform.value.stationCode, deviceTypeList: deviceTypeList.join(',') }).then((res: any) => {
|
||
numdata.value = res.data
|
||
numloading.value = false
|
||
})
|
||
} else {
|
||
ElMessage.warning('请先先择变电站');
|
||
(schemeform.value.deviceTypeList1).length = 0
|
||
}
|
||
|
||
}
|
||
const budian: any = ref(null)
|
||
function addjilu(formEl: any) {
|
||
formEl.validate((valid: any) => {
|
||
if (valid) {
|
||
schemeform.value.deviceTypeList = JSON.parse(JSON.stringify(schemeform.value.deviceTypeList1)).join(',')
|
||
const files = new FormData()
|
||
files.append('arrangeName', schemeform.value.arrangeName)
|
||
files.append('stationCode', schemeform.value.stationCode)
|
||
files.append('stationName', schemeform.value.stationName)
|
||
files.append('stationId', schemeform.value.stationId)
|
||
files.append('stationType', schemeform.value.stationType)
|
||
files.append('voltLevel', schemeform.value.voltLevel)
|
||
files.append('businessType', schemeform.value.businessType)
|
||
files.append('deviceTypeList', schemeform.value.deviceTypeList)
|
||
if (uploadFile.value) files.append('file', uploadFile.value)
|
||
if (schemeform.value.id) {
|
||
files.append('id', schemeform.value.id)
|
||
updateAlgorithmArrange(files).then((res: any) => {
|
||
if (res.code == 0) {
|
||
ElMessage.success('布点方案修改成功')
|
||
}
|
||
})
|
||
} else {
|
||
saveAlgorithmArrange(files).then((res: any) => {
|
||
if (res.code == 0) {
|
||
ElMessage.success('布点方案添加成功')
|
||
budian.value = res.data
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
|
||
}
|
||
//上传图片
|
||
const imageUrl: any = ref('');
|
||
const uploadFile = ref(null);
|
||
|
||
const handleChange = (file: any) => {
|
||
// 验证文件类型和大小等
|
||
const isJPG = file.raw.type === 'image/jpeg';
|
||
const isPNG = file.raw.type === 'image/png';
|
||
const isLt2M = file.raw.size / 1024 / 1024 < 2;
|
||
|
||
if (!isJPG && !isPNG) {
|
||
ElMessage.error('上传图片只能是 JPG/PNG 格式!');
|
||
return false;
|
||
}
|
||
|
||
|
||
// 预览图片
|
||
const reader = new FileReader();
|
||
reader.onload = (e: any) => {
|
||
imageUrl.value = e.target.result;
|
||
};
|
||
reader.readAsDataURL(file.raw);
|
||
|
||
// 保存文件对象用于后续上传
|
||
uploadFile.value = file.raw;
|
||
};
|
||
|
||
const beforeAvatarUpload = (file: any) => {
|
||
// 这里可以做一些上传前的验证
|
||
return true;
|
||
};
|
||
|
||
|
||
const active = ref(1)
|
||
function activechange() {
|
||
if (active.value == 1) {
|
||
if (schemeform.value.id) {
|
||
if (!budian.value.imageUrl) {
|
||
ElMessageBox.confirm('当前变电站图纸未上传，是否继续？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
getcoordinate(true)
|
||
getpointtable()
|
||
return
|
||
})
|
||
} else {
|
||
getcoordinate(true)
|
||
getpointtable()
|
||
}
|
||
|
||
} else {
|
||
if (!budian.value) {
|
||
ElMessage.warning('请先添加布点方案记录后，在进行下一步')
|
||
return
|
||
}
|
||
if (!budian.value.imageUrl) {
|
||
ElMessageBox.confirm('当前变电站图纸未上传，是否继续？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
getsuanfa()
|
||
return
|
||
})
|
||
}
|
||
getsuanfa()
|
||
}
|
||
|
||
} else if (active.value == 2) {
|
||
createArrangeById({ id: budian.value.id }).then((res: any) => {
|
||
if (res.code == 0) {
|
||
active.value += 1
|
||
}
|
||
|
||
})
|
||
} else {
|
||
active.value += 1
|
||
}
|
||
|
||
//
|
||
}
|
||
//请求算法
|
||
const buttonloading = ref(false)
|
||
function getsuanfa() {
|
||
buttonloading.value = true
|
||
callAlgorithmArrange({ id: budian.value.id }).then((res: any) => {
|
||
if (res.code == 0) {
|
||
getcoordinate(true)
|
||
getpointtable()
|
||
}
|
||
buttonloading.value = false
|
||
|
||
})
|
||
|
||
}
|
||
//获取查询布点区域的设备数量
|
||
const pointtable: any = ref([])
|
||
const pointloading = ref(false)
|
||
function getpointtable() {
|
||
pointloading.value = true
|
||
getArrangeDeviceInfo({ arrangeId: budian.value.id }).then((res: any) => {
|
||
if (res.code == 0) {
|
||
pointtable.value = res.data
|
||
pointloading.value = false
|
||
}
|
||
})
|
||
}
|
||
|
||
//查询坐标
|
||
function getcoordinate(val: any) {
|
||
smallurl.value.length = 0
|
||
getArrangeDeviceById({ arrangeId: budian.value.id }).then((res: any) => {
|
||
if (res.code == 0) {
|
||
if (val) {
|
||
active.value += 1
|
||
}
|
||
|
||
res.data.forEach((item: any) => {
|
||
let urldata: any = {}
|
||
urldata.id = item.id
|
||
urldata.size = 16
|
||
urldata.x = JSON.parse(item.patroldevicePos).x
|
||
urldata.y = JSON.parse(item.patroldevicePos).y
|
||
urldata.url = gettypearr(arrangeDeviceTypearr.value, item.patroldeviceType)
|
||
urldata.areaId = item.areaId
|
||
urldata.areaName = item.areaName
|
||
urldata.patroldeviceType = item.patroldeviceType
|
||
smallurl.value.push(urldata)
|
||
})
|
||
if (budian.value.imageUrl) {
|
||
pointbgurl.value = userStore.imgUrl + budian.value.imageUrl
|
||
getNetworkImageSize(pointbgurl.value)
|
||
.then(size => imgsize.value = size);
|
||
} else {
|
||
pointbgurl.value = ''
|
||
}
|
||
console.log(smallurl.value)
|
||
}
|
||
})
|
||
}
|
||
function gettypearr(list: any, type: any) {
|
||
let urlname = ''
|
||
list.forEach((item: any) => {
|
||
if (item.itemcode == type) {
|
||
if (item.dictname == '摄像机') {
|
||
urlname = camera
|
||
} else if (item.dictname == '声纹传感器') {
|
||
urlname = voiceprint
|
||
} else if (item.dictname == '局放传感器') {
|
||
urlname = partial
|
||
} else if (item.dictname == '温湿度传感器') {
|
||
urlname = humidity
|
||
}
|
||
|
||
}
|
||
});
|
||
return urlname
|
||
}
|
||
function goon() {
|
||
active.value -= 1
|
||
}
|
||
const diatuzhi = ref(false)
|
||
function edittuzhi() {
|
||
diatuzhi.value = true
|
||
}
|
||
function tuzhiclose() {
|
||
diatuzhi.value = false
|
||
getcoordinate(false)
|
||
getpointtable()
|
||
}
|
||
//预览pdf
|
||
const ViewfileUrl = ref("")
|
||
const title1 = ref('')
|
||
const isViewfile = ref(false)
|
||
function viewReport() {
|
||
title1.value = '布点方案'
|
||
ViewfileUrl.value = userStore.webApiBaseUrl + '/algorithm/algorithm-arrange/downloadArrangeReport?id=' + budian.value.id
|
||
isViewfile.value = true
|
||
}
|
||
function viewReport1(row: any) {
|
||
if (row.custom2) {
|
||
title1.value = '布点方案'
|
||
ViewfileUrl.value = userStore.webApiBaseUrl + '/algorithm/algorithm-arrange/downloadArrangeReport?id=' + row.id
|
||
isViewfile.value = true
|
||
} else {
|
||
ElMessage.warning('该方案未生成布点方案')
|
||
}
|
||
|
||
}
|
||
function CloseView() {
|
||
isViewfile.value = false
|
||
}
|
||
function download() {
|
||
downloadArrangeReport({ id: budian.value.id }).then((response: any) => {
|
||
downloadFile(response, '220kV_变电站_一次在线设备在线监测_智能布点方案', 'docx')
|
||
}).catch(() => {
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div style=" padding: 17px 15px 8px 15px;">
|
||
<div class="record-box" v-if="!programme">
|
||
<div class="title_top">
|
||
<div class="screenHomepage">
|
||
<el-input v-model="dataform.arrangeName" clearable @change="getdata()" placeholder="请输入方案名称"
|
||
style="margin-right:10px ;width: 180px; ">
|
||
</el-input>
|
||
<el-select v-model="dataform.stationCode" placeholder="请选择变电站"
|
||
style="width: 240px;margin-right:10px" clearable @change="getdata()">
|
||
<el-option v-for="item in stationarr" :key="item.stationCode" :label="item.stationName"
|
||
:value="item.stationCode" />
|
||
</el-select>
|
||
<el-select v-model="dataform.businessType" placeholder="请选择业务类型"
|
||
style="width: 240px;margin-right:10px" clearable @change="getdata()">
|
||
<el-option v-for="item in businessTypearr" :key="item.itemcode" :label="item.dictname"
|
||
:value="item.itemcode" />
|
||
</el-select>
|
||
<el-button class="searchButton" @click="getdata()">搜索</el-button>
|
||
</div>
|
||
<el-button class="searchButton" @click="addprogramme()">新增布点</el-button>
|
||
</div>
|
||
<el-table :data="tableData" :row-class-name="tableRowClassName" class="PatrolMonitoring"
|
||
v-loading="tablelosading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
|
||
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(72vh); overflow: auto "
|
||
:header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
|
||
<el-table-column type="index" label="序号" width="40px" align="center" />
|
||
<el-table-column property="arrangeName" width="100px" label="方案名称" align="center" />
|
||
<el-table-column property="stationName" width="100px" label="变电站名称" align="center" />
|
||
<el-table-column property="stationType" width="80px" label="变电站类型" align="center" />
|
||
<el-table-column property="voltLevel" width="80px" label="电压等级" align="center" />
|
||
<el-table-column property="businessType" width="120px" label="业务类型" align="center">
|
||
<template #default="scope">
|
||
<span>{{ currency(businessTypearr, scope.row.businessType) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column property="deviceTypeList" label="主设备类型">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.deviceTypeList">{{ currency1(EquipmentTypearr, scope.row.deviceTypeList)
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column property="imageUrl" label="变电站平面图地址" />
|
||
<el-table-column property="lastmodifydate" label="最近修改时间" align="center" />
|
||
<el-table-column property="name" label="操作" align="center" width="80px">
|
||
<template #default="scope">
|
||
<div class="operation">
|
||
<img src="@/assets/point/xiu.png" title="修改" @click="editprogramme(scope.row)" alt="">
|
||
<img src="@/assets/point/kan.svg" title="查看" @click="viewReport1(scope.row)" alt="">
|
||
<img src="@/assets/point/shan.svg" title="删除" @click="delprogramme(scope.row)" alt="">
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="width:100%;display:flex;align-items:center;margin-top:10px;">
|
||
<Page style="margin:0 auto ;" :total="total" v-model:size="dataform.size" :jumper="'hide'"
|
||
v-model:current="dataform.current" @pagination="getdata()"></Page>
|
||
</div>
|
||
</div>
|
||
<div class="record-box" v-else>
|
||
<div class="titleone">
|
||
<div class="title_top">
|
||
<div class="stationboard-box-title">
|
||
<img src="@/assets/navigation/ty_bq.png" />
|
||
<div class="imgname">创建布点方案</div>
|
||
</div>
|
||
<el-button class="searchButton" @click="goprogramme()">返回列表</el-button>
|
||
</div>
|
||
<div class="bujv">
|
||
<el-steps style="width: 900px" :active="active" align-center>
|
||
<el-step title="1.填写需求">
|
||
<template v-slot:icon>
|
||
<img src="@/assets/point/1.svg" alt="">
|
||
</template>
|
||
</el-step>
|
||
<el-step title="2.生成布点方案">
|
||
<template v-slot:icon>
|
||
<img v-if="active != 2" src="@/assets/point/3.svg" alt="">
|
||
<img v-else src="@/assets/point/6.svg" alt="">
|
||
</template>
|
||
</el-step>
|
||
<el-step title="3.完成布点方案">
|
||
<template v-slot:icon>
|
||
<img v-if="active != 3" src="@/assets/point/4.svg" alt="">
|
||
<img v-else src="@/assets/point/7.svg" alt="">
|
||
</template>
|
||
</el-step>
|
||
</el-steps>
|
||
</div>
|
||
<div class="bujv1" v-if="active == 1">
|
||
<div class="div1">
|
||
<div>
|
||
<div class="bujv_title">
|
||
<div class="qian"></div>
|
||
<div class="hou">填写变电站信息</div>
|
||
</div>
|
||
<!-- -->
|
||
<el-form ref="infoForm" :model="schemeform" label-width="90px" style="margin-top:30px ;"
|
||
:rules="rules">
|
||
<el-form-item label="方案名称" prop="arrangeName">
|
||
<el-input v-model="schemeform.arrangeName" placeholder=""></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="变电站" prop="stationCode">
|
||
<el-select v-model="schemeform.stationCode" placeholder=" " clearable
|
||
@change="typevol" style="width: 100%;">
|
||
<el-option v-for="item in stationarr" :key="item.stationCode"
|
||
:label="item.stationName" :value="item.stationCode" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="电站类型">
|
||
<el-select v-model="schemeform.stationType" placeholder=" " clearable
|
||
style="width: 100%;" disabled>
|
||
<el-option v-for="item in stationTypearr" :key="item.itemcode"
|
||
:label="item.dictname" :value="item.itemcode" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="电压等级">
|
||
<el-input v-model="schemeform.voltLevel" placeholder="" disabled></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="业务类型" prop="businessType">
|
||
<el-select v-model="schemeform.businessType" placeholder=" " clearable
|
||
style="width: 100%;">
|
||
<el-option v-for="item in businessTypearr" :key="item.itemcode"
|
||
:label="item.dictname" :value="item.itemcode" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="监测设备" prop="deviceTypeList1">
|
||
<el-select v-model="schemeform.deviceTypeList1" placeholder=" " multiple clearable
|
||
@change="confirmClick()" style="width: 100%;">
|
||
<el-option v-for="item in EquipmentTypearr" :key="item.itemcode"
|
||
:label="item.dictname" :value="item.itemcode" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="上传图纸">
|
||
<el-upload class="avatar-uploader"
|
||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||
:show-file-list="false" :auto-upload="false" :on-change="handleChange"
|
||
:before-upload="beforeAvatarUpload">
|
||
<img v-if="imageUrl" :src="imageUrl" style="width: 148px; height: 118px"
|
||
class="avatar" />
|
||
<!-- <el-image v-if="imageUrl" style="width: 150px; height: 120px" :src="imageUrl" :zoom-rate="1.2"
|
||
:max-scale="7" :min-scale="0.2" :preview-src-list="[imageUrl]" show-progress
|
||
:initial-index="4" fit="cover" /> -->
|
||
<el-icon v-else class="avatar-uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<span
|
||
style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin: 10px 0px;">
|
||
<el-button @click="reset()">重置</el-button>
|
||
<el-button class="searchButton" @click="addjilu(infoForm)">确定</el-button>
|
||
</span>
|
||
</div>
|
||
<div class="div1">
|
||
<div class="bujv_title">
|
||
<div class="qian"></div>
|
||
<div class="hou">设备数量</div>
|
||
</div>
|
||
<el-table :data="numdata" :row-class-name="tableRowClassName" class="PatrolMonitoring"
|
||
v-loading="numloading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
|
||
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(52vh); overflow: auto "
|
||
:header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
|
||
<el-table-column type="index" label="序号" width="40px" align="center" />
|
||
<el-table-column property="mainDeviceName" label="设备名称" align="center">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.mainDeviceName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column property="arrangeName" label="设备类型" align="center">
|
||
<template #default="scope">
|
||
<span>{{ currency(EquipmentTypearr, scope.row.deviceType) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="bujv1" v-if="active == 2">
|
||
<div class="div1">
|
||
<div class="bujv_title">
|
||
<div class="qian"></div>
|
||
<div class="hou">变电站图纸</div>
|
||
</div>
|
||
<div style="height:500px;margin-top: 20px;width: 870px;">
|
||
<el-scrollbar v-if="pointbgurl">
|
||
<point v-if="!diatuzhi" ref="canvasRef" :width="imgsize.width" :height="imgsize.height"
|
||
:mainImage="pointbgurl" :overlay-images="smallurl" />
|
||
<div style="display: flex;justify-content: end;">
|
||
<el-button @click="edittuzhi" style="margin-top: 10px;">点击修改</el-button>
|
||
</div>
|
||
|
||
</el-scrollbar>
|
||
<div v-else
|
||
style="width: 100%;display: flex;align-items: center;justify-content: center;height: 450px;flex-direction: column;">
|
||
<img src="@/assets/point/weitu.svg" alt="">
|
||
<div class="tuzhi">未上传图纸</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="div1">
|
||
<div class="bujv_title">
|
||
<div class="qian"></div>
|
||
<div class="hou">设备数量</div>
|
||
</div>
|
||
<el-table show-summary :data="pointtable" :row-class-name="tableRowClassName"
|
||
class="PatrolMonitoring" v-loading="pointloading"
|
||
element-loading-background="rgb(11, 40, 34)" highlight-current-row
|
||
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(52vh); overflow: auto "
|
||
:header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
|
||
<el-table-column type="index" label="序号" width="40px" align="center" />
|
||
<el-table-column prop="areaName" label="区域名称" align="center">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.areaName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="1" sortable label="摄像机" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="2" sortable label="声纹传感器" align="center"> </el-table-column>
|
||
<el-table-column prop="3" sortable label="局放传感器" align="center"></el-table-column>
|
||
<el-table-column prop="4" sortable label="温湿度传感器" align="center"> </el-table-column>
|
||
<!-- <el-table-column property="arrangeName" label="设备类型" align="center">
|
||
<template #default="scope">
|
||
<span>{{ currency(EquipmentTypearr, scope.row.deviceType) }}</span>
|
||
</template>
|
||
</el-table-column> -->
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div v-if="active == 3" class="preview">
|
||
<div><img src="@/assets/point/success.png" alt=""></div>
|
||
<div class="butxt">布点方案已完成</div>
|
||
<div>完成布点方案，您可以下载预览布点方案： <span class="pdfwenjain"
|
||
@click="viewReport()">220kV_变电站_一次在线设备在线监测_智能布点方案.docx</span> </div>
|
||
<div style="margin-bottom: 100px;"> <el-button @click="viewReport()">预览</el-button> <el-button
|
||
@click="download()">下载</el-button></div>
|
||
</div>
|
||
<div class="button">
|
||
<el-button size="large" v-if="active != 1 && active != 3" @click="goon()">上一步</el-button>
|
||
<el-button size="large" class="searchButton" @click="activechange()" :loading="buttonloading"
|
||
v-if="active != 3">下一步</el-button>
|
||
<el-button size="large" class="searchButton" v-if="active == 3"
|
||
@click="goprogramme()">完成</el-button>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<Eldialog v-if="diatuzhi" :title="'修改图纸'" :zIndex="2000" :width="'1800'" @before-close="tuzhiclose">
|
||
<template v-slot:PopFrameContent>
|
||
<div style="height: calc(80vh);margin-top: 20px;">
|
||
<!-- <el-scrollbar> -->
|
||
<point1 ref="canvasRef" :width="imgsize.width" :height="imgsize.height" :mainImage="pointbgurl"
|
||
:overlay-images="smallurl" @position-change="handlePositionChange" />
|
||
<!-- </el-scrollbar> -->
|
||
</div>
|
||
|
||
</template>
|
||
</Eldialog>
|
||
<Viewfile v-if="isViewfile" :showTime="true" :title="title1" :url="ViewfileUrl" :type="'docx'"
|
||
:clientHeight="600" @update="CloseView" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.tuzhi {
|
||
font-family: 'Arial Normal', 'Arial';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 28px;
|
||
color: #B5D7FF;
|
||
margin-top: 10px;
|
||
|
||
}
|
||
|
||
.titleone {
|
||
height: calc(87vh);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.record-box {
|
||
padding: 8px 15px;
|
||
width: 100%;
|
||
height: calc(89vh);
|
||
overflow: auto;
|
||
background-color: #00205a !important;
|
||
border: none;
|
||
border-radius: 3px;
|
||
box-sizing: border-box;
|
||
background: url(@/assets/navigation/ty_1614x988.png);
|
||
background-size: 100% 100%;
|
||
|
||
.title_top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.bujv {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10px 0px;
|
||
}
|
||
|
||
|
||
|
||
.bujv1 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 0px;
|
||
// height: calc(68vh);
|
||
|
||
.div1 {
|
||
width: 49%;
|
||
// height: 20px;
|
||
border: 1px solid #00427b;
|
||
border-radius: 4px;
|
||
background-color: #001e55;
|
||
box-sizing: border-box;
|
||
padding: 30px 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.bujv_title {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: "Arial Negreta", "Arial Normal", Arial;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: rgb(0, 204, 255);
|
||
|
||
.qian {
|
||
width: 3px;
|
||
height: 12px;
|
||
background-color: #00ffff;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.preview {
|
||
width: 100%;
|
||
height: calc(65vh);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: 'Arial Normal', 'Arial';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
|
||
div {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.butxt {
|
||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 28px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.pdfwenjain {
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
color: #0099FF;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.operation {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
img {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.stationboard-box-title {
|
||
font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
// padding-left: 20px;
|
||
}
|
||
|
||
.imgname {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
:deep() {
|
||
.el-step__icon.is-icon {
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
.is-finish {
|
||
color: #00ffff !important;
|
||
|
||
.el-step__icon.is-icon {
|
||
background-color: #0099ff;
|
||
|
||
}
|
||
|
||
// .el-step__title is-finish{
|
||
|
||
// }
|
||
}
|
||
|
||
.is-process {
|
||
color: #b5d7ff !important;
|
||
|
||
.el-step__icon.is-icon {
|
||
background-color: #00397b !important;
|
||
|
||
}
|
||
}
|
||
|
||
.is-wait {
|
||
color: #b5d7ff !important;
|
||
|
||
.el-step__icon.is-icon {
|
||
background-color: #00397b !important;
|
||
|
||
}
|
||
}
|
||
|
||
.el-step.is-horizontal .el-step__line {
|
||
height: 1px !important;
|
||
top: 20px !important;
|
||
}
|
||
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed var(--el-border-color);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: var(--el-transition-duration-fast);
|
||
}
|
||
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: var(--el-color-primary);
|
||
}
|
||
|
||
.el-icon.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 150px;
|
||
height: 120px;
|
||
text-align: center;
|
||
}
|
||
|
||
.el-table tfoot td.el-table__cell {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.el-table tfoot tr {
|
||
background-color: #002964 !important;
|
||
|
||
}
|
||
}
|
||
</style>
|