<template>
  <!-- 污水-->
  <div class="sewage">
    <div class="small-TitleBox">污水处理厂({{ wsclccount }})</div>
    <div class="one" v-loading="chartInfo3.loading" element-loading-background="rgba(122, 122, 122, 0.2)">
      <wushuichulichangEcharts
        :refresh="chartInfo3.refresh"
        :XAxis="chartInfo3.XAxis"
        :YAxis="chartInfo3.YAxis"
        :YAxis2="chartInfo3.YAxis2"
        :typeName="chartInfo3.typeName"
        :typeName2="chartInfo3.typeName2"
      ></wushuichulichangEcharts>
    </div>
    <div class="small-TitleBox">污水泵站</div>
    <div class="two Gw_center_box">
      <div class="boxitem" v-for="p in centerArr_bengzhan" :key="p">
        <img class="itemimg" :src="p.icon" />
        <div class="name">{{ p.name }}</div>
        <div class="Numbervalue">
          <div class="value" :style="{ color: p.color }">{{ p.value }}</div>
        </div>
      </div>
    </div>
    <div class="small-TitleBox">污水处理站</div>
    <div class="two Gw_center_box">
      <div class="boxitem" v-for="p in centerArr_chulizhan" :key="p">
        <img class="itemimg" :src="p.icon" />
        <div class="name">{{ p.name }}</div>
        <div class="Numbervalue">
          <div class="value" :style="{ color: p.color }">{{ p.value }}</div>
        </div>
      </div>
    </div>
    <div class="small-TitleBox">管网</div>
    <div class="two Gw_center_box">
      <div class="boxitem" v-for="p in centerArr_guanwang" :key="p">
        <img class="itemimg" :src="p.icon" />
        <div class="name">{{ p.name }}</div>
        <div class="Numbervalue">
          <div class="value" :style="{ color: p.color }">{{ Number(p.value).toFixed(2) || '0' }}</div>
          <div class="unit">{{ p.unit }}</div>
        </div>
      </div>
    </div>
    <div class="small-TitleBox">重点排水户({{ pshcount }})</div>
    <div class="three" v-loading="chartInfo2.loading" element-loading-background="rgba(122, 122, 122, 0.2)">
      <yushuibengzhanEcharts
        :refresh="chartInfo2.refresh"
        :DataName="chartInfo2.DataName"
        :XAxis="chartInfo2.XAxis"
        :YAxis="chartInfo2.YAxis"
        :typeName="chartInfo2.typeName"
        :zoomData="chartInfo2.zoomData"
      ></yushuibengzhanEcharts>
    </div>
  </div>
