xx_sw_dp/src/components/Dialog/mapDialog.vue

<template>
  <div>
    <div class="total222" style="height:770px">
      <a-tabs v-model:activeKey="activeKey" @change="changeTab">
        <a-tab-pane key="1">
          <template #tab>
            <span> 测站信息 </span>
          </template>
          <div style="display:flex;flex-direction: column;">
            <div>
              <div class="map-dialog-title">
                <img src="../../assets/images/weatheHome/icon-title.png" />
                基本信息
              </div>
              <div>
                <a-row style="min-height: 100px; padding: 20px">
                  <a-col :span="8" v-for="(item, index) in detailInfo?.basic_info" :key="index + 1">
                    <div style="display: flex">
                      <a-row style="width: 100%; height: 50px">
                        <a-col :span="8">
                          <div style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-align: center;
                            width: 100%;
                            height: 100%;
                            background-color: #032448;
                            border: 1px solid #014a9b;
                          ">{{ Object.keys(item)[0] }}</div>
                        </a-col>
                        <a-col :span="16">
                          <div style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-align: center;
                            width: 100%;
                            height: 100%;
                            border: 1px solid #014a9b;
                          ">{{ Object.values(item)[0] }}</div>
                        </a-col>
                      </a-row>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
            <div style="flex:1">
              <div class="map-dialog-title mg-10">
                <img src="../../assets/images/weatheHome/icon-title.png" />
                监测信息
                <div class="map-dialog-tabp-list" v-if="detailInfo.st_type != 6">
                  <!-- <div class="active-tabp">
                  杨村温度
                </div> -->
                  <div style="font-size: 14px; color: #bed2ff" v-for="(item, index) in detailInfo.sensor"
                    :key="item.senid" @click="setTabColor(item, index + 1)">{{ item.sensor_name }}</div>
                </div>
              </div>
              <div class="tabp-conetnt">
                <div class="tabp-conetnt-left hconetnt" v-if="detailInfo.st_type == 6">
                  <a-collapse v-model:activeKey="activeMenu.activeKey" :bordered="false">
                    <template #expandIcon="{ isActive }">
                      <img class="left-collapse-icon"
                        :style="{ transform: `rotate(${isActive ? '0' : '-90'}deg)`, marginTop: '-12px' }"
                        src="../../assets/images/weatheHome/icon-bottom.png" />
                    </template>
                    <a-collapse-panel :key="index + 1" :header="ke" :style="activeMenu.customStyle"
                      v-for="(item, ke, index) in tanshuiList">
                      <ul class="collapse-ul">
                        <li :class="''" v-for="(it, index2) in item.value" :key="it.senid"
                          @click="setTabColor2(it, index, index2)">{{
        it.sensor_name
      }}</li>
                      </ul>
                    </a-collapse-panel>
                    <!-- <a-collapse-panel key="2" header="4m 灌木层" :style="activeMenu.customStyle">
                      <ul class="collapse-ul">
                        <li>温度</li>
                        <li>湿度</li>
                        <li class="active">土壤热通量</li>
                      </ul>
                    </a-collapse-panel> -->
                  </a-collapse>
                </div>
                <div class="tabp-conetnt-right">
                  <!-- <div class="tabp-right-top">
                    <div>PID：<span>4223456</span></div>
                    <div>感器名称：<span>传感器1</span></div>
                    <div>入库点号：<span>4223456</span></div>
                    <div>基值：<span>4223456</span></div>
                    <div>最大值：<span>4223456</span></div>
                    <div>最小值：<span>4223456</span></div>
                    <div>精度：<span>4223456</span></div>
                  </div> -->
                  <div class="tabp-right-query">
                    <!-- <div style="margin-right: 10px">
                      <span class="active">近一周</span>
                      <span>近一月</span>
                      <span>近三月</span>
                      <span>近半年</span>
                    </div> -->
                    <a-radio-group v-model:value="value1" button-style="solid"
                      style="margin-left: 30px; margin-right: 20px" @change="handleChange">
                      <a-radio-button value="24">近24h</a-radio-button>
                      <a-radio-button value="0.5">近一周</a-radio-button>
                      <a-radio-button value="1">近一月</a-radio-button>
                      <a-radio-button value="2">近三月</a-radio-button>
                      <a-radio-button value="3">近半年</a-radio-button>
                    </a-radio-group>
                    <div>
                      <a-range-picker :disabled-date="disabledDate" v-model:value="searchTime"
                        valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" />
                    </div>
                    <div>
                      <a-button type="primary" @click="search(senid, sensor_name, dchar)">开始查询</a-button>
                    </div>
                  </div>
                  <div class="tabp-right-query-echarts" id='ebox' v-show="!showNodata" :style="{
        flex: '1', width: '900px', height: '460px', zoom: `${1 / zooms}`, transform: `scale(${zooms})`, transformOrigin: '0 0'
      }
        ">
                    <div id="query-echarts" :style="{
        width: '100%',
        height: '100%',
      }">
                    </div>
                  </div>
                  <div v-show="showNodata" style="width: 100%; height: 310px; text-align: center">
                    <img class="none-data" src="../../assets/images/weatheHome/none-data.png" />
                  </div>
                </div>
              </div>
            </div>
          </div>


        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span> 图片 </span>
          </template>
          <div class="tabp-conetnt">
            <div class="tabp-conetnt-left">
              <a-collapse v-model:activeKey="activeMenu.activeKey" :bordered="false">
                <template #expandIcon="{ isActive }">
                  <img class="left-collapse-icon"
                    :style="{ transform: `rotate(${isActive ? '0' : '-90'}deg)`, marginTop: '-12px' }"
                    src="../../assets/images/weatheHome/icon-bottom.png" />
                </template>
                <a-collapse-panel :key="index + 1" v-for="(item, key, index) in imgtree" :header="key"
                  :style="activeMenu.customStyle">
                  <ul class="collapse-ul">
                    <li v-for="(it, index2) in item" :key="item.id" @click="setTabColor3(it, index, index2)">{{
        it.img_name
      }}</li>
                  </ul>
                </a-collapse-panel>
                <img v-if="imgtree.length == 0" style="width: 160px; margin: 0 auto;" lass="none-data"
                  src="../../assets/images/weatheHome/none-data.png" />
              </a-collapse>
            </div>
            <div class="tabp-conetnt-right">
              <a-carousel arrows style="width:100%;position: absolute;top:0;" :beforeChange="setcolor" ref="varousel">
                <template #prevArrow>
                  <div class="custom-slick-arrow" style="z-index: 9999; left: -30px">
                    <left-circle-outlined />
                  </div>
                </template>
                <template #nextArrow>
                  <div class="custom-slick-arrow" style="right: -30px">
                    <right-circle-outlined />
                  </div>
                </template>
                <div v-for="(item, index) in imgList"><img class="carousel-img" :src="VITE_GLOB_BASE_IMG + item.img_url"
                    :key="index + 1" /></div>
                <!-- <div>
                    <img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" />
                  </div>
                  <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div>
                  <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div> -->
              </a-carousel>
              <img v-if="imgList.length == 0" style="width: 300px; margin: 0 auto;" lass="none-data"
                src="../../assets/images/weatheHome/none-data.png" />
              <div v-if="imgList.length != 0" class="carousel-title">
                <div style="margin-right: 50px;">{{ imgname }}</div>
                <div>{{ imgindex }} / {{ imgList.length }}</div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #tab>
            <span> 视频监控 </span>
          </template>
          <div class="tabp-conetnt">
            <div class="tabp-conetnt-left">
              <a-collapse v-model:activeKey="activeMenu.activeKey" :bordered="false">
                <template #expandIcon="{ isActive }">
                  <img class="left-collapse-icon"
                    :style="{ transform: `rotate(${isActive ? '0' : '-90'}deg)`, marginTop: '-12px' }"
                    src="../../assets/images/weatheHome/icon-bottom.png" />
                </template>
                <a-collapse-panel :key="index + 1" v-for="(item, key, index) in videoTree" :header="key"
                  :style="activeMenu.customStyle">
                  <ul class="collapse-ul">
                    <li v-for="(it, index2) in item" :key="item.id" @click="setTabColor4(it, index, index2)">{{
        it.img_name
      }}</li>
                  </ul>
                </a-collapse-panel>
                <img v-if="videoTree.length == 0" style="width: 160px; margin: 0 auto;" lass="none-data"
                  src="../../assets/images/weatheHome/none-data.png" />
              </a-collapse>
            </div>
            <div class="tabp-conetnt-right">
              <a-carousel arrows style="width:100%;position: absolute;top:0;" :beforeChange="setcolorV" ref="varousel">
                <template #prevArrow>
                  <div class="custom-slick-arrow" style="z-index: 9999; left: -30px">
                    <left-circle-outlined />
                  </div>
                </template>
                <template #nextArrow>
                  <div class="custom-slick-arrow" style="right: -30px">
                    <right-circle-outlined />
                  </div>
                </template>
                <div v-for="(item, index) in videoList"><img class="carousel-img" :src="VITE_GLOB_BASE_IMG + item.img_url"
                    :key="index + 1" /></div>
                <!-- <div>
                    <img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" />
                  </div>
                  <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div>
                  <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div> -->
              </a-carousel>
              <img v-if="videoList.length == 0" style="width: 300px; margin: 0 auto;" lass="none-data"
                src="../../assets/images/weatheHome/none-data.png" />
              <div v-if="videoList.length != 0" class="carousel-title">
                <div style="margin-right: 50px;">{{ imgname1 }}</div>
                <div>{{ imgindex1 }} / {{ videoList.length }}</div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <template #renderTabBar="{ DefaultTabBar, ...props }">
          <component :is="DefaultTabBar" v-bind="props" :style="{ zIndex: 1, textAlign: 'center' }" />
        </template>
      </a-tabs>
    </div>
  </div>
