提交

guoshipeng

2023-07-06 63c0ecf98f3705b4c70e4bafee5f325966a5777b

 src/views/main/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="dashboard-container" style="height:100%">
  <div class="dashboard-container" style="height: 100%">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside
        v-if="this.$store.state.aside"
@@ -7,7 +7,7 @@
        style="background-color: rgb(238, 241, 246)"
      >
        <!-- 切换城市框，改成模糊查询框 -->
        <div style="display:flex;margin-bottom:5px">
        <div style="display: flex; margin-bottom: 5px">
          <el-cascader
            v-model="newRegion"
            placeholder="选择省/市/区"
@@ -15,28 +15,45 @@
            :props="{ checkStrictly: true }"
            clearable
            change-on-select
            style="flex:1"
            style="flex: 1"
          />
          <div style="width: 20%;line-height: 30px;text-align: center;background: #409eff;color: #fff;margin: 5px;border-radius: 5px;cursor: pointer;font-size: 14px;" @click="getRegionApi">查询</div>
          <div
            style="
              width: 20%;
              line-height: 30px;
              text-align: center;
              background: #409eff;
              color: #fff;
              margin: 5px;
              border-radius: 5px;
              cursor: pointer;
              font-size: 14px;
            "
            @click="getRegionApi"
          >
            查询
          </div>
        </div>
        <div style="display:flex;margin-bottom:5px">
          <el-input v-model="searchText" placeholder="快速查询" clearable prefix-icon="el-icon-search" />
        <div style="display: flex; margin-bottom: 5px">
          <el-input
            v-model="searchText"
            placeholder="快速查询"
            clearable
            prefix-icon="el-icon-search"
          />
        </div>
        <el-menu
          :default-openeds="openeds"
          class="elwidth"
        >
        <el-menu :default-openeds="openeds" class="elwidth">
          <el-submenu
            v-for="(item,index) in defaultData"
            v-for="(item, index) in defaultData"
            :key="index"
            :index="(index+1).toString()"
            style="border-bottom:1px solid #eee;padding-left: 15px;"
            :index="(index + 1).toString()"
            style="border-bottom: 1px solid #eee; padding-left: 15px"
            class="abc"
          >
            <template
              slot="title"
              class="title"
              style="padding-left:20px!important"
              style="padding-left: 20px !important"
            >
              <!-- <i
                style="vertical-align: -2px;font-size: 20px;margin-right:5px"
@@ -44,32 +61,57 @@
              /> -->

              <span
                style="height:12px;display: inline-block;"
                style="height: 12px; display: inline-block"
                class="circle"
                :class="{'circle-0':item.state == 0,'circle-1':item.state == 1,'circle-2':item.state == 2,'circle-3':item.state == 3,'circle-4':item.state == 4,'circle-5':item.state == 5,'circle-6':item.state == 6}"
                :class="{
                  'circle-0': item.state == 0,
                  'circle-1': item.state == 1,
                  'circle-2': item.state == 2,
                  'circle-3': item.state == 3,
                  'circle-4': item.state == 4,
                  'circle-5': item.state == 5,
                  'circle-6': item.state == 6,
                }"
              />

              <!-- <el-button type="primary" circle /> -->
              {{ item.name }}
            </template>
            <el-menu-item
              v-for="(items,indexitem) in item.devices"
              v-for="(items, indexitem) in item.devices"
              :key="indexitem"
              style="display: flex;align-items: center;padding-right: 0;padding-left:35px"
              :index="(index+1 + '-' + indexitem + 1).toString()"
              style="
                display: flex;
                align-items: center;
                padding-right: 0;
                padding-left: 35px;
              "
              :index="(index + 1 + '-' + indexitem + 1).toString()"
              @click="jump(items)"
            >
              <!-- <div> -->
              <!-- <el-button type="primary" circle /> -->
              <span
                class="circle"
                :class="{'circle-0':items.state == 0,'circle-1':items.state == 1,'circle-2':items.state == 2,'circle-3':items.state == 3,'circle-4':items.state == 4,'circle-5':items.state == 5,'circle-6':items.state == 6}"
                :class="{
                  'circle-0': items.state == 0,
                  'circle-1': items.state == 1,
                  'circle-2': items.state == 2,
                  'circle-3': items.state == 3,
                  'circle-4': items.state == 4,
                  'circle-5': items.state == 5,
                  'circle-6': items.state == 6,
                }"
              />
              <span>{{ items.name }}</span>
              <i
                style="vertical-align: -2.5px;font-size: 20px;margin-left:5px"
                style="
                  vertical-align: -2.5px;
                  font-size: 20px;
                  margin-left: 5px;
                "
                class="iconfont iconfaxianzuobiao"
                @click="deviceDetail(items.mac,item,items,indexitem)"
                @click="deviceDetail(items.mac, item, items, indexitem)"
              />
              <!-- </div> -->
            </el-menu-item>
@@ -81,7 +123,7 @@
        <!-- <Map :mpid="monitorPointId" :rc="regionCode" /> -->
        <compoment
          :is="this.$store.state.type"
          v-if="weidu&&jingdu"
          v-if="weidu && jingdu"
          ref="child"
          :weidu="weidu"
          :jingdu="jingdu"
