cyzh-park/src/components/map/device-map/comps/device-list.vue

<template>
  <div class="container">
    <div style="padding:6px 15px 0">
      <more title='设备列表' nomore></more>
    </div>
    <div style="margin:0px 0px 15px">
      <tab @click="select" :list="tabList" width="4.4rem"></tab>
    </div>

    <div v-if="$isNotEmpty(list)" class="device" v-loading="loading" style="height:100%">
      <div class="card" style="padding:13px 20px;" @click.stop="clickDevice(item)" v-for="(item,index) in list"
        :key="index">
        <div class="left">
          <div class="name text-cut">
            {{handelData(item).name}}
          </div>

          <div class="address text-cut" style="display:flex">
            <span v-if="$isEmpty(handelData(item).latitude)||$isEmpty(handelData(item).longitude)"
              style="color:#fa3534;margin-right:4px">
              [未设置坐标]</span>
            <img v-else src="/img/icon/location2.png"
              style="width:16px;height:16px;margin-right:2px;margin-top:2px"></img>
            {{handelData(item).address}}
          </div>
        </div>

        <!-- 中间菜单 -->
        <div class="right">
          <div class="status">
            <span :style="{color:handelData(item).statusColor}">{{handelData(item).statusName}}</span>

            <el-dropdown>
              <i class="el-icon-s-operation" style="color:#3b8ff4;margin-left:10px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="dropdownClick(item,item1)" v-for="(item1,index1) in operationList"
                  :key="index1" :icon="item1.icon">
                  {{item1.name}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
          <div class="time">
            {{item.createTime | formatDate}}
          </div>
        </div>
      </div>
      <div class="pagination" v-if="page.pages!=1&&page.pages!=0" style="display:flex;justify-content: flex-end">
        <el-pagination @current-change="currentChange" small background :page-count="page.pages"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>

    <avue-empty v-else style="margin-top: 150px;"></avue-empty>


  </div>
</template>

<script>
  import dateTime from "@/util/dateTime.js"
  import tab from "@/components/tab.vue"
  import more from "@/components/more.vue"
  import {
    getList as getDoorDeviceList
  } from "@/api/device/doordevice.js"

  import {
    getList as getVideoDeviceList
  } from "@/api/device/gb/gbdevicechannel.js"
  export default {
    components: {
      tab,
      more
    },
    data() {
      return {
        loading: false,
        page: {
          current: 1,
          size: 10,
          pages: 0
        },
        activeIndex: 0,
        list: [],
        tabList: [{
            label: "门禁设备",
            value: 0
          },
          {
            label: "监控设备",
            value: 1
          }
        ],
        operationList: [{
            index: 0,
            icon: 'el-icon-view',
            name: '详情',
          },
          {
            index: 1,
            icon: 'el-icon-edit',
            name: '编辑'
          },
          {
            index: 2,
            icon: 'el-icon-delete',
            name: '删除'
          }
        ]
      }
    },
    computed: {
      handelData() {
        return item => {
          let obj = {
            name: '',
            statusName: '',
            statusColor: '',
            latitude: '',
            longitude: '',
            address: '',
          }
          if (this.activeIndex == 0) {
            obj.name = item.name
            obj.longitude = item.longitude
            obj.latitude = item.latitude
            obj.address = item.address


            if (item.deviceStatus == 0) {
              obj.statusName = '离线'
              obj.statusColor = '#fa3534'
            } else if (item.deviceStatus == 1) {
              obj.statusName = '在线'
              obj.statusColor = '#19be6b'
            } else {
              obj.statusName = '未知'
              obj.statusColor = '#82848a'
            }
          } else if (this.activeIndex == 1) {
            obj.name = item.name
            obj.longitude = item.longitude
            obj.latitude = item.latitude
            obj.address = item.address
            obj.statusColor = '#82848a'

            if (item.ptzType == 0) {
              obj.statusName = '未知'
            } else if (item.deviceStatus == 1) {
              obj.statusName = '球机'
            } else if (item.deviceStatus == 2) {
              obj.statusName = '半球'
            } else if (item.deviceStatus == 3) {
              obj.statusName = '固定枪机'
            } else if (item.deviceStatus == 4) {
              obj.statusName = '遥控枪机'
            }
          }
          return obj
        }
      }
    },
    created() {
      this.fetchDeviceList()
    },
    filters: {
      formatDate(date) {
        if (!date) {
          return "未知"
        }
        return dateTime.format(new Date(date), 'mm-dd HH:MM:SS')
      }
    },
    methods: {
      select(item) {
        this.activeIndex = item.value
        this.fetchDeviceList()
        this.$emit('select', this.activeIndex)
      },
      dropdownClick(item,item1) {
        let obj={
          name:item1.name,
          data:item
        }
        this.$emit('dropdownClick',obj)
      },
      clickDevice(data) {
        this.list.forEach(item => {
          item.id == data.id ? item.show = true : item.show = false
        })
        this.$emit('click', data)
      },
      async fetchDeviceList() {
        this.loading = true
        let data = {}
        if (this.activeIndex == 0) {
          data = (await getDoorDeviceList(this.page.current, this.page.size)).data.data
        } else if (this.activeIndex == 1) {
          data = (await getVideoDeviceList(this.page.current, this.page.size)).data.data
        }
        this.initData(data)
        this.loading = false
      },
      initData(data) {
        let list = data.records
        list.forEach(item => {
          item.show = false
        })
        this.list = list
        this.page.pages = data.pages
      },
      currentChange(current) {
        this.page.current = current
        this.fetchDeviceList()
      }
    }
  };
</script>

<style lang="scss" scoped>
  * {
    box-sizing: border-box;
  }

  /* 设备列表 */
  .container {
    border-top: 1px solid #f2f1ed;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    width: 22%;
    height: 100%;
  }

  .card {
    cursor: pointer;
    padding: 15px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .left {
      width: 65%
    }

    .center-menu {
      width: 100%;
      height: 100%
    }

    .right {
      width: 28%;
      text-align: right
    }
  }

  .card:active {
    transform: scale(1.009);
  }

  .pagination {
    padding-top: 20px;
  }

  .name {
    width: 100%;
    color: #272727;
    font-size: 15px;
    font-weight: 500
  }

  .status {
    font-size: 14px;
    color: #fa3534
  }

  .time {
    padding-top: 5px;
    font-size: 14px;
    font-weight: 300
  }

  .address {
    padding-top: 5px;
    font-size: 13px;
    font-weight: 300
  }
</style>