菜单 告警

operationSupport/src/components/common/AmapInit.vue

@@ -0,0 +1,183 @@
+
+<template>
+    <div class="map-content-div">
+        <input type="hidden" v-model="searchPointInfo" />
+        <div id="viewDiv"></div>
+        <div
+            class="pop-address-info"
+            :style="{
+                top: gety-50 + 'px',
+                left: getx + 'px'
+            }"
+            v-show="popisshow"
+            @mouseout="leave"
+            @mouseover="enter"
+        >
+            <ul class="ul-scroller2">
+                <li>
+                    <span>场景</span><span :title="row.sceneName">{{ row.sceneName||'-' }}</span>
+                </li>
+                <li>
+                    <span>设备</span><span :title="row.deviceName">{{ row.deviceName || '-'}}</span>
+                </li>
+                <li v-if="title=='real'">
+                    <span>告警详情</span><span :title="row.alarmContent" class="detail">{{ row.alarmContent || '-'}}</span>
+                </li>
+                 <li v-if="title=='history'">
+                    <span>告警规则</span><span :title="row.alermRule">{{ row.alermRule || '-'}}</span>
+                </li>
+                <li>
+                    <span>地址</span><span :title="row.address">{{ row.address || '-'}}</span>
+                </li>
+                <li>
+                    <span>开始时间</span><span :title="row.alarmStartTime">{{ row.alarmStartTime ||'-'}}</span>
+                </li>
+                <li v-if="title=='history'">
+                    <span>结束时间</span><span :title="row.alarmEndTime">{{ row.alarmEndTime ||'-'}}</span>
+                </li>
+                <li v-if="title=='history'">
+                    <span>持续时间</span><span :title="row.duration">{{ row.duration ||'-'}}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import initMap from '@utils/initMap.js';
+import location from '@/assets/img/mapdeviceimg/location.png';
+export default {
+    name: 'MapInit',
+    mixins: [initMap],
+    props: {
+        row: {
+            type: Array,
+            default: []
+        },
+        title:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+            popisshow: false,
+            getx: '',
+            gety: '',
+            
+            gisConstructor: {},
+            thislayerView: '',
+            map: {},
+            // lesseeId: JSON.parse(sessionStorage.getItem("loginInfo")).lesseeId,
+            deviceObjData: '',
+            addpointGraphic: '',
+            addGraphic: '',
+            count: 0,
+            allserviceType: [],
+            graphicsLayer: '',
+            selectGislist: '',
+            baseUrl: '', //底图路径
+            gwUrl: '', //管网路径
+            setcenterpoint: '', //中心点
+            cityName: '', //城市名称
+            wkidval: ''
+        };
+    },
+    computed: {
+        searchPointInfo() {
+            return this.$store.getters['getSearchPointInfo'].XY;
+        }
+    },
+    watch: {
+        searchPointInfo(newv,oldv){
+            this.centerAtByPoint();
+        }
+
+    },
+    methods: {       
+        mapviewHandle(){
+            this.view.on(['pointer-move'], (event) => {
+                this.view.hitTest(event).then((response) => {
+                    if (response.results.length) {
+                        var graphic = response.results[0].graphic;
+                        if (graphic && this.count === 0) {
+                            // 标记点的位置
+                            this.popisshow = true;
+                            this.getx = response.screenPoint.x-100
+                            this.gety = response.screenPoint.y-100
+                        }else{
+                            this.popisshow = false;
+                        }
+                    } else {
+                            // this.addGraphic.layer.remove(this.addpointGraphic);
+                            // this.addpointGraphic = '';
+                            // this.addGraphic = '';
+                            this.count = 0;
+                            this.popisshow = false;
+                        // }
+                    }
+                });
+            });
+
+            
+            this.centerAtByPoint();
+        },
+
+        leave(){
+            this.popisshow = false;
+        },
+        enter(){
+            this.popisshow = true;
+
+        },
+
+        centerAtByPoint() {
+            this.graphicsLayer?this.map.remove(this.graphicsLayer):''
+            this.graphicsLayer = new this.gisConstructor.GraphicsLayer({
+                id: 'linshiLayer',
+                name: '临时图层',
+                opacity: 1,
+                visible: true
+            });
+            this.map.add(this.graphicsLayer);
+            this.graphicsLayer&&this.graphicsLayer.removeAll();
+            let pointXY = this.searchPointInfo;
+            if (!this.searchPointInfo) return;
+            var point = new this.gisConstructor.Point({
+                type: 'point',
+                x: pointXY[0],
+                y: pointXY[1],
+                spatialReference: this.wkidval
+            });
+            this.view.center = point;
+            let currentLevel=_.isNumber(this.getzoom*1)&&this.getzoom*1!=0?this.getzoom:18;
+            this.view.zoom = currentLevel;
+
+            var tempAData = {
+                名称: '定位点',
+                id: '1111'
+            };
+            // 设置点的样式
+            var pictureMarkerSymbol = {
+                type: 'picture-marker',
+                url: location,
+                width: '32px',
+                height: '48px'
+                // yoffset: '-20px'
+            };
+            var pointGraphic = new this.gisConstructor.Graphic({
+                geometry: point,
+                symbol: pictureMarkerSymbol,
+                attributes: tempAData
+            });
+
+            this.graphicsLayer.removeAll();
+            this.graphicsLayer.add(pointGraphic);
+        }
+    },
+    created(){
+    }
+};
+</script> 
+

