合并

Your Name

2022-09-08 5a1616f169d75ece07d2d12a8edac3e5f660a920

 src/views/facilityManagement/EquipmentStatistics/index.vue

@@ -0,0 +1,101 @@
<template>
   <div class="box">
      <div class="title">设备设施统计</div>
      <div ref="main" style="width: 100%; height: 400px"></div>
   </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import { facilityManagementApi } from '/@/api/facilityManagement';
export default defineComponent({
   setup() {
      const listApi = () => {
         facilityManagementApi()
            .getequipmentInfoStatistics()
            .then((res) => {
               if (res.data.code == 200) {
                  let arr = [];
                  arr = res.data.data;
                  let date = [];
                  for (let i = 0; i < arr.length; i++) {
                     if (arr[i].stopStatus == 1) {
                        date[0] = arr[i].count;
                     } else if (arr[i].stopStatus == 2) {
                        date[1] = arr[i].count;
                     }else if (arr[i].stopStatus == 3) {
                        date[2] = arr[i].count;
                     }else if (arr[i].stopStatus == 4) {
                        date[3] = arr[i].count;
                     }else if (arr[i].stopStatus == -1) {
                        date[4] = arr[i].count;
                     }
                  }
                  init(date);
               } else {
                  ElMessage({
                     showClose: true,
                     message: res.data.msg,
                     type: 'error',
                  });
               }
            });
      };
      onMounted(() => {
         listApi();
      });
      const main = ref();
      const init = (data: any) => {
         var myChart = echarts.init(main.value);
         var option = {
            tooltip: {},
            grid: {
               left: '3%',
               right: '4%',
               bottom: '5%',
               containLabel: true,
            },
            xAxis: {
               type: 'category',
               data: ['停用 ', '在用', '维修 ', '报废', '超时未保养'],
            },
            yAxis: {
               type: 'value',
               name: '数量',
               nameTextStyle: {
                  color: '#aaa',
                  nameLocation: 'start',
               },
            },
            color: ['#6394f9'],
            series: [
               {
                  data: data,
                  type: 'bar',
               },
            ],
         };

         myChart.setOption(option);
      };
      return {
         init,
         onMounted,
         main,
         listApi,
      };
   },
});
</script>
<style scoped>
.box {
   background-color: #fff;
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.title {
   font-size: 16px;
   border-bottom: 1px solid #eee;
   padding: 20px;
}
</style>