</template>
<script setup name="sewage">
import { ref, reactive, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
import { getImageUrl, replaceArrName } from '@/utils/ruoyi';
import wushuichulichangEcharts from '@/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/sewage/wushuichulichangEcharts.vue';
import yushuibengzhanEcharts from '@/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue';
import {
  getSwageFactoryCount,
  getDraingaeCount,
  getSwagePumpCount,
  getPipeCount,
  getSwageFactoryTypeCount,
} from '@/api/WaterAssets';

const centerArr_bengzhan = ref([
  {
    name: '总数',
    value: '0',
    icon: getImageUrl('leftcenterone.png', 'images/shuiwuzichan'),
    color: '#61FAC2',
  },
  {
    name: '市属',
    value: '0',
    icon: getImageUrl('leftcentertwo.png', 'images/shuiwuzichan'),
    color: '#61F8FA',
  },
  {
    name: '区属',
    value: '0',
    icon: getImageUrl('leftcenterthree.png', 'images/shuiwuzichan'),
    color: '#61CDFA',
  },
]);

const centerArr_chulizhan = ref([
  {
    name: '总数',
    value: '0',
    icon: getImageUrl('leftcenterone.png', 'images/shuiwuzichan'),
    color: '#61FAC2',
  },
  {
    name: '市属 ',
    value: '0',
    icon: getImageUrl('leftcentertwo.png', 'images/shuiwuzichan'),
    color: '#61F8FA',
  },
  {
    name: '区属',
    value: '0',
    icon: getImageUrl('leftcenterthree.png', 'images/shuiwuzichan'),
    color: '#61CDFA',
  },
]);

const centerArr_guanwang = ref([
  {
    name: '总长',
    value: '0',
    icon: getImageUrl('leftcenterone.png', 'images/shuiwuzichan'),
    color: '#61FAC2',
    unit: 'km',
  },
  {
    name: '市政管网',
    value: '0',
    icon: getImageUrl('leftcentertwo.png', 'images/shuiwuzichan'),
    color: '#61F8FA',
    unit: 'km',
  },
  {
    name: '社区管网',
    value: '0',
    icon: getImageUrl('leftcenterthree.png', 'images/shuiwuzichan'),
    color: '#61CDFA',
    unit: 'km',
  },
]);

const chartInfo2 = ref({
  refresh: 1,
  // XAxis: ['光谷转盘珞喻路', '光谷转盘鲁磨路', '光谷四路', '河湖排涝泵站', '五家湖', '佛祖岭'],
  // YAxis: [50, 145, 34, 170, 144, 220],
  XAxis: [],
  YAxis: [],
  zoomData: [20, 30],
  typeName: '数量(个)',
  loading: true,
});

const chartInfo3 = ref({
  refresh: 1,
  // XAxis: ['锦绣良缘', '赵家池', '黄龙山', '秀湖', '严冬湖西渠'],
  // YAxis:[4, 5, 4, 6, 5, 1, 3],
  XAxis: [],
  YAxis: [],
  YAxis2: [],
  typeName: '(万方/d)',
  typeName2: '(k㎡)',
  loading: true,
});

const pshcount = ref('0');
const wsclccount = ref('0');

// 污水处理厂
function GetgetSwageFactoryCount() {
  getSwageFactoryCount().then(res => {
    // chartInfo3.value.XAxis = res.data.name;
    chartInfo3.value.XAxis = replaceArrName(res.data.name, '处理厂');
    chartInfo3.value.YAxis = res.data.value;
    chartInfo3.value.YAxis2 = res.data.area;
    chartInfo3.value.loading = false;
    wsclccount.value = res.data.total;
    chartInfo3.value.refresh = Math.random();
  });
}

// 重点排水户
function GetgetDraingaeCount() {
  getDraingaeCount().then(res => {
    chartInfo2.value.XAxis = res.data.name;
    chartInfo2.value.YAxis = res.data.value;
    pshcount.value = res.data.total;
    chartInfo2.value.loading = false;
    chartInfo2.value.refresh = Math.random();
  });
}

// 管网
function GetgetPipeCount() {
  let params = {
    type: 'WS',
  };
  getPipeCount(params).then(res => {
    centerArr_guanwang.value[0].value = res.data.total;
    centerArr_guanwang.value[1].value = res.data.city;
    centerArr_guanwang.value[2].value = res.data.area;
  });
}
// 污水泵站
function GetgetSwagePumpCount() {
  getSwagePumpCount().then(res => {
    centerArr_bengzhan.value[0].value = res.data.total;
    centerArr_bengzhan.value[1].value = res.data.city;
    centerArr_bengzhan.value[2].value = res.data.area;
  });
}

// 污水厂区域统计
function GetgetSwageFactoryTypeCount() {
  getSwageFactoryTypeCount().then(res => {
    centerArr_chulizhan.value[0].value = res.data.total;
    centerArr_chulizhan.value[1].value = res.data.city;
    centerArr_chulizhan.value[2].value = res.data.area;
  });
}

onMounted(() => {
  GetgetPipeCount();
  GetgetSwageFactoryCount();
  GetgetDraingaeCount();
  GetgetSwagePumpCount();
  GetgetSwageFactoryTypeCount();
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/WaterAssets.scss';

.sewage {
  height: calc(100% - 44px);
  width: 100%;
}

.one {
  height: calc(50% - 226.5px);
}

.two {
  height: 90px;
}

.three {
  height: calc(50% - 226.5px);
}
</style>