operationSupport/src/components/common/MenuTree.vue

@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <template v-for="item in menuList">
+            <el-submenu v-if="!!item.children" :index="'/' + item.linkPath" :key="item.id">
+                <template slot="title">
+                    <img :src="`${envConfig.baseImgApi}${item.menuImage}`" style="width: 14px; height: 14px; margin-right: 10px" />
+                    <span v-if="!collapse" slot="title">{{ item.name }}</span>
+                </template>
+                <menu-tree :menuList="item.children" :openArray="openArray" />
+            </el-submenu>
+            <el-menu-item v-else :index="'/' + item.linkPath" :key="item.id">
+                <img :src="`${envConfig.baseImgApi}${item.menuImage}`" style="width: 14px; height: 14px; margin-right: 10px" />
+                <span slot="title">{{ item.name }}</span>
+            </el-menu-item>
+        </template>
+    </div>
+</template>
+<script>
+import MenuTree from './MenuTree.vue';
+import envConfig from '@/config';
+export default {
+    name: 'MenuTree',
+    data() {
+        return {
+            envConfig: envConfig,
+            //去掉菜单
+            discard: ['概览']
+        };
+    },
+    components: {
+        MenuTree
+    },
+    computed: {
+        onRoutes() {
+            return this.$route.path;
+        }
+    },
+    props: {
+        menuList: {
+            type: Array,
+            default: () => []
+        },
+        collapse: {
+            type: Boolean,
+            default: false
+        },
+        openArray: {
+            type: Array,
+            default: () => []
+        }
+    },
+    created() {}
+};
+</script>

operationSupport/src/components/common/Sidebar.vue

@@ -1,3 +1,4 @@
+
 <template>
     <div class="sidebar" :style="collapse ? 'width:85px' : ''">
         <div class="logo" v-if="!collapse">
@@ -8,64 +9,23 @@
             <div class="text">运营支撑</div>
         </div>
         <div class="menu-wrap no-scrollbar">
+            {{ menuListsss }}
             <el-menu
                 class="sidebar-el-menu"
                 :default-active="onRoutes"
                 :collapse="collapse"
                 background-color="#171F32"
                 text-color="#aaadba"
+                active-text-color="#2887f2"
                 unique-opened
+                collapse-transition
+                @select="handleOpen"
                 router
                 :style="collapse ? 'width:84px' : 'width:220px'"
             >
