elizebeth/src/xt_pages/qcd/qualitycontrol/totalSstatistics.vue

<template>
    <div>
        <div class="content_top">
            <div class="block">
                <span>查询时间:</span>
                <el-date-picker
                v-model="time_month"
                type="month"
                placeholder="选择月">
                </el-date-picker>
            </div>
            <div>
                <el-date-picker
                v-model="stat_time"
                type="date"
                placeholder="选择日期">
                </el-date-picker>
                <span>-</span>
                <el-date-picker
                v-model="end_time"
                type="date"
                placeholder="选择日期">
                </el-date-picker>
            </div>
            <div style="width: 200px;">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
            <el-button type="primary">查询</el-button>
        </div>
        <div class="cell clearfix">
          <p class="chartTitle">统计图</p>
        </div>
        <div class="echart" id="mychart" :style={width:width,height:height}></div>
        <div style="width: 80%;margin: auto;">
            <el-table
            :data="tableData"
            :show-summary = true
            border
            style="width: 100%;">
                <el-table-column
                    prop="date"
                    align="center"
                    label="甲状旁腺激素"
                    >
                </el-table-column>
                <el-table-column
                    prop="name"
                    
                    label="人数"
                    >
                </el-table-column>
                <el-table-column
                    prop="address"
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
                                type="text" >查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default{
    props: {
   
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "400px"
    },
    
  },
    data() {
        return {
            time_month:'',
            stat_time:'',
            end_time:'',
            input:'',
            myChart: {},
            pieData : [
            {
          value: 463,
          name: "不达标值患者"
        },
        {
          value: 395,
          name: "未检查患者"
        },
        {
          value: 157,
          name: "达标值患者"
        },
        // {
        //   value: 149,
        //   name: "广东"
        // },
        // {
        //   value: 147,
        //   name: "湖南"
        // }
            
            ],
            pieName: [],
            // myChartStyle:{float: "right", width: "100%", height: "400px"},
            tableData:[],
        }
    },
    mounted() {
    this.initDate(); //数据初始化
    this.initEcharts();
  },
  methods: {
    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        this.pieName[i] = this.pieData[i].name;
      }
    },
    initEcharts() {
      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieName,
          left: "10%",
          top: "30%",
          orient: "vertical"
        },
        color:['#ff7f9f','#fff67f','#1e5feb'],
        title: {
          // 设置饼图标题，位置设为顶部居中
        //   text: "国内院士前五省份图示",
          top: "0%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter:"{b} : {d}% ({c})"
              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
            },
            radius: "65%", //饼图半径
            data: this.pieData
          }
        ]
      };
    //   console.log(this.seriesData);
      const optionFree = {
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
    //   window.addEventListener("resize", () => {
    //     this.myChart.resize();
    //   });
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
    },
    handleClick(id){
        console.log(id);
    }
  }

}
</script>
<style lang="scss" scoped>
.content_top{
    display: flex;
    justify-content: space-around;
    color: #1e5feb;
}
</style>