物联网1.0

device-manager-ui/admin/src/assets/mixins/tree.js

+import axios from 'axios';
+
+export default {
+  mounted() {
+
+  },
+  beforeDestroy () {
+    this.source.cancel('自动取消ajax操作');
+    clearTimeout(this.loadingTimer);
+  },
+  methods: {
+    beforeFecth() { 
+      return Promise.resolve();
+    },
+    // 表格接收数据前
+    beforeRender(data){return data},
+    // 表格接收数据后
+    afterRender(data){},
+    // 默认拉取数据
+    async getTreeData() {
+     
+    },
+    
+
+    handleNodeClick(node) {
+      
+    },
+    renderContent: function (h, { node, data, store }) {
+      return (
+        <span>
+          <i style="font-size:16px;color:#409EFF" class={data.icon}></i>
+          <span style="padding-left: 2px;font-size:14px">{node.label}</span>
+        </span>
+      );
+    },
+
+    async loadNode(node, resolve) {
+
+      if (node.level === 0) {
+        return;
+      }
+      resolve(data.result);
+
+      // this.$post("/area/getListByParentId", {
+      //   parentId: node.data.id,
+      // }).then(({ data }) => {
+      //   resolve(data.result);
+      // });
+    },
+
+    refreshNodeBy(id) {
+      let node = this.$refs.areaTree.getNode(this.currentNode.id); // 通过节点id找到对应树节点对象
+      node.loaded = false;
+      node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
+       this.toView(this.currentNode);
+    },
+    
+  },
+
+  data() {
+    return { 
+      treeProps: {
+        id: "id",
+        label: "label",
+        areaCode:"areaCode",
+        type: "type",
+        isLeaf: "isLeaf",
+        children: "children",
+        icon: "icon",
+      },
+      areaData:[],
+      currentNode:{},
+     }
+  }
+}
+
+
+

device-manager-ui/admin/src/components/AMap.vue

