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

shj

2022-08-18 ae07a87d84ccc7f568d4e3b8ff4b0c68cf43c0b1

 src/views/contingencyManagement/emergencyDrillStatistics/index.vue

@@ -24,7 +24,32 @@
               </el-col>
            </el-row>
         </el-form>
         <div ref="main" style="width: 100%; height: 400px"></div>
         <div ref="main" style="width: 100%; height: 300px"></div>
         <el-select v-model="params.searchParams.classification" style="width: 200px"
                  placeholder="请选择物资分类" @change="emergencySuppliesCount">
            <el-option label="事故气体吸收装置" value="1"></el-option>
            <el-option label="通讯设施" value="2"></el-option>
            <el-option label="交通运输工具" value="3"></el-option>
            <el-option label="照明装置" value="4"></el-option>
            <el-option label="防护器材" value="5"></el-option>
            <el-option label="其它" value="6"></el-option>
         </el-select>
         <div class="pie-body">
            <div class="pie-item" ref="echarts0">
            </div>
            <div class="pie-item" ref="echarts1">
            </div>
            <div class="pie-item" ref="echarts2">
            </div>
            <div class="pie-item" ref="echarts3">
            </div>
            <div class="pie-item" ref="echarts4">
            </div>
            <ArrowLeftBold class="pie-left" :class="disabledLeft" @click="leftClick" />
            <ArrowRightBold class="pie-right" :class="disabledRight" @click="rightClick" />
         </div>


      </div>
   </div>
</template>
@@ -32,10 +57,157 @@
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
import { toNamespacedPath } from 'path/posix';
import { deepClone } from '/@/utils/other';
export default defineComponent({
   components: {
      ArrowLeftBold,
      ArrowRightBold,
   },
   setup() {
      const params = ref({
         pageIndex:1,
         pageSize:5,
         searchParams:{
            classification:''
         }
      })
      const list = ref([])

      const leftClick = () => {
         params.value.pageIndex--
         emergencySuppliesCount()
         initPies()
      }
      const rightClick = () => {
         params.value.pageIndex++
         emergencySuppliesCount()
         initPies()
      }
      const disabledLeft = ref()
      const disabledRight = ref()
      //加载数据
      const emergencySuppliesCount = () => {
         goalManagementApi()
               .emergencySuppliesCount(params.value)
               .then((res) => {
                  if (res.data.code == 200) {
                     list.value = res.data.data;
                     initPies()
                     //禁用左右按钮
                     if(res.data.pageIndex==1){
                        disabledLeft.value = 'disabled-pie'
                     }else{
                        disabledLeft.value = ''
                     }
                     if(res.data.pageIndex==res.data.pages){
                        disabledRight.value = 'disabled-pie'
                     }else{
                        disabledRight.value = ''
                     }
                  } else {
                     ElMessage.error(res.data.msg);
                  }
               });
      };
      const echarts0 = ref()
      const echarts1 = ref()
      const echarts2 = ref()
      const echarts3 = ref()
      const echarts4 = ref()
      const initPies = () => {
         var myChart0 = echarts.init(echarts0.value);
         var myChart1 = echarts.init(echarts1.value);
         var myChart2 = echarts.init(echarts2.value);
         var myChart3 = echarts.init(echarts3.value);
         var myChart4 = echarts.init(echarts4.value);
         myChart0.clear()
         myChart1.clear()
         myChart2.clear()
         myChart3.clear()
         myChart4.clear()
         for(var a = 0;a<list.value.length;a++){
            var option = {
               tooltip: {
                  trigger: 'item',
                  show:false
               },
               color:['#24c548'],
               title: {
                  text: list.value[a].name+'\n'+list.value[a].totalNum,
                  x: 127,
                  y: 63,
                  textAlign:'center',
                  textStyle: {
                     color: '#24c548',
                     fontSize: 25,
                     fontWeight: "bold",
                     fontFamily:'D-DIN',
                     textShadowColor:'red'
                  },
               },
               series: [
                  {
                     name: null,
                     type: 'pie',
                     radius: ['80%', '90%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 0
                     },
                     label: {
                        show: false,
                        position: 'center'
                     },
                     labelLine: {
                        show: false
                     },
                     data: [
                        { value: list.value[a].totalNum, name: list.value[a].name },
                     ]
                  }
               ]
            };


            if(a==0){
               var option0 = deepClone(option)
               option0.color = ['#24c548']
               option0.title.textStyle.color = '#24c548'
               myChart0.setOption(option0, true);
            }
            if(a==1){
               var option1 = deepClone(option)
               option1.color = ['#e7bd27']
               option1.title.textStyle.color = '#e7bd27'
               myChart1.setOption(option1, true);
            }
            if(a==2){
               var option2 = deepClone(option)
               option2.color = ['#e65c3e']
               option2.title.textStyle.color = '#e65c3e'
               myChart2.setOption(option2, true);
            }
            if(a==3){
               var option3 = deepClone(option)
               option3.color = ['#8e66e7']
               option3.title.textStyle.color = '#8e66e7'
               myChart3.setOption(option3, true);
            }
            if(a==4){
               var option4 = deepClone(option)
               option4.color = ['#28b8d6']
               option4.title.textStyle.color = '#28b8d6'
               myChart4.setOption(option4, true);
            }
         }

      };

      const form = ref({
            type:1,
            deptId:1
@@ -61,8 +233,9 @@
            listApi()
        }
      onMounted(() => {
          listApi()
         listApi()
            department();
         emergencySuppliesCount()
      });
      const day=ref(0)
        const listApi=()=>{
@@ -124,7 +297,20 @@
            propse,
            listApi,
            eaclick,
         day
         day,
         list,
         emergencySuppliesCount,
         params,
         initPies,
         leftClick,
         rightClick,
         echarts0,
         echarts1,
         echarts2,
         echarts3,
         echarts4,
         disabledRight,
         disabledLeft
      };
   },
});
@@ -141,4 +327,38 @@
.el-form {
   padding: 20px 0;
}
   .pie-body{
      width: 50%;
      height: 370px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      position: relative;
   }
   .pie-item{
      width: 32%;
      height: 48%;
      margin-right: 1%;
      margin-bottom: 1%;
   }
   .pie-left{
      position: absolute;
      width: 30px;
      height: 30px;
      left: 0;
      top: 48%;
      cursor: pointer;
   }
   .pie-right{
      position: absolute;
      width: 30px;
      height: 30px;
      right: 0;
      top: 48%;
      cursor: pointer;
   }
   .disabled-pie{
      pointer-events:none;
      color: #9b9da1;
   }
</style>