-                <!-- <template v-for="item in siderMenuList"> -->
-                <template v-for="item in menuList">
-                    <template v-if="item.children">
-                        <el-submenu :index="item.linkPath" :key="item.linkPath">
-                            <template slot="title">
-                                <img :src="envConfig.baseImgApi + item.menuImage" style="width: 14px; height: 14px; margin-right: 10px" />
-                                <span slot="title">{{ item.name }}</span>
-                            </template>
-                            <template v-for="subItem in item.children">
-                                <el-submenu v-if="subItem.children" :index="subItem.linkPath" :key="subItem.linkPath">
-                                    <img
-                                        slot="title"
-                                        :src="envConfig.baseImgApi + subItem.menuImage"
-                                        style="width: 14px; height: 14px; margin-right: 10px"
-                                    />
-                                    <template slot="title">{{ subItem.name }}</template>
-                                    <el-menu-item
-                                        style="padding-left: 88px"
-                                        v-for="threeItem in subItem.children"
-                                        :key="threeItem.linkPath"
-                                        :index="threeItem.linkPath"
-                                    >
-                                        <template slot="title">{{ threeItem.name }}</template>
-                                    </el-menu-item>
-                                </el-submenu>
-                                <el-menu-item v-else :index="subItem.linkPath" :key="subItem.linkPath">
-                                    <img
-                                        :src="envConfig.baseImgApi + subItem.menuImage"
-                                        style="width: 14px; height: 14px; margin-right: 10px"
-                                    />
-                                    <template slot="title"> {{ subItem.name }}</template>
-                                </el-menu-item>
-                            </template>
-                        </el-submenu>
-                    </template>
-                    <!-- 一级菜单 -->
-                    <template v-else>
-                        <el-menu-item :index="item.linkPath" :key="item.linkPath">
-                            <img :src="envConfig.baseImgApi + item.menuImage" style="width: 14px; height: 14px; margin-right: 10px" />
-                            <span slot="title">{{ item.name }}</span>
-                        </el-menu-item>
-                    </template>
-                </template>
+                <menu-tree :menuList="menuList" :collapse="collapse" :openArray="openArray"></menu-tree>
             </el-menu>
         </div>
-        <div class="menu-footer" :class="theme == 'dark' ? 'dark' : 'light'" :style="collapse ? 'width:84px' : 'width:220px'">
-            <div></div>
-        </div>
         <div class="footer">
             <img
                 :class="[collapse ? 'expandhover' : 'packuphover']"
@@ -77,43 +37,32 @@
 </template>
 
 <script>
-import envConfig from '@/config';
-import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
-const darkTheme = new Set(['/dispatchCenter', '/waterSupplyMap', '/operation/video', '/operation/pipe-network']);
-const collapsePages = new Set(['/viewDetail', '/installplanView']);
+import { mapState } from 'vuex';
+import MenuTree from './MenuTree.vue';
 export default {
     data() {
         return {
-            envConfig: envConfig,
-            siderMenuList: [],
             btnCollpaseright: require('@assets/img/btn_collpaseright.png'),
-            btnCollpaseleft: require('@assets/img/btn_collpaseleft.png')
+            btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),
+            openList: []
         };
     },
