调整目录结构使其能够被引用

packages/device/AppEquipmentManage/components/List.vue

@@ -20,7 +20,7 @@
             <template slot-scope="{ row }">
               <!-- <el-button type="text" @click="close(row.id)">停播</el-button> -->
               <el-button type="text" @click="toTaskList(row.deviceId)">任务列表</el-button>
-              <el-button type="text" @click="bind(row)" >绑定行政区划</el-button>
+              <el-button type="text" @click="bind(row)">绑定行政区划</el-button>
               <!-- <el-button type="text" @click="locate=true">地图标绘</el-button>-->
             </template>
           </el-table-column>
@@ -37,17 +37,15 @@
         <el-button type="primary" @click="bindArea">确 定</el-button>
       </span>
     </el-dialog>
-    <locate-dialog v-model="locate" :ins="instance" @confirm="bindLocate"/>
+    <ai-locate-dialog v-model="locate" :ins="instance" @confirm="bindLocate"/>
   </section>
 </template>
 
 <script>
 import {mapState} from 'vuex'
-import LocateDialog from "../../AppMonitor/components/locateDialog";
 
 export default {
   name: 'List',
-  components: {LocateDialog},
   props: {
     dict: Object,
     instance: Function,
@@ -98,7 +96,7 @@ export default {
           label: '是否绑定区划',
           align: 'center',
           render: (h, {row}) => {
-            return h('span', null, (row.areaId? '是': '否'))
+            return h('span', null, (row.areaId ? '是' : '否'))
           },
         },
         {
@@ -120,7 +118,7 @@ export default {
     ...mapState(['user']),
   },
 
-  created () {
+  created() {
     this.dict.load('dlbDevStatus', 'yesOrNo').then(() => {
       this.getList()
     })
@@ -196,7 +194,7 @@ export default {
         },
       })
     },
-    update () {
+    update() {
       this.btnLoading = true
       this.instance.post(`/app/appdlbquipment/sync`, null, {
         timeout: 1000000

packages/device/AppMonitor/AppMonitorDevice.vue

@@ -6,7 +6,7 @@
         <ai-search-bar>
           <template #right>
             <el-input prefix-icon="iconfont iconSearch" v-model="search.title" placeholder="设备名、MAC号" clearable
-            @clear="page.current = 1,search.title = '', getTableData()"
+                      @clear="page.current = 1,search.title = '', getTableData()"
                       v-throttle="() => {page.current = 1, getTableData()}" size="small"/>
           </template>
         </ai-search-bar>
@@ -26,18 +26,17 @@
         </ai-table>
       </template>
     </ai-list>
-    <locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
+    <ai-locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
     <setting-dialog v-model="dialog" :ins="instance"/>
   </section>
 </template>
 
 <script>
-import LocateDialog from "./components/locateDialog";
 import SettingDialog from "./components/settingDialog";
 
 export default {
   name: "AppMonitorDevice",
-  components: {SettingDialog, LocateDialog},
+  components: {SettingDialog},
   label: "监控设备管理",
   props: {
     instance: Function,

packages/device/AppMonitor/AppMonitorManage.vue

@@ -25,169 +25,168 @@
         </el-form-item>
       </el-form>
     </ai-dialog>
-    <locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)"/>
+    <ai-locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)"/>
     <ai-area custom-clicker :input-clicker="false" v-model="selected.areaId" :hideLevel="disabledLevel" :instance="instance" ref="BindArea"
              @change="handleSubmit(selected)"/>
   </section>
 </template>
 
 <script>
-  import { mapState } from 'vuex'
-  import DeviceSlider from "./components/deviceSlider";
-  import LocateDialog from "./components/locateDialog";
+import {mapState} from 'vuex'
+import DeviceSlider from "./components/deviceSlider";
 
-  export default {
-    name: "AppMonitorManage",
-    components: {LocateDialog, DeviceSlider},
-    label: "监控实况",
-    props: {
-      instance: Function,
-      dict: Object,
-      permissions: Function
+export default {
+  name: "AppMonitorManage",
+  components: {DeviceSlider},
+  label: "监控实况",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    splitOps() {
+      return [
+        {label: "单分屏", value: 1, per: "100%"},
+        {label: "四分屏", value: 4, per: "49%"},
+        {label: "九分屏", value: 9, per: "32%"}
+      ]
     },
-    computed: {
-      splitOps() {
-        return [
-          {label: "单分屏", value: 1, per: "100%"},
-          {label: "四分屏", value: 4, per: "49%"},
-          {label: "九分屏", value: 9, per: "32%"}
-        ]
-      },
-      currentSplitStyle() {
-        let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
-        return {width: per, height: per}
-      },
-      ...mapState(['user'])
+    currentSplitStyle() {
+      let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
+      return {width: per, height: per}
     },
+    ...mapState(['user'])
+  },
 
-    data() {
-      return {
-        slider: true,
-        fullscreen: false,
-        splitScreen: 1,
-        monitors: [],
-        dialog: false,
-        locate: false,
-        selected: {
-          areaId: ''
-        },
-        latlng: null,
-        disabledLevel: 0,
-        rules: {
-          name: [{required: true, message: "请填写 设备名称"}]
-        }
+  data() {
+    return {
+      slider: true,
+      fullscreen: false,
+      splitScreen: 1,
+      monitors: [],
+      dialog: false,
+      locate: false,
+      selected: {
+        areaId: ''
+      },
+      latlng: null,
+      disabledLevel: 0,
+      rules: {
+        name: [{required: true, message: "请填写 设备名称"}]
       }
-    },
+    }
+  },
 
-    created () {
-      this.selected.areaId = this.user.info.areaId
-      this.disabledLevel = this.user.info.areaList.length
-    },
+  created() {
+    this.selected.areaId = this.user.info.areaId
+    this.disabledLevel = this.user.info.areaList.length
+  },
 
-    methods: {
-      handleFullscreen() {
-        this.fullscreen = !this.fullscreen
-        this.$fullscreen(this.fullscreen)
-      },
-      handleSelectMonitor(monitor) {
-        let {id} = monitor,
-            index = this.monitors.findIndex(e => e.id == id)
-        if (index > -1) {
-          this.monitors.splice(index, 1)
-          this.monitors.map((e, i) => {
-            if (i > index) {
-              this.showMonitor(e, true)
-            }
-          })
-        } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
-          this.$message.warning("可分屏监控已满,请先取消其他的监控")
-        } else {
-          this.showMonitor(monitor)
-        }
-      },
-      showMonitor(monitor, refresh = false) {
-        let {id: deviceId} = monitor
-        deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
-          params: {deviceId}
-        }).then(res => {
-          if (res?.data) {
-            let data = JSON.parse(res.data)
-            if (refresh) {
-              monitor.url = data.url
-            } else if (this.splitScreen == 1) {
-              this.monitors = [{...monitor, ...data}]
-            } else {
-              this.monitors.push({...monitor, ...data})
-            }
+  methods: {
+    handleFullscreen() {
+      this.fullscreen = !this.fullscreen
+      this.$fullscreen(this.fullscreen)
+    },
+    handleSelectMonitor(monitor) {
+      let {id} = monitor,
+          index = this.monitors.findIndex(e => e.id == id)
+      if (index > -1) {
+        this.monitors.splice(index, 1)
+        this.monitors.map((e, i) => {
+          if (i > index) {
+            this.showMonitor(e, true)
           }
         })
-      },
-      renderTreeItem: function (h, {node, data}) {
-        let show = data.deviceStatus==1 ? 'show' : ''
-        if (node.isLeaf) {
-          return (
-              <div class="flexRow">
-                <i class={['iconfont', 'iconshipinjiankong', show]}/>
-                <div>{node.label}</div>
-                <el-dropdown class="menuBtn" onCommand={e => this.handleSliderOption(e, data)}>
-                  <i class="iconfont iconMore"/>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item command="edit">修改名称</el-dropdown-item>
-                    <el-dropdown-item command="area">行政地区</el-dropdown-item>
-                    <el-dropdown-item command="locate">地图标绘</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              </div>
-          )
-        } else return (
+      } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
+        this.$message.warning("可分屏监控已满,请先取消其他的监控")
+      } else {
+        this.showMonitor(monitor)
+      }
+    },
+    showMonitor(monitor, refresh = false) {
+      let {id: deviceId} = monitor
+      deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+        params: {deviceId}
+      }).then(res => {
+        if (res?.data) {
+          let data = JSON.parse(res.data)
+          if (refresh) {
+            monitor.url = data.url
+          } else if (this.splitScreen == 1) {
+            this.monitors = [{...monitor, ...data}]
+          } else {
+            this.monitors.push({...monitor, ...data})
+          }
+        }
+      })
+    },
+    renderTreeItem: function (h, {node, data}) {
+      let show = data.deviceStatus == 1 ? 'show' : ''
+      if (node.isLeaf) {
+        return (
             <div class="flexRow">
+              <i class={['iconfont', 'iconshipinjiankong', show]}/>
               <div>{node.label}</div>
-              {data.id != 'no_area' ? <div class="sta">
-                    <p>{data.online || 0}</p>/{data.sum || 0}
-                  </div>
-                  : <div/>}
+              <el-dropdown class="menuBtn" onCommand={e => this.handleSliderOption(e, data)}>
+                <i class="iconfont iconMore"/>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="edit">修改名称</el-dropdown-item>
+                  <el-dropdown-item command="area">行政地区</el-dropdown-item>
+                  <el-dropdown-item command="locate">地图标绘</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
             </div>
         )
-      },
-      handleSliderOption(command, data) {
-        this.selected = JSON.parse(JSON.stringify({...data, command}))
-        if (command == "edit") {//修改名称
-          this.dialog = true
-        } else if (command == "area") {//绑定areaId
-          this.$refs.BindArea?.chooseArea()
-        } else if (command == "locate") {//地图标绘
-          this.latlng = data.lat && data.lng ? {
-            lat: data.lat,
-            lng: data.lng
-          } : ''
-          this.locate = true
-        }
-      },
-      handleSubmit(row) {
-        delete row.createTime
-        return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
-          ...row
-        }).then(res => {
-          if (res?.code == 0) {
-            this.$message.success("提交成功!")
-            this.dialog = false
-            this.$refs.DeviceSlider?.getDevices()
-          }
-        })
-      },
-      handleLocate(row, locate) {
-        if (locate) {
-          let {lat, lng} = locate.location
-          this.handleSubmit({...row, lat, lng}).then(() => {
-            this.locate = false
-          })
-        }
+      } else return (
+          <div class="flexRow">
+            <div>{node.label}</div>
+            {data.id != 'no_area' ? <div class="sta">
+                  <p>{data.online || 0}</p>/{data.sum || 0}
+                </div>
+                : <div/>}
+          </div>
+      )
+    },
+    handleSliderOption(command, data) {
+      this.selected = JSON.parse(JSON.stringify({...data, command}))
+      if (command == "edit") {//修改名称
+        this.dialog = true
+      } else if (command == "area") {//绑定areaId
+        this.$refs.BindArea?.chooseArea()
+      } else if (command == "locate") {//地图标绘
+        this.latlng = data.lat && data.lng ? {
+          lat: data.lat,
+          lng: data.lng
+        } : ''
+        this.locate = true
       }
     },
-    beforeDestroy() {
-      this.monitors = []
+    handleSubmit(row) {
+      delete row.createTime
+      return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
+        ...row
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message.success("提交成功!")
+          this.dialog = false
+          this.$refs.DeviceSlider?.getDevices()
+        }
+      })
+    },
+    handleLocate(row, locate) {
+      if (locate) {
+        let {lat, lng} = locate.location
+        this.handleSubmit({...row, lat, lng}).then(() => {
+          this.locate = false
+        })
+      }
     }
+  },
+  beforeDestroy() {
+    this.monitors = []
   }
+}
 </script>
 
 <style lang="scss" scoped>

packages/device/AppMonitor/components/locateDialog.vue

@@ -1,181 +0,0 @@
-<template>
-  <section class="locateDialog">
-    <ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
-               @opened="$nextTick(()=>initMap())"
-               @onConfirm="handleConfirm">
-      <div id="amap" v-if="dialog"/>
-      <div class="poi">
-        <el-input ref="poiInput" v-model="search" size="small" clearable @change="handleSearch" placeholder="请输入地点"/>
-      </div>
-      <el-form class="selected" v-if="!!selected.location" id="result" size="mini" label-suffix="："
-               label-position="left">
-        <div class="header">
-          <i class="iconfont iconLocation"/>
-          <span v-html="[selected.location.lng, selected.location.lat].join(',')"/>
-        </div>
-        <el-form-item label="地点">{{ selected.name || "未知地名" }}</el-form-item>
-        <el-form-item label="类型" v-if="!!selected.type">{{ selected.type }}</el-form-item>
-        <el-form-item label="地址" v-if="!!selected.address">{{ selected.address }}</el-form-item>
-      </el-form>
-    </ai-dialog>
-  </section>
-</template>
-
-<script>
-import AMapLoader from '@amap/amap-jsapi-loader'
-
-export default {
-  name: "locateDialog",
-  model: {
-    prop: "visible",
-    event: "visible",
-  },
-  props: ['latlng', 'visible'],
-  data() {
-    return {
-      dialog: false,
-      search: "",
-      poi: null,
-      map: null,
-      AMap: null,
-      selected: {},
-      geo: null
-    }
-  },
-  watch: {
-    visible(v) {
-      this.dialog = v
-    }
-  },
-  methods: {
-    initMap() {
-      AMapLoader.load({
-        key: "b553334ba34f7ac3cd09df9bc8b539dc",
-        version: '2.0',
-        plugins: ['AMap.PlaceSearch', 'AMap.Marker', 'AMap.Geolocation'],
-      }).then(AMap => {
-        this.AMap = AMap
-        this.map = new AMap.Map('amap', {
-          zoom: 14,
-          center: this.latlng ? [this.latlng.lng, this.latlng.lat] : ''
-        }).on('click', res => {
-          this.map.clearMap()
-          this.selected = {location: res.lnglat}
-          this.poi?.searchNearBy('', res.lnglat, 100)
-        });
-        if (this.latlng) {
-          let marker = new AMap.Marker({
-            position: [this.latlng.lng, this.latlng.lat]
-          })
-          this.map.add(marker)
-        }
-        this.poi = new AMap.PlaceSearch().on('complete', ({poiList}) => {
-          this.map.clearMap()
-          if (poiList?.length > 0) {
-            poiList?.pois?.map(e => {
-              let marker = new AMap.Marker({
-                position: e.location,
-              }).on('click', () => this.selected = e)
-              this.map.add(marker)
-            })
-          } else {
-            let marker = new AMap.Marker({
-              position: this.selected.location,
-            })
-            this.map.add(marker)
-          }
-        })
-        this.geo = new AMap.Geolocation({
-          enableHighAccuracy: true,//是否使用高精度定位
-          zoomToAccuracy: true//定位成功后是否自动调整地图视野到定位点
-        })
-        this.map.addControl(this.geo)
-      })
-    },
-    handleSearch(v) {
-      if (v) {
-        this.poi.searchNearBy(v, this.map.getCenter(), 50000)
-      }
-    },
-    handleConfirm() {
-      if (this.selected?.location) {
-        this.$emit('confirm', this.selected)
-      } else {
-        this.$message.error('请先选择坐标位置')
-      }
-
-    }
-  },
-  created() {
-    this.dialog = this.visible
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.locateDialog {
-  ::v-deep .el-dialog__body {
-    padding: 0;
-    height: 480px;
-    position: relative;
-
-    .ai-dialog__content--wrapper {
-      padding: 0 !important;
-    }
-
-    #amap {
-      width: 100%;
-      height: 480px;
-
-      .amap-logo, .amap-copyright {
-        display: none !important;
-      }
-
-      .amap-marker-label {
-        border-color: transparent;
-        box-shadow: 1px 1px 0 0 rgba(#999, .2);
-      }
-    }
-
-    .poi {
-      position: absolute;
-      left: 10px;
-      top: 10px;
-      display: flex;
-      height: 32px;
-      flex-direction: column;
-
-      div {
-        flex-shrink: 0;
-      }
-    }
-
-    .selected {
-      position: absolute;
-      right: 16px;
-      top: 16px;
-      background: #fff;
-      min-width: 200px;
-      box-sizing: border-box;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
-      .header {
-        color: #fff;
-        background: #26f;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        height: 32px;
-        font-size: 14px;
-        gap: 4px;
-        padding: 0 8px;
-      }
-
-      .el-form-item {
-        padding: 0 8px;
-        margin: 0;
-      }
-    }
-  }
-}
-</style>