digital-agriculture-admin/src/views/agriculture/mapManager/index.vue

<template>
  <div class="map_manager">
    <div class="manager_content">
      <div class="menu_left">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="地块" name="area">
            <el-input v-model="landName" placeholder="搜索" suffix-icon="el-icon-search" clearable @input="getLand"></el-input>
            <el-menu default-active="activeIndex1">
              <el-menu-item v-for="(item, index) in arealist" :index="String(index + 1)" :key="index" class="flex jcsb aic" @click="moveTo(item, 1)">
                <div class="flex aic">
                  <i class="el-icon-menu"></i>{{ item.landName.length > 10 ? `${item.landName.substring(0, 10)}...` : item.landName }}
                </div>
                <el-tag v-if="item.landPath" type="success" size="small">已标记</el-tag>
                <el-tag v-else type="danger" size="small">未标记</el-tag>
              </el-menu-item>
            </el-menu>
          </el-tab-pane>
          <el-tab-pane label="设备" name="device">
            <el-select v-model="productId" placeholder="请选择产品" style="width: 100%; margin-bottom: 10px" clearable @change="getDevice">
              <el-option v-for="item in options" :key="item.productId" :label="item.productName" :value="item.productId"></el-option>
            </el-select>
            <el-input v-model="deviceName" placeholder="搜索" suffix-icon="el-icon-search" clearable @input="getDevice"></el-input>
            <el-menu default-active="activeIndex1">
              <el-menu-item
                v-for="(item, index) in deviceList"
                :index="String(index + 1)"
                :key="index"
                class="flex jcsb aic"
                @click="moveTo(item, 2)"
              >
                <div>
                  <img class="height-20 width-20 margin-right-6" :src="item.imgUrl.split(',')[1]" alt="" />{{
                    item.deviceName.length > 10 ? `${item.deviceName.substring(0, 10)}...` : item.deviceName
                  }}
                </div>
                <el-tag v-if="item.latitude" type="success" size="small">已标记</el-tag>
                <el-tag v-else type="danger" size="small">未标记</el-tag>
              </el-menu-item>
            </el-menu>
          </el-tab-pane>
        </el-tabs>
        <div class="flex jcc">
          <el-pagination
            small
            background
            layout="prev, pager, next"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="handlePagination"
            @prev-click="handlePagination"
            @next-click="handlePagination"
          >
          </el-pagination>
        </div>
      </div>
      <div class="map_right">
        <map-area :baseId="baseId" :moveTarget="moveTarget" @refreshList="refresh"></map-area>
      </div>
    </div>
    <base-select v-model="baseId" :type="2"></base-select>
  </div>
</template>

<script>
import MapArea from './MapArea.vue';
import { listDevice } from '@/api/iot/device';
import { listProduct } from '@/api/iot/product';
import { listLand } from '@/api/agriculture/land';
export default {
  components: {
    MapArea,
  },
  data() {
    return {
      activeIndex1: null,
      activeName: 'area',
      total: 0,
      queryParams: {
        pageSize: 12,
        pageNum: 1,
      },
      landName: null,
      productId: null,
      deviceName: null,
      options: [],
      arealist: [],
      deviceList: [],
      moveTarget: null,
      baseId: null,
    };
  },
  watch: {
    baseId: {
      handler: function (n) {
        if (n) {
          this.getLand();
          this.getDevice();
          this.getProduct();
        }
      },
    },
  },
  methods: {
    getLand() {
      listLand({ baseId: this.baseId, landName: this.landName, ...this.queryParams }).then((res) => {
        this.arealist = res.rows;
        this.total = res.total;
      });
    },
    getDevice() {
      listDevice({
        baseId: this.baseId,
        productId: this.productId,
        deviceName: this.deviceName,
        ...this.queryParams,
      }).then((res) => {
        this.deviceList = res.rows;
        this.total = res.total;
      });
    },
    getProduct() {
      listProduct({ baseId: this.baseId }).then((res) => {
        this.options = res.rows;
      });
    },
    handleClick(e) {
      this.queryParams.pageNum = 1;
      this.activeIndex1 = null;
      if (e.label == '地块') {
        this.getLand();
      } else if (e.label == '设备') {
        this.getDevice();
      }
    },
    handlePagination(e) {
      this.queryParams.pageNum = e;
      if (this.activeName == 'area') {
        this.getLand();
      } else {
        this.getDevice();
      }
    },
    moveTo(data, index) {
      if (index == 1) {
        if (data.landPath) {
          this.moveTarget = data.landId + '|' + new Date() + '|' + 1;
        } else {
          this.$message({
            message: '该地块还没绘制轮廓!',
            type: 'warning',
          });
        }
      } else if (index == 2) {
        if (data.longitude) {
          this.moveTarget = data.deviceId + '|' + new Date() + '|' + 2;
        } else {
          this.$message({
            message: '该设备还没标记!',
            type: 'warning',
          });
        }
      }
    },
    refresh() {
      this.queryParams.pageNum = 1;
      this.getLand();
      this.getDevice();
    },
  },
};
</script>

<style lang="scss" scoped>
.map_manager {
  padding: 10px;
  box-sizing: border-box;
  background: #edeef0;
  height: calc(100vh - 84px);
  user-select: none;
  .manager_content {
    height: 100%;
    width: 100%;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    .menu_left ::v-deep {
      width: 300px;
      padding: 0 10px;
      box-sizing: border-box;
      background: #fff;
      .el-tabs {
        height: calc(100% - 40px);
        .el-tabs__header {
          .el-tabs__nav {
            height: 45px;
            line-height: 45px;
          }
          .el-tabs__nav-wrap::after {
            height: 1px;
          }
        }
      }
    }
    .map_right {
      width: calc(100% - 300px);
      overflow: hidden;
    }
  }
  ::v-deep {
    & .el-menu {
      border-right: none;
      width: 100%;
      margin-top: 10px;
    }
    & .el-menu-item {
      height: 40px;
      line-height: 40px;
      padding: 0 !important;
    }
  }
}
</style>