地图修改

pages/facility/index.vue

@@ -1,168 +1,211 @@
 <template>
-    <view>
-        <cu-custom ref="custom" id="custom"
-            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
-            :isBack="isBack">
-            <block slot="backText">返回</block>
-            <block slot="content">
-                设备中心
-            </block>
-        </cu-custom>
-        <My_search :heightReduction="heightReduction" ref="Search" @onFilter="onFilter" @startSearch="startSearch"
-            :filter="filter">
-            <template slot="left">
-                <view class="change" hover-class="navigator-hover" @click="changePage(PageCur == '设备列表' ? '设备地图' : '设备列表')">
-                    {{ PageCur == '设备列表' ? '列表' : '地图' }}
-                </view>
-            </template>
-        </My_search>
-        <list ref="设备列表" :tabHeight="tabHeight" :empty="empty" :list="list" v-show="PageCur == '设备列表'" />
-        <my-map ref="设备地图" :tabHeight="tabHeight" :markers="markers" v-show="PageCur == '设备地图'" />
-    </view>
+  <view>
+    <cu-custom
+      ref="custom"
+      id="custom"
+      bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
+      :isBack="isBack"
+    >
+      <block slot="backText">返回</block>
+      <block slot="content"> 设备中心 </block>
+    </cu-custom>
+    <My_search
+      :heightReduction="heightReduction"
+      ref="Search"
+      @onFilter="onFilter"
+      @startSearch="startSearch"
+      :filter="filter"
+    >
+      <template slot="left">
+        <view
+          class="change"
+          hover-class="navigator-hover"
+          @click="changePage(PageCur == '设备列表' ? '设备地图' : '设备列表')"
+        >
+          {{ PageCur == "设备列表" ? "地图" : "列表" }}
+        </view>
+      </template>
+    </My_search>
+    <list
+      ref="设备列表"
+      :tabHeight="tabHeight"
+      :empty="empty"
+      :list="list"
+      v-show="PageCur == '设备列表'"
+    />
+    <my-map
+      ref="设备地图"
+      :tabHeight="tabHeight"
+      :markers="markers"
+      v-show="PageCur == '设备地图'"
+    />
+  </view>
 </template>
 
 <script>