</template>
<script setup>
import { reactive, getCurrentInstance, onMounted, ref, watch, toRef, nextTick } from 'vue';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { getMonitorInfo } from '/@/api/swHome/index';
import moment from 'moment';
import $ from 'jquery';
import eventBus from '/@/utils/eventBus';
import { getAppEnvConfig } from '/@/utils/env';
import { addResizeListener } from '/@/utils/event';

const { VITE_GLOB_BASE_IMG } = getAppEnvConfig()
let zooms = ref('')
eventBus.on('progressHeight', (e) => {
  if (e > 1000 && e < 1200) {
    setBox(1, e)
  } else if (e > 1200) {
    setBox(2, e)
  } else {
    setBox(3, e)
  }
  zooms.value = document.getElementsByClassName("ant-modal")[0].style.zoom
  chart.dispose();
  setTimeout(() => {
    chart = echarts.init(document.getElementById('query-echarts'));
    echarts1();
  }, 400)

});
const setBox = (type, e) => {
  // alert(e)
  if (props.detailInfo.st_type == 6) {
    $('#ebox').css({ height: '440px', width: '1000px' })
    if (type == 3 && e == `calc(100% - 500px)`) {
      $('#ebox').css({ height: '440px', width: '1650px' })
    } else {
      $('#ebox').css({ height: '440px', width: '1000px' })
    }
  } else {
    $('#ebox').css({ height: '440px', width: '1200px' })
    if (type == 3 && e == `calc(100% - 500px)`) {
      $('#ebox').css({ height: '440px', width: '1900px' })
    } else {
      $('#ebox').css({ height: '440px', width: '1200px' })
    }
  }
}
const props = defineProps({
  detailInfo: Object,
  title: String
});
const tanshuiList = ref({});
const senid = ref();
const sensor_name = ref();
const dchar = ref();
// 图片展示
const imgList = ref([])
const imgtree = ref({})
const videoList = ref([])
const videoTree = ref({})
const imgname = ref('')
const imgindex = ref(1)
const imgname1 = ref('')
const imgindex1 = ref(1)
watch(
  () => props.detailInfo,
  (newV) => {
    console.log(newV)
    senid.value = newV.sensor[0].senid;
    sensor_name.value = newV.sensor[0].sensor_name;
    dchar.value = newV.sensor[0].dchar;
    imgList.value = []
    videoList.value = []
    imgtree.value = []
    videoTree.value = []
    // 图片
    if (newV.pic_annex.length > 0) {
      console.log('初始数据',newV.pic_annex)
      let arr1 = JSON.parse(JSON.stringify(newV.pic_annex))
      arr1.forEach(i => {
        let arr = i.img_url.split('/')
        console.log(i)
        // i.type = arr[arr.length - 2]
        let obj = JSON.parse(JSON.stringify(i))
        i.type = obj.img_name
        i.img_name = arr[arr.length - 1]
      })
      imgList.value = arr1
      let obj = {}
      arr1.forEach((i, index) => {
        i.id = index + 1
        if (obj.hasOwnProperty(i.type)) {
          obj[i.type].push(i);
        } else {
          obj[i.type] = [];
          obj[i.type].push(i);
        }
      })
      imgtree.value = obj
    }
    if (newV.video.length > 0) {
      console.log('初始数据',newV.video)
      let arr1 = JSON.parse(JSON.stringify(newV.video))
      arr1.forEach(i => {
        let arr = i.img_url.split('/')
        console.log(i)
        // i.type = arr[arr.length - 2]
        let obj = JSON.parse(JSON.stringify(i))
        i.type = obj.img_name
        i.img_name = arr[arr.length - 1]
      })
      videoList.value = arr1
      let obj = {}
      arr1.forEach((i, index) => {
        i.id = index + 1
        if (obj.hasOwnProperty(i.type)) {
          obj[i.type].push(i);
        } else {
          obj[i.type] = [];
          obj[i.type].push(i);
        }
      })
      videoTree.value = obj
    }
    if (newV.st_type == 6) {
      let obj = {};
      newV.sensor?.forEach((i) => {
        if (obj.hasOwnProperty(i.ts_layer)) {
          obj[i.ts_layer].value.push(i);
        } else {
          obj[i.ts_layer] = {};
          obj[i.ts_layer].id = null;
          obj[i.ts_layer].value = [];
          obj[i.ts_layer].value.push(i);

          if (i.ts_layer.includes('m')) {
            obj[i.ts_layer].id = Number(i.ts_layer.split('m')[0])
          } else {
            obj[i.ts_layer].id = 0
          }
        }
      });
      // console.log(obj, 89);
      let sortedObjKeys = Object.keys(obj).sort((a, b) => {
        return obj[b].id - obj[a].id
      })
      let arr = {}
      sortedObjKeys.forEach(j => {
        arr[j] = obj[j]
      })
      tanshuiList.value = arr;
      // console.log(sortedObjKeys,{...arr}, 89);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const varousel = ref('')
const nowTime = ref('');
onMounted(() => {
  setTimeout(() => {
    zooms.value = document.getElementsByClassName("ant-modal")[0].style.zoom
  }, 0);
  // setTimeout(() => {
  //   
  // },0)
  $(`.map-dialog-tabp-list div:nth-child(1)`).css({
    background: 'linear-gradient(0deg, #00f7ff 0%, #007ff6 100%)',
    '-webkit-background-clip': 'text',
    '-webkit-text-fill-color': 'transparent',
    'background-clip': 'text',
    'text-fill-color': 'transparent',
  });
  nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss');
  searchTime.value = [moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  search(senid.value, sensor_name.value, dchar.value);
  // 
  console.log(varousel.value);
});
const xdata = ref([]);
const ydata = ref([]);
const showNodata = ref(false);
// id,名字,单位
const search = (id, name, dw) => {
  senid.value = id;
  sensor_name.value = name;
  dchar.value = dw;
  xdata.value = [];
  ydata.value = [];
  getMonitorInfo({ senid: senid.value, start_time: searchTime.value[0], end_time: searchTime.value[1] }).then((res) => {
    if (res.code == 200 && res.data.length > 0) {
      showNodata.value = false;
      res.data.forEach((item) => {
        xdata.value.push(item.time);
        ydata.value.push(item.factv);
      });
    } else {
      showNodata.value = true;
    }
    // alert(props.title)
    // props.title.split('（')[0]+
    tableTitle.value = name + '过程线' + '(' + moment(searchTime.value[0]).format('MM月DD日HH时') + '-' + moment(searchTime.value[1]).format('MM月DD日HH时') + ')'
    echarts1();
  });
};

const disabledDate = (current) => {
  return current > moment().valueOf();
};
const changeTab = () => {

}
const setcolor = (from, to) => {
  console.log(from)
  console.log(to)
  // $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
  // // console.log(imgList.value,2233)
  imgname.value = imgList.value[to].img_name
  imgindex.value = to + 1
}
const setcolorV = (from, to) => {
  console.log(from)
  console.log(to)
  // $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
  // // console.log(imgList.value,2233)
  imgname1.value = videoList.value[to].img_name
  imgindex1.value = to + 1
}
const setTabColor = (item, index) => {
  // console.log(item,87)
  senid.value = item.senid;
  sensor_name.value = item.sensor_name;
  dchar.value = item.dchar;
  $('.map-dialog-tabp-list div').css({ background: 'transparent', color: '#BED2FF', '-webkit-text-fill-color': '#BED2FF' });
  $(`.map-dialog-tabp-list div:nth-child(${index})`).css({
    background: 'linear-gradient(0deg, #00f7ff 0%, #007ff6 100%)',
    '-webkit-background-clip': 'text',
    '-webkit-text-fill-color': 'transparent',
    'background-clip': 'text',
    'text-fill-color': 'transparent',
  });
  // console.log(senid.value,sensor_name.value,dchar.value)
  search(senid.value, sensor_name.value, dchar.value);
};
const setTabColor2 = (item, index, index2) => {
  senid.value = item.senid;
  sensor_name.value = item.sensor_name;
  dchar.value = item.dchar;
  $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
  $(`.ant-collapse .ant-collapse-item:nth-child(${index + 1}) li:nth-child(${index2 + 1})`).css({ background: 'rgba(0, 94, 182, 0.24)' });
  // console.log(senid.value,sensor_name.value,dchar.value)
  search(senid.value, sensor_name.value, dchar.value);
};
const setTabColor3 = (item, index, index2) => {
  imgname.value = item.img_name
  $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
  $(`.ant-collapse .ant-collapse-item:nth-child(${index + 1}) li:nth-child(${index2 + 1})`).css({ background: 'rgba(0, 94, 182, 0.24)' });
  // console.log(senid.value,sensor_name.value,dchar.value)
  varousel.value.goTo(item.id - 1)
};
const setTabColor4 = (item, index, index2) => {
  imgname1.value = item.img_name
  $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
  $(`.ant-collapse .ant-collapse-item:nth-child(${index + 1}) li:nth-child(${index2 + 1})`).css({ background: 'rgba(0, 94, 182, 0.24)' });
  // console.log(senid.value,sensor_name.value,dchar.value)
  varousel.value.goTo(item.id - 1)
};
const handleChange = () => {
  searchTime.value = [];
  // console.log(value1.value)
  if (value1.value == 0.5) {
    searchTime.value = [moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  } else if (value1.value == 1) {
    searchTime.value = [moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  } else if (value1.value == 2) {
    searchTime.value = [moment().subtract(3, 'month').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  } else if (value1.value == 3) {
    searchTime.value = [moment().subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  } else if (value1.value == 24) {
    searchTime.value = [moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
  }
};

const value1 = ref('24');
const searchTime = ref([]);
const activeKey = ref('1');
// 下拉菜单
let activeMenu = reactive({
  activeKey: '1',
  customStyle: 'background:transparent;',
});
// 图表标题
const tableTitle = ref('')
// 引入图表插件
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
function flowFn(max, min) {
  let maxValue = Math.ceil(max);
  let minValue = Math.floor(min);
  let interval = 0;
  console.log((max - min) / 5);
  if ((max - min) / 5 <= 1) {
    interval = 1;
    minValue = Math.floor(minValue);
    maxValue = Math.ceil(maxValue);
    if (maxValue - minValue == 1) {
      minValue = minValue - 2
      maxValue = maxValue + 2
    }
    if (maxValue - minValue == 2) {
      minValue = minValue - 2
      maxValue = maxValue + 1
    }

    if (maxValue - minValue == 3) {
      minValue = minValue - 1
      maxValue = maxValue + 1
    }

    if (maxValue - minValue == 4) {
      minValue = minValue - 1
    }
  } else {
    // 获取余数
    minValue = minValue - (5 - ((maxValue - minValue) % 5));
    interval = (maxValue - minValue) / 5;
  }
  return {
    interval: interval,
    maxValue: maxValue,
    minValue: minValue,
  };
}
function waterLevel(max, min) {
  let maxValue = Math.ceil(max);
  let minValue = Math.floor(min);
  let interval = 0;
  console.log((max - min) / 5);
  if ((max - min) / 5 <= 0.2) {
    interval = 0.2;
    maxValue = Math.floor(maxValue);
    maxValue = Math.ceil(maxValue);
  } else if ((max - min) / 5 <= 0.5) {
    interval = 0.5;
    maxValue = Math.floor(maxValue);
    maxValue = Math.ceil(maxValue);
  } else if ((max - min) / 5 <= 1) {
    interval = 0.5;
    maxValue = Math.floor(maxValue);
    maxValue = Math.ceil(maxValue);
  } else {
    // 获取余数
    minValue = minValue - (5 - ((maxValue - minValue) % 5));
    interval = (maxValue - minValue) / 5;
  }
  return {
    interval: interval,
    maxValue: maxValue,
    minValue: minValue,
  };
}
function echarts1() {


  // const chart = echarts.init(document.getElementById('query-echarts'));
  let max = Math.max(...ydata.value)
  let min = Math.min(...ydata.value)
  let liuliang2 = {}
  // 判断是否是雨量，还是水位，还是流量
  if (tableTitle.value.indexOf("雨量") != -1) {
    liuliang2 = {
      interval: null,
      maxValue: null,
      minValue: null,
    }
  }
  if (tableTitle.value.indexOf("水位") != -1) {
    liuliang2 = waterLevel(max, min);
  }
  if (tableTitle.value.indexOf("流量") != -1) {
    liuliang2 = flowFn(max, min);
  }


  var option;
  option = {
    title: {
      text: tableTitle.value,
      x: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter(params) {
        var relVal = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          console.log('tooltip数据值', params[i].value)
          //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
          relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value)
        }
        return relVal;
      },
    },
    dataZoom: [
      {
        type: "inside"         //详细配置可见echarts官网
      },
      {
        type: "inside"         //详细配置可见echarts官网
      },
    ],
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          show: true,
          title: '保存图片',
          name: tableTitle.value,
          iconStyle: {
            borderColor: '#fff',
          },
          backgroundColor: "#021D33"

        },  // 保存图表
      },
    },

    // legend: {
    //   // data: ['test1', 'test2', 'test3'],
    //   textStyle: {
    //     fontSize: 14, //字体大小
    //     color: '#ffffff', //字体颜色
    //   },
    // },
    grid: {
      top: '12%',
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xdata.value,
      axisLabel: {
        //x轴文字的配置
        color: 'green',
        show: true,
        textStyle: {
          color: '#fff',
        },
        formatter: function (val) {
          var strs = val.split(''); //字符串数组
          var str = '';
          for (var i = 0, s; (s = strs[i++]);) {
            //遍历字符串数组
            if (i > 5 && i < 17) {
              str += s;
            }

            if (!(i % 10)) str += '\n'; //按需要求余
          }
          return str;
        },
      },
    },
    yAxis: {
      name: dchar.value,
      nameTextStyle: {
        color: '#fff',
      },
      // scale: true,
      type: 'value',
      axisLabel: {
        //x轴文字的配置
        show: true,
        textStyle: {
          color: '#fff',
        },
        formatter: function (value) {
          if (tableTitle.value.indexOf('水位') != -1) {
            return value.toFixed(2);
          } else if (tableTitle.value.indexOf('流量') != -1) {
            if (value < 100) {
              return value.toPrecision(3)
            } else {
              return Number(value.toPrecision(3))
            }
          } else {
            return value.toFixed(1);
          }
        },
      },
      splitLine: {
        //网格线
        lineStyle: {
          type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
          width: 1, //y轴线的宽度
          color: '#484849',
        },
        show: true, //隐藏或显示
      },
      interval: liuliang2.interval, // 步长
      min: liuliang2.minValue,
      max: liuliang2.maxValue,
    },
    series: [
      {
        name: sensor_name.value,
        type: sensor_name.value.includes('雨量') ? 'bar' : 'line',
        stack: 'Total',
        smooth: true,
        data: ydata.value,
        barMaxWidth: 30
      },
    ],
  };
  option && chart.setOption(option);
}
var chart = null
onMounted(() => {
  setBox()
  chart = echarts.init(document.getElementById('query-echarts'));
});
</script>

<style lang="less" scoped>
// 修改组件样式
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active) {
  // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
  background: url('../../assets/images/weatheHome/active-bar1.png') no-repeat;
  // width: 45px;
  background-size: 100%;
  height: 40px;
  width: 169px;
  color: #c9d1d9;
}

::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active) {
  // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
  // background: url('../../../assets/images/tab.png') no-repeat;
  // width: 45px;
  // background-position: 6px 3px;
  background-size: 100% 100%;
  height: 42px;
  // line-height: 42px;
  // margin-left: -6px;
}

// ::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active span) {
//   position: relative;
//   // top: 10px !important;
// }
.total222 {
  margin-top: 20px;
}

::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab) {
  // background-position: 6px 3px;
  background-size: 100% 100%;
  height: 40px;
  // line-height: 42px;
  padding: 12px 0px 12px 0px;
  margin: 0;
  width: 165px;
}

::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab span) {
  position: relative;
  top: -4px;
  color: #377dff;
}

