water_affairs/pages/facility/index.vue

<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>
</template>

<script>
import list from "./list.vue";
import myMap from "./my-map.vue";

export default {
  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();
    },
    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;
                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;
            });
          });
      });
    },
    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();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.My_search {
  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;
}
</style>