+<template lang="html">
+ <div style="width:100%;height:800px;">
+    <div class="container">
+      <!-- <div class="search-box">
+        <input
+          v-model="searchKey"
+          type="search"
+          id="search">
+        <button @click="searchByHand">搜索</button>
+        <div class="tip-box" id="searchTip"></div>
+      </div> -->
+      <!--
+        amap-manager： 地图管理对象
+        vid：地图容器节点的ID
+        zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
+        center： 地图中心点坐标值
+        plugin：地图使用的插件
+        events： 事件
+      -->
+      <el-amap class="amap-box"
+        :amap-manager="amapManager"
+        :vid="'amap-vue'"
+        :zoom="zoom"
+        :plugin="plugin"
+        :center="center"
+        :events="events"
+      >
+        <!-- 标记 -->
+        <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
+      </el-amap>
+    </div>
+ </div>
+</template>
+
+<script>
+import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
+let amapManager = new AMapManager()
+export default {
+  name:'AMap',
+  data() {
+    let self = this
+    return {
+      address: null,
+      searchKey: '',
+      amapManager,
+      markers: [],
+      searchOption: {
+        city: '全国',
+        citylimit: true
+      },
+      center: [112.938888,28.228272],
+      zoom: 17,
+      lng: 0,
+      lat: 0,
+      loaded: false,
+      events: {
+        init() {
+          lazyAMapApiLoaderInstance.load().then(() => {
+            self.initSearch()
+          })
+        },
+        // 点击获取地址的数据
+        click(e) {
+          self.markers = []
+          let { lng, lat } = e.lnglat
+          self.lng = lng
+          self.lat = lat
+          self.center = [lng, lat]
+          self.markers.push([lng, lat])
+          // 这里通过高德 SDK 完成。
+          let geocoder = new AMap.Geocoder({
+            radius: 1000,
+            extensions: 'all'
+          })
+          geocoder.getAddress([lng, lat], function(status, result) {
+            if (status === 'complete' && result.info === 'OK') {
+              if (result && result.regeocode) {
+                console.log(result.regeocode.formattedAddress) //控制台打印地址
+                self.address = result.regeocode.formattedAddress
+                self.searchKey = result.regeocode.formattedAddress
+                self.$nextTick()
+              }
+            }
+          })
+        }
+      },
+      // 一些工具插件
+      plugin: [
+        {
+          pName: 'Geocoder',
+          events: {
+            init (o) {
+              //console.log("一些工具插件--地址"+o.getAddress())
+            }
+          }
+        },
+        {
+          // 定位
+          pName: 'Geolocation',
+          events: {
+            init(o) {
+              // o是高德地图定位插件实例
+              o.getCurrentPosition((status, result) => {
+                if (result && result.position) {
+                  // 设置经度
+                  self.lng = result.position.lng
+                  // 设置维度
+                  self.lat = result.position.lat
+                  // 设置坐标
+                  self.center = [self.lng, self.lat]
+                  self.markers.push([self.lng, self.lat])
+                  // load
+                  self.loaded = true
+                  // 页面渲染好后
+                  self.$nextTick()
+                }
+              })
+            }
+          }
+        },
+        {
+          // 工具栏
+          pName: 'ToolBar',
+          events: {
+            init(instance) {
+               //console.log("工具栏:"+instance);
+            }
+          }
+        },
+        {
+          // 鹰眼
+          pName: 'OverView',
+          events: {
+            init(instance) {
+               //console.log("鹰眼:"+instance);
+            }
+          }
+        },
+        {
+          // 地图类型
+          pName: 'MapType',
+          defaultType: 0,
+          events: {
+            init(instance) {
+               //console.log("地图类型:"+instance);
+            }
+          }
+        },
+        {
+          // 搜索
+          pName: 'PlaceSearch',
+          events: {
+            init(instance) {
+               //console.log("搜索:"+instance)
+            }
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    initSearch() {
+      let vm = this
+      let map = this.amapManager.getMap()
+      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
+        var poiPicker = new PoiPicker({
+          input: 'search',
+          placeSearchOptions: {
+            map: map,
+            pageSize: 10
+          },
+          suggestContainer: 'searchTip',
+          searchResultsContainer: 'searchTip'
+        })
+        vm.poiPicker = poiPicker
+        // 监听poi选中信息
+        poiPicker.on('poiPicked', function(poiResult) {
+          // console.log(poiResult)
+           let source = poiResult.source
+           let poi = poiResult.item
+           if (source !== 'search') {
+             poiPicker.searchByKeyword(poi.name)
+           } else {
+             poiPicker.clearSearchResults()
+             vm.markers = []
+             let lng = poi.location.lng
+             let lat = poi.location.lat
+             let address = poi.cityname + poi.adname + poi.name
+             vm.center = [lng, lat]
+             vm.markers.push([lng, lat])
+             vm.lng = lng
+             vm.lat = lat
+             vm.address = address
+             vm.searchKey = address
+           }
+        })
+      })
+    },
+    searchByHand() {
+      if (this.searchKey !== '') {
+        this.poiPicker.searchByKeyword(this.searchKey)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  border: 1px solid #999;
+}
+.search-box {
+  position: absolute;
+  z-index: 5;
+  width: 30%;
+  left: 13%;
+  top: 10px;
+  height: 30px;
+}
+.search-box input {
+  float: left;
+  width: 80%;
+  height: 100%;
+  border: 1px solid #30ccc1;
+  padding: 0 8px;
+  outline: none;
+}
+.search-box button {
+  float: left;
+  width: 20%;
+  height: 100%;
+  background: #30ccc1;
+  border: 1px solid #30ccc1;
+  color: #fff;
+  outline: none;
+}
+.tip-box {
+  width: 100%;
+  max-height: 260px;
+  position: absolute;
+  top: 30px;
+  overflow-y: auto;
+  background-color: #fff;
+}
+</style>

device-manager-ui/admin/src/components/DeviceSwitch.vue

+<template>
+<span>
+  <!-- 开启confirm时，操作之前会先调动确认窗口 -->
+  <el-popover
+    v-if='confirm'
+    placement="top"
+    width="160"
+    v-model="visible">
+    <p>确认操作？</p>
+    <div style="text-align: right; margin: 0">
+      <el-button size="mini" type="text" @click="visible = false">取消</el-button>
+      <el-button type="primary" size="mini" @click="statusClick">确定</el-button>
+    </div>
+    <label slot="reference" class="my-compontent-switch"
+      :checked='checked'>
+      <span>{{text}}</span>
+    </label>
+  </el-popover>
+
+  <!-- 直接操作 -->
+  <label 
+    v-else
+    class="my-compontent-switch"
+    :checked='checked' 
+    @click='statusClick'
+  >
+    <span>{{text}}</span>
+  </label>
+</span>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Array,
+    row: Object,
+    confirm: Boolean,
+    on: {
+      type: Object,
+      default: ()=> {return {value: 1, text: '启用'}}
+    },
+    off: {
+      type: Object,
+      default: ()=> {return {value: 0, text: '停用'}}
+    },
+    url: String,
+  },
+  methods: {
+    async statusClick() {
+      console.log("value",this.value)
+      const enabled = this.row.enabled === this.on.value ? this.off.value : this.on.value;
+      const id = this.row.id;
+      //const getTokenUrl = this.url.replace('/save', '/edit');
+      // await this.$post(getTokenUrl, {id});
+      this.$post(this.url, {
+          enabled,
+          id,
+      })
+      .then(res=>{
+        // 更新数据
+        let table = JSON.parse(JSON.stringify(this.value))
+        console.log("table",table)
+        let {index, data} = this.find(table, id);
+        data.enabled = enabled;
+        table.splice(index, 1, data);
+        this.$emit("input", table);
+        this.$emit("change");
+      })
+      .catch(error=>{
+        this.$message.error(error.message);
+      })
+      .then(data=>{
+        this.visible = false;
+      })
+    },
+    find(list, id) {
+      let index = -1;
+      let data = null;
+      list.forEach((item, i)=>{
+        if(item.id === id){
+          index = i;
+          data = Object.assign({}, item);
+          return;
+        }
+      })
+      return {
+        index,
+        data,
+      }
+    },
+  },
+  computed: {
+    text() {
+      return this.row.enabled === this.on.value ? this.on.text : this.off.text;
+    },
+    checked() {
+      return this.row.enabled === this.on.value;
+    },
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.my-compontent-switch{
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: 12px;
+  line-height: 19px;
+  height: 20px;
+  vertical-align: middle;
+  &[checked] span{
+    border-color: #409eff;
+    background-color: #409eff;
+    padding:0 23px 0 10px;
+    &::after{
+      left: 100%;
+      margin-left: -17px;
+    }
+  }
+  span{
+    margin: 0;
+    display: inline-block;
+    position: relative;
+    height: 20px;
+    border: 1px solid #dcdfe6;
+    outline: none;
+    color: #fff;
+    padding:0 10px 0 23px;
+    border-radius: 10px;
+    box-sizing: border-box;
+    background: #dcdfe6;
+    cursor: pointer;
+    transition: border-color .3s,background-color .3s;
+    vertical-align: middle;
+    &::after{
+      content: "";
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      border-radius: 100%;
+      transition: all .3s;
+      width: 16px;
+      height: 16px;
+      background-color: #fff;
+    }
+  }
+}
+</style>

device-manager-ui/admin/src/components/Table.vue.bak

+// 管理后台通用表格，含：搜索，分页，表格
+
+<template>
+  <div class="layout-table" :loading='data.loading'>
+    <div class="table-head flex flex-pack-justify">
+      <div class="table-head-left flex flex-align-center">
+        <slot name='breadcrumb'>
+          <Breadcrumb />
+        </slot>
+        <div class="buttons">
+          <slot name='table-head-left'></slot>
+          <slot name='table-head-center'>
+          <el-button v-if='isShowButton("notAdd")' type='primary' icon="el-icon-plus" size='mini' @click='config.methods.add'  title="新增"></el-button>
+          <el-button v-if='isShowBtn("import")' size='mini' @click='config.methods.importView' class="el-icon-upload2"  title="导入"></el-button>
+          <Confirm v-if='isShowButton("notDel")' @confirm='config.methods.del' message='确定要删除选中的多条记录吗？'>
+            <el-button icon="el-icon-delete" type="danger" size='mini'  title="删除"></el-button>
+          </Confirm>
+          <el-button @click='item.method' size='mini' :key="item.label" :icon='item.icon' :type ='item.type' :loading="item.loading" v-if="item.isShow" v-for='(item) in config.buttons' circle :title="item.label"></el-button>
+          <el-button v-if='isShowBtn("back")' @click='config.methods.back' size='mini' icon='el-icon-back' circle title="返回"></el-button>
+          </slot>
+          <slot name='table-head-left2'></slot>
+        </div>
+      </div>
+
+      <div class="table-head-right">
+        <div class="extend flex flex-pack-justify">
+          <slot name='table-head-right'></slot>
+          <div>
+            <el-tooltip content="查询" placement="top" v-if='isShowButton("notSearch")'>
+              <el-button icon="el-icon-search" circle size='mini' @click='showSearch = !showSearch'></el-button>
+            </el-tooltip>
+            <el-tooltip content="刷新" placement="top" v-if='isShowButton("notFresh")'>
+              <el-button icon="el-icon-refresh" circle size='mini' @click='config.methods.refresh'></el-button>
+            </el-tooltip>
+          </div>
+          <el-radio-group v-model="showType" size='mini' v-if='isMobile'>
+            <el-radio-button label="card"><i class="el-icon-menu"></i></el-radio-button>
+            <el-radio-button label="table"><i class="el-icon-tickets"></i></el-radio-button>
+            <el-radio-button label="treetable"><i class="el-icon-tickets"></i></el-radio-button>
+          </el-radio-group>
+          <slot name='table-head-right2'></slot>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格查询条件-->
+    <div class="table-form" v-if='!isShowButton("notSearch") ? false : showSearch'>
+      <slot name="table-search-left"></slot>
+      <SearchForm :search='config.search' :table='data' 
+      :downloadUrl='config.downloadUrl'
+      :areaSelect='config.areaSelect'
+      />
+    </div>
+
+    <!-- 表格主体 -->
+    <div class="table-body">
+      <slot name='table-body-head'></slot>
+      <slot>
+        <DataTableMobile 
+          v-if='showType == "card"'
+          :tableData='data.data' 
+          :columns='config.columns' 
+          :tableRowClassName='config.methods.tableRowClassName'
+          :handleSelectionChange='config.methods.handleSelectionChange'
+          :handleRowClick='config.methods.handleRowClick'/>
+        <DataTable 
+          v-if='showType == "table"'
+          :tableData='data.data' 
+          :columns='config.columns' 
+          :loading='data.loading'
+          :tableRowClassName='config.methods.tableRowClassName'
+          :handleSpanMethod='config.methods.handleSpanMethod'
+          :handleSortChange='config.methods.handleSortChange'
+          :handleSelectionChange='config.methods.handleSelectionChange'
+          :handleRowClick='config.methods.handleRowClick'/>
+
+          <DataTableFlow 
+          v-if='showType == "tableFlow"'
+          :tableData='data.data' 
+          :columns='config.columns' 
+          :dict='data.dict' 
+          :loading='data.loading'
+          :tableRowClassName='config.methods.tableRowClassName'
+          :handleSpanMethod='config.methods.handleSpanMethod'
+          :handleSortChange='config.methods.handleSortChange'
+          :handleSelectionChange='config.methods.handleSelectionChange'
+          :handleRowClick='config.methods.handleRowClick'/>
+
+
+            <DataTreeTable 
+          v-if='showType == "treetable"'
+          :tableData='data.data' 
+          :columns='config.columns' 
+          :loading='data.loading'
+          :expand='config.expand'
+          :tableRowClassName='config.methods.tableRowClassName'
+          :handleSpanMethod='config.methods.handleSpanMethod'
+          :handleSortChange='config.methods.handleSortChange'
+          :handleSelectionChange='config.methods.handleSelectionChange'
+          :handleRowClick='config.methods.handleRowClick'/>
+
+      </slot>
+    </div>
+
+    <!-- 分页器 -->
+    <div class="table-foot" v-if='!isShowButton("notPagination") ? false : data.pageInfo.totalResult'>
+      <Pagination :total='data.pageInfo.totalResult' :prePageResult='data.pageInfo.prePageResult'/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination.vue';
+import SearchForm from '@/components/SearchForm.vue';
+import Confirm from '@/components/Confirm.vue';
+import DataTable from '@/components/DataTable.vue';
+import DataTableMobile from './DataTableMobile.js';
+import DataTableFlow from './DataTableFlow.vue';
+import DataTreeTable from '@/components/DataTreeTable.vue';
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+      default: () => {}
+    },
+    config: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
+  components: {
+    SearchForm,
+    Pagination,
+    Confirm,
+    DataTable,
+    DataTableMobile,
+    DataTableFlow,
+    DataTreeTable
+  },
+  methods: {
+    // 根据url的query参数判断是否展示查询条件
+    isShowSearch(query) {
+       if (!this.config.showSearch) {
+         return false
+       }
+      let showSearch = false;
+      Object.keys(query).forEach(item=>{
+        if(/^query\./.test(item)){
+          showSearch = true;
+          return;
+        }
+      });
+      if (this.config.showSearch) {
+    	  showSearch = true;
+      }
+      return showSearch;
+    },
+    isShowButton(name) {
+      return this.canShow.indexOf(name) === -1;
+    },
+    isShowBtn(name) {
+      return this.canShow.indexOf(name) !== -1;
+    },
+  },
+  watch: {
+    '$route'(route) {
+      this.showSearch = this.isShowSearch(route.query)
+    },
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile 
+    },
+    canShow() {
+      this.showType=this.config.showType?this.config.showType:'table'
+      return Object.keys(this.$attrs) || [];
+    }
+  },
+  data() {
+    return {
+      loading: this.config.loading,
+      showSearch: this.isShowSearch(this.$route.query),
+      showType: 'table',
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@media screen and (max-width: 800px){
+  .layout-table{
+    .table-head{
+      display: block;
+      width: 100%;
+      .el-button{
+        margin-bottom: 5px;
+      }
+      .table-head-left{
+        margin-bottom: 10px;
+        display: block;
+        width: 100%;
+      }
+      .el-breadcrumb{
+        margin-bottom: 10px;
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+}
+.layout-table{
+  .table-head{
+    margin-bottom: 10px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ededed;
+    .el-breadcrumb{
+      margin-right: 30px;
+    }
+    .table-head-left .buttons{
+      button + button{ margin-left: 10px}
+      button + span{ margin-left: 10px}
+      span + span{ margin-left: 10px}
+      span + button{ margin-left: 10px}
+    }
+  }
+  .table-form{
+    padding-top: 10px;
+    margin-top: 10px;
+    overflow: hidden;
+  }
+  .search-form-wapper{
+    float: left;
+  }
+  .table-foot{
+    width: 100%;
+    overflow: auto;
+  }
+
+  &[loading]{
+    pointer-events: none;
+    .my-compontent-switch span,
+    .el-button,
+    .el-input,
+    .el-tag,
+    input{
+      background: #eee;
+      color: transparent;
+      border-color: #eee;
+    }
+    input{color: #ccc}
+    td, th{
+      color: #eee;
+    }
+    .el-pagination{
+      color: #eee;
+      span, input, button, li{
+        color: #eee;
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file

device-manager-ui/admin/src/views/alarm/config/dialogshow.vue

+<template>
+    <!-- 弹出框表单 -->
+    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+                                            <Field label="产品" prop="productId" v-model="form.productId" placeholder="请输入产品"/>
+                            <Field label="告警类型" prop="alarmType" v-model="form.alarmType" type="select" :enumData="dict.alarmType" placeholder="请选择告警类型"/>
+                            <Field label="告警级别," prop="alarmLevel" v-model="form.alarmLevel" type="select" :enumData="dict.alarmLevel" placeholder="请选择告警级别,"/>
+                            <Field label="推送方式," prop="alarmPusW1ay" v-model="form.alarmPusW1ay" type="select" :enumData="dict.alarmPusW1ay" placeholder="请选择推送方式,"/>
+                            <Field label="是否启用" prop="isUse" v-model="form.isUse" type="select" :enumData="dict.isUse" placeholder="请选择是否启用"/>
+
+            </el-row>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+    import form from "@/assets/mixins/formdialog";
+    import dialogShow from "./dialogshow";
+    export default {
+        mixins: [form],
+        components: {
+            dialogShow ,
+        },
+        data() {
+            return {
+                // 遮罩层
+                loading: true,
+                // 弹出层标题
+                title: "设备告警配置",
+                // 是否显示弹出层
+                open: false,
+                toString:[
+                    "alarmType",
+                    "alarmLevel",
+                    "alarmPusW1ay",
+                    "isUse",
+                ],
+                // 表单校验
+                rules: {
+                    alarmType: [
+                        {required: true,message: "请输入告警类型", trigger: "blur" },
+                    ],
+                    alarmLevel: [
+                        {required: true,message: "请输入告警级别,", trigger: "blur" },
+                    ],
+                    alarmPusW1ay: [
+                        {required: true,message: "请输入推送方式,", trigger: "blur" },
+                    ],
+                    isUse: [
+                        {required: true,message: "请输入是否启用", trigger: "blur" },
+                    ],
+                    createTime: [
+                        {required: true,message: "请选择创建时间" },
+                    ],
+                }
+            };
+        },
+
+        methods: {
+            /** 编辑 */
+            edit(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.editUrl;;
+                this.getData();
+                this.pageInfo.type="edit"
+                this.title = "修改设备告警配置";
+            },
+            /** 新增 */
+            add(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl = this.pageInfo.addUrl;
+                this.getData();
+                this.pageInfo.type="add"
+                this.title = "新增设备告警配置";
+            },
+            /** 查看*/
+            view(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.viewUrl;;
+                this.getData();
+                this.pageInfo.type="view"
+                this.title = "设备告警配置详细";
+            },
+            /**取消按钮 */
+            cancel() {
+                this.open = false;
+            },
+            /**获取数据后弹框 */
+            afterRender(data) {
+                this.open = true;
+            },
+
+            afterSubmit(data) {
+                this.open = false;
+                this.$emit("ok");
+            },
+
+            // 表单重置
+            reset() {
+                this.form = {
+                    productId : null,
+                    alarmType : 0,
+                    alarmLevel : null,
+                    alarmPusW1ay : 0,
+                    isUse : null,
+                };
+                this.resetForm("form");
+            },
+            resetForm(refName) {
+                if (this.$refs[refName]) {
+                    this.$refs[refName].resetFields();
+                }
+            },
+        },
+    };
+</script>

device-manager-ui/admin/src/views/alarm/config/list.vue

+<template>
+    <div class="page">
+        <LayoutTable :data="tableData" :config="tableConfig">
+                    </LayoutTable>
+
+        <dialog-show ref="dialogform" @ok="getData" />
+    </div>
+</template>
+
+<script>
+    /** 表单弹出框模式需引入 */
+    import dialogShow from "./dialogshow";
+    import table from "@/assets/mixins/table";
+    export default {
+        name: "AlarmConfig",
+        components: {dialogShow },
+        mixins: [table],
+        created() {
+        },
+        methods: {
+
+            /** 重写新增方法 */
+            toAdd(row) {
+                this.$refs.dialogform.add(row);
+            },
+            /** 重写编辑方法 */
+            toEdit(row) {
+                this.$refs.dialogform.edit(row);
+
+            },
+            /** 重写查看方法 */
+            // toView(row) {
+            //     this.$refs.dialogform.view(row);
+            // },
+
+        },
+        data() {
+            return {
+                config: {
+                    search: [
+                    ],
+                    columns: [
+                        {type: "selection", width: 60},
+
+                        {label: "产品", prop: "productId", formatter: this.formatterString},
+
+                        {label: "告警类型", prop: "alarmType",formatter: this.formatter},
+
+                        {label: "告警级别,", prop: "alarmLevel",formatter: this.formatter},
+
+                        {label: "推送方式,", prop: "alarmPusW1ay",formatter: this.formatter},
+
+                        {label: "是否启用", prop: "isUse",formatter: this.formatter},
+                        {
+                            label: "操作",
+                            width: 240,
+                            formatter: row => {
+                                return (
+                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                            );
+                            }
+                        }
+                    ]
+                }
+            };
+        }
+    };
+</script>
\ No newline at end of file

device-manager-ui/admin/src/views/alarm/config/view.vue

+<template>
+    <layout-view>
+        <el-descriptions  :title="title" :column="column" :size="size" :colon="false" border>
+            <template slot="title">
+                <i class="el-icon-tickets"></i>
+                基本详细信息
+            </template>
+            <template slot="extra">
+                <el-button type="primary" @click="$router.go(-1)" size="small">返回</el-button>
+            </template>
+                                    <el-descriptions-item label="产品" label-class-name="labelClass" content-class-name="contentClass">
+                            {{form.productId}}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="告警类型" label-class-name="labelClass" content-class-name="contentClass">
+                            {{ util_formatters("alarmType", form.alarmType) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="告警级别," label-class-name="labelClass" content-class-name="contentClass">
+                            {{ util_formatters("alarmLevel", form.alarmLevel) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="推送方式," label-class-name="labelClass" content-class-name="contentClass">
+                            {{ util_formatters("alarmPusW1ay", form.alarmPusW1ay) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="是否启用" label-class-name="labelClass" content-class-name="contentClass">
+                            {{ util_formatters("isUse", form.isUse) }}
+                        </el-descriptions-item>
+        </el-descriptions>
+
+    </layout-view>
+</template>
+
+<script>
+    import view from "@/assets/mixins/view";
+    export default {
+        mixins: [view],
+        components: {
+        },
+        methods: {
+
+        },
+        data() {
+            return {
+                size:"small",
+                column:2,
+                toString:[
+                    "alarmType",
+                    "alarmLevel",
+                    "alarmPusW1ay",
+                    "isUse",
+                ],
+                toArrays: [
+
+                ],
+                toDate: [
+
+                ]
+            }
+        }
+    }
+</script>
+<style lang="less">
+    .labelClass{
+        width: 200px;
+    }
+    .el-descriptions__body{
+        margin-left: 5px;
+        margin-right: 5px;
+        color: #606266;
+        background-color: #FFF;
+    }
+    .contentClass{
+        width: 600px;
+    }
+</style>
\ No newline at end of file

device-manager-ui/admin/src/views/alarm/sms/send/dialogshow.vue

+<template>
+    <!-- 弹出框表单 -->
+    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+                                            <Field label="电话号码" prop="mobile" v-model="form.mobile" placeholder="请输入电话号码"/>
+                            <Field label="发送内容" prop="sendMess" v-model="form.sendMess" placeholder="请输入发送内容"/>
+                            <Field label="发送状态" prop="sendStatus" v-model="form.sendStatus" type="select" :enumData="dict.sendStatus" placeholder="请选择发送状态"/>
+                            <Field label="发送时间" prop="sendTime" v-model="form.sendTime" type="date" />
+                            <Field label="接收人" prop="receiver" v-model="form.receiver" placeholder="请输入接收人"/>
+
+            </el-row>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+    import form from "@/assets/mixins/formdialog";
+    import dialogShow from "./dialogshow";
+    export default {
+        mixins: [form],
+        components: {
+            dialogShow ,
+        },
+        data() {
+            return {
+                // 遮罩层
+                loading: true,
+                // 弹出层标题
+                title: "短信发送记录",
+                // 是否显示弹出层
+                open: false,
+                toString:[
+                    "sendStatus",
+                ],
+                // 表单校验
+                rules: {
+                    mobile: [
+                        {required: true,message: "请输入电话号码", trigger: "blur" },
+                        {max: 11,message: "最多只能录入11个字符",trigger: "blur",},
+                    ],
+                    sendMess: [
+                        {required: true,message: "请输入发送内容", trigger: "blur" },
+                        {max: 200,message: "最多只能录入200个字符",trigger: "blur",},
+                    ],
+                    sendStatus: [
+                        {required: true,message: "请输入发送状态", trigger: "blur" },
+                    ],
+                    sendTime: [
+                        {required: true,message: "请选择发送时间" },
+                    ],
+                    createTime: [
+                        {required: true,message: "请选择创建时间" },
+                    ],
+                    receiver: [
+                        {required: true,message: "请输入接收人", trigger: "blur" },
+                        {max: 200,message: "最多只能录入200个字符",trigger: "blur",},
+                    ],
+                }
+            };
+        },
+
+        methods: {
+            /** 编辑 */
+            edit(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.editUrl;;
+                this.getData();
+                this.pageInfo.type="edit"
+                this.title = "修改短信发送记录";
+            },
+            /** 新增 */
+            add(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl = this.pageInfo.addUrl;
+                this.getData();
+                this.pageInfo.type="add"
+                this.title = "新增短信发送记录";
+            },
+            /** 查看*/
+            view(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.viewUrl;;
+                this.getData();
+                this.pageInfo.type="view"
+                this.title = "短信发送记录详细";
+            },
+            /**取消按钮 */
+            cancel() {
+                this.open = false;
+            },
+            /**获取数据后弹框 */
+            afterRender(data) {
+                this.open = true;
+            },
+
+            afterSubmit(data) {
+                this.open = false;
+                this.$emit("ok");
+            },
+
+            // 表单重置
+            reset() {
+                this.form = {
+                    mobile : "",
+                    sendMess : "",
+                    sendStatus : null,
+                    sendTime : null,
+                    receiver : "",
+                };
+                this.resetForm("form");
+            },
+            resetForm(refName) {
+                if (this.$refs[refName]) {
+                    this.$refs[refName].resetFields();
+                }
+            },
+        },
+    };
+</script>

device-manager-ui/admin/src/views/alarm/sms/send/list.vue

+<template>
+    <div class="page">
+        <LayoutTable :data="tableData" :config="tableConfig">
+                    </LayoutTable>
+
+        <dialog-show ref="dialogform" @ok="getData" />
+    </div>
+</template>
+
+<script>
+    /** 表单弹出框模式需引入 */
+    import dialogShow from "./dialogshow";
+    import table from "@/assets/mixins/table";
+    export default {
+        name: "AlarmSmsSend",
+        components: {dialogShow },
+        mixins: [table],
+        created() {
+        },
+        methods: {
+
+            /** 重写新增方法 */
+            toAdd(row) {
+                this.$refs.dialogform.add(row);
+            },
+            /** 重写编辑方法 */
+            toEdit(row) {
+                this.$refs.dialogform.edit(row);
+
+            },
+            /** 重写查看方法 */
+            // toView(row) {
+            //     this.$refs.dialogform.view(row);
+            // },
+
+        },
+        data() {
+            return {
+                config: {
+                    search: [
+                        {
+                            name: "sendStatus",
+                            type: "select",
+                            label: "发送状态",
+                            fuzzy: true
+                        },
+                        {
+                            name: "sendTime",
+                            type: "date",
+                            label: "发送时间",
+                            fuzzy: true
+                        },
+                    ],
+                    columns: [
+                        {type: "selection", width: 60},
+
+                        {label: "电话号码", prop: "mobile"},
+
+                        {label: "发送内容", prop: "sendMess"},
+
+                        {label: "发送状态", prop: "sendStatus",formatter: this.formatter},
+
+                        {label: "发送时间", prop: "sendTime", formatter: this.formatterDate},
+                        {
+                            label: "操作",
+                            width: 240,
+                            formatter: row => {
+                                return (
+                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                            );
+                            }
+                        }
+                    ]
+                }
+            };
+        }
+    };
+</script>
\ No newline at end of file

device-manager-ui/admin/src/views/alarm/sms/send/view.vue

+<template>
+    <layout-view>
+        <el-descriptions  :title="title" :column="column" :size="size" :colon="false" border>
+            <template slot="title">
+                <i class="el-icon-tickets"></i>
+                基本详细信息
+            </template>
+            <template slot="extra">
+                <el-button type="primary" @click="$router.go(-1)" size="small">返回</el-button>
+            </template>
+                                    <el-descriptions-item label="电话号码" label-class-name="labelClass" content-class-name="contentClass">
+                            {{form.mobile}}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="发送内容" label-class-name="labelClass" content-class-name="contentClass">
+                            {{form.sendMess}}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="发送状态" label-class-name="labelClass" content-class-name="contentClass">
+                            {{ util_formatters("sendStatus", form.sendStatus) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="发送时间" label-class-name="labelClass" content-class-name="contentClass">
+                            {{ util_formatterDate(form.sendTime)}}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="接收人" label-class-name="labelClass" content-class-name="contentClass">
+                            {{form.receiver}}
+                        </el-descriptions-item>
+        </el-descriptions>
+
+    </layout-view>
+</template>
+
+<script>
+    import view from "@/assets/mixins/view";
+    export default {
+        mixins: [view],
+        components: {
+        },
+        methods: {
+
+        },
+        data() {
+            return {
+                size:"small",
+                column:2,
+                toString:[
+                    "sendStatus",
+                ],
+                toArrays: [
+
+                ],
+                toDate: [
+
+                ]
+            }
+        }
+    }
+</script>
+<style lang="less">
+    .labelClass{
+        width: 200px;
+    }
+    .el-descriptions__body{
+        margin-left: 5px;
+        margin-right: 5px;
+        color: #606266;
+        background-color: #FFF;
+    }
+    .contentClass{
+        width: 600px;
+    }
+</style>
\ No newline at end of file

device-manager-ui/admin/src/views/device/alarm/info/dialogshow.vue

+<template>
+    <!-- 弹出框表单 -->
+    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+                                            <Field label="告警时间" prop="alarmTime" v-model="form.alarmTime" type="date" />
+                            <Field label="告警设备" prop="alarmDevice" v-model="form.alarmDevice" placeholder="请输入告警设备"/>
+                            <Field label="告警类型," prop="alarmType" v-model="form.alarmType" type="select" :enumData="dict.alarmType" placeholder="请选择告警类型,"/>
+                            <Field label="告警级别" prop="alarmLevel" v-model="form.alarmLevel" type="select" :enumData="dict.alarmLevel" placeholder="请选择告警级别"/>
+                            <Field label="接收人员[设备管理的责任人]" prop="alarmReceivePersonnel" v-model="form.alarmReceivePersonnel" placeholder="请输入接收人员[设备管理的责任人]"/>
+                            <Field label="接收人员电话" prop="receivePersonnelTelephone" v-model="form.receivePersonnelTelephone" placeholder="请输入接收人员电话"/>
+                            <Field label="告警状态,来自工单系统" prop="alarmStatus" v-model="form.alarmStatus" type="select" :enumData="dict.alarmStatus" placeholder="请选择告警状态,来自工单系统"/>
+                            <Field label="告警详细内容"><editor v-model="form.alarmContent" :min-height="256"/></Field>
+
+            </el-row>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+    import form from "@/assets/mixins/formdialog";
+    import dialogShow from "./dialogshow";
+    import Editor from '@/components/Editor';
+    export default {
+        mixins: [form],
+        components: {
+            dialogShow ,
+            Editor,
+        },
+        data() {
+            return {
+                // 遮罩层
+                loading: true,
+                // 弹出层标题
+                title: "设备告警日志",
+                // 是否显示弹出层
+                open: false,
+                toString:[
+                    "alarmType",
+                    "alarmLevel",
+                    "alarmStatus",
+                ],
+                // 表单校验
+                rules: {
+                    alarmTime: [
+                        {required: true,message: "请选择告警时间" },
+                    ],
+                    alarmType: [
+                        {required: true,message: "请输入告警类型,", trigger: "blur" },
+                    ],
+                    alarmLevel: [
+                        {required: true,message: "请输入告警级别", trigger: "blur" },
+                    ],
+                    alarmReceivePersonnel: [
+                        {required: true,message: "请输入接收人员[设备管理的责任人]", trigger: "blur" },
+                        {max: 32,message: "最多只能录入32个字符",trigger: "blur",},
+                    ],
+                    receivePersonnelTelephone: [
+                        {required: true,message: "请输入接收人员电话", trigger: "blur" },
+                        {max: 11,message: "最多只能录入11个字符",trigger: "blur",},
+                    ],
+                    alarmContent: [
+                        {required: true,message: "请输入告警详细内容", trigger: "blur" },
+                        {max: 512,message: "最多只能录入512个字符",trigger: "blur",},
+                    ],
+                    createTime: [
+                        {required: true,message: "请选择创建时间" },
+                    ],
+                }
+            };
+        },
+
+        methods: {
+            /** 编辑 */
+            edit(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.editUrl;;
+                this.getData();
+                this.pageInfo.type="edit"
+                this.title = "修改设备告警日志";
+            },
+            /** 新增 */
+            add(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl = this.pageInfo.addUrl;
+                this.getData();
+                this.pageInfo.type="add"
+                this.title = "新增设备告警日志";
+            },
+            /** 查看*/
+            view(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.viewUrl;;
+                this.getData();
+                this.pageInfo.type="view"
+                this.title = "设备告警日志详细";
+            },
+            /**取消按钮 */
+            cancel() {
+                this.open = false;
+            },
+            /**获取数据后弹框 */
+            afterRender(data) {
+                this.open = true;
+            },
+
+            afterSubmit(data) {
+                this.open = false;
+                this.$emit("ok");
+            },
+
+            // 表单重置
+            reset() {
+                this.form = {
+                    alarmTime : null,
+                    alarmDevice : null,
+                    alarmType : null,
+                    alarmLevel : null,
+                    alarmReceivePersonnel : "",
+                    receivePersonnelTelephone : "",
+                    alarmStatus : 0,
+                    alarmContent : "",
+                };
+                this.resetForm("form");
+            },
+            resetForm(refName) {
+                if (this.$refs[refName]) {
+                    this.$refs[refName].resetFields();
+                }
+            },
+        },
+    };
+</script>

device-manager-ui/admin/src/views/device/alarm/info/list.vue

+<template>
+  <div class="page">
+    <LayoutTable :data="tableData" notAdd :config="tableConfig"> </LayoutTable>
+
+    <dialog-show ref="dialogform" @ok="getData" />
+  </div>
+</template>
+
+<script>
+/** 表单弹出框模式需引入 */
+import dialogShow from "./dialogshow";
+import table from "@/assets/mixins/table";
+export default {
+  name: "DeviceAlarmInfo",
+  props: {
+    queryIn: {
+      type: Object,
+      default: null,
+    },
+  },
+  components: { dialogShow },
+  mixins: [table],
+  created() {
+    console.log("queryIn:", this.queryIn);
+
+    //this.config.addQuery = { deviceId, deviceType };
+
+    if (this.queryIn.alarmDevice) {
+      this.query["alarmDevice"] = this.queryIn.alarmDevice;
+    }
+
+    console.log("pageInfo--before",this.pageInfo)
+
+   // this.changePath("/device/alarm/info")
+
+    this.pageInfo.list = "/device/alarm/info/list";
+    this.pageInfo.del = "/device/alarm/info/delete";
+    this.pageInfo.add = "/device/alarm/info/add";
+    this.pageInfo.edit = "/device/alarm/info/edit";
+    this.pageInfo.view = "/device/alarm/info/view";
+
+     console.log("pageInfo",this.pageInfo)
+
+  },
+  methods: {
+    /** 重写新增方法 */
+    toAdd(row) {
+      this.$refs.dialogform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.dialogform.edit(row);
+    },
+    /** 重写查看方法 */
+    // toView(row) {
+    //     this.$refs.dialogform.view(row);
+    // },
+  },
+  data() {
+    return {
+      config: {
+        search: [
+          {
+            name: "alarmDevice",
+            type: "text",
+            label: "告警设备",
+            fuzzy: true,
+          },
+          {
+            name: "alarmStatus",
+            type: "select",
+            label: "告警状态,来自工单系统",
+            fuzzy: true,
+          },
+        ],
+        columns: [
+          { type: "selection", width: 60 },
+
+          {
+            label: "告警时间",
+            prop: "alarmTime",
+            formatter: this.formatterDate,
+          },
+
+          {
+            label: "告警设备",
+            prop: "alarmDevice",
+            formatter: this.formatterString,
+          },
+
+          { label: "告警类型,", prop: "alarmType", formatter: this.formatter },
+
+          { label: "告警级别", prop: "alarmLevel", formatter: this.formatter },
+
+          {
+            label: "告警状态,来自工单系统",
+            prop: "alarmStatus",
+            formatter: this.formatter,
+          },
+          {
+            label: "操作",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  noEdit
+                  noDel
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
+            },
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
\ No newline at end of file

device-manager-ui/admin/src/views/device/drawershow.vue

+<template>
+    <!-- 弹出框表单 -->
+        <el-drawer
+    :title="title"
+    :visible.sync="open"
+    :direction="direction"
+    size="70%"
+  >
+        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
+            <el-row>
+                 
+            <Field label="设备名称"  prop="deviceName" v-model="form.deviceName" placeholder="请输入设备名称"/> 
+            <Field  label="SN码" prop="deviceCode" v-model="form.deviceCode"  placeholder="请输入设备SN码"/>
+            <Field  label="MAC地址" prop="deviceMac" v-model="form.deviceMac" placeholder="请输入设备的MAC地址"/>
+            <Field  label="平台类型" prop="platformId" v-model="form.platformId" type="select" :enumData="dict.platformId" placeholder="请选择平台类型"/>
+            <Field  label="产品类型" prop="productId" v-model="form.productId" type="select" :enumData="dict.productId" placeholder="请选择产品类型"/>
+            <Field label="设备生产商" placeholder="请选择设备生产商" prop="deviceFirmId" v-model="form.deviceFirmId" type="select" :enumData="dict.deviceFirmId" />
+            <Field label="设备来源" prop="deviceSrc" v-model="form.deviceSrc" type="select" :enumData="dict.deviceSrc" placeholder="请选择设备来源"/>
+            <Field label="数据获取方式" prop="deviceDataSourceWay" v-model="form.deviceDataSourceWay" type="select" :enumData="dict.deviceDataSourceWay" placeholder="请选择数据获取方式"/>
+            <Field label="经度" prop="lon" v-model="form.lon" placeholder="请输入经度"/>
+            <Field label="纬度" prop="lati" v-model="form.lati" placeholder="请输入纬度"/>
+            <Field label="所属楼栋" prop="deviceInBuilding" v-model="form.deviceInBuilding" type="num" placeholder="请选择所属楼栋"></Field>
+            <Field label="所属楼层" prop="deviceInFloor" v-model="form.deviceInFloor" type="num"  placeholder="请选择所属楼层"/>
+            <Field label="保修期至" prop="defectsLiabilityPeriod" v-model="form.defectsLiabilityPeriod" type="datetime" />
+            <Field label="负责人" prop="leadingOfficial" v-model="form.leadingOfficial" placeholder="请输入负责人"/>
+            <Field label="联系电话" prop="leadingOfficialTelephone" v-model="form.leadingOfficialTelephone" placeholder="请输入联系电话"/>
+            <Field label="接收异常短信" prop="isReceiveMess" v-model="form.isReceiveMess" type="select" :enumData="dict.isReceiveMess" placeholder="请选择是否接收异常短信"/>
+            
+            <Field   label="启用状态 " prop="enabled"  v-model="form.enabled" type="select" :enumData="dict.enabled" placeholder="请选择启用状态 "/>
+                     <Field  :span="24"  label="上传图片"
+          ><ImageUpload
+            v-model="form.devicePhotoPath"
+            prePath="/file/preview"
+        /></Field>
+            <Field    label="授权码" :span="24" prop="deviceAuthCode"   v-model="form.deviceAuthCode" type="textarea" placeholder="请输入授权码"/>         
+                   
+            <Field    label="备注" :span="24" prop="deviceRemark"   v-model="form.deviceRemark" type="textarea" placeholder="请输入备注"/>         
+
+            </el-row>
+ <form-buttons @submit='submitForm' noCancelBtn />
+        </el-form>
+
+        </el-drawer>
+</template>
+
+<script>
+    import form from "@/assets/mixins/formdialog";
+ import ImageUpload from "@/components/ImageUpload";
+    export default {
+        mixins: [form],
+   components: {
+    ImageUpload,
+  },
+        data() {
+            return {
+                // 遮罩层
+                loading: true,
+                // 弹出层标题
+                title: "设备",
+                // 是否显示弹出层
+                open: false,
+                direction:"rtl",
+                toString:[
+                    "deviceFirmId",
+                    "platformId",
+                    "productId",
+                    "deviceSrc",
+                    "deviceDataSourceWay",
+                    "isReceiveMess",
+                    "deviceStatus",
+                    "enabled",
+                    "deviceFirmId"
+                ],
+                // 表单校验
+                rules: {
+                    deviceName: [
+                        {required: true,message: "请输入设备名称", trigger: "blur" },
+                        {max: 20,message: "最多只能录入20个字符",trigger: "blur",},
+                    ],
+                    platformId: [
+                        {required: true,message: "请选择平台", trigger: "blur" },
+                    ],
+                    productId: [
+                        {required: true,message: "请选择产品", trigger: "blur" },
+                    ],
+             
+                }
+            };
+        },
+
+        methods: {
+            /** 编辑 */
+            edit(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.editUrl;;
+                this.getData();
+                this.pageInfo.type="edit"
+                this.title = "修改设备";
+            },
+            /** 新增 */
+            add(row) {
+                this.reset()
+          
+                this.urls.currUrl = this.pageInfo.addUrl;
+                this.pageInfo.type="add"
+
+                 this.form.siteId = row.siteId;
+                this.form.siteName = row.siteName;
+                this.form.siteCode = row.siteCode;
+                this.getData();
+                this.title = "新增设备";
+            },
+            /** 查看*/
+            view(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.viewUrl;;
+                this.getData();
+                this.pageInfo.type="view"
+                this.title = "设备详细";
+            },
+            /**取消按钮 */
+            cancel() {
+                this.open = false;
+            },
+            /**获取数据后弹框 */
+            afterRender(data) {
+                this.open = true;
+
+                 console.log("form:",this.form)
+            //    if(this.pageInfo.type=='add'){
+            //     this.form.siteId = this.siteId;
+            //     this.form.siteName = this.siteName;
+            //     this.form.siteCode = this.siteCode;
+            //    }
+
+
+            },
+
+            afterSubmit(data) {
+                this.open = false;
+                this.$emit("ok");
+            },
+
+            // 表单重置
+            reset() {
+                this.form = {};
+                this.resetForm("form");
+            },
+            resetForm(refName) {
+                if (this.$refs[refName]) {
+                    this.$refs[refName].resetFields();
+                }
+            },
+            handleClose(){
+                console.log("关闭")
+            }
+        },
+    };
+</script>

device-manager-ui/admin/src/views/device/drawerview.vue

+<template>
+  <!-- 弹出框表单 -->
+  <el-drawer
+    :title="title"
+    :visible.sync="open"
+    :direction="direction"
+    size="70%"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-tabs  style="margin-left:10px" v-model="activeName">
+        <el-tab-pane label="设备详情" name="deviceDetail">
+          <view-show :form="viewInfo" :dict="dict" /> 
+        </el-tab-pane>
+        <el-tab-pane  label="告警记录" name="alarmLog">
+        <alarm-list :queryIn='{alarmDevice:form.id}' />
+        </el-tab-pane>
+        <el-tab-pane label="模块管理" name="model">
+        <module-list :queryIn='{deviceId:form.id}' />
+        </el-tab-pane>
+
+
+      </el-tabs>
+      <el-form-item
+        style="text-align: center; margin-left: -100px; margin-top: 10px"
+      >
+        <el-button @click="deleteDevice">删除设备</el-button>
+        <el-button  type="primary"  @click="updateDevice()">修改信息</el-button>
+      </el-form-item>
+    </el-form>
+  </el-drawer>
+</template>
+
+<script>
+import form from "@/assets/mixins/formdialog";
+import viewShow from "./view";
+import alarmList from "./alarm/info/list";
+import moduleList from "./module/list";
+import ImageUpload from "@/components/ImageUpload";
+export default {
+  mixins: [form],
+  components: {
+    ImageUpload,
+    viewShow,
+    alarmList,
+    moduleList
+  },
+  data() {
+    return {
+      activeName: "deviceDetail",
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "设备",
+      // 是否显示弹出层
+      open: false,
+      viewInfo:{},
+      direction: "rtl",
+      toString: [
+        "deviceFirmId",
+        "platformId",
+        "productId",
+        "deviceSrc",
+        "deviceDataSourceWay",
+        "isReceiveMess",
+        "deviceStatus",
+        "enabled",
+        "deviceFirmId",
+      ],
+      // 表单校验
+      rules: {
+        deviceName: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+          { max: 20, message: "最多只能录入20个字符", trigger: "blur" },
+        ],
+        platformId: [
+          { required: true, message: "请选择平台", trigger: "blur" },
+        ],
+        productId: [{ required: true, message: "请选择产品", trigger: "blur" }],
+      },
+    };
+  },
+
+  methods: {
+    /** 编辑 */
+    edit(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.editUrl;
+      this.getData();
+      this.pageInfo.type = "edit";
+      this.title = "修改设备";
+    },
+    /** 新增 */
+    add(row) {
+      this.reset();
+
+      this.urls.currUrl = this.pageInfo.addUrl;
+      this.pageInfo.type = "add";
+
+      this.form.siteId = row.siteId;
+      this.form.siteName = row.siteName;
+      this.form.siteCode = row.siteCode;
+      this.getData();
+      this.title = "新增设备";
+    },
+    /** 查看*/
+    view(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = this.pageInfo.viewUrl;
+      this.getData();
+      this.pageInfo.type = "view";
+      this.title = "设备详细";
+    },
+    /**取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+    /**获取数据后弹框 */
+    afterRender(data) {
+      this.open = true;
+
+      console.log("form:", this.form);
+      Object.assign(this.viewInfo,this.form)
+      console.log("viewInfo",this.viewInfo)
+      //    if(this.pageInfo.type=='add'){
+      //     this.form.siteId = this.siteId;
+      //     this.form.siteName = this.siteName;
+      //     this.form.siteCode = this.siteCode;
+      //    }
+    },
+
+    afterSubmit(data) {
+      this.open = false;
+      this.$emit("ok");
+    },
+
+    // 表单重置
+    reset() {
+      this.form = {};
+      this.resetForm("form");
+    },
+    resetForm(refName) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].resetFields();
+      }
+    },
+    handleClose() {
+      console.log("关闭");
+    },
+  },
+};
+</script>

device-manager-ui/admin/src/views/device/module/dialogshow.vue

+<template>
+    <!-- 弹出框表单 -->
+    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+                                            <Field label="模块名称" prop="moduleId" v-model="form.moduleId" placeholder="请输入模块名称"/>
+                            <Field label="所属设备" prop="deviceId" v-model="form.deviceId" placeholder="请输入所属设备"/>
+
+            </el-row>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+    import form from "@/assets/mixins/formdialog";
+    import dialogShow from "./dialogshow";
+    export default {
+        mixins: [form],
+        components: {
+            dialogShow ,
+        },
+        data() {
+            return {
+                // 遮罩层
+                loading: true,
+                // 弹出层标题
+                title: "设备模块信息",
+                // 是否显示弹出层
+                open: false,
+                toString:[
+                ],
+                // 表单校验
+                rules: {
+                    createTime: [
+                        {required: true,message: "请选择创建时间" },
+                    ],
+                }
+            };
+        },
+
+        methods: {
+            /** 编辑 */
+            edit(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.editUrl;;
+                this.getData();
+                this.pageInfo.type="edit"
+                this.title = "修改设备模块信息";
+            },
+            /** 新增 */
+            add(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl = this.pageInfo.addUrl;
+                this.getData();
+                this.pageInfo.type="add"
+                this.title = "新增设备模块信息";
+            },
+            /** 查看*/
+            view(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.viewUrl;;
+                this.getData();
+                this.pageInfo.type="view"
+                this.title = "设备模块信息详细";
+            },
+            /**取消按钮 */
+            cancel() {
+                this.open = false;
+            },
+            /**获取数据后弹框 */
+            afterRender(data) {
+                this.open = true;
+            },
+
+            afterSubmit(data) {
+                this.open = false;
+                this.$emit("ok");
+            },
+
+            // 表单重置
+            reset() {
+                this.form = {
+                    moduleId : null,
+                    deviceId : null,
+                };
+                this.resetForm("form");
+            },
+            resetForm(refName) {
+                if (this.$refs[refName]) {
+                    this.$refs[refName].resetFields();
+                }
+            },
+        },
+    };
+</script>

device-manager-ui/admin/src/views/device/module/list.vue

+<template>
+    <div class="page">
+        <LayoutTable :data="tableData" :config="tableConfig">
+                    </LayoutTable>
+
+        <dialog-show ref="dialogform" @ok="getData" />
+    </div>
+</template>
+
+<script>
+    /** 表单弹出框模式需引入 */
+    import dialogShow from "./dialogshow";
+    import table from "@/assets/mixins/table";
+    export default {
+        name: "DeviceModule",
+        props: {
+    queryIn: {
+      type: Object,
+      default: null,
+    },
+  },
+        components: {dialogShow },
+        mixins: [table],
+        created() {
+ console.log("queryIn module:", this.queryIn);
+
+    //this.config.addQuery = { deviceId, deviceType };
+
+    if (this.queryIn.deviceId) {
+      this.query["deviceId"] = this.queryIn.deviceId;
+    }
+
+    this.pageInfo.list = "/device/module/list";
+    this.pageInfo.del = "/device/module/delete";
+    this.pageInfo.add = "/device/module/add";
+    this.pageInfo.edit = "/device/module/edit";
+    this.pageInfo.view = "/device/module/view";
+
+     console.log("pageInfo",this.pageInfo)
+
+        },
+        methods: {
+
+            /** 重写新增方法 */
+            toAdd(row) {
+                this.$refs.dialogform.add(row);
+            },
+            /** 重写编辑方法 */
+            toEdit(row) {
+                this.$refs.dialogform.edit(row);
+
+            },
+            /** 重写查看方法 */
+            // toView(row) {
+            //     this.$refs.dialogform.view(row);
+            // },
+
+        },
+        data() {
+            return {
+                config: {
+                    search: [
+                    ],
+                    columns: [
+                        {type: "selection", width: 60},
+                        {
+                            label: "操作",
+                            width: 240,
+                            formatter: row => {
+                                return (
+                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                            );
+                            }
+                        }
+                    ]
+                }
+            };
+        }
+    };
+</script>
\ No newline at end of file

device-manager-ui/admin/src/views/device/module/use/dialogshow.vue

+<template>
+    <!-- 弹出框表单 -->
+    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+                                            <Field label="模块ID" prop="moduleId" v-model="form.moduleId" placeholder="请输入模块ID"/>
+                            <Field label="调用次数" prop="useNum" v-model="form.useNum" placeholder="请输入调用次数"/>
+
+            </el-row>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+    import form from "@/assets/mixins/formdialog";
+    import dialogShow from "./dialogshow";
+    export default {
+        mixins: [form],
+        components: {
+            dialogShow ,
+        },
+        data() {
+            return {
+                // 遮罩层
+                loading: true,
+                // 弹出层标题
+                title: "设备模块使用频率",
+                // 是否显示弹出层
+                open: false,
+                toString:[
+                ],
+                // 表单校验
+                rules: {
+                    createTime: [
+                        {required: true,message: "请选择创建时间" },
+                    ],
+                }
+            };
+        },
+
+        methods: {
+            /** 编辑 */
+            edit(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.editUrl;;
+                this.getData();
+                this.pageInfo.type="edit"
+                this.title = "修改设备模块使用频率";
+            },
+            /** 新增 */
+            add(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl = this.pageInfo.addUrl;
+                this.getData();
+                this.pageInfo.type="add"
+                this.title = "新增设备模块使用频率";
+            },
+            /** 查看*/
+            view(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.viewUrl;;
+                this.getData();
+                this.pageInfo.type="view"
+                this.title = "设备模块使用频率详细";
+            },
+            /**取消按钮 */
+            cancel() {
+                this.open = false;
+            },
+            /**获取数据后弹框 */
+            afterRender(data) {
+                this.open = true;
+            },
+
+            afterSubmit(data) {
+                this.open = false;
+                this.$emit("ok");
+            },
+
+            // 表单重置
+            reset() {
+                this.form = {
+                    moduleId : null,
+                    useNum : null,
+                };
+                this.resetForm("form");
+            },
+            resetForm(refName) {
+                if (this.$refs[refName]) {
+                    this.$refs[refName].resetFields();
+                }
+            },
+        },
+    };
+</script>

device-manager-ui/admin/src/views/device/module/use/list.vue

+<template>
+    <div class="page">
+        <LayoutTable :data="tableData" :config="tableConfig">
+                    </LayoutTable>
+
+        <dialog-show ref="dialogform" @ok="getData" />
+    </div>
+</template>
+
+<script>
+    /** 表单弹出框模式需引入 */
+    import dialogShow from "./dialogshow";
+    import table from "@/assets/mixins/table";
+    export default {
+        name: "DeviceModuleUse",
+        components: {dialogShow },
+        mixins: [table],
+        created() {
+        },
+        methods: {
+
+            /** 重写新增方法 */
+            toAdd(row) {
+                this.$refs.dialogform.add(row);
+            },
+            /** 重写编辑方法 */
+            toEdit(row) {
+                this.$refs.dialogform.edit(row);
+
+            },
+            /** 重写查看方法 */
+            // toView(row) {
+            //     this.$refs.dialogform.view(row);
+            // },
+
+        },
+        data() {
+            return {
+                config: {
+                    search: [
+                    ],
+                    columns: [
+                        {type: "selection", width: 60},
+                        {
+                            label: "操作",
+                            width: 240,
+                            formatter: row => {
+                                return (
+                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                            );
+                            }
+                        }
+                    ]
+                }
+            };
+        }
+    };
+</script>
\ No newline at end of file

device-manager-ui/admin/src/views/device/view.vue

+<template>
+  <layout-view>
+    <el-descriptions
+      :title="title"
+      :column="column"
+      :size="size"
+      :colon="false"
+      border
+    >
+      <el-descriptions-item
+        label="设备名称"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceName }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="设备编码"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceCode }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="设备的MAC地址"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceMac }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="站点Id"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.siteId }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="站点编号"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.siteCode }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="站点名称"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.siteName }}
+      </el-descriptions-item>
+
+      <el-descriptions-item
+        label="平台系统名称"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.platformName }}
+      </el-descriptions-item>
+
+      <el-descriptions-item
+        label="产品名称"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.productName }}
+      </el-descriptions-item>
+
+      <el-descriptions-item
+        label="设备生产厂商名称"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceFirmname }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="设备来源"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("deviceSrc", form.deviceSrc) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="数据获取方式"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("deviceDataSourceWay", form.deviceDataSourceWay) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="经度"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.lon }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="经度"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.lati }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="所属楼栋"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceInBuilding }} 栋
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="所属楼层"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceInFloor }} 层
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="保修期至"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatterDate(form.defectsLiabilityPeriod) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="负责人"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.leadingOfficial }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="联系电话"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.leadingOfficialTelephone }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="是否接收异常短"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("isReceiveMess", form.isReceiveMess) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="设备图片"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.devicePhotoPath }}
+      </el-descriptions-item>
+
+      <el-descriptions-item
+        label="设备topic信息"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceTopic }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="设备状态 "
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("deviceStatus", form.deviceStatus) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="启用状态 "
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatters("enabled", form.enabled) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="设备授权码"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceAuthCode }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="备注"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.deviceRemark }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="最近上线时间"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatterDate(form.onlineTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="最近离线时间"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ util_formatterDate(form.offlineTime) }}
+      </el-descriptions-item>
+
+    </el-descriptions>
+<br/>
+
+<el-descriptions
+      :title="title"
+      :column="column"
+      :size="size"
+      :colon="false"
+      border
+    >
+      <template slot="title">
+        <i class="el-icon-tickets"></i>
+        设备位置
+      </template>
+     
+  </el-descriptions>
+     <Map></Map>
+
+  </layout-view>
+</template>
+
+<script>
+// import view from "@/assets/mixins/view";
+export default {
+  // mixins: [view],
+  props: {
+    form: {
+      type: Object,
+      default: null,
+    },
+    dict: {
+      type: Object,
+      default: null,
+    },
+  },
+  components: {},
+  created() {
+    console.log(this.form,this.dict);
+  },
+  methods: {
+    util_formatterDate(time) {
+         if(time==null){
+             return ''
+         }
+
+
+      let date = new Date(Number(time));
+      let Y = date.getFullYear() + "-";
+      let M =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+      let D = this.panLeft(date.getDate()) + " ";
+      let h = this.panLeft(date.getHours()) + ":";
+      let m = this.panLeft(date.getMinutes()) + ":";
+      let s = this.panLeft(date.getSeconds());
+      return Y + M + D + h + m + s;
+    },
+    panLeft(num) {
+      return num < 10 ? "0" + num : num;
+    },
+
+    // 从dict字段暴力取值，取不到则返回原值
+    util_formatter(key, val) {
+      try {
+        return this.dict[key][val];
+      } catch (error) {
+        return val;
+      }
+    },
+    util_formatters(key, val) {
+      try {
+        return val
+          .split(",")
+          .map((i) => this.util_formatter(key, i))
+          .join(",");
+      } catch (error) {
+        return val;
+      }
+    },
+  },
+  data() {
+    return {
+      form: {},
+      size: "small",
+      column: 3,
+      toString: [
+        "deviceSrc",
+        "deviceDataSourceWay",
+        "deviceInBuilding",
+        "deviceInFloor",
+        "isReceiveMess",
+        "deviceStatus",
+        "enabled",
+        "deleted",
+      ],
+      toArrays: [],
+      toDate: [],
+    };
+  },
+};
+</script>
+<style lang="less">
+.labelClass {
+  width: 200px;
+}
+.el-descriptions__body {
+  margin-left: 5px;
+  margin-right: 5px;
+  color: #606266;
+  background-color: #fff;
+}
+.contentClass {
+  width: 600px;
+}
+</style>
\ No newline at end of file

