esswisdom_web/src/views/powerStation/index.vue

<template>
  <div>
    <div class="title">
      电站管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <!--  -->
    <el-card>
      <div class="selectsite">
        <el-button v-if="BUTTONS.powerStationadd" type="primary" size="large" color="#0052d9" @click="newaddition">
          新增
        </el-button>
        <div class="selectsite_right">
          <div class="tabpane_1">电站状态：</div>
          <el-select v-model="Singlevalue" placeholder="Select" size="large" style="width: 240px" @change="postemsDevice">
            <el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          &ensp;&ensp;&ensp;
          <el-input v-model="stationinput" style="width: 340px" size="large" placeholder="输入电站名称" />
          &ensp;&ensp;&ensp;
          <!-- newition -->
          <el-button type="primary" size="large" color="#0052d9" @click="getstationmanage">查询</el-button>
          <el-button size="large" @click="onselectreset">重置</el-button>
        </div>
      </div>
      <el-table :data="tableData.records" style="width: 100%" border>
        <el-table-column type="index" prop="date" label="序号" width="60" />
        <el-table-column prop="stationName" label="电站名称" width="180" />
        <el-table-column prop="installerName" label="安装人" />
        <el-table-column prop="contactPhone" label="安装人电话">
          <!-- <template #default="scope">
            {{ scope.row.pcsStatus == "" ? "-" : scope.row.pcsStatus }}
          </template> -->
        </el-table-column>
        <el-table-column prop="installedPower" label="装机功率(MW)" />
        <el-table-column prop="installedCap" label="装机容量(MWh)" />
        <el-table-column prop="country" label="电站地址">
          <template #default="scope"> {{ scope.row.country }} {{ scope.row.province }} {{ scope.row.city }} </template>
        </el-table-column>
        <el-table-column prop="operationDate" label="投运时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="details(scope.row)">查看</el-button>
            <!-- <el-button type="primary" color="#0052d9" @click="newition(scope.row)">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="example_block">
        <!-- 共&ensp;{{ tableData.records.length }}&ensp;<el-pagination
          layout="prev, pager, next"
          :total="tableData.records.length"
          @change="changemultiStationpagebase"
        /> -->
        <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
      </div>
    </el-card>
    <el-dialog v-model="dialogVisible" title="查看电站" width="800" :before-close="handleClose">
      <div class="dialog">
        <div :class="informationtype == 1 ? 'information' : 'more'" @click="nonformation">基础信息</div>
        <div :class="informationtype == 2 ? 'information' : 'more'" @click="onmoreinformation">更多信息</div>
      </div>
      <div v-if="informationtype == 1">
        <div class="more_img">
          <div class="more_name">电站图片：</div>
          <img class="dialogimg" :src="carditem.absoluteStationPicUrl" alt="" />
        </div>
        <div class="dialog_title">
          <div class="more_name">电站名称：</div>
          <div class="more_theme">{{ carditem.stationName }}</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">装机功率：</div>
          <div class="more_theme">{{ carditem.installedPower }}MW</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">装机容量：</div>
          <div class="more_theme">{{ carditem.installedCap }}MWh</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">电站地址：</div>
          <div class="more_theme">{{ carditem.province }}</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">投运时间：</div>
          <div class="more_theme">{{ carditem.operationDate }}</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">电站联系电话：</div>
          <div class="more_theme">-</div>
        </div>
      </div>
      <div v-if="informationtype == 2">
        <div class="dialog_title">
          <div class="more_name">安装图片：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">并网点信息：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">变压器信息：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">站点变压器容量：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">安装人：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">安装人联系号码：</div>
          <div class="more_theme">-</div>
        </div>
      </div>
      <div class="dialog_footer">
        <el-button @click="dialogVisible = false" size="large">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { stationmanage } from "@/api/home/Multisite";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { useRouter } from "vue-router";
import { useAuthButtons } from "@/hooks/useAuthButtons";
const { BUTTONS } = useAuthButtons();
console.log(BUTTONS);

const router = useRouter();

const currentDate = ref();
const Singlevalue = ref("");
const onlineStatus = ref("");

const stationinput = ref("");
const cities = ref([
  {
    name: "全部",
    id: ""
  },
  {
    name: "在线",
    id: "0"
  },
  {
    name: "离线",
    id: "1"
  }
]);
const tableData = ref();
const getstationmanage = async () => {
  let params = {
    onlineStatus: onlineStatus.value,
    keyword: stationinput.value,
    pn: pageable.value.pn,
    ps: pageable.value.ps
  };
  const { data } = await stationmanage(params);
  tableData.value = data;
  pageable.value.total = tableData.value.total;
};
const postemsDevice = async (value: any) => {
  onlineStatus.value = value;
};
const onselectreset = () => {
  onlineStatus.value = "";
  stationinput.value = "";
  pageable.value.pn = 1;
  getstationmanage();
};

const pageable = ref({
  ps: 10,
  pn: 1,
  total: 0
});
const handleSizeChange = async (e: any) => {
  pageable.value.ps = e;
  getstationmanage();
};
const handleCurrentChange = async (e: any) => {
  pageable.value.pn = e;

  getstationmanage();
};
// const changemultiStationpagebase = async (value: any) => {
//   pageSize.value = value;
//   getstationmanage();
// };
// 卡片详情对话框
const dialogVisible = ref(false);
const carditem = ref();
const details = (item: any) => {
  carditem.value = item;
  console.log(carditem);
  dialogVisible.value = true;
};
const informationtype = ref(1);
const nonformation = () => {
  informationtype.value = 1;
};
const onmoreinformation = () => {
  informationtype.value = 2;
};
const handleClose = () => {
  dialogVisible.value = false;
};
// 新增
const newaddition = () => {
  router.push({
    path: "/powerStation/addition",
    query: {
      type: "电站新增", // 传递的参数
      id: ""
    }
  });
};
// 编辑
// const newition = (row: any) => {
//   router.push({
//     path: "/powerStation/addition",
//     query: {
//       type: "电站编辑", // 传递的参数
//       id: row.id
//     }
//   });
// };
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getstationmanage();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!--     
 
 -->