wutian-miniprogram/src/echart/components/homeLevel4/index.ts

import dayjs from "dayjs";
const app = getApp<IAppOption>();

const echarts = require("../ec-canvas/echarts.js");

// pages/story/a.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    userInfo: Object,
    DoctorTitleType: Object,
    hospitalClassification: Object,
    hospitalLevel: Object,
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true,
    },
    take: {},
    case: {} as any,
    doctorCount: {},

    DepartmentId: "",
    DepartmentName: "",

    endYear: dayjs().year(),
    year1: dayjs().year(),
    year2: dayjs().year(),
    year3: dayjs().year(),
    empty1: false,
    empty2: false,
    empty3: false,

    rankList: [],

    newCaseShow: false,
  },

  lifetimes: {
    attached() {
      const { DepartmentId, DepartmentName } = this.data.userInfo.Department[0];
      this.setData({
        Department: this.data.userInfo.Department,
        DepartmentId,
        DepartmentName,
      });
      this.getTake();
      this.getCase();
      this.getManageDoctor();
      this.getRankList();

      this.waitEchart(async () => {
        this.getChat1();
        this.getChat2();
        this.getChat3();
        // const chart1: any = await this.initChart1();
        // const chart2: any = await this.initChart2();
        // const chart3: any = await this.initChart3();
      });
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    ecDataTrendComponent1: null as any,
    ecDataTrendComponent2: null as any,
    ecDataTrendComponent3: null as any,
    waitEchart(callback) {
      const time = setInterval(() => {
        if (this.selectComponent("#chart1")) {
          clearInterval(time);
          callback();
        }
      }, 30);
    },
    handleYear1(e) {
      this.setData({
        year1: e.detail.value,
      });
      this.getChat1();
    },
    getChat1() {
      wx.ajax({
        method: "GET",
        url: "?r=takeda/stat/department-doctor-list",
        data: {
          Year: this.data.year1,
          DepartmentId: this.data.DepartmentId,
        },
      }).then((res) => {
        this.setData({
          empty1: Boolean(res.list.length === 0),
        });
        this.initChart1(res.list);
      });
    },
    initChart1(list) {
      return new Promise((reslove) => {
        this.ecDataTrendComponent1 = this.selectComponent("#chart1");
        this.ecDataTrendComponent1.init((canvas, width, height, dpr) => {
          const chart = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio: dpr, // new
          });
          canvas.setChart(chart);
          const x: string[] = [];
          const y1: string[] = [];
          const y2: string[] = [];
          const y3: string[] = [];
          const y4: string[] = [];
          list.forEach((item) => {
            x.push(item.YearMonth);
            y1.push(item.DoctorLevel1Count);
            y2.push(item.DoctorLevel2Count);
            y3.push(item.DoctorLevel3Count);
            y4.push(item.DoctorCount);
          });

          const option = {
            legend: {
              bottom: 0,
              itemWidth: 8,
              itemHeight: 8,
              icon: "circle",
              lineStyle: {
                width: "0",
              },
              textStyle: {
                color: "rgba(103, 113, 114, 1)",
                fontSize: "12",
              },
              data: ["一级医生", "核心医生", "质控医生"],
            },
            grid: {
              top: "10%",
              left: "3%",
              right: "4%",
              bottom: "30",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: "rgba(40, 48, 49, 1)",
                },
                data: x,
              },
            ],
            yAxis: [
              {
                type: "value",
                minInterval: 1,
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: "rgba(40, 48, 49, 1)",
                  formatter(value) {
                    return Math.abs(value);
                  },
                },
              },
            ],
            series: [
              {
                name: "质控医生",
                type: "bar",
                barMaxWidth: 40,
                stack: "a",
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 10,
                  overflow: "truncate",
                  width: 30,
                  formatter(params) {
                    return Math.abs(params.value);
                  },
                },
                color: "rgba(0, 180, 197, 1)",
                data: y3,
              },
              {
                name: "核心医生",
                type: "bar",
                barMaxWidth: 40,
                stack: "a",
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 10,
                  overflow: "truncate",
                  width: 30,
                  formatter(params) {
                    return Math.abs(params.value);
                  },
                },
                color: "rgba(84, 226, 180, 1)",
                data: y2,
              },
              {
                name: "一级医生",
                type: "bar",
                barMaxWidth: 40,
                stack: "a",
                label: {
                  show: true,
                  color: "rgba(0, 180, 197, 1)",
                  fontSize: 10,
                  overflow: "truncate",
                  width: 30,
                },
                color: "rgba(225, 248, 242, 1)",
                data: y1,
              },
              {
                name: "总数", // 总数显示，生成一个总数的柱状图，将颜色设为透明，
                type: "line", // label将位置设备内部底部，造成一个总数显示在
                stack: "", // 柱状图上方的假象
                color: "rgba(0, 0, 0, 0)",
                data: y4,
                symbolSize: 0,
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    color: "rgba(133, 133, 133, 1)",
                    fontSize: 10,
                    formatter: "{c}",
                  },
                },
              },
            ],
            dataZoom: {
              type: "inside", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
              startValue: x.length - 6,
              endValue: x.length - 1,
              filterMode: "none",
            },
          };

          chart.setOption(option);
          reslove(chart);
          return chart;
        });
      });
    },
    handleYear2(e) {
      this.setData({
        year2: e.detail.value,
      });
      this.getChat2();
    },
    getChat2() {
      wx.ajax({
        method: "GET",
        url: "?r=takeda/stat/department-doctor-total-case-list",
        data: {
          Year: this.data.year2,
          DepartmentId: this.data.DepartmentId,
        },
      }).then((res) => {
        this.setData({
          empty2: Boolean(res.list.length === 0),
        });
        this.initChart2(res.list);
      });
    },
    initChart2(list) {
      return new Promise((reslove) => {
        this.ecDataTrendComponent2 = this.selectComponent("#chart2");
        this.ecDataTrendComponent2.init((canvas, width, height, dpr) => {
          const chart = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio: dpr, // new
          });
          canvas.setChart(chart);
          const x: string[] = [];
          const y1: string[] = [];
          const y2: string[] = [];
          const y3: string[] = [];
          list.forEach((item) => {
            x.push(item.YearMonth);
            y1.push(item.DoctorLevel1TotalCases);
            y2.push(item.DoctorLevel2TotalCases);
            y3.push(item.TotalCaseCount);
          });

          const option = {
            legend: {
              bottom: 0,
              itemWidth: 8,
              itemHeight: 8,
              icon: "circle",
              lineStyle: {
                width: "0",
              },
              textStyle: {
                color: "rgba(103, 113, 114, 1)",
                fontSize: "12",
              },
              data: ["一级医生提交", "核心医生提交"],
            },
            grid: {
              top: "10%",
              left: "3%",
              right: "4%",
              bottom: "30",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: "rgba(40, 48, 49, 1)",
                },
                data: x,
              },
            ],
            yAxis: [
              {
                type: "value",
                minInterval: 1,
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: "rgba(40, 48, 49, 1)",
                  formatter(value) {
                    return Math.abs(value);
                  },
                },
              },
            ],
            series: [
              {
                name: "核心医生提交",
                type: "bar",
                barMaxWidth: 40,
                stack: "a",
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 10,
                  overflow: "truncate",
                  width: 30,
                  formatter(params) {
                    return Math.abs(params.value);
                  },
                },
                color: "rgba(84, 226, 180, 1)",
                data: y2,
              },
              {
                name: "一级医生提交",
                type: "bar",
                barMaxWidth: 40,
                stack: "a",
                label: {
                  show: true,
                  color: "rgba(0, 180, 197, 1)",
                  fontSize: 10,
                  overflow: "truncate",
                  width: 30,
                },
                color: "rgba(225, 248, 242, 1)",
                data: y1,
              },
              {
                name: "总数", // 总数显示，生成一个总数的柱状图，将颜色设为透明，
                type: "line", // label将位置设备内部底部，造成一个总数显示在
                stack: "", // 柱状图上方的假象
                color: "rgba(0, 0, 0, 0)",
                data: y3,
                symbolSize: 0,
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    color: "rgba(133, 133, 133, 1)",
                    fontSize: 10,
                    formatter: "{c}",
                  },
                },
              },
            ],
            dataZoom: {
              type: "inside", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
              startValue: x.length - 6,
              endValue: x.length - 1,
              filterMode: "none",
            },
          };

          chart.setOption(option);
          reslove(chart);
          return chart;
        });
      });
    },
    handleYear3(e) {
      this.setData({
        year3: e.detail.value,
      });
      this.getChat3();
    },
    getChat3() {
      wx.ajax({
        method: "GET",
        url: "?r=takeda/stat/department-doctor-month-case-list",
        data: {
          Year: this.data.year3,
          DepartmentId: this.data.DepartmentId,
        },
      }).then((res) => {
        this.setData({
          empty3: Boolean(res.list.length === 0),
        });
        this.initChart3(res.list);
      });
    },
    initChart3(list) {
      return new Promise((reslove) => {
        this.ecDataTrendComponent3 = this.selectComponent("#chart3");
        this.ecDataTrendComponent3.init((canvas, width, height, dpr) => {
          const chart = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio: dpr, // new
          });
          canvas.setChart(chart);
          const x: string[] = [];
          const y1: string[] = [];
          const y2: string[] = [];
          const y3: string[] = [];
          list.forEach((item) => {
            x.push(item.YearMonth);
            y1.push(item.DoctorLevel1MonthCases);
            y2.push(item.DoctorLevel2MonthCases);
            y3.push(item.TotalCaseCount);
          });

          const option = {
            legend: {
              bottom: 0,
              itemWidth: 8,
              itemHeight: 8,
              icon: "circle",
              lineStyle: {
                width: "0",
              },
              textStyle: {
                color: "rgba(103, 113, 114, 1)",
                fontSize: "12",
              },
              data: ["一级医生提交", "核心医生提交"],
            },
            grid: {
              top: "10%",
              left: "3%",
              right: "4%",
              bottom: "30",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: "rgba(40, 48, 49, 1)",
                },
                data: x,
              },
            ],
            yAxis: [
              {
                type: "value",
                minInterval: 1,
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: "rgba(40, 48, 49, 1)",
                  formatter(value) {
                    return Math.abs(value);
                  },
                },
              },
            ],
            series: [
              {
                name: "核心医生提交",
                type: "bar",
                barMaxWidth: 40,
                stack: "a",
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 10,
                  overflow: "truncate",
                  width: 30,
                  formatter(params) {
                    return Math.abs(params.value);
                  },
                },
                color: "rgba(84, 226, 180, 1)",
                data: y2,
              },
              {
                name: "一级医生提交",
                type: "bar",
                barMaxWidth: 40,
                stack: "a",
                label: {
                  show: true,
                  color: "rgba(0, 180, 197, 1)",
                  fontSize: 10,
                  overflow: "truncate",
                  width: 30,
                },
                color: "rgba(225, 248, 242, 1)",
                data: y1,
              },
              {
                name: "总数", // 总数显示，生成一个总数的柱状图，将颜色设为透明，
                type: "line", // label将位置设备内部底部，造成一个总数显示在
                stack: "", // 柱状图上方的假象
                color: "rgba(0, 0, 0, 0)",
                data: y3,
                symbolSize: 0,
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    color: "rgba(133, 133, 133, 1)",
                    fontSize: 10,
                    formatter: "{c}",
                  },
                },
              },
            ],
            dataZoom: {
              type: "inside", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
              startValue: x.length - 6,
              endValue: x.length - 1,
              filterMode: "none",
            },
          };

          chart.setOption(option);
          reslove(chart);
          return chart;
        });
      });
    },
    getTake() {
      wx.ajax({
        method: "GET",
        url: "?r=takeda/doctor/todo",
        data: {},
      }).then((res) => {
        this.setData({
          take: res,
        });
      });
    },
    handleChangeDept(e) {
      const index = e.detail.value;
      const { DepartmentId, DepartmentName } = this.data.userInfo.Department[index];
      this.setData({
        DepartmentId,
        DepartmentName,
      });
      this.getCase();
      this.getManageDoctor();
      this.getChat1();
      this.getChat2();
      this.getChat3();
    },
    getCase() {
      wx.ajax({
        method: "GET",
        url: "?r=takeda/doctor/case",
        data: {
          DepartmentId: this.data.DepartmentId,
        },
      }).then((res) => {
        this.setData({
          case: res,
        });
      });
    },
    getManageDoctor() {
      wx.ajax({
        method: "GET",
        url: "?r=takeda/doctor/manage-doctor-count",
        data: { DepartmentId: this.data.DepartmentId },
      }).then((res) => {
        this.setData({
          doctorCount: res.count,
        });
      });
    },
    getRankList() {
      wx.ajax({
        method: "GET",
        url: "?r=takeda/stat/hospital-doctor-rank-list",
        data: {
          count: 5,
        },
      }).then((res) => {
        this.setData({
          rankList: res.list,
        });
      });
    },
    handleRankDetail() {
      wx.navigateTo({
        url: "/module1/pages/doctorRankList/index",
      });
    },
    handleInvite() {
      wx.navigateTo({
        url: "/module1/pages/invite/index",
      });
    },
    handleAllCase() {
      app.globalData.caseNav = "3";
      wx.switchTab({
        url: "/pages/cases/index",
      });
    },
    handleAllDoctor() {
      wx.navigateTo({
        url: "/module1/pages/org4/index",
      });
    },

    handlePendCase() {
      app.globalData.needDeal = "1";
      wx.switchTab({
        url: "/pages/cases/index",
      });
    },
    handleChat() {
      wx.switchTab({
        url: "/pages/chatRoomList/index",
      });
    },
    handleAudit() {
      wx.navigateTo({
        url: "/module1/pages/auditDoctorList/index",
      });
    },
    handleQuestion(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent("question", index);
    },
    handleNewCase() {
      this.setData({
        newCaseShow: true,
      });
    },
    handleNewCaseClose() {
      this.setData({
        newCaseShow: false,
      });
    },
    handleCase(e) {
      const { type } = e.currentTarget.dataset;
      const name = {
        0: "全部",
        2: "新病历",
        3: "讨论中",
        4: "已归档",
      }[type];
      app.globalData.caseNav = "3";
      app.globalData.caseStatus = type === "0" ? "" : type;
      app.globalData.caseStatusName = name;
      wx.switchTab({
        url: "/pages/cases/index",
      });
    },
  },
});

export {};