::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active span) {
  color: #c9d1d9 !important;
}

::v-deep(.ant-tabs-top-bar) {
  margin-bottom: 0px !important;
}

::v-deep(.ant-tabs-ink-bar) {
  visibility: hidden;
}

::v-deep(.ant-collapse-borderless) {
  background-color: transparent !important;
}

::v-deep(.ant-collapse-borderless > .ant-collapse-item) {
  border: 0px !important;
}

::v-deep(.ant-tabs-top > .ant-tabs-nav::before,
  .ant-tabs-bottom > .ant-tabs-nav::before,
  .ant-tabs-top > div > .ant-tabs-nav::before,
  .ant-tabs-bottom > div > .ant-tabs-nav::before) {
  border-bottom: 0px;
}

::v-deep(.ant-tabs) {
  color: #fff;
}

::v-deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
  color: #ffe75c;
}

::v-deep(.ant-tabs-tab) {
  // font-size: 18px;
  // font-weight: bold;
  font-size: 16px;
  font-weight: normal !important;
}

::v-deep(.ant-tabs-bar) {
  border-bottom: 0px solid #303030 !important;
}

::v-deep(.ant-tabs-nav) {
  background: url('../../assets/images/weatheHome/bar-bg1.png') no-repeat;
  background-size: 100%;
  width: 505px !important;
  height: 48px !important;
  padding-top: 3px;
  margin: 0 auto;
}

