fix:查询修改和表格添加

quanyawei

2023-10-13 64b642cfbe4f34706ed40af77e51079ddf919d54

 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,27 +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"
        >
        <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"
@@ -43,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;justify-content: space-between;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-right:10px;margin-left:auto"
                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>
@@ -80,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"
@@ -101,6 +144,7 @@
<script>
// import Cookies from 'js-cookie'
import '@/assets/icon/iconfont.css'
import _ from 'lodash'
// import $ from 'jquery'
import Map from '@/components/Wind/Map.vue'
import LineChart from '@/components/Echarts/LineChart'
@@ -163,60 +207,33 @@
  },
  watch: {
    searchText(newVal, oldVal) {
      // console.log(oldVal)
      console.log(typeof (newVal))
      // console.log(newVal)
      // defaultData是站点名，包含设备
      // this.openeds="['1','2','3']"
      if (newVal !== oldVal) {
        // let that = this
        const newDefaultData = [
          {
            name: '',
            devices: []
          }
        ]
        let ke = 1
        this.defaultData.forEach((v, k, a) => {
          for (let i = 0; i < v.devices.length; i++) {
            // console.log(v.devices[i].name)
            if (v.devices[i].name.match(newVal)) {
              // console.log(v)
              // console.log('匹配')
              this.openeds.push((ke++).toString())
              // return value.devices[i].name.match(newVal)
              newDefaultData[k].name = this.defaultData[k].name
              newDefaultData[k].devices.push(v.devices[i])
              // this.$set(newDefaultData[k], 'name', this.defaultData[k].name)
              // this.$set(newDefaultData[k], 'devices', v.devices[i])
              // console.log(newDefaultData)
            } else {
              // console.log('不匹配')
              // return value.name.match(newVal)
            }
            // console.log(newDefaultData)
          }
        })
        // const newDevices = this.defaultData.filter(value => {
        // const newDevices = this.defaultData.filter(value => {
        //   for (let i = 0; i < value.devices.length; i++) {
        //     console.log(value.devices[i].name)
        //     if (value.devices[i].name.match(newVal)) {
        //       console.log('匹配')
        //       this.openeds.push((ke++).toString())
        //       return value.devices[i].name.match(newVal)
        //       this.newDefaultData.push(value.devices[i].name.match(newVal))
        //     } else {
        //       console.log('不匹配')
        //       return value.name.match(newVal)
        //     }
        //   }
        // })
        // console.log(this.openeds)
        this.defaultData = newDefaultData
      }
      const copyData = _.cloneDeep(this.defaultDataMiddle)
      this.defaultData = copyData
      this.openeds = []
      const arr = []
      let ke = 1
      const jList = []
      if (newVal === '') {
        this.defaultData = this.defaultDataMiddle
        this.defaultData = copyData
        this.openeds = []
        return
      }
      if (newVal !== oldVal) {
        for (var i = 0; i < this.defaultData.length; i++) {
          for (var j = 0; j < this.defaultData[i].devices.length; j++) {
            if (this.defaultData[i].devices[j].name.indexOf(newVal.toUpperCase()) >= 0) {
              this.openeds.push((ke++).toString())
              jList.push(this.defaultData[i].devices[j])
            }
          }

          console.log(arr)
        }
        this.defaultData = jList
        console.log(this.defaultData)
      }
    },
    changeCity(newVal, oldVal) {
@@ -236,6 +253,7 @@
    this.getRegion()
  },
  methods: {

    // 百度经纬度转高德经纬度
    bd09togcj02(bd_lon, bd_lat) {
      var x_pi = (3.14159265358979324 * 3000.0) / 180.0
@@ -249,16 +267,18 @@
    },
    // 父组件点击站点列表子组件跳转地图方法
    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)
    },
    // 跳转设备详情页
    deviceDetail(mac, item, items, indexs) {
      // this.$message.warning('该功能优化中，暂不支持开放')
      // console.log('这是传输过去的值')
      // console.log(mac)
      // console.log(item)
@@ -285,7 +305,7 @@
        },
        query: {
          monitorPointInfo: JSON.stringify(item),
          device: items,
          device: JSON.stringify(items),
          macName: mac,
          indexs: indexs,
          items: [items.latitude, items.longitude]
@@ -301,20 +321,22 @@
      this.getData()
      this.$refs.child.getRegionApiRequest()
      this.jump({ latitude: this.weidu, longitude: this.jingdu })
      console.log(this.weidu, '纬度')
      console.log(this.jingdu, '经度')
    },
    // 请求左侧设备数据
    getData() {
      this.monitorPointIds = []
      this.$request({
        url: '/monitorPoint/queryMonitorPoints',
        url: '/monitorPoint/queryMonitorPointsState',
        method: 'get',
        params: {
          organizationId: this.organizationId,
          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
@@ -333,7 +355,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) {
@@ -354,7 +379,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 = []
@@ -368,7 +393,7 @@
          organizationId: this.$store.state.orgId
        }
      })
        .then(res => {
        .then((res) => {
          // console.log('请求主页getMapPath成功')
          // console.log(res.data)
          // console.log(res)
@@ -394,7 +419,7 @@
            }
          }
        })
        .catch(err => {
        .catch((err) => {
          // console.log('请求Region失败')
          console.log(err)
        })
@@ -477,4 +502,7 @@
.title {
  padding: 0 20px;
}
.elwidth {
  width: 400px;
}
</style>