完成统计模块基本搭建

heimawl

2023-07-17 2d2377d39a33c21f6a5e5ba66d4b32a76170f503

 src/views/sfstatistics/Voicedetail/index.vue

@@ -1,17 +1,374 @@
<template>
  <div>复诊统计</div>
  <div class="Questionnairemanagement">
    <!-- 右侧数据 -->
    <div class="leftvlue">
      <div class="leftvlue-top">
        <el-tabs v-model="topactiveName" @tab-click="tophandleClick">
          <el-tab-pane name="Local">
            <span class="mulsz" slot="label">复查统计 </span>
          </el-tab-pane>
          <el-tab-pane name="sharing">
            <span class="mulsz" slot="label">复诊统计 </span>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="viewbox">
      <div class="title-bot">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="98px"
        >
          <el-form-item prop="userName">
            <el-select
              v-model="queryParams.value1"
              placeholder="默认按月份暂时"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投诉提交时间">
            <el-date-picker
              v-model="queryParams.dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="科室：" prop="userName">
            <el-select v-model="queryParams.value2" placeholder="请选择">
              <el-option
                v-for="item in ksoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理方案：" prop="userName">
            <el-select v-model="queryParams.value3" placeholder="请选择">
              <el-option
                v-for="item in gloptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="viewhez">
        <div
          id="fucazCharts"
          class="sontwoactiveNamecaz"
          style="width: 800px; height: 800px"
        ></div>
        <div
          id="fucabCharts"
          class="sontwoactiveNamecab"
          style="width: 1300px; height: 800px"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import * as echarts from "echarts";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "questionnaire",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: { Treeselect },
  data() {
    return {};
    return {
      topactiveName: "Local", //顶部选择
      fucazCharts: {},
      fucabCharts: {},
      queryParams: {},
      options: [
        {
          value: 1,
          label: "按月份",
        },
        {
          value: 2,
          label: "按季度",
        },
        {
          value: 3,
          label: "按年",
        },
      ],
      ksoptions: [
        {
          value: 1,
          label: "骨科",
        },
        {
          value: 2,
          label: "心脏科",
        },
        {
          value: 3,
          label: "内分泌科",
        },
      ],
      gloptions: [
        {
          value: 4,
          label: "一号",
        },
        {
          value: 2,
          label: "二号",
        },
        {
          value: 3,
          label: "三号",
        },
        {
          value: 1,
          label: "无",
        },
      ],
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.fucazCharts = document.getElementById("fucazCharts");
    this.fucabCharts = document.getElementById("fucabCharts");

    console.log(this.fucazCharts);
    console.log(this.fucabCharts);

    this.fucazChartsInit();
    this.fucabChartsInit();
  },

  created() {},

  methods: {},
  methods: {
    fucazChartsInit() {
      var fucazCharts = echarts.init(this.fucazCharts);
      console.log(fucazCharts);
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "原因归属",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "不需要复诊" },
              { value: 735, name: "没有意义" },
              { value: 580, name: "不知道时间" },
              { value: 484, name: "经济原因" },
              { value: 300, name: "忘记复诊" },
              { value: 200, name: "不方便来院复诊" },
              { value: 200, name: "其他医院复诊" },
              { value: 100, name: "其他" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      fucazCharts.setOption(option);
    },
    fucabChartsInit() {
      var fucabCharts = echarts.init(this.fucabCharts);
      console.log(fucabCharts);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["未复诊数", "及时复诊数", "及时复诊率"],
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "人数",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "百分比",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "未复诊数",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ";
              },
            },
            data: [
              47.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "及时复诊数",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ";
              },
            },
            data: [
              66.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "及时复诊率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: [
              7.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      fucabCharts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.Questionnairemanagement {
}

::v-deep.el-tabs--left,
.el-tabs--right {
  overflow: hidden;
  align-items: center;
  display: flex;
}
::v-deep.el-input--medium .el-input__inner {
  height: 40px !important;
}
::v-deep.el-tabs--right .el-tabs__active-bar.is-right {
  height: 40px;
  width: 5px;
  left: 0;
}
::v-deep.el-tabs--right .el-tabs__item.is-right {
  display: block;
  text-align: left;
  font-size: 20px;
}

.leftvlue {
  //   display: flex;
  //   flex: 1;
  margin-top: 20px;
  //   margin: 20px;
  padding: 30px;
  background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .mulsz {
    font-size: 20px;
  }
}
.viewbox {
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  // height: 300px;
  margin-top: 20px;
  .title-bot {
    padding: 20px;
  }
}
.viewhez {
  display: flex;
  overflow: hidden;
}
</style>