device-manager-ui/admin/src/views/sitestat/dialogshow.vue

+<template>
+    <!-- 弹出框表单 -->
+    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+                                            <Field label="站点Id，来源基础服务平台" prop="siteId" v-model="form.siteId" placeholder="请输入站点Id，来源基础服务平台"/>
+                            <Field label="站点编号，来源基础服务平台" prop="siteCode" v-model="form.siteCode" type="textarea" placeholder="请输入站点编号，来源基础服务平台"/>
+                            <Field label="站点名称" prop="siteName" v-model="form.siteName" type="textarea" placeholder="请输入站点名称"/>
+                            <Field label="设备总数" prop="deviceTotal" v-model="form.deviceTotal" placeholder="请输入设备总数"/>
+                            <Field label="在线数量" prop="onlineCount" v-model="form.onlineCount" placeholder="请输入在线数量"/>
+                            <Field label="离线数量" prop="offlineCount" v-model="form.offlineCount" placeholder="请输入离线数量"/>
+                            <Field label="停用数量" prop="stopCount" v-model="form.stopCount" placeholder="请输入停用数量"/>
+                            <Field label="待激活数量" prop="unActiveCount" v-model="form.unActiveCount" placeholder="请输入待激活数量"/>
+
+            </el-row>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+    import form from "@/assets/mixins/formdialog";
+    import dialogShow from "./dialogshow";
+    export default {
+        mixins: [form],
+        components: {
+            dialogShow ,
+        },
+        data() {
+            return {
+                // 遮罩层
+                loading: true,
+                // 弹出层标题
+                title: "站点统计",
+                // 是否显示弹出层
+                open: false,
+                toString:[
+                ],
+                // 表单校验
+                rules: {
+                    unActiveCount: [
+                        {required: true,message: "请输入待激活数量", trigger: "blur" },
+                    ],
+                    createTime: [
+                        {required: true,message: "请选择创建时间" },
+                    ],
+                }
+            };
+        },
+
+        methods: {
+            /** 编辑 */
+            edit(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.editUrl;;
+                this.getData();
+                this.pageInfo.type="edit"
+                this.title = "修改站点统计";
+            },
+            /** 新增 */
+            add(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl = this.pageInfo.addUrl;
+                this.getData();
+                this.pageInfo.type="add"
+                this.title = "新增站点统计";
+            },
+            /** 查看*/
+            view(row) {
+                this.reset()
+                this.query = { id: row.id };
+                this.urls.currUrl =this.pageInfo.viewUrl;;
+                this.getData();
+                this.pageInfo.type="view"
+                this.title = "站点统计详细";
+            },
+            /**取消按钮 */
+            cancel() {
+                this.open = false;
+            },
+            /**获取数据后弹框 */
+            afterRender(data) {
+                this.open = true;
+            },
+
+            afterSubmit(data) {
+                this.open = false;
+                this.$emit("ok");
+            },
+
+            // 表单重置
+            reset() {
+                this.form = {
+                    siteId : null,
+                    siteCode : "",
+                    siteName : "",
+                    deviceTotal : null,
+                    onlineCount : null,
+                    offlineCount : null,
+                    stopCount : null,
+                    unActiveCount : null,
+                };
+                this.resetForm("form");
+            },
+            resetForm(refName) {
+                if (this.$refs[refName]) {
+                    this.$refs[refName].resetFields();
+                }
+            },
+        },
+    };
+</script>

