Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2022-09-14 54051120c1b27732f05b8c2f4a0112ac02323696

 src/views/specialWorkSystem/workPlan/reserveSum/index.vue

对比新文件
@@ -0,0 +1,415 @@
<template>
   <div class="home-container">
      <div style="height: 100%">
         <el-row class="homeCard">
            <el-col :span="8" style="display:flex;align-items: center">
               <span style="white-space: nowrap">选择时间段：</span>
               <div class="grid-content topInfo">
                  <el-date-picker
                        v-model="searchDates"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="YYYY-MM-DD"
                        :shortcuts="shortcuts"
                  />
               </div>
            </el-col>
            <el-button style="margin-left: 20px" type="primary" @click="searchRecord">查询</el-button>
            <el-button plain @click="clearSearch">重置</el-button>
         </el-row>
         <div class="homeCard">
            <div :id="chartName" style="width: 100%;height: 100%"></div>
         </div>
      </div>
   </div>
</template>

<script lang="ts">
   import {toRefs, reactive, ref, onMounted, defineAsyncComponent, nextTick} from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import { useUserInfo } from '/@/stores/userInfo';
   import { Session } from '/@/utils/storage';
   import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
   import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
   import { workAppointApi } from '/@/api/specialWorkSystem/workPlan/workAppoint';
   import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
   import * as echarts from "echarts";

   // 定义接口来定义对象的类型
   interface stateType {
      tableData: [],
      departmentList: [],
      hotCount: [],
      confinedSpaceCount: [],
      liftingCount: [],
      groundBreakingCount: [],
      openCircuitCout: [],
      heightCount: [],
      temporaryPowerCount: [],
      blindPlatePluggingCount: [],
      searchDates: Array<any>,
      startTime: String,
      endTime: String
   }

   export default {
      name: 'workReservation',
      components: {},
      setup() {
         const userInfo = useUserInfo();
         const { userInfos } = storeToRefs(userInfo);
         const state = reactive<stateType>({
            tableData: [],
            departmentList: [],
            hotCount: [],
            confinedSpaceCount: [],
            liftingCount: [],
            groundBreakingCount: [],
            openCircuitCout: [],
            heightCount: [],
            temporaryPowerCount: [],
            blindPlatePluggingCount: [],
            searchDates: '',
            startTime: '',
            endTime: ''
         });
         const chartName = ref("eChart" + Date.now() + Math.random())
         const shortcuts = [
            {
               text: '上周',
               value: () => {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                  return [start, end]
               },
            },
            {
               text: '上个月',
               value: () => {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                  return [start, end]
               },
            },
            {
               text: '上个季度',
               value: () => {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                  return [start, end]
               },
            },
         ]

         // 页面载入时执行方法
         onMounted(() => {
            getListByPage()
            // getAllDepartment()
         });

         // 获取列表
         const getListByPage = async () => {
            console.log(state.searchDates)
            const data = { startTime: state.searchDates[0], endTime: state.searchDates[1] };
            let res = await workAppointApi().getAllRecords(data);
            if (res.data.code === '200') {
               if(JSON.parse(JSON.stringify(res.data.data)).length>0){
                  state.tableData = JSON.parse(JSON.stringify(res.data.data))
                  state.departmentList = Array.from(state.tableData, ({ applyDepName }) => applyDepName);
                  state.hotCount = Array.from(state.tableData, ({ hotCount }) => hotCount);
                  state.confinedSpaceCount = Array.from(state.tableData, ({ confinedSpaceCount }) => confinedSpaceCount);
                  state.liftingCount = Array.from(state.tableData, ({ liftingCount }) => liftingCount);
                  state.groundBreakingCount = Array.from(state.tableData, ({ groundBreakingCount }) => groundBreakingCount);
                  state.openCircuitCout = Array.from(state.tableData, ({ openCircuitCout }) => openCircuitCout);
                  state.heightCount = Array.from(state.tableData, ({ heightCount }) => heightCount);
                  state.temporaryPowerCount = Array.from(state.tableData, ({ temporaryPowerCount }) => temporaryPowerCount);
                  state.blindPlatePluggingCount = Array.from(state.tableData, ({ blindPlatePluggingCount }) => blindPlatePluggingCount);
                  initCharts()
               }else{
                  ElMessage({
                     type: 'warning',
                     message: '该时段暂无数据'
                  });
               }
            } else {
               ElMessage({
                  type: 'warning',
                  message: res.data.msg
               });
            }
         };

         const initCharts =()=>{
            let dom = document.getElementById(chartName.value);
            let myChart = echarts.init(dom);

            type EChartsOption = echarts.EChartsOption
            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                     type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                  }
               },
               legend: {},
               grid: {
                  left: '3%',
                  right: '3%',
                  bottom: '3%',
                  containLabel: true
               },
               xAxis: {
                  type: 'value'
               },
               yAxis: {
                  type: 'category',
                  data: state.departmentList
               },
               series: [
                  {
                     name: '动火作业',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: true
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: state.hotCount
                  },
                  {
                     name: '受限空间作业',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: true
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: state.confinedSpaceCount
                  },
                  {
                     name: '吊装作业',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: true
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: state.liftingCount
                  },
                  {
                     name: '动土作业',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: true
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: state.groundBreakingCount
                  },
                  {
                     name: '断路作业',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: true
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: state.openCircuitCout
                  },
                  {
                     name: '高处作业',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: true
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: state.heightCount
                  },
                  {
                     name: '临时用电作业',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: true
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: state.temporaryPowerCount
                  },
                  {
                     name: '盲板抽堵作业',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: true
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: state.blindPlatePluggingCount
                  }
               ]
            };

            option && myChart.setOption(option);

            window.addEventListener("resize",function (){
               myChart.resize();
            });
         }

         // 关键词查询记录
         const searchRecord = async () => {
            if (state.searchDates == []) {
               ElMessage({
                  type: 'warning',
                  message: '请选择时间段'
               });
            } else {
               getListByPage();
            }
         };

         const clearSearch = async () => {
            state.searchDates = [];
            getListByPage();
         };

         // 刷新
         const reLoadData = async () => {
            getListByPage();
         };

         // 折线图
         const renderMenu = async (value: string) => {
            Session.set('projectId', value);
            userInfos.value.projectId = value;
            await initBackEndControlRoutes();
         };
         return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            Search,
            shortcuts,
            chartName,
            searchRecord,
            clearSearch,
            getListByPage,
            reLoadData,
            ...toRefs(state)
         };
      }
   };
