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="电站状态" 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="powerName" label="电站名称" width="180" />
        <el-table-column prop="stationName" label="安装人" :show-overflow-tooltip="true" />
        <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="装机容量(kWh)" />
        <el-table-column prop="country" label="电站地址">
          <template #default="scope"> {{ scope.row.address }} </template>
        </el-table-column>
        <el-table-column prop="operationDate" label="投运时间" />
        <el-table-column prop="url" label="电站图片" width="200">
          <template #default="scope">
            <div class="elimageurl">
              <div v-for="(item, index) in scope.row.url" :key="index">
                <el-image
                  style="width: 60px; height: 60px; margin-right: 10px"
                  :src="item"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-teleported="true"
                  :preview-src-list="scope.row.url"
                  :initial-index="index"
                  fit="cover"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="arrangementurl" label="设备布局图" width="200">
          <template #default="scope">
            <div class="elimageurl">
              <div v-for="(item, index) in scope.row.arrangementurl" :key="index">
                <el-image
                  style="width: 60px; height: 60px; margin-right: 10px"
                  :src="item"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-teleported="true"
                  :preview-src-list="scope.row.url"
                  :initial-index="index"
                  fit="cover"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button @click="details(scope.row)">查看</el-button>
            <el-button v-if="BUTTONS.powerStationedit" 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 class="elimageurl">
            <div v-for="(item, index) in carditem.url" :key="index">
              <el-image
                style="width: 120px; height: 120px; margin-right: 10px"
                :src="item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-teleported="true"
                :preview-src-list="carditem.url"
                :initial-index="index"
                fit="cover"
              />
            </div>
          </div>
        </div>

        <div class="dialog_title">
          <div class="more_name">电站名称：</div>
          <div class="more_theme">{{ carditem.powerName }}</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 }}kWh</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="elimageurl">
            <div v-for="(item, index) in carditem.arrangementurl" :key="index">
              <el-image
                style="width: 120px; height: 120px; margin-right: 10px"
                :src="item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-teleported="true"
                :preview-src-list="carditem.arrangementurl"
                :initial-index="index"
                fit="cover"
              />
            </div>
          </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();

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: null
    }
  });
};
// 编辑
const newition = (row: any) => {
  router.push({
    path: "/powerStation/addition",
    query: {
      type: "电站编辑", // 传递的参数
      id: row.powerId
    }
  });
};
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getstationmanage();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!--   
  
--->