lz_web_qwgl/src/views/backOfficeSystem/kaoQinGL/jlytz/index.vue

<template>
  <div class="main-box">
    <div class="treeBox">
      <Trre ref="trre"
        @changeSsbm="changeSsbm"
        width="300px"
        placeholder="管理部门ID"
        clearable
        filterable
        :isBmId="true"
        v-model="listQuery.ssbmdm"
        @dialogBox="dialogBox"
        @orgList="orgList"
      />
    </div>
    <div class="tableCnt" v-if="dialog">
      <el-form :model="searchConfiger" :inline="true">
        <el-form-item label="起止时间">
          <el-date-picker
            v-model="searchConfiger.queryTime"
            unlink-panels
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter"> 查询 </el-button>
          <el-button @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <div :style="{ height: tableHeight + 'px' }" class="tjbox" v-loading="loading">
        <div class="box" v-for="(item, index) in EchartsData" :key="index">
          <div class="ItemTitle">{{ item.title }}</div>
          <div class="barEcharts">
            <BarEcharts
              v-if="item.data.length > 0"
              :data="item.data"
              :Xdata="Xdata"
            />
          </div>
        </div>
      </div>
      <div class="map">
        <GdMap />
      </div>
    </div>
    <div v-else><editAddForm :dialog="dialog"  :orgData="orgData" :str="title" @dialogBox="dialogBox" @modegenx="modegenx" /></div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import GdMap from "@/components/GdMap/index.vue";
import { getjltj, getqxjtj, getwctj, getcctj } from "@/api/file.js";
import BarEcharts from "@/views/backOfficeSystem/qwManagement/components/barEcharts.vue";
import editAddForm from "./editAddForm.vue";
import Trre from "./trre.vue";
import emitter from "@/utils/eventBus.js";
import { ElMessage } from "element-plus";
// import Search from "@/components/aboutTable/Search.vue";
import {
  ref,
  reactive,
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  onUnmounted
} from "vue";
const { proxy } = getCurrentInstance();
const deptId = JSON.parse(localStorage.getItem("deptId"));
const searchConfiger = reactive({
  queryTime: []
});
const {
  D_JCGL_JYCL_JYJTYTLB,
  D_JCGL_JYCL_JYJTFWLB,
  D_JCGL_JYCL_JYJTGJLB,
  D_BZ_RYJZLB,
  D_JCGL_JYCL_HPYSLB
} = proxy.$dict(
  "D_JCGL_JYCL_JYJTYTLB",
  "D_JCGL_JYCL_JYJTFWLB",
  "D_JCGL_JYCL_JYJTGJLB",
  "D_BZ_RYJZLB",
  "D_JCGL_JYCL_HPYSLB"
);
const listQuery = ref({ ssbmdm: "", kssj: "", jssj: "" });
const changeSsbm = (val) => {
  listQuery.value.id = val.id;
  ArrData();
};
const loading=ref(false)
const Xdata = ref(["民警", "辅警"]);
const EchartsData = ref([]);
const ArrData = async () => {
  loading.value=true
  const pormes = {
    id: listQuery.value.id,
    kssj: listQuery.value.kssj,
    jssj: listQuery.value.jssj,
  };
  try{
  EchartsData.value = [];
    const jltj = await getjltj(pormes);
const qxjtj = await getqxjtj(pormes);
const cctj = await getcctj(pormes);
EchartsData.value.push({
  title: "总警力",
  data: [
    {
      name: "总警力",
      data: [jltj.mjsl, jltj.fjsl],
      type: "bar",
      barWidth: 10
    }
  ]
});
EchartsData.value.push({
  title: "在岗数",
  data: [
    {
      name: "在岗数",
      data: [jltj.mjsl-cctj.mjsl,jltj.fjsl- cctj.fjsl-qxjtj.fjsl],
      type: "bar",
      barWidth: 10
    }
  ]
});
EchartsData.value.push({
  title: "请休假",
  data: [
    {
      name: "请休假",
      data: [qxjtj.mjsl, qxjtj.fjsl],
      type: "bar",
      barWidth: 10
    }
  ]
});
EchartsData.value.push({
  title: "出差",
  data: [
    { name: "出差", data: [cctj.mjsl, cctj.fjsl], type: "bar", barWidth: 10 }
  ]
});
  }catch{}finally{
    loading.value=false
  }

};

// ArrData();
const handleFilter = () => {
  if (searchConfiger.queryTime.length > 0) {
    listQuery.value.jssj = searchConfiger.queryTime[1];
    listQuery.value.kssj = searchConfiger.queryTime[0];
  } else {
    listQuery.value.jssj = "";
    listQuery.value.kssj = "";
  }
  ArrData();
};
const reset = () => {
  searchConfiger.queryTime = [];
};
onMounted(() => {
  tabHeightFn();
});
const tableHeight = ref();
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight -520 - 144;
  console.log(tableHeight.value);
  window.onresize = function () {
    tabHeightFn();
  };
};
const dialog = ref(true);
const orgData=ref()
const title=ref()
const dialogBox = (val,bool,str) => {
  orgData.value=val
  dialog.value =bool;
  title.value=str
  
};
const orgList=(val)=>{
if(val.length&&val[0].orgCode=='510300000000'){
  listQuery.value.id=val[0].id
  ArrData();
}
 const a= val.filter(item=>item.jd&&item.wd)
   a.map(item=>{
    emitter.emit("addPointArea", {
      coords: [{ jd: item.jd, wd:item.wd ,jzMc:item.orgName}],
      showTitle:true,
      icon:item.bmtg?`/mosty-api/mosty-base/minio/image/download/${item.bmtg}`:require("@/assets/point/jwz.png"),
      flag: "zqd"
    });
    return  { jd: item.jd, wd:item.wd };
   })
}
const trre=ref()
const modegenx=()=>{
  trre.value.modegenx()
}
</script>

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

.main-box {
  display: flex;

  .tableCnt {
    flex: 1;
    margin-left: 10px;
    font-size: 16px;

    .tjbox {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .box {
        width: calc(99% / 4);
        height: 300px;
        border: 1px solid #000;

        .title {
          font-size: 18x;
        }
      }
    }
  }
}

.map {
  height: 520px;
  width: 100%;
  // height: calc(100% - 370px);
}

.barEcharts {
  height: calc(100% - 30px);
}

.ItemTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  background: #f4f4f4;
  padding: 0 14px;
  box-sizing: border-box;

  .btn {
    padding: 2px 6px;
    color: #fff;
    background: #01c2ff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
  }
}
</style>