|
@@ -1,134 +1,184 @@
|
|
|
<!--告警方式-->
|
|
|
<template>
|
|
|
<div class="app-container warningMode">
|
|
|
- <div class="title-box">
|
|
|
- <el-form :model="queryParams" class="form-box" ref="queryForm"
|
|
|
- :inline="true" style="width:100%;">
|
|
|
- <el-form-item label="名称" prop="queryData1" label-width="90px">
|
|
|
- <el-input
|
|
|
- maxLength="30"
|
|
|
- v-model="queryParams.queryData1"
|
|
|
- placeholder="请输入"
|
|
|
- clearable
|
|
|
- style="width: 200px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="方式" prop="queryData2">
|
|
|
- <el-select v-model="queryParams.queryData2" clearable placeholder="请选择" style="width: 200px">
|
|
|
- <el-option
|
|
|
- v-for="dict in options"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
+ <div class="warningMode-page" v-if="pageType === 1">
|
|
|
+ <div class="title-box">
|
|
|
+ <el-form :model="queryParams" class="form-box" ref="queryForm"
|
|
|
+ :inline="true" style="width:100%;">
|
|
|
+ <el-form-item label="名称" label-width="70px">
|
|
|
+ <el-input
|
|
|
+ maxLength="30"
|
|
|
+ v-model="queryParams.name"
|
|
|
+ placeholder="请输入关键词"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
|
|
|
- <p class="reset-button-one" @click="resetQuery">重置</p>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="" prop="title" style="float: right">
|
|
|
- <el-col :span="1.5" style="margin-right:10px;">
|
|
|
- <p class="add-button-one-90"
|
|
|
- @click="dialogOpen"
|
|
|
- >新增</p>
|
|
|
- </el-col>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="content-box">
|
|
|
- <el-table v-loading="loading" border :data="dataList">
|
|
|
- <el-table-column label="名称" width="80" align="left" prop="data1" />
|
|
|
- <el-table-column label="方式" align="left" prop="data2" show-overflow-tooltip/>
|
|
|
- <el-table-column label="类型" align="left" prop="data3" show-overflow-tooltip/>
|
|
|
- <el-table-column label="说明" align="left" prop="data4" show-overflow-tooltip/>
|
|
|
- <el-table-column label="状态" align="left" prop="data5" show-overflow-tooltip/>
|
|
|
- <el-table-column label="创建时间" align="left" prop="data6" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ parseTime(scope.row.data6) }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="table-button-box">
|
|
|
- <p class="table-button-null"></p>
|
|
|
- <p class="table-button-p"
|
|
|
- @click="tableButton(2,scope.row)"
|
|
|
- >详情</p>
|
|
|
- <p class="table-button-p"
|
|
|
- @click="tableButton(3,scope.row)"
|
|
|
- >编辑</p>
|
|
|
- <p class="table-button-p"
|
|
|
- @click="tableButton(4,scope.row)"
|
|
|
- >删除</p>
|
|
|
- <p class="table-button-null"></p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="方式">
|
|
|
+ <el-select v-model="queryParams.alarmType"
|
|
|
+ style="width: 200px"
|
|
|
+ clearable placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in typeList"
|
|
|
+ :key="dict.id"
|
|
|
+ :label="dict.name"
|
|
|
+ :value="dict.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
|
|
|
+ <p class="reset-button-one" @click="resetQuery">重置</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="title" style="float: right">
|
|
|
+ <el-col :span="1.5" style="margin-right:10px;">
|
|
|
+ <p class="add-button-one-90"
|
|
|
+ @click="cardClick"
|
|
|
+ >{{cardType?'切换列表':'切换卡片'}}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="title" style="float: right">
|
|
|
+ <el-col :span="1.5" style="margin-right:10px;">
|
|
|
+ <p class="add-button-one-90"
|
|
|
+ @click="tableButton(1)"
|
|
|
+ >新增</p>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <el-table v-loading="loading" border :data="dataList" v-if="!cardType">
|
|
|
+ <el-table-column label="名称" width="200" align="left" prop="name" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="方式" width="120" align="left" prop="alarmType" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <p v-for="item in typeList" :key="index" v-show="item.id == scope.row.alarmType">{{item.name}}</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="类型" width="140" align="left" prop="category" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <p v-for="item in categoryList" :key="index" v-show="item.id == scope.row.category">{{item.name}}</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="配置信息" align="left" prop="params" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="状态" width="100" align="left" prop="state" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-switch
|
|
|
+ @click.native="tableButton(5,scope.row)"
|
|
|
+ class="switch captcha-img"
|
|
|
+ :active-value="true"
|
|
|
+ :inactive-value="false"
|
|
|
+ active-color="#0183FA"
|
|
|
+ inactive-color="#999"
|
|
|
+ v-model="scope.row.state"
|
|
|
+ active-text="启用"
|
|
|
+ inactive-text="停用"
|
|
|
+ disabled
|
|
|
+ ></el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" width="200" align="left" prop="createTime" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="table-button-box">
|
|
|
+ <p class="table-button-null"></p>
|
|
|
+ <p class="table-button-p"
|
|
|
+ @click="tableButton(2,scope.row)"
|
|
|
+ >详情</p>
|
|
|
+ <p class="table-button-p"
|
|
|
+ @click="tableButton(3,scope.row)"
|
|
|
+ >编辑</p>
|
|
|
+ <p class="table-button-p"
|
|
|
+ @click="tableButton(4,scope.row)"
|
|
|
+ >删除</p>
|
|
|
+ <p class="table-button-null"></p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="card-max-box scrollbar-box" v-if="cardType">
|
|
|
+ <div class="for-card-box" v-for="(item,index) in dataList" :key="index">
|
|
|
+ <p class="for-card-title-p">
|
|
|
+ <span v-for="minItem in typeList" v-show="minItem.id == item.alarmType">{{minItem.name}}</span>
|
|
|
+ <span> | </span>
|
|
|
+ <span v-for="minItem in categoryList" v-show="minItem.id == item.category">{{minItem.name}}</span>
|
|
|
+ <span> -- </span>
|
|
|
+ <span>{{item.name}}</span>
|
|
|
+ </p>
|
|
|
+ <div class="for-content-box">
|
|
|
+ <img v-for="minItem in typeList" v-show="minItem.id == item.alarmType" :src="minItem.img">
|
|
|
+ <div>
|
|
|
+ <p>配置信息</p>
|
|
|
+ <p>{{item.params}}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination :page-sizes="[20, 30, 40, 50]"
|
|
|
- v-show="total>0"
|
|
|
- :total="total"
|
|
|
- :page.sync="queryParams.page"
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getList"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!--新增弹窗-->
|
|
|
- <el-dialog class="warningMode-dialog" :title='dialogTitle' width="540px" append-to-body
|
|
|
- :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
|
|
|
- :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
- <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
|
|
|
- <p class="dialog-footer-button-null"></p>
|
|
|
- <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
|
|
|
- <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p>
|
|
|
- <p class="dialog-footer-button-null"></p>
|
|
|
+ <div class="for-car-button-box">
|
|
|
+ <p @click="tableButton(2,item)">详情</p>
|
|
|
+ <p @click="tableButton(3,item)">编辑</p>
|
|
|
+ <p @click="tableButton(5,item)">{{item.state?'停用':'启用'}}</p>
|
|
|
+ <p @click="tableButton(4,item)">删除</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <pagination :page-sizes="[20, 30, 40, 50]"
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.page"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </div>
|
|
|
+ <addPage v-if="pageType === 2" :propsData="propsData"></addPage>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import { iotAlarmType,iotAlarmTypeList } from "@/api/iotDevice/index";
|
|
|
+ import addPage from "./addPage.vue";
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
+ components: {
|
|
|
+ addPage
|
|
|
+ },
|
|
|
data(){
|
|
|
return{
|
|
|
+ pageType:1,
|
|
|
+ cardType:true,
|
|
|
loading:false,
|
|
|
- options:[{label:'钉钉',value:1},{label:'微信',value:2},{label:'邮件',value:3},{label:'语音',value:4},{label:'短信',value:5},{label:'电话',value:6},],
|
|
|
+ typeList:[
|
|
|
+ {name:"钉钉",id:1,img:require('@/assets/ZDimages/iotDevice/dingding.png')},
|
|
|
+ {name:"微信",id:2,img:require('@/assets/ZDimages/iotDevice/weixin.png')},
|
|
|
+ {name:"邮件",id:3,img:require('@/assets/ZDimages/iotDevice/youjian.png')},
|
|
|
+ {name:"电话",id:4,img:require('@/assets/ZDimages/iotDevice/dianhua.png')},
|
|
|
+ {name:"短信",id:5,img:require('@/assets/ZDimages/iotDevice/duanxin.png')},
|
|
|
+ ],
|
|
|
+ categoryList:[],
|
|
|
queryParams:{
|
|
|
page:1,
|
|
|
pageSize:20,
|
|
|
- queryData1:"",
|
|
|
- jobGroup:null,
|
|
|
- queryData2:null,
|
|
|
+ name:"",
|
|
|
+ alarmType :null,
|
|
|
},
|
|
|
dataList:[],
|
|
|
total:0,
|
|
|
- dialogTitle:null,
|
|
|
- dialogType:false,
|
|
|
- dialogForm:{},
|
|
|
+ //组件传参
|
|
|
+ propsData:{},
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
|
|
|
},
|
|
|
mounted(){
|
|
|
-
|
|
|
+ this.getList();
|
|
|
},
|
|
|
methods:{
|
|
|
- //弹层关闭
|
|
|
- dialogOff(){
|
|
|
- this.$set(this,'dialogType',false);
|
|
|
- },
|
|
|
- //弹层开启
|
|
|
- dialogOpen(){
|
|
|
- this.dialogFormReset();
|
|
|
- this.$set(this,'dialogTitle','新增');
|
|
|
- this.$set(this,'dialogType',true);
|
|
|
- },
|
|
|
- //弹层确定
|
|
|
- dialogSubmit(){
|
|
|
- this.$set(this,'dialogType',false);
|
|
|
+ //卡片点击事件
|
|
|
+ cardClick(){
|
|
|
+ this.$set(this,'cardType',!this.cardType);
|
|
|
},
|
|
|
handleQuery(){
|
|
|
this.$set(this.queryParams,'page',1);
|
|
@@ -143,27 +193,57 @@
|
|
|
});
|
|
|
this.getList();
|
|
|
},
|
|
|
- dialogFormReset(){
|
|
|
- this.$set(this,'dialogForm',{
|
|
|
-
|
|
|
- });
|
|
|
- },
|
|
|
//获取数据列表
|
|
|
getList(){
|
|
|
- // this.$set(this,'loading',true);
|
|
|
- // listJobLog(this.queryParams).then(response => {
|
|
|
- // this.$set(this,'loading',false);
|
|
|
- // this.$set(this,'dataList',response.data.records);
|
|
|
- // this.$set(this,'total',response.data.total);
|
|
|
- // });
|
|
|
+ this.$set(this,'loading',true);
|
|
|
+ iotAlarmTypeList(this.queryParams).then(response => {
|
|
|
+ this.$set(this,'loading',false);
|
|
|
+ this.$set(this,'dataList',response.data.records);
|
|
|
+ this.$set(this,'total',response.data.total);
|
|
|
+ });
|
|
|
},
|
|
|
tableButton(type,row){
|
|
|
- if(type == 2){
|
|
|
-
|
|
|
+ if(type == 1){
|
|
|
+ this.$set(this,'pageType',2);
|
|
|
+ this.$set(this,'propsData',{});
|
|
|
+ }else if(type == 2){
|
|
|
+ this.$set(this,'pageType',2);
|
|
|
+ let obj = JSON.parse(JSON.stringify(row))
|
|
|
+ obj.showType = true;
|
|
|
+ this.$set(this,'propsData',obj);
|
|
|
}else if(type == 3){
|
|
|
- this.dialogFormReset();
|
|
|
+ this.$set(this,'pageType',2);
|
|
|
+ let obj = JSON.parse(JSON.stringify(row))
|
|
|
+ obj.showType = false;
|
|
|
+ this.$set(this,'propsData',obj);
|
|
|
}else if(type == 4){
|
|
|
-
|
|
|
+ this.$confirm('是否确认删除?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ }).then(() => {
|
|
|
+ // appInfoDelete({id:row.id}).then(response => {
|
|
|
+ // self.msgSuccess(response.message)
|
|
|
+ // self.getList();
|
|
|
+ // });
|
|
|
+ }).catch(() => {});
|
|
|
+ }else if(type == 5){
|
|
|
+ let text = row.state === "0" ? "启用" : "停用";
|
|
|
+ this.$confirm('确认要' + text + '?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return systemUserEditState({userId:row.userId, state:!row.state});
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.msgSuccess("操作成功");
|
|
|
+ }).catch(function() {
|
|
|
+ });
|
|
|
+ }else if(type == 6){
|
|
|
+ this.$set(this,'pageType',1);
|
|
|
+ this.getList();
|
|
|
}
|
|
|
},
|
|
|
},
|
|
@@ -175,17 +255,131 @@
|
|
|
flex:1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- .title-box{
|
|
|
- padding-top:20px;
|
|
|
- border-bottom:1px solid #dedede;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .content-box{
|
|
|
- flex: 1;
|
|
|
+ .warningMode-page{
|
|
|
+ flex:1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- padding:20px;
|
|
|
overflow: hidden;
|
|
|
+ .title-box{
|
|
|
+ padding-top:20px;
|
|
|
+ border-bottom:1px solid #dedede;
|
|
|
+ display: flex;
|
|
|
+ .icon-button{
|
|
|
+ cursor: pointer;
|
|
|
+ width:90px;
|
|
|
+ line-height:40px;
|
|
|
+ font-size:24px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-box{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding:20px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .card-max-box{
|
|
|
+ flex: 1;
|
|
|
+ .for-card-box{
|
|
|
+ display: inline-block;
|
|
|
+ width:470px;
|
|
|
+ height:240px;
|
|
|
+ -webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius:6px;
|
|
|
+ margin:20px;
|
|
|
+ overflow: hidden;
|
|
|
+ .for-card-title-p{
|
|
|
+ font-size:16px;
|
|
|
+ line-height:40px;
|
|
|
+ height:40px;
|
|
|
+ padding:0 20px;
|
|
|
+ color:#fff;
|
|
|
+ background: #3296fa;
|
|
|
+ }
|
|
|
+ .for-content-box{
|
|
|
+ height:159px;
|
|
|
+ display: flex;
|
|
|
+ img{
|
|
|
+ width:80px;
|
|
|
+ height:80px;
|
|
|
+ margin:40px 30px;
|
|
|
+ }
|
|
|
+ div{
|
|
|
+ padding-right:20px;
|
|
|
+ p{
|
|
|
+ line-height:40px;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ margin-top:10px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ width:300px;
|
|
|
+ line-height:20px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color:#333;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 4;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-car-button-box{
|
|
|
+ display: flex;
|
|
|
+ border-top:1px solid #dedede;
|
|
|
+ p{
|
|
|
+ cursor: pointer;
|
|
|
+ line-height:40px;
|
|
|
+ flex:1;
|
|
|
+ text-align: center;
|
|
|
+ color:#3296fa;
|
|
|
+ }
|
|
|
+ p:hover{
|
|
|
+ color:#fff;
|
|
|
+ background-color: #3296fa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-card-box:hover{
|
|
|
+ -webkit-box-shadow: 0 0 8px 1px rgba(50,150,250,1);
|
|
|
+ .for-car-button-box{
|
|
|
+ border-top:1px solid rgba(50,150,250,0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .warningMode{
|
|
|
+ .warningMode-page{
|
|
|
+ .switch .el-switch__label {
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ .switch .el-switch__label--right {
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .switch .el-switch__label--right span{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .switch .el-switch__label--left {
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .switch .el-switch__label--left span{
|
|
|
+ margin-left: 24px;
|
|
|
+ }
|
|
|
+ .switch .el-switch__label.is-active {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .switch.el-switch .el-switch__core,
|
|
|
+ .el-switch .el-switch__label {
|
|
|
+ width: 64px !important;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|