device-manager-ui/admin/src/views/sitestat/list.vue

+<template>
+  <div class="page">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="12" class="mytree">
+        <el-card>
+          <div slot="header">
+            <span style="font-size: 13px;">站点分布</span>
+
+            <el-button style="float: right; padding: 3px 0"   @click="switchStat"  type="text">切换为地图模式</el-button>
+          </div>
+          <el-scrollbar style="height: 100%">
+            <el-tree
+              size="mini"
+              ref="siteTree"
+              :data="areaData"
+              id="el-tree"
+              node-key="id"
+              indent="4"
+              :props="treeProps"
+              :load="loadNode"
+              highlight-current
+              default-expand-all
+              :expand-on-click-node="false"
+              :render-content="renderContent"
+              @node-click="handleNodeClick"
+            >
+            </el-tree>
+          </el-scrollbar>
+        </el-card>
+      </el-col>
+
+      <el-col :span="18" :xs="12">
+        <el-card>
+          <el-row>
+            <LayoutTable
+              ref="layoutTable"
+              :data="tableData"
+              notAdd
+              :config="tableConfig"
+            >
+              <el-button
+                slot="table-head-left2"
+                style="margin-left: 10px"
+                icon="el-icon-tickets"
+                size="mini"
+                @click="doExport"
+                :disabled="isExport"
+                >导出</el-button
+              >
+            </LayoutTable>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <dialog-show ref="dialogform" @ok="getData" />
+  </div>
+</template>
+
+<script>
+/** 表单弹出框模式需引入 */
+import dialogShow from "./dialogshow";
+import table from "@/assets/mixins/table";
+import tree from "@/assets/mixins/tree";
+export default {
+  name: "Sitestat",
+  components: { dialogShow },
+  mixins: [table, tree],
+  created() {
+    this.$get("/sitestat/siteTree", {}).then(({ data }) => {
+      this.areaData = data.siteTree;
+    });
+  },
+  methods: {
+    /** 下载模板操作 */
+    downloadTemplate() {
+      this.isExport = true;
+      this.$download("/sitestat/downloadTemplate", {}, { type: "excel" })
+        .then(() => (this.isExport = false))
+        .catch((error) => {
+          this.isExport = false;
+          this.$message.error(error.message);
+        });
+    },
+
+    /** 导出Excel */
+    doExport() {
+      this.isExport = true;
+      this.$download(
+        "/sitestat/exportExcel",
+        {
+          siteId: this.$route.query["siteId"],
+          siteName: this.$route.query["siteName"],
+        },
+        { type: "excel" }
+      )
+        .then(() => (this.isExport = false))
+        .catch((error) => {
+          this.isExport = false;
+          this.$message.error(error.message);
+        });
+    },
+
+    /** 重写新增方法 */
+    toAdd(row) {
+      this.$refs.dialogform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.dialogform.edit(row);
+    },
+    /** 重写查看方法 */
+    toView(row) {
+
+        //进入设备列表页面
+          this.$router.push({
+        path: "/device/list",
+        query: {
+          siteId: row.siteId,
+        },
+      });
+    },
+
+    switchStat() {
+    console.log("切换地图页面")
+     this.$router.push({
+        path: "/sitestat/maplist"
+      });
+    },
+
+
+    handleNodeClick(node) {
+      console.log("click node", node);
+      this.currentNode = node;
+      if (node.type === "site") {
+        //分页查询站点业务列表
+        // this.siteMatterTable.siteId = node.id;
+        //this.getSiteMatterTableData();
+        this.query = { siteId: node.id};
+        this.getData();
+      }
+    },
+  },
+  data() {
+    return {
+      isExport: false,
+      config: {
+        search: [
+          {
+            name: "siteName",
+            type: "text",
+            label: "站点名称",
+          },
+        ],
+        columns: [
+          { type: "selection", width: 60 },
+
+          { label: "站点名称", prop: "siteName" },
+
+          { label: "站点编号", prop: "siteCode" },
+
+          { label: "设备总数", prop: "deviceTotal", formatter: this.formatter },
+
+          { label: "在线数量", prop: "onlineCount", formatter: this.formatter },
+
+          {
+            label: "离线数量",
+            prop: "offlineCount",
+            formatter: this.formatter,
+          },
+
+          { label: "停用数量", prop: "stopCount", formatter: this.formatter },
+
+          {
+            label: "待激活数量",
+            prop: "unActiveCount",
+            formatter: this.formatter,
+          },
+          {
+            label: "操作",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  noEdit
+                  noDel
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
+            },
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style>
+.el-card__body {
+  padding: 10px;
+}
+.el-calendar-table .el-calendar-day {
+  height: 70px;
+}
+.is-selected {
+  color: #fa3b19;
+}
+</style>
+
+<style lang="scss" scoped>
+.mytree ::v-deep {
+  .el-tree--highlight-current
+    ::v-deep
+    .el-tree-node.is-checked
+    > .el-tree-node__content {
+    background-color: rgb(255, 255, 255);
+    color: rgb(64, 158, 255);
+  }
+  .el-tree--highlight-current
+    ::v-deep
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background-color: rgb(255, 255, 255);
+    color: rgb(64, 158, 255);
+  }
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+  .el-tree-node {
+    position: relative;
+    padding-left: 16px;
+  }
+  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
+  .el-tree-node__expand-icon.is-leaf {
+    display: none;
+  }
+  .el-tree-node__children {
+    padding-left: 16px;
+  }
+
+  .el-tree-node :last-child:before {
+    height: 38px;
+  }
+
+  .el-tree > .el-tree-node:before {
+    border-left: none;
+  }
+
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+
+  .el-tree-node:before {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:after {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:before {
+    border-left: 1px dashed #4386c6;
+    bottom: 0px;
+    height: 100%;
+    top: -26px;
+    width: 1px;
+  }
+
+  .el-tree-node:after {
+    border-top: 1px dashed #4386c6;
+    height: 20px;
+    top: 12px;
+    width: 24px;
+  }
+}
+</style>
\ No newline at end of file

device-manager-ui/admin/src/views/sitestat/maplist.vue

+<template>
+  <div class="page">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="12" class="mytree">
+        <el-card>
+          <div slot="header">
+            <span style="font-size: 13px">站点分布</span>
+
+            <el-button
+              style="float: right; padding: 3px 0"
+              @click="switchStat"
+              type="text"
+              >切换为列表模式</el-button
+            >
+          </div>
+          <el-scrollbar style="height: 100%">
+            <el-tree
+              size="mini"
+              ref="siteTree"
+              :data="areaData"
+              id="el-tree"
+              node-key="id"
+              indent="4"
+              :props="treeProps"
+              :load="loadNode"
+              highlight-current
+              default-expand-all
+              :expand-on-click-node="false"
+              :render-content="renderContent"
+              @node-click="handleNodeClick"
+            >
+            </el-tree>
+          </el-scrollbar>
+        </el-card>
+      </el-col>
+
+      <el-col :span="18" :xs="12">
+
+        
+     
+            <Map :markersData="originData" />
+
+
+     
+      </el-col>
+    </el-row>
+
+    <dialog-show ref="dialogform" @ok="getData" />
+  </div>
+</template>
+
+<script>
+/** 表单弹出框模式需引入 */
+import dialogShow from "./dialogshow";
+import table from "@/assets/mixins/table";
+import tree from "@/assets/mixins/tree";
+import Map from "@/components/Map";
+export default {
+  name: "Sitestat",
+  components: { dialogShow ,Map},
+  mixins: [table, tree],
+  mounted() {
+    console.log(this.pageInfo)
+     // console.log(2222222,this.$route.path)
+        //this.$route.path='/sitestat/list'
+        this.pageInfo.list='/sitestat/list'
+  },
+
+  created() {
+    this.$get("/sitestat/siteTree", {}).then(({ data }) => {
+      this.areaData = data.siteTree;
+    });
+  },
+  methods: {
+    /** 下载模板操作 */
+    downloadTemplate() {
+      this.isExport = true;
+      this.$download("/sitestat/downloadTemplate", {}, { type: "excel" })
+        .then(() => (this.isExport = false))
+        .catch((error) => {
+          this.isExport = false;
+          this.$message.error(error.message);
+        });
+    },
+
+    /** 导出Excel */
+    doExport() {
+      this.isExport = true;
+      this.$download(
+        "/sitestat/exportExcel",
+        {
+          siteId: this.$route.query["siteId"],
+          siteName: this.$route.query["siteName"],
+        },
+        { type: "excel" }
+      )
+        .then(() => (this.isExport = false))
+        .catch((error) => {
+          this.isExport = false;
+          this.$message.error(error.message);
+        });
+    },
+
+    /** 重写新增方法 */
+    toAdd(row) {
+      this.$refs.dialogform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.dialogform.edit(row);
+    },
+    /** 重写查看方法 */
+    toView(row) {
+      //进入设备列表页面
+      this.$router.push({
+        path: "/device/list",
+        query: {
+          siteId: row.siteId,
+        },
+      });
+    },
+
+    switchStat() {
+      console.log("切换列表页面");
+      this.$router.push({
+        path: "/sitestat/list"
+      });
+    },
+
+    handleNodeClick(node) {
+      console.log("click node", node);
+      this.currentNode = node;
+      if (node.type === "site") {
+        //分页查询站点业务列表 todo
+        // this.siteMatterTable.siteId = node.id;
+        //this.getSiteMatterTableData();
+        this.query = { siteId: node.id };
+       // this.getData();
+      }
+    },
+  },
+  data() {
+
+    return {
+      isExport: false,
+      originData:[{
+        lng:104.25,
+        lat:30.554,
+        address:"新津地区",
+      }],
+      config: {
+        search: [
+          {
+            name: "siteName",
+            type: "text",
+            label: "站点名称",
+          },
+        ],
+        columns: [
+          { type: "selection", width: 60 },
+
+          { label: "站点名称", prop: "siteName" },
+
+          { label: "站点编号", prop: "siteCode" },
+
+          { label: "设备总数", prop: "deviceTotal", formatter: this.formatter },
+
+          { label: "在线数量", prop: "onlineCount", formatter: this.formatter },
+
+          {
+            label: "离线数量",
+            prop: "offlineCount",
+            formatter: this.formatter,
+          },
+
+          { label: "停用数量", prop: "stopCount", formatter: this.formatter },
+
+          {
+            label: "待激活数量",
+            prop: "unActiveCount",
+            formatter: this.formatter,
+          },
+          {
+            label: "操作",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  noEdit
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
+            },
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style>
+.el-card__body {
+  padding: 10px;
+}
+.el-calendar-table .el-calendar-day {
+  height: 70px;
+}
+.is-selected {
+  color: #fa3b19;
+}
+</style>
+
+<style lang="scss" scoped>
+.mytree ::v-deep {
+  .el-tree--highlight-current
+    ::v-deep
+    .el-tree-node.is-checked
+    > .el-tree-node__content {
+    background-color: rgb(255, 255, 255);
+    color: rgb(64, 158, 255);
+  }
+  .el-tree--highlight-current
+    ::v-deep
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background-color: rgb(255, 255, 255);
+    color: rgb(64, 158, 255);
+  }
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+  .el-tree-node {
+    position: relative;
+    padding-left: 16px;
+  }
+  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
+  .el-tree-node__expand-icon.is-leaf {
+    display: none;
+  }
+  .el-tree-node__children {
+    padding-left: 16px;
+  }
+
+  .el-tree-node :last-child:before {
+    height: 38px;
+  }
+
+  .el-tree > .el-tree-node:before {
+    border-left: none;
+  }
+
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+
+  .el-tree-node:before {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:after {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:before {
+    border-left: 1px dashed #4386c6;
+    bottom: 0px;
+    height: 100%;
+    top: -26px;
+    width: 1px;
+  }
+
+  .el-tree-node:after {
+    border-top: 1px dashed #4386c6;
+    height: 20px;
+    top: 12px;
+    width: 24px;
+  }
+}
+</style>
+
+<style>
+.amap-wrapper {
+  width: 500px;
+  height: 500px;
+}
+</style>
\ No newline at end of file