elizebeth/src/xt_pages/qcd/officesControlAnalysis/project.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="按时间分组" name="first"></el-tab-pane>
        <el-tab-pane label="按项目分组" name="second"></el-tab-pane>
      </el-tabs>
      <div class="cell clearfix">
        <el-select v-model="lapseto" placeholder="请选择" style="width:120px;margin-right:20px" @change="changeOptions">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="type" placeholder="请选择" @change="chooseType" style="margin-right:20px">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="mode_type" placeholder="请选择" style="width:120px;margin-right:20px" @change="handleModeType">
          <el-option
            v-for="item in normdata"
            :key="item.inspection_minor"
            :label="item.item_name"
            :value="item.inspection_minor"
          ></el-option>
        </el-select>
      </div>

      <div class="cell clearfix">
        <p class="chartTitle">统计图</p>
      </div>
      <div>
        <line-chart :options="chart"></line-chart>
      </div>
      <div class="cell clearfix">
        <p class="point"></p>
        <p class="pointTitle">指标正常范围值</p>
      </div>
      <div class="cell clearfix newDisplay">
        <span class="index" v-for="(item,index) in normdata" :key="index ">{{item.item_name}}({{item.min_range}}-{{item.large_range}})</span>
      </div>
    </div>
  </div>
</template>