// 修改组件样式结束
.map-dialog-title {
  font-size: 16px;
  color: #d8e5ff;
  position: relative;

  img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
}

.map-dialog-table {
  ul {
    border: 1px solid #014a9b;
    margin: 10px 20px;

    li {
      display: flex;
      border-top: 1px solid #014a9b;
      line-height: 50px;
      text-align: center;
      color: #bed2ff;
      font-size: 14px;

      div {
        border-left: 1px solid #014a9b;
      }

      div:nth-child(1) {
        border-left: 0px solid #014a9b;
      }

      div:nth-child(1),
      div:nth-child(3),
      div:nth-child(5) {
        width: 10%;
        background: rgba(0, 50, 105, 0.3);
      }

      div:nth-child(2),
      div:nth-child(4),
      div:nth-child(6) {
        width: 20%;
      }
    }

    li:nth-child(1) {
      border-top: 0px solid #014a9b;
    }
  }
}

.mg-10 {
  margin-top: 20px;
}

.map-dialog-tabp-list {
  position: absolute;
  display: flex;
  left: 100px;
  color: #fff;
  top: 0px;

  &>div {
    // width: 189px;
    margin-left: 30px;
    margin-top: 3px;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
  }

  .active-tabp {
    font-size: 14px;
    background: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    position: relative;

    img {
      width: 100%;
      position: absolute;
      // bottom: -100px;
    }
  }
}

