wwk / Antis_BlindBox_Service

<template>
  <div class="NCC-common-layout systemLogs">
    <div class="NCC-common-layout-center">
      <el-row class="NCC-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="4">
            <el-form-item label="拒收原因">
							<el-select v-model="query.unqualifiedreason" placeholder="下拉选择" clearable>
                                <el-option label="全部" value="全部"  />
								<el-option v-for="(item, index) in unqualifiedreasonOptions" :key="index" :label="item.OPTIONNAME" :value="item.OPTIONNAME"  />
							</el-select>
						</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期选择">
              <el-date-picker
                v-model="query.receivingtime"
                type="daterange"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
                :editable="false"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()"
                >查询</el-button
              >
             
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="NCC-common-layout-main NCC-flex-main">
        <el-tabs v-model="activeName" type="border-card" class="logTabs">
          <!-- <div class="NCC-common-head">           
            <div class="NCC-common-head-right">
              <el-tooltip effect="dark" content="刷新" placement="top">
                <el-link
                  icon="icon-ym icon-ym-Refresh NCC-common-head-icon"
                  :underline="false"
                  @click="reset()"
                />
              </el-tooltip>
              <screenfull isContainer />
            </div>
          </div> -->
          <el-tab-pane label="数据列表" name="1" style="padding: 5px">
            <NCC-table v-loading="listLoading" :data="list">
              <el-table-column prop="reason" label="拒收原因" align="left" />
              <el-table-column prop="sl" label="标本数量" align="left" />
              <el-table-column prop="bl" label="百分率" align="left" />              
            </NCC-table>
          </el-tab-pane>
          <el-tab-pane label="统计图表" name="5">
            <div class="chart-container app-container nohead">
              <div id="container" style="min-width:400px;height:400px"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
//import echarts from "echarts";
//import resize from "../graphDemo/mixins/resize";
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
export default {
  components: { highcharts: Chart },
  name: "extend-graphDemo-highchartsPie",
  data() {
    return {
      chartOptions: {},
      query: {
        sectiontime: undefined,
      },
      list: [],
      chartlist:[],
      activeName: "1",
      listLoading: true,
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,
      // columnList: [
      //   { prop: "tasksource", label: "单行输入" },
      //   { prop: "status", label: "单行输入" },
      //   { prop: "verifier", label: "单行输入" },
      //   { prop: "archiveman", label: "单行输入" },
      //   { prop: "hospitalname", label: "单行输入" },
      //   { prop: "areagroup", label: "单行输入" },
      //   { prop: "sectiontime", label: "日期选择" },
      // ],
      unqualifiedreasonOptions : [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    //this.init();
    
    //this.query.unqualifiedreason = this.unqualifiedreasonOptions[0].id;
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  created() {
   
    this.defaultDate();
    this.getunqualifiedreasonOptions();
    this.initData();
    this.query.unqualifiedreason = "全部";
    //this.query.sectiontime=this.timeDefault;
    //console.log("xxx:"+this.timeDefault);
  },
  timeDefault() {
    let date = new Date();
    // 通过时间戳计算
    let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000; // 转化为时间戳
    let defalutEndTime = date.getTime();
    let startDateNs = new Date(defalutStartTime);
    let endDateNs = new Date(defalutEndTime);
    // 月，日 不够10补0
    defalutStartTime =
      startDateNs.getFullYear() +
      "-" +
      (startDateNs.getMonth() + 1 >= 10
        ? startDateNs.getMonth() + 1
        : "0" + (startDateNs.getMonth() + 1)) +
      "-" +
      (startDateNs.getDate() >= 10
        ? startDateNs.getDate()
        : "0" + startDateNs.getDate());
    defalutEndTime =
      endDateNs.getFullYear() +
      "-" +
      (endDateNs.getMonth() + 1 >= 10
        ? endDateNs.getMonth() + 1
        : "0" + (endDateNs.getMonth() + 1)) +
      "-" +
      (endDateNs.getDate() >= 10
        ? endDateNs.getDate()
        : "0" + endDateNs.getDate());
    return [defalutStartTime, defalutEndTime];
  },
  methods: {
      getunqualifiedreasonOptions(){
				previewDataInterface('218574423215572229').then(res => {
					this.unqualifiedreasonOptions = res.data;
                    
                    console.log("xxx:"+this.unqualifiedreasonOptions);
				});
			},
    init() {
     console.log("list:"+this.list);
     this.list.forEach(element => {
       this.chartlist.push({name:element.reason,y:element.sl});
       console.log(element.sl);
     });
      Highcharts.chart("container", {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "图表统计",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              style: {
                color:
                  (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                  "black",
              },
            },
          },
        },
        series: [
          {
            name: "百分率",
            colorByPoint: true,
            data: this.chartlist,
          },
        ],
      });
    },
    initData() {
      const activeId = this.activeName;
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: `/api/SubDev/Specimens`,
        method: "GET",
        data: query,
      }).then((res) => {
        //console.log(res);
        this.list = res.data;
        this.chartlist=[];
        this.init();
        this.listLoading = false;
      });
    },
    handleTabClick() {
      this.reset();
    },
    reset() {},
    defaultDate() {
      //获取新的时间(2019.4.12）
      let date = new Date();
      //获取当前时间的年份转为字符串
      let year = date.getFullYear().toString(); //'2019'
      //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString(); //'04'
      //获取天，判断是否小于10，如果是在字符串前面拼接'0'
      let da =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString(); //'12'
      //字符串拼接，开始时间，结束时间
      let end = year + "-" + month + "-" + da; //当天'2019-04-12'
      let beg = year + "-" + month + "-01"; //当月第一天'2019-04-01'
      this.query.sectiontime = [beg, end]; //将值设置给插件绑定的数据
      //this.startTime =beg;
      //this.endTime=end;
    },
    addOrUpdateHandle(id, isDetail) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.NCCForm.init(id, isDetail);
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.defaultDate();
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
  },
};
</script>
<style lang="scss" scoped>
.systemLogs {
  .NCC-common-layout-main {
    padding: 0;
  }
  .logTabs {
    height: 100%;
  }
  .line1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  >>> .el-tabs__content {
    height: calc(100% - 40px);
    padding: 0;
    .el-tab-pane {
      height: calc(100% - 10px);
      overflow: hidden;
    }
  }
}
</style>