@@ -112,27 +154,27 @@
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
}
export default {
  components: {
    Map,
    LineChart,
    Charts,
    ReportForm
    ReportForm,
    // vLineChart
  },
  data() {
@@ -154,13 +196,13 @@
      jingdu: 0,
      weidu: 0,
      options: [],
      newRegion: []
      newRegion: [],
    }
  },
  computed: {
    changeCity() {
      return this.$store.state.regionCode
    }
    },
  },
  watch: {
    searchText(newVal, oldVal) {
@@ -173,8 +215,8 @@
        const newDefaultData = [
          {
            name: '',
            devices: []
          }
            devices: [],
          },
        ]
        let ke = 1
        this.defaultData.forEach((v, k, a) => {
@@ -227,7 +269,7 @@
        // this.newRegion = newVal
        this.getRegionApi()
      }
    }
    },
  },
  beforeCreate() {
    // this.$store.state.regionCode = this.$route.params.cName
@@ -250,12 +292,13 @@
    },
    // 父组件点击站点列表子组件跳转地图方法
    jump(items) {
      console.log(items)
      this.jumpData = []
      // const newLL = this.bd09togcj02(items.longitude, items.latitude)
      const newLL = [items.latitude, items.longitude]
      this.jumpData.push(newLL[0])
      this.jumpData.push(newLL[1])
      // console.log(this.jumpData)
      console.log(this.jumpData)
      this.$refs.child.jumpMap(this.jumpData)
    },
    // 跳转设备详情页
@@ -282,15 +325,15 @@
          device: items,
          macName: mac,
          indexs: indexs,
          items: [items.latitude, items.longitude]
          items: [items.latitude, items.longitude],
        },
        query: {
          monitorPointInfo: JSON.stringify(item),
          device: items,
          device: JSON.stringify(items),
          macName: mac,
          indexs: indexs,
          items: [items.latitude, items.longitude]
        }
          items: [items.latitude, items.longitude],
        },
      })
    },
    // 改变regionCode触发子组件重新请求五分钟接口功能
@@ -302,6 +345,8 @@
      this.getData()
      this.$refs.child.getRegionApiRequest()
      this.jump({ latitude: this.weidu, longitude: this.jingdu })
      console.log(this.weidu, '纬度')
      console.log(this.jingdu, '经度')
    },
    // 请求左侧设备数据
    getData() {
@@ -311,11 +356,11 @@
        method: 'get',
        params: {
          organizationId: this.organizationId,
          regionCode: this.$store.state.regionCode
        }
          regionCode: this.$store.state.regionCode,
        },
      })
        .then(res => {
          // console.log(res)
        .then((res) => {
          console.log(res, '123')
          this.monitorPointIds = []
          // console.log(this.monitorPointIds)
          this.weidu = res.data.monitorPoints[0].devices[0].latitude
@@ -334,7 +379,10 @@
            let devisesLength = 0
            if (this.defaultData[i].devices) {
              for (let j = 0; j < this.defaultData[i].devices.length; j++) {
                if (this.defaultData[i].devices.length > 1 && this.defaultData[i].devices[j].state === '0') {
                if (
                  this.defaultData[i].devices.length > 1 &&
                  this.defaultData[i].devices[j].state === '0'
                ) {
                  devisesLength++
                  // continue
                  if (devisesLength === this.defaultData[i].devices.length) {
@@ -355,7 +403,7 @@
          this.$store.state.monitorPointName = res.data.monitorPoints[0].name
          Bus.$emit('monitorPointIds', this.monitorPointIds) // 中央数据总线传递monitorPointIds
        })
        .catch(error => {
        .catch((error) => {
          console.log(error)
          // console.log('失败')
          this.defaultData = []
@@ -366,10 +414,10 @@
        url: '/organization/getMapPath',
        method: 'get',
        params: {
          organizationId: this.$store.state.orgId
        }
          organizationId: this.$store.state.orgId,
        },
      })
        .then(res => {
        .then((res) => {
          // console.log('请求主页getMapPath成功')
          // console.log(res.data)
          // console.log(res)
@@ -377,30 +425,30 @@
          for (let i = 0; i < data.length; i++) {
            this.options.push({
              value: data[i].provinceCode,
              label: data[i].provinceName
              label: data[i].provinceName,
            })
            this.options[i].children = []
            for (let j = 0; j < data[i].cities.length; j++) {
              this.options[i].children.push({
                value: data[i].cities[j].cityCode,
                label: data[i].cities[j].cityName
                label: data[i].cities[j].cityName,
              })
              this.options[i].children[j].children = []
              for (let k = 0; k < data[i].cities[j].areas.length; k++) {
                this.options[i].children[j].children.push({
                  value: data[i].cities[j].areas[k].areaCode,
                  label: data[i].cities[j].areas[k].areaName
                  label: data[i].cities[j].areas[k].areaName,
                })
              }
            }
          }
        })
        .catch(err => {
        .catch((err) => {
          // console.log('请求Region失败')
          console.log(err)
        })
      // console.log('请求Region结束')
    }
    },
    // 请求地图数据
    // getMap() {
    //   axios.get('http://47.99.64.149:8080/screen_api_v2/screen/newMap-page?areaCode=130900&accountId=223')
@@ -412,7 +460,7 @@
    //       console.log('失败')
    //     })
    // }
  }
  },
}
</script>

@@ -478,7 +526,7 @@
.title {
  padding: 0 20px;
}
.elwidth{
.elwidth {
  width: 400px;
}
</style>