<script>
const moment = require('moment')
import echarts from "echarts";
import { GetOICData } from "@/api/qcd";
import LineChart from "../../qcd/components/LineChart";
import { uParseTime } from "@/utils/tools";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {getNormData,getProjectList,getMonthProjectList } from "@/api/common/common"
export default {
  components: {
    LineChart,
    BreadCrumb
  },
  data() {
    return {
      activeName: "second",
      normdata:[],
      modesData: {
        xAxis: [],
        series: []
      },
      crumbs: [
        { path: false, name: "科室质控" },
        { path: false, name: "科室质控达标统计" },
        { path: false, name: "按项目分组" }
      ],
      options: [
        {
          value:0,
          label:"全部",
        },
        {
          value: 1,
          label: "留治",
        },
        {
          value:2,
          label: "转归"
        },
      ],
      options1: [
        {
          value: 1,
          label: "按季度对比统计"
        },
        {
          value: 2,
          label: "按月份对比统计"
        },
      ],
      value: "请选项",
      lapseto:0,
      type:1,
      mode_type:"",
      chart: {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["次数"],
          left: 0
        },
        xAxis: {
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
        },
        yAxis: {
          axisLabel: {
            formatter: "{value} %"
          },
          show: false
        },
        series: [
          {
            name: "次数",
            type: "bar",
            data: [
              "78.57",
              "50",
              "80",
              "93.33",
              "92.86",
              "100",
              "12",
              "77",
              "37"
            ],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%"
              }
            },
            //配置样式
            itemStyle: {
              //通常情况下：

              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              normal: {
                color: function(params) {
                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                  var colorList = [
                    ["#A9E0F3", "#9FBDFC"],
                    ["#A9E0F3", "#9FBDFC"],
                    ["#A9E0F3", "#9FBDFC"],

                    ["#FFD7C0", "#FF9994"],
                    ["#FFD7C0", "#FF9994"],
                    ["#FFD7C0", "#FF9994"],
                    ["#D7C3FD", "#B3A8F7"],
                    ["#D7C3FD", "#B3A8F7"],
                    ["#D7C3FD", "#B3A8F7"]
                  ];

                  var index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex % colorList.length;
                  }

                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colorList[index][0] },
                    // { offset: 0.5, color: colorList[index][1] },
                    { offset: 1, color: colorList[index][1] }
                  ]);
                },
                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
              },

              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    handleClick() {
      if (this.activeName == "first") {
        this.$router.push({ path: "/qcd/officesControlAnalysis/time" });
      }
    },
    chooseType(val) {
      this.type = val;
      console.log("val",val)
      //按季度
      if(val == 1){
        this.getlist()
      }
      //按月份
      if(val == 2){
        this.getMonthList()
      }
     
    },
    changeOptions(val){
      this.lapseto = val
      this.getlist()
    },
    getNormData(){
        getNormData().then(response=>{
            var normdata = response.data.data.normdata
            console.log("normdata",normdata)
            for(let i=0;i<normdata.length;i++){
             this.mode_type = normdata[0].inspection_minor
            }
            this.normdata = normdata
            this.getlist()
            this.getMonthList()
        })
    },
    handleModeType(val){
      this.mode_type = val
      this.getlist()
    },

    //季度
    getlist(){
         this.modesData.series = []
         this.modesData.xAxis = []
        const firstQuarterStart =  moment().startOf('year').format('YYYY-MM-DD')
       // console.log("本月开始时间",firstQuarterStart)
        const firstQuarterEnd = moment().month(11).endOf('month').format("YYYY-MM-DD")
       // console.log("本月结束时间",firstQuarterEnd)

        //第一季度
        const first_quarter_start =  moment().startOf('year').format('YYYY-MM-DD')
       // console.log("第一季度",first_quarter_start)
        const first_qurter_end = moment().month(2).endOf('month').format("YYYY-MM-DD")
      // console.log("第一季度",first_qurter_end)
        //第二季度
        const second_qurter_start = moment().month(3).startOf('month').format("YYYY-MM-DD")
      //  console.log("第二季度",second_qurter_start)
        const second_qurter_end = moment().month(5).endOf('month').format("YYYY-MM-DD")
      //  console.log("第二季度",second_qurter_end)
        //第三季度
        const three_qurter_start = moment().month(6).startOf('month').format("YYYY-MM-DD")
      //  console.log("第三季度",three_qurter_start)
        const three_qurter_end = moment().month(8).endOf('month').format("YYYY-MM-DD")
      //  console.log("第三季度",three_qurter_end)
        //第四季度
         const four_qurter_start = moment().month(9).startOf('month').format("YYYY-MM-DD")
      //  console.log("第四季度",four_qurter_start)
        const four_qurter_end = moment().month(11).endOf('month').format("YYYY-MM-DD")
      //  console.log("第四季度",four_qurter_end)
     
         const params = {
           lapseto:this.lapseto,
           itemtype:this.type,
           modetype:this.mode_type,
           startime:firstQuarterStart,
           endtime:firstQuarterEnd,
           first_quarter_start:first_quarter_start,
           first_qurter_end:first_qurter_end,
           second_qurter_start:second_qurter_start,
           second_qurter_end:second_qurter_end,
           three_qurter_start:three_qurter_start,
           three_qurter_end:three_qurter_end,
           four_qurter_start:four_qurter_start,
           four_qurter_end:four_qurter_end,
         }
         console.log("params",params)
      getProjectList(params).then(response=>{
        if(response.data.state === 1){
          var list = response.data.data.list
         // console.log("数据源",list)
          var standList =  response.data.data.standList
         // console.log("standList",standList)
          var newArr = [
            {Total:"第一季度",Count:1,NoCount: 0},
            {Total:"第二季度",Count:1,NoCount: 0},
            {Total:"第三季度",Count:1,NoCount: 0},
            {Total:"第四季度",Count:1,NoCount: 0},
          ]
    

        //获取2个数组不同的部分
        var arrTwo = this.arrayDate(list,newArr)
        arrTwo.map(item => {
              list.push(item)
           })
        //  console.log("list",list)
         
         for(let i=0;i<list.length;i++){
            if(list[i].Total == "第一季度"){
               list[i].Total = 1
            }
          if(list[i].Total == "第二季度"){
               list[i].Total = 2
           }
         if(list[i].Total == "第三季度"){
               list[i].Total = 3
           }
          if(list[i].Total == "第四季度"){
               list[i].Total = 4
           }
         }
          //排序
          list.sort(this.compare('Total'))
          for(let i=0;i<list.length;i++){
            if(list[i].Total == 1){
               list[i].Total = "第一季度"
            }
            if(list[i].Total == 2){
               list[i].Total = "第二季度"
            }
            if(list[i].Total == 3){
               list[i].Total = "第三季度"
            }
            if(list[i].Total == 4){
               list[i].Total = "第四季度"
            }
          }

           var newArrThree = [
            {Total:"第一季度",Count:0},
            {Total:"第二季度",Count:0},
            {Total:"第三季度",Count:0},
            {Total:"第四季度",Count:0},
          ]

           //获取2个数组不同的部分
          var standArr = this.arrayDateTwo(standList,newArrThree)  
          standArr.map(item=>{
            standList.push(item)
          })
         //  console.log("standList",standList)

        
       //  console.log("list-----",list)
         var arrFive = []
          for(let i=0;i<list.length;i++){
             for(let j=0;j<standList.length;j++){
                if(list[i].Total == standList[j].Total){
                    list[i].NoCount = standList[j].Count
                    arrFive.push(list[i])
                }
             }
          }
        
       // console.log("arrFive",arrFive)
        
        for(const key in arrFive){
            this.modesData.xAxis.push(arrFive[key].Total);
            this.modesData.series.push(((arrFive[key].NoCount/arrFive[key].Count)*100).toFixed(1));
          }
         

          this.chart.series[0].data = this.modesData.series
          this.chart.xAxis.data = this.modesData.xAxis
        //  console.log("222000",this.modesData)
        }
      })
    },
     arrayDate(array1,array2){
      //  console.log("array1",array1)
      //  console.log("array2",array2)
        var array1 = array1;
        var array2 = array2;
        var result = [];
        for(var i = 0; i < array2.length; i++){
            var obj = array2[i];
            var num = obj.Total;   //staff_id   就是要对比的key
            var isExist = false;
            for(var j = 0; j < array1.length; j++){
                var aj = array1[j];
                var n = aj.Total;
                if(n == num){
                    isExist = true;
                    break;
             }
            }
            if(!isExist){
                result.push(obj);
            }
        }
      //  console.log("result",result)
        return result;
    },
    arrayDateTwo(array1,array2){
      //   console.log("array1",array1)
      //   console.log("array2",array2)
        var array1 = array1;
        var array2 = array2;
        var result = [];
        for(var i = 0; i < array2.length; i++){
            var obj = array2[i];
            var num = obj.Total;   //staff_id   就是要对比的key
            var isExist = false;
            for(var j = 0; j < array1.length; j++){
                var aj = array1[j];
                var n = aj.Total;
                if(n == num){
                    isExist = true;
                    break;
             }
            }
            if(!isExist){
                result.push(obj);
            }
        }
      //  console.log("resultTwo",result)
        return result;
    },
     compare(property){
       return function(a,b){
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        }
    },
    
    //按月份统计
    getMonthList(){
        const januaryStart = moment().month(0).startOf('month').format("YYYY-MM-DD")
        console.log("一月始",januaryStart)
        const januaryEnd = moment().month(0).endOf('month').format("YYYY-MM-DD")
        console.log("一月末",januaryEnd)

        const  febStart = moment().month(1).startOf('month').format("YYYY-MM-DD")
        console.log("二月始",febStart)
        const febEnd = moment().month(1).endOf('month').format("YYYY-MM-DD")
        console.log("二月末",febEnd)

        const  marchStart = moment().month(2).startOf('month').format("YYYY-MM-DD")
        console.log("三月始",marchStart)
        const marchEnd = moment().month(2).endOf('month').format("YYYY-MM-DD")
        console.log("三月末",marchEnd)

        const  aprStart = moment().month(3).startOf('month').format("YYYY-MM-DD")
        console.log("四月始",aprStart)
        const aprEnd = moment().month(3).endOf('month').format("YYYY-MM-DD")
        console.log("四月末",aprEnd)

        const  mayStart = moment().month(4).startOf('month').format("YYYY-MM-DD")
        console.log("五月始",mayStart)
        const mayEnd = moment().month(4).endOf('month').format("YYYY-MM-DD")
        console.log("五月末",mayEnd)

        const  junStart = moment().month(5).startOf('month').format("YYYY-MM-DD")
        console.log("六月始",junStart)
        const junEnd = moment().month(5).endOf('month').format("YYYY-MM-DD")
        console.log("六月末",junEnd)

        const  julStart = moment().month(6).startOf('month').format("YYYY-MM-DD")
        console.log("7月始",julStart)
        const julEnd = moment().month(6).endOf('month').format("YYYY-MM-DD")
        console.log("7月末",julEnd)

        const  augStart = moment().month(7).startOf('month').format("YYYY-MM-DD")
        console.log("8月始",augStart)
        const augEnd = moment().month(7).endOf('month').format("YYYY-MM-DD")
        console.log("8月末",augEnd)

        const  sepStart = moment().month(8).startOf('month').format("YYYY-MM-DD")
        console.log("9月始",sepStart)
        const sepEnd = moment().month(8).endOf('month').format("YYYY-MM-DD")
        console.log("9月末",sepEnd)

        const  octStart = moment().month(9).startOf('month').format("YYYY-MM-DD")
        console.log("10月始",octStart)
        const octEnd = moment().month(9).endOf('month').format("YYYY-MM-DD")
        console.log("10月末",octEnd)

        const  novStart = moment().month(10).startOf('month').format("YYYY-MM-DD")
        console.log("11月始",novStart)
        const novEnd = moment().month(10).endOf('month').format("YYYY-MM-DD")
        console.log("11月末",novEnd)
        
        const  decStart = moment().month(11).startOf('month').format("YYYY-MM-DD")
        console.log("12月始",decStart)
        const decEnd = moment().month(11).endOf('month').format("YYYY-MM-DD")
        console.log("12月末",decEnd)
        
        const params = {
          lapseto:this.lapseto,
          itemtype:this.type,
          modetype:this.mode_type,
          januaryStart:januaryStart,
          januaryEnd:januaryEnd,
          febStart:febStart,
          febEnd:febEnd,
          marchStart:marchStart,
          marchEnd:marchEnd,
          aprStart:aprStart,
          aprEnd:aprEnd,
          mayStart:mayStart,
          mayEnd:mayEnd,
          junStart:junStart,
          junEnd:junEnd,
          julStart:julStart,
          julEnd:julEnd,
          augStart:augStart,
          augEnd:augEnd,
          sepStart:sepStart,
          sepEnd:sepEnd,
          octStart:octStart,
          octEnd:octEnd,
          novStart:novStart,
          novEnd:novEnd,
          decStart:decStart,
          decEnd:decEnd,    
        }
       console.log("params",params)
       getMonthProjectList(params).then(response=>{
        if(response.data.state === 1){
            var monthlist = response.data.data.monthlist
            console.log("monthlist",monthlist)
           }
       })
    }
  },
  created(){
       //获取指标正常范围值
     this.getNormData()
  },
};
</script>

<style lang="scss" scoped>
.newLi {
  li {
    background: #f5f5f6;
  }
}
.chartTitle {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
}
.point {
  width: 13px;
  height: 13px;
  background: linear-gradient(
    0deg,
    rgba(169, 224, 243, 1),
    rgba(159, 189, 252, 1)
  );
  border-radius: 7px;
  margin-right: 8px;
}
.pointTitle {
  font-size: 13px;
}
.index {
  color: #a09ba3;
  font-size: 13px;
  margin-right: 36px;
  margin-bottom: 20px;
}
.newDisplay {
  flex-wrap: wrap;
}
</style>