-import list from "./list.vue"
+import list from "./list.vue";
 import myMap from "./my-map.vue";
 
 export default {
-    components: { list, myMap },
-    props: {
-        tabHeight: Number
+  components: { list, myMap },
+  props: {
+    tabHeight: Number,
+  },
+  name: "facility",
+  data() {
+    return {
+      condition: "",
+      empty: false,
+      isBack: true,
+      uninitialized: true,
+      PageCur: "设备列表",
+      list: [],
+      markers: [],
+      where: {
+        condition: "",
+        status: "",
+      },
+      filter: [
+        {
+          label: "状态",
+          list: [
+            {
+              status: "全部",
+              value: "",
+            },
+            {
+              status: "在线",
+              value: "在线",
+            },
+            {
+              status: "离线",
+              value: "离线",
+            },
+            {
+              status: "禁用",
+              value: "禁用",
+            },
+          ],
+          key: "status",
+          selectKey: "value",
+          showKey: "status",
+          default: "0",
+          selectIndex: 1,
+        },
+      ],
+      heightReduction: 0,
+    };
+  },
+  onLoad(options) {
+    if (options.status) this.where.status = options.status;
+    this.getlist();
+    this.$Http.updateFacilityList = this.getlist.bind(this);
+    setTimeout(() => this.loadElement(), 100);
+  },
+  methods: {
+    init() {
+      this.getlist();
+      this.PageCur = "设备地图";
+      this.isBack = false;
+      this.heightReduction = 45;
+      setTimeout(
+        () =>
+          this.loadElement(true, {
+            mode: "minus",
+            num: 50,
+          }),
+        100
+      );
+    },
+    changePage(page) {
+      this.PageCur = page;
+      this.loadElement();
     },
-    name: "facility",
-    data() {
-        return {
-            condition: "",
-            empty: false,
-            isBack: true,
-            uninitialized: true,
-            PageCur: "设备列表",
-            list: [],
-            markers: [],
-            where: {
-                condition: "",
-                status: ""
+    loadElement(forcedUpdating, data) {
+      let page = this.$refs[this.PageCur];
+      if (page.uninitialized || forcedUpdating) page.init();
+    },
+    getlist() {
+      return new Promise((resolve) => {
+        this.$Http
+          .basic({
+            id: 20230711144102,
+            content: {
+              nocache: true,
+              pageNumber: 1,
+              pageSize: 99999,
+              where: this.where,
             },
-            filter: [{
-                label: "状态",
-                list: [{
-                    status: '全部',
-                    value: ""
-                }, {
-                    status: '在线',
-                    value: "在线"
-                }, {
-                    status: '离线',
-                    value: "离线"
-                }, {
-                    status: '禁用',
-                    value: "禁用"
-                }],
-                key: "status",
-                selectKey: "value",
-                showKey: 'status',
-                default: "0",
-                selectIndex: 1,
-            }],
-            heightReduction: 0
-        }
+          })
+          .then((res) => {
+            console.log("设备列表", res);
+            if (this.cutoff(res.msg)) return;
+            resolve(res.msg == "成功");
+            this.empty = res.data.length == 0;
+            this.$refs.Search.onFinish();
+            this.markers = res.data
+              .filter((v) => v.latitude)
+              .map((v) => {
+                v.id = v.w_deviceid - 0;
+                v.title = v.devicename;
+                v.label = {
+                  content: v.devicename,
+                  textAlign: "center",
+                  bgColor:"#fff"
+                };
+                if (this.usePort == "h5") {
+                  v.iconPath = require("../../static/img/location.png");
+                }
+                v.customCallout = { display: "BYCLICK", anchorY: -10 };
+                return v;
+              });
+            this.list = res.data.map((v) => {
+              switch (v.status) {
+                case "在线":
+                  v.bgColor = "#3C9CFF";
+                  break;
+                case "禁用":
+                  v.bgColor = "#F56C6C";
+                  break;
+                default:
+                  v.bgColor = "#F9AE3D";
+                  break;
+              }
+              return v;
+            });
+          });
+      });
     },
-    onLoad(options) {
-        if (options.status) this.where.status = options.status;
-        this.getlist();
-        this.$Http.updateFacilityList = this.getlist.bind(this);
-        setTimeout(() => this.loadElement(), 100)
+    startSearch(condition) {
+      if (condition == this.where.condition) return;
+      this.where.condition = condition;
+      this.getlist();
     },
-    methods: {
-        init() {
-            this.getlist();
-            this.PageCur = '设备地图';
-            this.isBack = false;
-            this.heightReduction = 45
-            setTimeout(() => this.loadElement(true, {
-                mode: 'minus',
-                num: 50
-            }), 100)
-        },
-        changePage(page) {
-            this.PageCur = page;
-            this.loadElement()
-        },
-        loadElement(forcedUpdating, data) {
-            let page = this.$refs[this.PageCur];
-            if (page.uninitialized || forcedUpdating) page.init();
-        },
-        getlist() {
-            return new Promise((resolve) => {
-                this.$Http.basic({
-                    "id": 20230711144102,
-                    "content": {
-                        nocache: true,
-                        "pageNumber": 1,
-                        "pageSize": 99999,
-                        where: this.where
-                    }
-                }).then(res => {
-                    console.log("设备列表", res)
-                    if (this.cutoff(res.msg)) return;
-                    resolve(res.msg == '成功')
-                    this.empty = res.data.length == 0;
-                    this.$refs.Search.onFinish();
-                    this.markers = res.data.filter(v => v.latitude).map(v => {
-                        v.id = v.w_deviceid - 0;
-                        v.title = v.devicename;
-                        if (this.usePort == 'h5') v.iconPath = require("../../static/img/location.png");
-                        v.customCallout = { display: 'BYCLICK', anchorY: -10 }
-                        return v
-                    });
-                    this.list = res.data.map(v => {
-                        switch (v.status) {
-                            case '在线':
-                                v.bgColor = "#3C9CFF";
-                                break;
-                            case '禁用':
-                                v.bgColor = "#F56C6C";
-                                break;
-                            default:
-                                v.bgColor = "#F9AE3D";
-                                break;
-                        }
-                        return v
-                    })
-                })
-            })
-        },
-        startSearch(condition) {
-            if (condition == this.where.condition) return;
-            this.where.condition = condition;
-            this.getlist()
-        },
-        onFilter(where) {
-            console.log("开始筛选", where)
-            where.condition = this.where.condition;
-            this.where = where;
-            this.getlist()
-        },
-    }
-}
+    onFilter(where) {
+      console.log("开始筛选", where);
+      where.condition = this.where.condition;
+      this.where = where;
+      this.getlist();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 /deep/.My_search {
-    padding-left: 0 !important;
+  padding-left: 0 !important;
 }
 
 .change {
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    margin-left: 5px;
-    font-size: 14px;
-    color: #FFFFFF;
-    border-radius: 4px;
-    padding: 0 10px;
-    margin-right: 5px;
-    border-radius: 4px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  margin-left: 5px;
+  font-size: 14px;
+  color: #ffffff;
+  border-radius: 4px;
+  padding: 0 10px;
+  margin-right: 5px;
+  border-radius: 4px;
 }
 </style>