</script>

<style scoped lang="scss">
   $homeNavLengh: 8;
   .red{
      color: red;
   }
   .home-container {
      height: calc(100vh - 144px);
      box-sizing: border-box;
      overflow: hidden;
      .homeCard {
         width: 100%;
         padding: 20px;
         box-sizing: border-box;
         background: #fff;
         border-radius: 4px;

         .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
               display: flex;
               align-items: center;
               justify-content: space-between;
               margin-bottom: 20px;
               .mainCardBtn {
                  margin: 0;
               }
            }
            .pageBtn {
               height: 60px;
               display: flex;
               align-items: center;
               justify-content: right;

               .demo-pagination-block + .demo-pagination-block {
                  margin-top: 10px;
               }
               .demo-pagination-block .demonstration {
                  margin-bottom: 16px;
               }
            }
         }
         &:last-of-type {
            height: calc(100% - 100px);
         }
      }
      .el-row {
         display: flex;
         align-items: center;
         margin-bottom: 20px;
         &:last-child {
            margin-bottom: 0;
         }
         .grid-content {
            align-items: center;
            min-height: 36px;
         }

         .topInfo {
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;

            & > div {
               white-space: nowrap;
               margin-right: 20px;
            }
         }
      }
   }
   .el-input{
      width: 100% !important;
   }
   ::v-deep(.el-date-editor){
      width: 100%;
   }
   .el-select{
      width: 100%;
   }
   :deep(.el-cascader){
      width: 100% !important;
   }
</style>