+    components: {
+        MenuTree
+    },
     computed: {
-        // ...mapState(['menuList']),
-        menuList(){
-                return this.$store.getters['getMenuList']
-        },
         onRoutes() {
-            if (this.$route.path) {
-                let theme = darkTheme.has(this.$route.path) ? 'dark' : 'light';
-                this.$store.commit('setTheme', darkTheme.has(this.$route.path) ? 'dark' : 'light');
-                let iscollapse = collapsePages.has(this.$route.path);
-                this.$store.dispatch('collapse', iscollapse);
-            }
-            return this.$route.path.replace('/', '');
+            return this.$route.path;
         },
         collapse() {
             return this.$store.getters['getCollapse'];
         },
-        theme() {
-            return this.$store.getters.getTheme;
-        }
-    },
-    watch: {
-        menuList(newVal) {
-            this.getMenuList();
+        menuList() {
+            let list = this.$store.getters['getMenuList'];
+            return list;
+        },
+        openArray() {
+            return this.openList;
         }
     },
     methods: {
@@ -121,25 +70,16 @@ export default {
         collapseChage() {
             this.$store.dispatch('collapse', !this.collapse);
         },
-        getMenuList(resolve) {
-            this.$http.get('/user/findUserMenu', { appId: '1002' }).then(({ status, data, msg }) => {
-                if (0 === status) {
-                    this.siderMenuList = data[0].children;
-                    resolve && resolve(true);
-                }
-            });
+
+        handleOpen(key, keyPath) {
+            this.openList = keyPath;
         }
     },
-    created() {
-        // new Promise((resolve) => {
-        //     this.getMenuList(resolve);
-        // }).then((_) => {});
-    }
+    created() {}
 };
 </script>
 
 <style  lang="scss">
-@import '@assets/css/public-style.scss';
 .sidebar {
     width: 220px;
     display: flex;
@@ -147,7 +87,6 @@ export default {
     background: #171f32;
     border-radius: 0px 30px 30px 0px;
     z-index: 2;
-    // background:  #222B41 url('../../assets/img/bg_img.png') no-repeat bottom right;
     .logo {
         width: 100%;
         height: 110px;
@@ -189,16 +128,13 @@ export default {
         overflow: auto;
         flex: 1;
         scrollbar-width: 0;
-        // background: #171F32;
     }
     .menu-footer.dark {
-        // position: absolute;
         bottom: 0;
         left: 0;
         width: 220px;
         height: 30px;
-        // border-radius: 0px 30px 30px 0px;
-        // background-color: #f4f7f9;
+
         div {
             width: 100%;
             height: 100%;
@@ -210,27 +146,12 @@ export default {
             background-color: #070f22 !important;
             z-index: 1;
         }
-        //     div{
-        //         width: 100%;
-        //         height: 100%;
-        //         border-radius: 0px 30px 30px 0px;
-        //         background: #171F32;
-        //         border: none;
-        //     }
-        // }
+
         &.light {
             background-color: #f4f7f9 !important;
             z-index: 1;
         }
     }
-    // .menu-footer.light{
-    //     bottom: 0;
-    //     left: 0;
-    //     width: 220px;
-    //     height: 30px;
-    //     background-color: #f4f7f9 !important;
-    //     z-index: 1;
-    // }
     .footer {
         position: absolute;
         bottom: 30px;
@@ -244,20 +165,13 @@ export default {
             height: 24px;
             cursor: pointer;
         }
-        .expandhover:hover {
-            background: url('../../assets/img/btn_collpaseright.png') no-repeat;
-            // background-color: rgba(39, 135, 241,0.4);
-            background-size: 100% 100%;
-        }
-        .packuphover:hover {
-            background: url('../../assets/img/btn_collpaseleft.png') no-repeat;
-            // background-color: rgba(39, 135, 241,0.4);
-            background-size: 100% 100%;
-        }
     }
 }
+.el-menu {
+    border: none;
+}
 
-.sidebar-el-menu > .el-submenu.is-opened > .el-submenu__title {
+.sidebar-el-menu .el-submenu.is-opened > .el-submenu__title {
     //设置一级菜单点开后的状态
     color: #fff !important;
     background: rgb(44, 53, 74);
@@ -266,28 +180,27 @@ export default {
 .sidebar-el-menu > .el-submenu.is-opened > .el-menu--inline > .el-submenu.is-opened > .el-submenu__title {
     color: #fff !important;
 }
-.sidebar-el-menu > .el-submenu.is-opened.is-active > .el-submenu__title {
+.sidebar-el-menu > div > .el-submenu.is-opened.is-active > .el-submenu__title {
     background: #2c354a !important;
     border-radius: 32px 0px 0px 32px;
-    color: $mainTextColor !important;
-
-    border-right: 2px solid $mainTextColor;
+    color: rgb(39, 135, 241) !important;
+    border-right: 2px solid #2787f1;
     .el-submenu__icon-arrow::before {
-        color: $mainTextColor;
+        color: rgb(39, 135, 241);
     }
 }
 .el-menu-item.is-active {
-    //   color:rgb(39, 135, 241);
-    color: $mainTextColor;
+    color: rgb(39, 135, 241);
 }
-// .el-submenu.is-active > div > span {
-//     color: rgb(39, 135, 241);
-// }
+.el-submenu.is-active > div > span {
+    color: rgb(39, 135, 241);
+}
+
 .sidebar .logo.shrink {
     display: flex;
     font-size: 16px;
     justify-content: center;
-    color: $mainTextColor;
+    // color: $mainTextColor;
     border-bottom: 2px solid #2a335c;
     margin-bottom: 20px;
     align-items: flex-start;
@@ -301,19 +214,35 @@ export default {
     }
 }
 
+// .sidebar .logo.shrink {
+//     display: flex;
+//     justify-content: center;
+//     color: #2787f1;
+//     border-bottom: 2px solid #2a335c;
+//     margin-bottom: 20px;
+//     align-items: flex-start;
+//     .text {
+//         width: 48px;
+//         height: 48px;
+//         background: rgba(255, 255, 255, 0.1);
+//         border-radius: 4px;
+//         border: 1px solid rgba(255, 255, 255, 0.4);
+//         text-align: center;
+//     }
+// }
+
 .el-menu--collapse > .is-active {
-    color: $mainTextColor;
+    color: #2787f1;
+
     background: #2c354a;
     border-radius: 32px 0px 0px 32px;
-    //   margin:0;
 }
+
 .el-menu--collapse > .is-active > .el-submenu__title {
     background: transparent !important;
 }
 .el-submenu > .el-submenu__title:hover {
     //设置一级菜单的鼠标经过时候的样式
-    //   background: linear-gradient(to right, rgba(39,135,241,0.2) 20%, black 100%);
-    //   border-radius: 0;
     background: rgb(44, 53, 74) !important;
     border-radius: 32px 0px 0px 32px !important;
 }

operationSupport/src/views/alarmManagement/details.vue

@@ -0,0 +1,288 @@
+
+<template>
+    <div>
+        <div class="handle-box">
+            <el-input class="servertype-serch" v-model="mixins_query.condition" placeholder="告警名称"></el-input>
+            <el-select clearable class="servertype-serch" v-model="mixins_query.alarmType" placeholder="告警类型">
+                <el-option v-for="(item, index) in alarmTypeList" :key="index" :label="item.label" :value="item.value">{{
+                    item.label
+                }}</el-option>
+            </el-select>
+
+            <el-date-picker
+                v-model="times"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+                class="servertype-serch"
+                :editable="false"
+            ></el-date-picker>
+            <el-button class="servertype-serch-btn search-btn" icon="el-icon-search"  type="primary" @click="getPage">查询</el-button>
+            <i class="fr fr-fs-fc fr-add iconfont" @click="exportExcel"  v-txt-tip data-txt="导出">&#xe662;</i>
+        </div>
+        <!-- 表格 -->
+        <div class="device-manage-table">
+            <zz-table
+                :cols="cols"
+                :settings="{ showCheckbox: false, showIndex: true, stripe: true }"
+                :loading="mixins_onQuery"
+                :data="mixins_list"
+                :pageset="mixins_pageset"
+                @page-change="pageChange"
+                @selection-change="selectionChange"
+            >
+                <template slot-scope="scope" slot="address">
+                    <p v-tip style="color: #0eaeff" @click="showMap(scope.index)">
+                        <i class="iconfont">&#xe663;</i>{{ scope.row.address }}
+                    </p>
+                </template>
+                <template slot-scope="scope" slot="opt">
+                    <i
+                        class="iconfont"
+                        v-if="scope.row.opState == 1"
+                        @click="suspendedById(scope.row.id)"
+                        style="color: #ff7272; margin-right: 30px"
+                        v-txt-tip data-txt="挂起"
+                        >&#xe66d;</i
+                    >
+                    <i class="iconfont" @click="renewById(scope.row.id)" style="color: #0eaeff" v-else v-txt-tip data-txt="恢复挂起">&#xe669;</i>
+                </template>
+            </zz-table>
+        </div>
+        <!-- 地图弹框 -->
+        <el-dialog :append-to-body="true" title="地址" :visible.sync="dialogMapVisible" width="1000" :before-close="cancellocation">
+            <div class="doalogmap">
+                <amap-init ref="amapInit" :row="row" :title="'real'"></amap-init>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import list from '@utils/list.js';
+import envConfig from '@/config';
+import AmapInit from '@/components/common/AmapInit.vue';
+export default {
+    components: { AmapInit },
+    mixins: [list],
+    data() {
+        return {
+            times: [],
+            envConfig: envConfig,
+            cols: [
+                {
+                    label: '告警名称',
+                    prop: 'alarmName'
+                },
+                {
+                    label: '场景名称',
+                    prop: 'sceneName'
+                },
+                {
+                    label: '设备名称',
+                    prop: 'deviceName'
+                },
+                {
+                    label: '产品',
+                    prop: 'productName'
+                },
+                {
+                    label: '告警描述',
+                    prop: 'desc'
+                },
+                {
+                    label: '地址',
+                    prop: 'address'
+                },
+                {
+                    label: '告警时间',
+                    prop: 'alarmStartTime'
+                }
+                // {
+                //     label: '操作',
+                //     prop: 'opt',
+                //     slot: 'opt',
+                //     width: 80,
+                // }
+            ],
+            alarmTypeList: [
+                {
+                    label: '参数告警',
+                    value: '参数告警'
+                },
+                {
+                    label: '状态告警',
+                    value: '状态告警'
+                }
+            ],
+            allServiceScene: [],
+            defaultProps: {
+                value: 'id', // 唯一标识
+                label: 'sceneName', // 标签显示
+                children: 'children' // 子级
+            },
+            opStateList: [
+                {
+                    label: '挂起',
+                    value: 0
+                },
+                {
+                    label: '未挂起',
+                    value: 1
+                }
+            ],
+            selectRow: [],
+            dialogMapVisible: false
+        };
+    },
+    methods: {
+        selectionChange(val) {
+            this.selectRow = val;
+        },
+        getPage(type = 'search') {
+            if (this.times && this.times.length) {
+                this.mixins_query.startTime = `${this.times[0]}`;
+                this.mixins_query.endTime = `${this.times[1]}`;
+            } else {
+                this.mixins_query.startTime = '';
+                this.mixins_query.endTime = '';
+            }
+            this.mixins_search(type);
+        },
+        exportExcel() {
+            let params = {};
+            if (this.selectRow.length !== 0) {
+                let ids = [];
+                this.selectRow.forEach((v) => {
+                    ids.push(v.id);
+                });
+                params = {ids:ids.join(",")};
+            } else {
+                if (this.times && this.times.length) {
+                    this.mixins_query.startTime = `${this.times[0]}`;
+                    this.mixins_query.endTime = `${this.times[1]}`;
+                } else {
+                    this.mixins_query.startTime = '';
+                    this.mixins_query.endTime = '';
+                }
+                params = this.mixins_query;
+            }
+            this.__exportExcel('/zoniot-water/alarm/details/export', params);       
+            // this.$http.get('/alarm/details/export', params).then(({ status, data, msg }) => {
+            //     if (status === 0 && data) {
+            //         window.location.href = this.envConfig.baseExcelApi + data;
+            //     }
+            // });
+        },
+        //获取场景树
+        getAllScene() {
+            this.$http.get('/scene/selectList').then(({ status, data, msg }) => {
+                if (status === 0) {
+                    this.allServiceScene = data;
+                }
+            });
+        },
+        //挂起告警信息
+        suspendedById(ids) {
+            this.$msgBox(`挂起提示`, '确认要挂起吗?')
+                .then((_) => {
+                    this.$http.postForm('/AlarmDetails/suspendedById', { id: ids }).then(({ status, data, msg }) => {
+                        if (status === 0) {
+                            this.$message.success('挂起成功');
+                            this.mixins_search();
+                        }
+                    });
+                })
+                .catch((err) => {});
+        },
+        //恢复挂起告警信息/AlarmDetails/renewById
+        renewById(ids) {
+            this.$msgBox(`恢复挂起提示`, '确认要恢复挂起吗?')
+                .then((_) => {
+                    this.$http.postForm('/AlarmDetails/renewById', { id: ids }).then(({ status, data, msg }) => {
+                        if (status === 0) {
+                            this.$message.success('恢复挂起成功');
+                            this.mixins_search();
+                        }
+                    });
+                })
+                .catch((err) => {});
+        },
+        showMap(index) {
+            this.dialogMapVisible = true;
+            this.row = this.mixins_list[index] || {};
+            if (this.row.pointX && this.row.pointY) {
+                let item = {
+                    XY: [this.row.pointX, this.row.pointY],
+                    address: '',
+                    id: '',
+                    text: this.row.address
+                };
+                this.$store.commit('setSearchPointInfo', item);
+            }
+        }
+    },
+    created() {
+        this.mixins_dataUrl = '/alarm/details/selectPage';
+        this.mixins_post = 'post';
+        this.mixins_query = {
+            alarmCategory: '', 
+            alarmName: '',        
+            startTime: '', //开始时间
+            endTime: '', //结束时间
+            sceneType:'5',
+            state:'1'
+        };
+        // this.getAllScene();
+        this.getPage();
+    }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.handle-box {
+    width: 100%;
+    height: 60px;
+    background: #ffffff;
+    border-radius: 6px;
+    box-sizing: border-box;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+}
+.fr {
+    float: right;
+    margin-right: 20px;
+}
+.fr-fs-fc {
+    color: #0eaeff;
+    font-size: 30px;
+}
+.servertype-serch {
+    width: 240px;
+    height: 30px;
+    margin-right: 20px;
+    vertical-align: top;
+}
+.servertype-serch-btn {
+    width: 60px;
+    height: 30px;
+    background: #0eaeff;
+    border-radius: 4px;
+    padding: 0;
+}
+.new-select-tree {
+    vertical-align: top;
+    margin-right: 20px;
+}
+.doalogmap {
+    width: 100%;
+    height: 460px;
+}
+/deep/ .el-dialog__body {
+    padding: 0 20px 20px 20px!important;
+}
+</style>