esswisdom_web/src/views/station/index.vue

<template>
  <div>
    <div>
      <div class="title">
        {{ $t("station.SiteCard") }}
        <div class="title_time">{{ currentDate }}</div>
      </div>
      <el-card>
        <div class="search">
          <div class="search_choice">
            <div :class="searchtype == '' ? 'search_choice2' : 'search_choice1'" @click.stop="searchwhole('')">
              {{ $t("station.All") }}
              ({{ postmultinfo.stationPicArray.totalCnt }})
            </div>
            <div :class="searchtype == '1' ? 'search_choice2' : 'search_choice1'" @click.stop="searchwhole('1')">
              {{ $t("station.Online") }}
              ({{ postmultinfo.stationPicArray.onlineCnt }})
            </div>
            <div :class="searchtype == '0' ? 'search_choice2' : 'search_choice1'" @click.stop="searchwhole('0')">
              {{ $t("station.Offline") }}
              ({{ postmultinfo.stationPicArray.offlineCnt }})
            </div>
          </div>
          <div class="search_right">
            <div class="search_right" v-if="!foldtype" @click.stop="foldopen">
              <el-icon style="padding-top: 2px; margin-right: 8px"><ArrowDown /></el-icon>{{ $t("station.Expand") }}
            </div>
            <div class="search_right" v-if="foldtype" @click.stop="foldopen">
              <el-icon style="margin-top: 2px; margin-right: 8px"><ArrowUp /></el-icon>{{ $t("station.Collapse") }}
            </div>
          </div>
        </div>
        <div class="search_bottom" v-show="foldtype">
          <div>
            <el-cascader
              :props="props"
              v-model="selectedOptions"
              clearable
              size="large"
              placeholder="请选择服务地区"
              @change="oncascader"
              style="width: 360px; margin-right: 20px"
            />

            <el-button type="primary" size="large" color="#0052d9" @click="query(0)">{{ $t("station.Query") }}</el-button>
            <el-button size="large" @click="query(1)">{{ $t("station.Reset") }}</el-button>
          </div>
          <div>
            <el-popover placement="bottom-start" :width="400" :visible="visible">
              <template #reference>
                <el-input
                  v-model="keyword"
                  style="width: 400px"
                  :placeholder="$t('station.SearchAddress')"
                  size="large"
                  clearable
                  suffix-icon="Search"
                  @focus="onfocusinput"
                  @blur="onblurinput"
                  @change="onchange"
                >
                </el-input>
              </template>
              <!-- <div class="popover_name" @click="onCategory(0)">全部：{{ keyword }}</div> -->
              <div class="popover_name" @click="onCategory(1)">{{ $t("station.PlantName") }}：{{ keyword }}</div>
              <!-- <div class="popover_name" @click="onCategory(2)">电站地址：{{ keyword }}</div> -->
            </el-popover>
          </div>
        </div>
      </el-card>
      <div class="topcard">
        <el-card
          v-for="(item, index) in postmultinfo.data.records"
          :key="index"
          :class="(index + 1) % 4 == 0 && index != 0 ? 'topcard_div1' : 'topcard_div2'"
        >
          <div>
            <img
              @click.stop="onJump(item.powerId)"
              class="topcard_img"
              :src="item.absoluteStationPicUrl"
              alt=""
              @mouseover.stop="handleMouseOver(index)"
              @mouseleave.stop="handleMouseLeave"
            />

            <div v-if="item.onlineStatus == 1" class="topcard_online">
              <div class="topcard_online1"></div>
              {{ $t("station.Online") }}
            </div>
            <div v-else class="topcard_online">
              <div class="topcard_online2"></div>
              {{ $t("station.Offline") }}
            </div>
            <div class="topcard_zhong">
              <el-card>
                <div class="el_card">
                  <div>
                    <div class="el_cardname">{{ item.installedCap }} <span class="el_cardunit">kWh</span></div>
                    <div class="topcard_title">{{ $t("station.InstalledCapacity") }}</div>
                  </div>
                  <!-- <div>
                    <div class="el_cardname">{{ item.installedCap }} <span class="el_cardunit">台/套</span></div>
                    <div class="topcard_title">装机设备</div>
                  </div> -->
                  <div>
                    <div class="el_cardname">{{ item.installedPower }} <span class="el_cardunit">kW</span></div>
                    <div class="topcard_title">{{ $t("station.RatedPower") }}</div>
                  </div>
                </div>
              </el-card>
            </div>
            <el-card class="topcard_bottom">
              <!-- <div class="topcard_bottom"> -->
              <div class="topcard_bottom_">
                <div class="topcard_bottom1">
                  <div><i class="iconfont">&#xe62d;</i>{{ item.stationName }}</div>
                  <i class="iconfont iconfontfont" @click="details(item)">&#xe61b;</i>
                </div>
                <div class="topcard_bottom2">
                  <div class="topcard_title">{{ $t("station.CommissioningDate") }}:</div>
                  <div>{{ item.operationDate }}</div>
                </div>
                <div class="topcard_bottom3">
                  <div class="topcard_title">{{ $t("station.PlantAddress") }}:</div>
                  <div class="topcard_Location">
                    &nbsp;{{ item.detailedaddress }}
                    <!-- <el-icon><Location /></el-icon> -->
                  </div>
                </div>
              </div>
              <!-- </div> -->
            </el-card>
            <div v-if="isHovered == index" class="overlay"><i class="iconfont">&#xe62d;</i>{{ $t("station.EnterPlant") }}</div>
          </div>
        </el-card>
      </div>
      <el-dialog v-model="dialogVisible" :title="$t('station.ViewPlant')" width="800" :before-close="handleClose">
        <div class="dialog">
          <div :class="informationtype == 1 ? 'information' : 'more'" @click="oninformation">
            {{ $t("station.BasicInformation") }}
          </div>
          <div :class="informationtype == 2 ? 'information' : 'more'" @click="onmoreinformation">
            {{ $t("station.MoreDetails") }}
          </div>
        </div>
        <div v-if="informationtype == 1">
          <div class="more_img">
            <div class="more_name">{{ $t("station.PlantPhotos") }}：</div>
            <img class="dialogimg" :src="carditem.absoluteStationPicUrl" alt="" />
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.PlantName") }}：</div>
            <div class="more_theme">{{ carditem.stationName }}</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.RatedPower") }}：</div>
            <div class="more_theme">{{ carditem.installedPower }}MW</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.InstalledCapacity") }}：</div>
            <div class="more_theme">{{ carditem.installedCap }}kWh</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.PlantAddress") }}：</div>
            <div class="more_theme">{{ carditem.province }}</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.CommissioningDate") }}：</div>
            <div class="more_theme">{{ carditem.operationDate }}</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.ContactNumber") }}：</div>
            <div class="more_theme">-</div>
          </div>
        </div>
        <div v-if="informationtype == 2">
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.InstallationPhotos") }}：</div>
            <div class="more_theme">-</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.GridConnectionInfo") }}：</div>
            <div class="more_theme">-</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.TransformerSpecifications") }}：</div>
            <div class="more_theme">-</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.TransformerCapacity") }}：</div>
            <div class="more_theme">-</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.Installer") }}：</div>
            <div class="more_theme">-</div>
          </div>
          <div class="dialog_title">
            <div class="more_name">{{ $t("station.InstallerContact") }}：</div>
            <div class="more_theme">-</div>
          </div>
        </div>
        <div class="dialog_footer">
          <el-button @click="dialogVisible = false" size="large">{{ $t("station.Close") }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<!--  

-->
<script setup lang="ts">
import { multiStationpageinfo, getlistcountry, getliststate, getlistcity, getlistcounty } from "@/api/home/Multisite";
import { CascaderOption, ElCascader, CascaderProps } from "element-plus";
import { onMounted, Ref, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const currentDate = ref();
const postmultinfo = ref();
const isHovered = ref(-1);
const foldtype = ref(true);
const visible = ref(false);
const searchtype = ref("");
const keyword = ref("");
const keywordCategory = ref(0);
const statecitycounty: Ref<any> = ref([]);
const countrydata = ref();
const statedata = ref();
const citydata = ref();
const countydata = ref();
const selectedValue = ref();
const postmultiStationpageinfo = async () => {
  let countryobj = { chineseName: "", code: "" };
  let stateobj = { chineseName: "", id: "" };
  let cityobj = { chineseName: "", id: "" };
  let countyobj = { chineseName: "", id: "" };
  if (selectedValue.value) {
    if (selectedValue.value[0]) {
      for (let index = 0; index < countrydata.value.length; index++) {
        if (selectedValue.value[0] == countrydata.value[index].id) {
          countryobj.chineseName = countrydata.value[index].chineseName;
          countryobj.code = countrydata.value[index].code;
        }
      }
    }
    if (selectedValue.value[1]) {
      for (let a = 0; a < statedata.value.length; a++) {
        if (selectedValue.value[1] == statedata.value[a].id) {
          stateobj.chineseName = statedata.value[a].chineseName;
          stateobj.id = statedata.value[a].id;
        }
      }
    }
    if (selectedValue.value[2]) {
      for (let i = 0; i < citydata.value.length; i++) {
        if (selectedValue.value[2] == citydata.value[i].id) {
          cityobj.chineseName = citydata.value[i].chineseName;
          cityobj.id = citydata.value[i].id;
        }
      }
    }
    if (selectedValue.value[3]) {
      for (let j = 0; j < countydata.value.length; j++) {
        if (selectedValue.value[3] == countydata.value[j].id) {
          countyobj.chineseName = countydata.value[j].chineseName;
          countyobj.id = countydata.value[j].id;
        }
      }
    }
  }

  let params = {
    state: stateobj.chineseName,
    city: cityobj.chineseName,
    country: countryobj.chineseName,
    county: countyobj.chineseName,
    keyword: keyword.value,
    keywordCategory: keywordCategory.value,
    countryCode: countryobj.code,
    provinceCode: stateobj.id,
    cityCode: cityobj.id,
    countyCode: countyobj.id,
    pn: 1,
    ps: 99,
    onlineStatus: searchtype.value
  };
  const { data } = await multiStationpageinfo(params);
  postmultinfo.value = data;
};

const handleMouseOver = (index: number) => {
  isHovered.value = index;
};
const handleMouseLeave = async () => {
  isHovered.value = -1;
};
// 收起
const foldopen = () => {
  foldtype.value = !foldtype.value;
};

// 切换
const searchwhole = (val: string) => {
  searchtype.value = val;
  postmultiStationpageinfo();
};

const props: CascaderProps = {
  lazy: true,
  checkStrictly: true,

  async lazyLoad(node, resolve) {
    // countrydata.value = [];
    // statedata.value = [];
    // citydata.value = [];
    // countydata.value = [];
    if (node.level == 0) {
      // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
      let nodes: CascaderOption[] | undefined = [];
      // 构造查询条件 => 接口入参
      let params = {
        id: node.value // 入参名按照自己的接口来改
      };
      // 请求接口
      let { data } = await getlistcountry(params);
      // console.log(Object.values(data));
      if (data) {
        countrydata.value = data;
        countrydata.value.map((item: { id: any; chineseName: any }) => {
          let obj = {
            value: item.id,
            label: item.chineseName,
            leaf: node.level >= 3 // 当 node.level 层级达到2级时, 就不再请求接口
            // 具体要多少级才不请求接口, 根据层级修改
          };
          nodes?.push(obj);
        });
      }
      //重新加载节点
      resolve(nodes);
    } else if (node.level == 1) {
      // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
      let nodes: CascaderOption[] | undefined = [];
      // 构造查询条件 => 接口入参
      let params = {
        countryId: node.value // 入参名按照自己的接口来改
      };
      // 请求接口
      let { data } = await getliststate(params);
      if (data) {
        statedata.value = data;
        statedata.value.map((item: { id: any; chineseName: any }) => {
          let obj = {
            value: item.id,
            label: item.chineseName,
            leaf: node.level >= 3 // 当 node.level 层级达到2级时, 就不再请求接口
            // 具体要多少级才不请求接口, 根据层级修改
          };
          nodes?.push(obj);
        });
      }
      //重新加载节点
      resolve(nodes);
    } else if (node.level == 2) {
      // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
      let nodes: CascaderOption[] | undefined = [];
      // 构造查询条件 => 接口入参
      let params = {
        stateId: node.value // 入参名按照自己的接口来改
      };
      // 请求接口
      let { data } = await getlistcity(params);
      if (data) {
        citydata.value = data;
        citydata.value.map((item: { id: any; chineseName: any }) => {
          let obj = {
            value: item.id,
            label: item.chineseName,
            leaf: node.level >= 3 // 当 node.level 层级达到2级时, 就不再请求接口
            // 具体要多少级才不请求接口, 根据层级修改
          };
          nodes?.push(obj);
        });
      }
      //重新加载节点
      resolve(nodes);
    } else if (node.level == 3) {
      // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
      let nodes: CascaderOption[] | undefined = [];
      // 构造查询条件 => 接口入参
      let params = {
        cityId: node.value // 入参名按照自己的接口来改
      };
      // 请求接口
      let { data } = await getlistcounty(params);
      countydata.value = data;
      if (data) {
        countydata.value.map((item: { id: any; chineseName: any }) => {
          let obj = {
            value: item.id,
            label: item.chineseName,
            leaf: true // 当 node.level 层级达到2级时, 就不再请求接口
            // 具体要多少级才不请求接口, 根据层级修改
          };
          nodes?.push(obj);
        });
      }
      //重新加载节点
      resolve(nodes);
    }
  }
};
const selectedOptions = ref(44);
// 中国省市县
const oncascader = async (selectedValues: any) => {
  selectedValue.value = selectedValues;
};
// 查询
const query = (val: number) => {
  if (val == 1) {
    keyword.value = "";
    keywordCategory.value = 0;
    searchtype.value = "";
    statecitycounty.value = [];
    selectedOptions.value = 44;
    selectedValue.value = [44];
  }

  postmultiStationpageinfo();
};
// 搜索弹窗
const onCategory = (val: number) => {
  keywordCategory.value = val;
  postmultiStationpageinfo();
};
// 获取焦点
const onfocusinput = () => {
  visible.value = true;
};
// 获取失去
const onblurinput = () => {
  visible.value = false;
};
// 获取失去
const onchange = () => {
  postmultiStationpageinfo();
};
// 跳转页面
const onJump = (e: any) => {
  console.log(e);
  router.push({
    path: "/overview/index",
    query: {
      powerId: e
    }
  });
};
const dialogVisible = ref(false);
// 卡片详情对话框
const carditem = ref();
const details = (item: any) => {
  carditem.value = item;

  dialogVisible.value = true;
};
const informationtype = ref(1);
const oninformation = () => {
  informationtype.value = 1;
};
const onmoreinformation = () => {
  informationtype.value = 2;
};
const handleClose = () => {
  dialogVisible.value = false;
};

onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  postmultiStationpageinfo();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!--

-->