.tabp-conetnt {
  height: 100%;
  margin-top: 20px;
  display: flex;
  height: 100%;
  overflow-y: auto;

  .hconetnt {
    height: 480px !important;
    overflow-y: auto;
  }

  .tabp-conetnt-left {
    width: 14%;
    height: 100%;
    margin-left: 20px;
    // padding: 20px;
    background: linear-gradient(180deg, #022d5d 0%, rgba(0, 35, 74, 0.91) 100%);
    overflow: auto;

    ::v-deep(.ant-collapse) {
      border: none;
    }

    ::v-deep(.ant-collapse-header) {
      background: linear-gradient(90deg, rgba(0, 124, 240, 0.24) 0%, rgba(216, 216, 216, 0) 100%);
      color: #fff;
      font-size: 14px;
    }
  }

  .tabp-conetnt-right {
    // height: 100%;
    font-size: 14px;
    margin-left: 40px;
    margin-right: 40px;
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 680px;
  }
}

.tabp-right-top {
  width: 100%;
  display: flex;
  color: #bed2ff;
  justify-content: space-between;

  span {
    color: #ffffff;
  }
}

.collapse-ul {
  li {
    margin-bottom: 10px;
    padding-left: 20px;
    color: #bed2ff;
    cursor: pointer;
  }

  .liactive {
    background: rgba(0, 94, 182, 0.24);
  }
}

.tabp-right-query {
  // height: 100%;
  margin-top: 10px;
  display: flex;

  &>div:nth-child(1) {
    border: 1px solid #00346e;

    span {
      border-left: 1px solid #00346e;
      display: inline-block;
      padding: 5px 10px;
      cursor: pointer;
    }

    span:nth-child(1) {
      border-left: 0px solid #00346e;
    }

    .active {
      background-color: rgb(38, 99, 255);
    }
  }

  &>div:nth-child(3) {
    margin-left: 20px;
  }

  ::v-deep(.ant-radio-button-wrapper) {
    border: none;
  }

  ::v-deep(.ant-input) {
    border: 1px solid #00346e !important;
  }
}

::v-deep .tabp-right-query .ant-input {
  height: 37px;
}

::v-deep .tabp-right-query .ant-btn {
  height: 37px;
}

// 轮播样式开始
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 750px;
  // line-height: 800px;
  background: transparent;
  overflow: hidden;
  color: #fff;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 1;
}

.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}

.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}

::v-deep .ant-carousel .slick-dots li.slick-active button {
  background-color: #fff !important;
}

::v-deep .ant-carousel .slick-dots li button {
  background-color: #fff !important;
}

::v-deep .ant-carousel .slick-next:hover {
  // background-color: #000 !important;
  color: #fff !important;
}

::v-deep .ant-carousel .slick-prev:hover {
  color: #fff !important;
}

.carousel-img {
  // width: 100%;
  height: 680px;
  margin: 0 auto;
}

.carousel-title {
  position: absolute;
  left: 20px;
  bottom: 0px;
  z-index: 9999;
  color: #bed2ff;
  display: flex;
  justify-content: space-between;
}

// 轮播样式结束
.collapse-video-ul {
  li {
    text-align: center;
    line-height: 32px;
    margin-top: 10px;
  }

  .video-active {
    background: linear-gradient(90deg, rgba(100, 255, 255, 0.29) 0%, rgba(100, 255, 255, 0) 100%);
  }
}

#query-echarts {
  margin-top: 16px;
}

.none-data {
  margin: 20px auto;
}
</style>