<template>
  <!-- 弹窗 -->
  <el-dialog center ref="dialog" title="统计设备" modal :destory-on-close="true" :show-close="false" class="dialogClass"
    :append-to-body="true" width="90%" custom-class="custom-dialog" v-model="isShow">
   
       <section class="button">
     <el-button @click="exportExcels" :loading="excelLoading">导出</el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </section>
    <!-- 柱状图 -->
    <div class="binBox">
      <BinManyBar ids="sbtj" :barTitle="equipBartitle" :barNum="equipBarnum" :loadingshow="binshow" />
    </div>
    <br />
    <el-table stripe height="333px" border :data="controldata" id="out-table" >
      <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
      <el-table-column property="total" label="设备总数"></el-table-column>
      <el-table-column property="instrument" label="器械设备"></el-table-column>
      <el-table-column property="electric" label="电气设备"></el-table-column>
      <el-table-column property="special" label="特种设备"></el-table-column>
      <el-table-column property="security" label="安防设施"></el-table-column>
      <el-table-column property="fire" label="消防设施"></el-table-column>
      <el-table-column property="lightning" label="防雷设施"></el-table-column>
      <el-table-column property="safety" label="安全器材"></el-table-column>
      <!-- <el-table-column label="操作" fixed="right" width="150">
        <template #default="scope">
          <el-button
            v-if="!popForm"
            size="mini"
            @click="handleClick(scope.$index, scope.row)"
            >详情</el-button
          >
          <el-button disabled size="mini" v-else>详情</el-button>
        </template>
</el-table-column> -->
    </el-table>


  </el-dialog>
</template>

<script setup>
import BinManyBar from "./charts/binManyBar.vue";
import emitter from "@/utils/eventBus.js";
import { ref, defineProps, reactive, onMounted, nextTick, defineExpose } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { exportExcel, getSummaries } from "@/utils/tools";

const isShow = ref(false)
defineExpose({
  isShow
})

//运行控制的数据
const controldata = ref([]);
const binshow = ref(false);

// 设备统计柱状图
const equipBartitle = ref([
  "省局机关贵阳",
  "六盘水",
  "遵义",
  "安顺",
  "毕节",
  "铜仁",
  "黔东南",
  "黔南",
  "投资",
  "贵安新区",
  "烟科院",
  "复烤厂",
  "总公司"
]);
const equipBarnum = ref([
  {
    name: "正常",
    data: [
      1701, 2075, 6571, 769, 3583, 1712, 1992, 2259, 1332, 13, 336, 709, 3666
    ],
    color: "#7BA87B"
  },
  {
    name: "异常",
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    color: "#f9c67a"
  }
]);


const popForm = ref(false);
const key = ref("");
const currentPage = ref("20");
// const num=ref(0)    //0为总数，1为使用，作为标记
const params = ref({});
const msg = ref("");
const dataTitle = ref("");
// const pagers=ref(0)
const vmId = ref("0");
const tableData = reactive([]);
const tableColumn = ref([]);
const listQuery = ref({
});
//查看按钮
const handleClick = (index, row) => {
  var val = row.name;
  popForm.value = true; //显示返回按钮
};
//点击返回
const backbtn = () => {
  popForm.value = false;
};

//关闭弹窗的回调
function handleClose() {
  currentPage.value = 1;
}
// ;里是分页器的页面点击事件
function handleCurrentChange(val) {
  currentPage.value = val;
  var page = currentPage.value.toString();
}

// 请求统计的数据
const getEquipData = () => {
  getApi({}, "/mosty-jcgl/jxsb/listDisplay").then((res) => {
    controldata.value = res.equipCount
  })
}
onMounted(() => {
  // getEquipData();
  binshow.value = true;
  popForm.value = false;
});
//关闭弹窗事件
function closeDialog() {
  popForm.value = false;
  // isShow.value = false;
}


</script>
<style lang="scss">
@import "~@/assets/css/element-plus.scss";

// @import '~@/assets/css/element-plus.scss';

.el-icon-download {
  color: aliceblue !important;
}

.binBox {
  height: 200px;
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}

.binBox .left {
  width: 50%;
}

.binBox .right {
  width: 50%;
}

.el-dialog--center .el-dialog__body {
  padding: 0px;
}

.excel-btn {
  position: absolute;
  top: 19px;
  right: 5%;
  background: #025c29;
  color: #0ecd0f;
  border-color: #025c29;
}
</style>
