feat:新增大屏（前端），新增报警区域
This commit is contained in:
17630416519
parent
11d8895f2a
commit
ed3cabb822
33
src/api/andonManagement/alarmZone/index.js
Normal file
33
src/api/andonManagement/alarmZone/index.js
Normal file
@ -0,0 +1,33 @@
|
||||
import request from '@/utils/request'
|
||||
//查询
|
||||
export function list(data) {
|
||||
return request({
|
||||
url: 'mes/AndonAlarmArea/list',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
//新增
|
||||
export function addData(data) {
|
||||
return request({
|
||||
url: 'mes/AndonAlarmArea',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
//修改
|
||||
export function updateData(data) {
|
||||
return request({
|
||||
url: 'mes/AndonAlarmArea',
|
||||
method: 'put',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
//删除
|
||||
export function delData(id) {
|
||||
return request({
|
||||
url: 'mes/AndonAlarmArea/' + id,
|
||||
method: 'delete',
|
||||
|
||||
})
|
||||
}
|
||||
@ -25,7 +25,7 @@
|
||||
@sort-change="sortChange" @selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="50" align="center" /> -->
|
||||
<el-table-column prop="area1" label="区域" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area2" label="区域下设备" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area2" label="区域" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="lightip" label="三色灯IP" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="createdBy" label="创建人" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="createdTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
|
||||
@ -49,16 +49,16 @@
|
||||
<el-row :gutter="20">
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="区域1" prop="area1">
|
||||
<el-select v-model="form.area1" placeholder="请选择区域" @change="handleAreaChange">
|
||||
<el-form-item label="父区域" prop="area1">
|
||||
<el-select v-model="form.area1" placeholder="请选择父区域" @change="handleAreaChange">
|
||||
<el-option v-for="item in parentOptions" :key="item.label" :label="item.label"
|
||||
:value="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="区域下设备" prop="area2">
|
||||
<el-select v-model="form.area2" placeholder="请选择区域下设备">
|
||||
<el-form-item label="区域" prop="area2">
|
||||
<el-select v-model="form.area2" placeholder="请选择区域">
|
||||
<el-option v-for="item in childrenOptions" :key="item.label" :label="item.label"
|
||||
:value="item.label"></el-option>
|
||||
</el-select>
|
||||
|
||||
354
src/views/andonManagement/alarmZone/index.vue
Normal file
354
src/views/andonManagement/alarmZone/index.vue
Normal file
@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm"
|
||||
:label-width="labelWidth" v-show="showSearch" @submit.native.prevent>
|
||||
|
||||
<el-form-item label="区域名称" prop="area">
|
||||
<el-input v-model="queryParams.area" placeholder="请输入区域名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 工具区域 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" v-hasPermi="['business:andonalarmlevel:add']" plain icon="el-icon-plus"
|
||||
size="mini" @click="handleAdd">新增父区域</el-button>
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd2">新增区域</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 数据区域 -->
|
||||
<el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row
|
||||
@sort-change="sortChange" @selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="50" align="center" /> -->
|
||||
<el-table-column prop="parentArea" label="父区域" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area" label="区域" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="createdBy" label="创建人" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="createdTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="updatedBy" label="更新人" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="updatedTime" label="更新时间" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作" align="center" width="140">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" v-hasPermi="['business:andonalarmlevel:edit']" type="success"
|
||||
icon="el-icon-edit" title="编辑" @click="handleUpdate(scope.row)"></el-button>
|
||||
<el-button size="mini" v-hasPermi="['business:andonalarmlevel:delete']" type="danger"
|
||||
icon="el-icon-delete" title="删除" @click="handleDelete(scope.row)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
<!-- 添加或修改报警等级表对话框 -->
|
||||
<el-dialog title="新增父区域" :lock-scroll="false" :close-on-click-modal="false" :visible.sync="open">
|
||||
<el-form ref="form" :model="form" :rules="rules" :label-width="formLabelWidth">
|
||||
<el-row :gutter="20">
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="父区域" prop="parentArea">
|
||||
<el-input v-model="form.parentArea" label="请输入父区域"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="新增区域二" :lock-scroll="false" :close-on-click-modal="false" :visible.sync="open1">
|
||||
<el-form ref="form1" :model="form1" :rules="rules" :label-width="formLabelWidth">
|
||||
<el-row :gutter="20">
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="父区域" prop="parentArea">
|
||||
<el-select v-model="form1.parentArea" placeholder="请选择父区域" @change="handleAreaChange">
|
||||
<el-option v-for="item in parentOptions" :key="item.label" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="区域" prop="area">
|
||||
<el-input v-model="form1.area" label="请输入区域名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm2">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
list,
|
||||
addData,
|
||||
delData,
|
||||
updateData,
|
||||
} from '@/api/andonManagement/alarmZone/index.js';
|
||||
import {
|
||||
getAndonAreaParentDictList,//区域一
|
||||
} from '@/api/andonManagement/policeRecord/index.js';
|
||||
export default {
|
||||
name: "andonalarmlevel",
|
||||
data() {
|
||||
return {
|
||||
labelWidth: "80px",
|
||||
formLabelWidth: "120px",
|
||||
// 选中id数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
levelNameOptions: [],
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
sort: undefined,
|
||||
sortType: undefined,
|
||||
},
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 操作类型 1、add 2、edit
|
||||
opertype: 0,
|
||||
alarmContactOptions: [],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
open1: false,
|
||||
// 表单参数
|
||||
form: {
|
||||
parentId: '0'
|
||||
},
|
||||
form1: {
|
||||
parentId: ''
|
||||
},
|
||||
columns: [
|
||||
{ index: 0, key: 'id', label: `主键`, checked: true },
|
||||
{ index: 1, key: 'levelName', label: `报警等级名称`, checked: true },
|
||||
{ index: 2, key: 'lightColor', label: `灯光颜色`, checked: true },
|
||||
{ index: 4, key: 'applyScenario', label: `适用场景`, checked: true },
|
||||
{ index: 5, key: 'createdBy', label: `创建人`, checked: true },
|
||||
{ index: 6, key: 'createdTime', label: `创建时间`, checked: true },
|
||||
{ index: 7, key: 'updatedBy', label: `更新人`, checked: true },
|
||||
{ index: 8, key: 'updatedTime', label: `更新时间`, checked: true },
|
||||
],
|
||||
lightColorOptions: [
|
||||
{ value: '红色', label: '红色' },
|
||||
{ value: '黄色', label: '黄色' },
|
||||
],
|
||||
// 数据列表
|
||||
dataList: [],
|
||||
parentOptions: [],
|
||||
// 总记录数
|
||||
total: 0,
|
||||
// 提交按钮是否显示
|
||||
btnSubmitVisible: true,
|
||||
// 表单校验
|
||||
rules: {
|
||||
receivername: [
|
||||
{ required: true, message: "请选择报警联系人", trigger: "change" },
|
||||
],
|
||||
watchip: [
|
||||
{ required: true, message: "请输入手表IP", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 列表数据查询
|
||||
this.getList();
|
||||
|
||||
getAndonAreaParentDictList().then(res => {
|
||||
if (res.code == 200) {
|
||||
this.parentOptions = res.data.map(item => {
|
||||
return { label: item.label, value: item.value }
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 查询数据
|
||||
getList() {
|
||||
this.loading = true;
|
||||
list(this.queryParams).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.dataList = res.data.result;
|
||||
this.total = res.data.totalNum;
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 报警联系人选择变化事件
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 重置数据表单
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
parentId: '0',
|
||||
levelName: undefined,
|
||||
lightColor: undefined,
|
||||
applyScenario: undefined,
|
||||
createdBy: undefined,
|
||||
createdTime: undefined,
|
||||
updatedBy: undefined,
|
||||
updatedTime: undefined,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
// 重置查询操作
|
||||
resetQuery() {
|
||||
this.timeRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length != 1
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
// handleChange(val) {
|
||||
// this.form.levelTime = val
|
||||
// },
|
||||
// 自定义排序
|
||||
sortChange(column) {
|
||||
if (column.prop == null || column.order == null) {
|
||||
this.queryParams.sort = undefined;
|
||||
this.queryParams.sortType = undefined;
|
||||
} else {
|
||||
this.queryParams.sort = column.prop;
|
||||
this.queryParams.sortType = column.order;
|
||||
}
|
||||
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加";
|
||||
|
||||
this.opertype = 1;
|
||||
},
|
||||
handleAdd2() {
|
||||
this.open1 = true;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const Ids = row.id || this.ids;
|
||||
|
||||
this.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
|
||||
.then(function () {
|
||||
return delData(Ids);
|
||||
})
|
||||
.then(() => {
|
||||
this.handleQuery();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids;
|
||||
this.open1 = true;
|
||||
this.title = "修改";
|
||||
this.opertype = 2;
|
||||
this.form1 = {
|
||||
...row
|
||||
}
|
||||
},
|
||||
handleAreaChange(val) {
|
||||
this.form1.parentId = val
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(JSON.stringify(this.form));
|
||||
|
||||
if (this.form.id != undefined && this.opertype === 2) {
|
||||
updateData(this.form)
|
||||
.then((res) => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
})
|
||||
.catch((err) => {
|
||||
//TODO 错误逻辑
|
||||
});
|
||||
} else {
|
||||
addData(this.form)
|
||||
.then((res) => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
})
|
||||
.catch((err) => {
|
||||
//TODO 错误逻辑
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
submitForm2: function () {
|
||||
this.$refs["form1"].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(JSON.stringify(this.form1));
|
||||
|
||||
if (this.form1.id != undefined && this.opertype === 2) {
|
||||
updateData(this.form1)
|
||||
.then((res) => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open1 = false;
|
||||
this.getList();
|
||||
})
|
||||
.catch((err) => {
|
||||
//TODO 错误逻辑
|
||||
});
|
||||
} else {
|
||||
addData(this.form1)
|
||||
.then((res) => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open1 = false;
|
||||
this.getList();
|
||||
})
|
||||
.catch((err) => {
|
||||
//TODO 错误逻辑
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,3 +1,164 @@
|
||||
<template>
|
||||
<div>饼图</div>
|
||||
</template>
|
||||
<div class="pie-chart-container">
|
||||
<div ref="pieChart" class="pie-chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PieChart',
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const echarts = require('echarts')
|
||||
this.chart = echarts.init(this.$refs.pieChart)
|
||||
var getname = ['食堂', '超市', '文印', '网费', '其他'];
|
||||
var getvalue = [20.42, 19.34, 20.11, 20, 18];
|
||||
var getbl = [20.86, 19.76, 20.54, 20.43, 18.39];
|
||||
var data = [];
|
||||
var sum = 0;
|
||||
for (var i = 0; i < getname.length; i++) {
|
||||
sum = sum + getvalue[i];
|
||||
data.push({ name: getname[i], value: getvalue[i] });
|
||||
}
|
||||
|
||||
var colorList = ['#1890FF', '#12DDA1', '#FFB026', '#B9A9FF', '#f1b1f7'];
|
||||
var colorList1 = ['#1183ED', '#00CF92', '#EF9D0F', '#A793FF', '#dd8fec'];
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
height: '88%',
|
||||
right: '11%',
|
||||
top: 'center',
|
||||
icon: 'circle',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 10,
|
||||
data: getname,
|
||||
|
||||
formatter: function (name) {
|
||||
for (var i = 0; i < getname.length; i++) {
|
||||
if (name == data[i].name) {
|
||||
return '{name|' + name + '}{value|' + getbl[i] + '%}';
|
||||
}
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
width: 50,
|
||||
height: 35,
|
||||
padding: [0, 0, 0, 10],
|
||||
color: '#fff',
|
||||
},
|
||||
value: {
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
width: 50,
|
||||
height: 35,
|
||||
padding: [0, 0, 0, 50],
|
||||
color: '#fff',
|
||||
},
|
||||
rate: {
|
||||
fontSize: 15,
|
||||
fontWeight: 500,
|
||||
height: 35,
|
||||
width: 55,
|
||||
align: 'left',
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['35%', '55%'],
|
||||
center: ['25%', '50%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '40%'],
|
||||
center: ['25%', '50%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colorList1[params.dataIndex];
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
this.chart.setOption(option)
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', () => {
|
||||
this.chart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pie-chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
<div class="empty-tip" v-else>
|
||||
暂无Andon报警数据
|
||||
暂无数据！
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
@ -121,7 +121,6 @@ export default {
|
||||
this.timeTimer = setInterval(() => {
|
||||
this.updateTime()
|
||||
}, 1000);
|
||||
this.mockAndonDataUpdate();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timeTimer) {
|
||||
@ -144,22 +143,6 @@ export default {
|
||||
handGoBack() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
mockAndonDataUpdate() {
|
||||
setInterval(() => {
|
||||
const workstationList = ['前镜组装工位01', '后镜打磨工位03', '质检工位02', '包装工位05', '前镜组装工位02', '镜片清洗工位04', '后镜组装工位06'];
|
||||
const alarmTypeList = ['设备故障-电机卡死', '物料短缺-镜片毛坯', '质量异常-表面划痕', '设备故障-打包机故障', '工艺异常-螺丝松动', '设备故障-水泵停机', '物料短缺-固定胶条'];
|
||||
const statusList = ['未处理', '处理中', '已处理'];
|
||||
this.andonAlarmList.unshift({
|
||||
alarmTime: this.formatDateTime(new Date()),
|
||||
workstation: workstationList[Math.floor(Math.random() * workstationList.length)],
|
||||
alarmType: alarmTypeList[Math.floor(Math.random() * alarmTypeList.length)],
|
||||
status: statusList[Math.floor(Math.random() * statusList.length)]
|
||||
});
|
||||
if (this.andonAlarmList.length > 10) {
|
||||
this.andonAlarmList.pop();
|
||||
}
|
||||
}, 5000);
|
||||
},
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
@ -354,7 +337,7 @@ export default {
|
||||
.chart-item {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
// border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
<el-col :span="6">
|
||||
<el-table :stripe="true" @row-click="handleRowClick" :data="leftList" v-loading="loading" ref="table"
|
||||
border highlight-current-row>
|
||||
<el-table-column prop="area1" label="区域1" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area2" label="区域2" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area1" label="父区域" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area2" label="区域" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="alarmCode" label="报警记录编码" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="alarmInfo" label="报警信息" align="center" :show-overflow-tooltip="true" />
|
||||
<!-- <el-table-column prop="alarmType" label="操作" align="center" :show-overflow-tooltip="true">
|
||||
@ -36,13 +36,13 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-form-item label="区域1">
|
||||
<el-input disabled v-model="form.area1" placeholder="请输入区域1" />
|
||||
<el-form-item label="父区域">
|
||||
<el-input disabled v-model="form.area1" placeholder="请输入父区域" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-form-item label="区域2">
|
||||
<el-input disabled v-model="form.area2" placeholder="请输入区域1" />
|
||||
<el-form-item label="区域">
|
||||
<el-input disabled v-model="form.area2" placeholder="请输入父区域" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
@ -161,12 +161,7 @@
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="区域1" prop="area1">
|
||||
<!-- <el-cascader v-model="form.area" :options="areaOptions"
|
||||
@expand-change="handleAreaExpandChange"
|
||||
:props="{ expandTrigger: '', value: 'label', label: 'label' }"
|
||||
@change="handleAreaChange" placeholder="请选择区域" clearable>
|
||||
</el-cascader> -->
|
||||
<el-form-item label="父区域" prop="area1">
|
||||
<el-select v-model="form1.area1" placeholder="请选择区域" @change="handleAreaChange">
|
||||
<el-option v-for="item in parentOptions" :key="item.label" :label="item.label"
|
||||
:value="item.label"></el-option>
|
||||
@ -174,7 +169,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="区域2" prop="area2">
|
||||
<el-form-item label="区域" prop="area2">
|
||||
<el-select v-model="form1.area2" placeholder="请选择区域下设备">
|
||||
<el-option v-for="item in childrenOptions" :key="item.label" :label="item.label"
|
||||
:value="item.label"></el-option>
|
||||
|
||||
@ -38,8 +38,8 @@
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column prop="alarmCode" min-width="140" label="报警编码" align="center"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area1" label="区域" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area2" label="区域下设备" min-width="120" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area1" label="父区域" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="area2" label="区域" min-width="120" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="alarmType" label="报警类型" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmInfo" label="报警信息" align="center" :show-overflow-tooltip="true" />
|
||||
@ -90,12 +90,7 @@
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="区域1" prop="area1">
|
||||
<!-- <el-cascader v-model="form.area" :options="areaOptions"
|
||||
@expand-change="handleAreaExpandChange"
|
||||
:props="{ expandTrigger: '', value: 'label', label: 'label' }"
|
||||
@change="handleAreaChange" placeholder="请选择区域" clearable>
|
||||
</el-cascader> -->
|
||||
<el-form-item label="父区域" prop="area1">
|
||||
<el-select v-model="form.area1" placeholder="请选择区域" @change="handleAreaChange">
|
||||
<el-option v-for="item in parentOptions" :key="item.label" :label="item.label"
|
||||
:value="item.label"></el-option>
|
||||
@ -103,7 +98,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="区域2" prop="area2">
|
||||
<el-form-item label="区域" prop="area2">
|
||||
<el-select v-model="form.area2" placeholder="请选择区域下设备">
|
||||
<el-option v-for="item in childrenOptions" :key="item.label" :label="item.label"
|
||||
:value="item.label"></el-option>
|
||||
@ -461,7 +456,6 @@ export default {
|
||||
console.log(val[0], '区域选择变化');
|
||||
},
|
||||
// 区域选择变化时
|
||||
// 区域选择变化时
|
||||
handleAreaChange(label) {
|
||||
console.log('区域选择变化:', label);
|
||||
this.changeValue = label;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user