测试完成

WXL

2025-03-24 84f0f552689e2f29c9edeb5c8ad95959772dcd6a

 src/views/knowledge/education/index.vue

@@ -161,6 +161,16 @@
                  >删除</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-data-line"
                  size="medium"
                  @click="statistics"
                  >统计分析</el-button
                >
              </el-col>

              <!-- <el-col :span="1.5"> </el-col> -->
            </el-row>
@@ -183,6 +193,7 @@
                label="标题"
                fixed
                align="center"
                width="150"
                key="preachname"
                prop="preachname"
                :show-overflow-tooltip="true"
@@ -197,6 +208,7 @@
              <el-table-column
                label="主要内容"
                align="center"
                width="260"
                key="preachcontent"
                prop="preachcontent"
                :show-overflow-tooltip="true"
@@ -310,15 +322,15 @@
                      ><i class="el-icon-edit"></i>二维码</span
                    ></el-button
                  > -->
                  <!-- <el-button
                  <el-button
                    size="medium"
                    type="text"
                    @click="Vieweducation(scope.row)"
                    v-hasPermi="['system:user:edit']"
                    ><span class="button-textck"
                      ><i class="el-icon-edit"></i>查看</span
                      ><i class="el-icon-edit"></i>预览</span
                    ></el-button
                  > -->
                  >
                  <el-button
                    size="medium"
                    type="text"
@@ -442,6 +454,29 @@
        <div class="qrcode-img"></div>
      </div>
    </el-dialog>
    <el-dialog title="模板预览" :visible.sync="previewtf" width="60%">
      <div class="preview-left">
        <!-- 单选 -->
        <div v-html="htmlRichText"></div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="previewGo">前往模板详情修改</el-button>
        <el-button type="primary" @click="previewFn">确认使用</el-button>
      </span> --> </el-dialog
    >\
    <!-- 统计图表 -->
    <el-dialog width="80%" title="管饲宣教统计" :visible.sync="statisticson">
      <div class="grid-content bg-purple" style="min-height: 300px">
        <div class="title">
          宣教统计
          <span class="el-icon-s-unfold moreIcon"></span>
        </div>
        <div class="cooperate">
          <!-- 合作区域 -->
          <div class="pieChart" id="pieCharts"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

@@ -459,11 +494,12 @@
  getillnesslist,
  illnesslistget,
  getillness,
  deltargetillness,
} from "@/api/AiCentre/index";
import { listDept } from "@/api/system/dept";
import { getToken } from "@/utils/auth";
import store from "@/store";

import axios from "axios";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
@@ -487,10 +523,13 @@
      total: 0,
      nameeducation: "",
      haoeducation: "",
      statisticson: false,
      indexid: null,
      inputValue: "",
      htmlRichText: "",
      radio: "主分类",
      inputVisible: false,
      previewtf: false,
      illnessVisible: false, //指标疾病弹框
      deptOptions: [],
      courtyardlist: [],
@@ -549,7 +588,9 @@
      xjxsoptions: [],
      deptList: [],
      props: { multiple: true, value: "deptId", label: "deptName" },

      Collarr: [],
      Collarrname: [],
      Collarrvalue: [],
      //类别列表
      editableTabs: [],
      // 查询参数
@@ -598,6 +639,114 @@
      this.nameeducation = row.userName;
      this.haoeducation = row.nickName;
    },
    // 合作商点位汇总统计饼状图
    async getnodeCollect() {
      // const res = await getnodeCollect();
      // this.nodeCollect = res.data;
      // this.nodeCollect = [
      //   { name: "门诊随访", value: 1232 },
      //   { name: "出院随访", value: 342 },
      // ];
      this.myPieChart();
    },
    // 饼状图
    myPieChart() {
      // 基于准备好的dom，初始化echarts实例
      var echarts = require("echarts");
      var mypPieCharts = echarts.init(document.getElementById("pieCharts"));
      this.mypPieCharts = mypPieCharts;
      // 指定图表的配置项和数据
      var optionPie = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "left",
          orient: "horizontal", // 图例项水平排列
          top: "top", // 图例放置在顶部
          data: this.Collarrname,
        },
        toolbox: {
          feature: {
            magicType: {
              type: ["stack"],
            },
            dataView: {},
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.Collarrname,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        grid: { top: "30%", left: "10%", right: "50%", bottom: "10%" },
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "查看次数",
            type: "bar",
            data: this.Collarrvalue,
            // data: [6,8,22,99,87,90,12,11,22,33,34,44],
            seriesLayoutBy: "row",
            smooth: true,
            label: {
              show: true,
              position: "inside",
            },
            emphasis: { focus: "series" },
          },
          {
            name: "查看次数比率",
            type: "pie",
            radius: "30%",
            radius: ["40%", "70%"],
            center: ["80%", "60%"],
            data: this.Collarr,
            emphasis: {
              focus: "self",
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              formatter: "{b}: {d}%",
            },
          },
        ],
      };
      mypPieCharts.on("updateAxisPointer", function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          mypPieCharts.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ",
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      });

      // 使用刚指定的配置项和数据显示图表。
      mypPieCharts.setOption(optionPie);
    },
    // 表单重置
    reset() {
      this.form = {};
@@ -626,22 +775,37 @@
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({
        path: "/knowledge/education/compilequer/",
        path: "/knowledge/educationinfo/",
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push({
        path: "/knowledge/education/compilequer/",
        path: "/knowledge/educationinfo/",
        query: { id: row.id },
      });
    },
    // 查看宣教
    Vieweducation() {
      this.$router.push({
        path: "/knowledge/education/examine/",
        query: { id: row.id },
      });
    Vieweducation(row) {
      this.htmlRichText = null;
      this.previewtf = true;
      axios
        .get(row.htmlRichText)
        .then((response) => {
          console.log(response.data, "数据"); // 输出获取到的文件内容
          this.htmlRichText = response.data;
          this.htmlRichText = this.addStyleToImages(this.htmlRichText);
        })
        .catch((error) => {
          this.$modal.msgError("获取富文本失败");
          console.error("Failed to fetch file:", error);
        });
    },
    addStyleToImages(html) {
      return html.replace(
        /<img([^>]*)style=(['"])(?:(?!\2).)*\2([^>]*)>/g,
        '<img$1style="width:100%;height:auto;"$3>'
      );
    },

    /** 删除按钮操作 */
@@ -657,6 +821,29 @@
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 打开统计图表
    statistics() {
      //取数据
      let obj = { assortid: 13, isavailable: "", pageNum: 1, pageSize: 20 };
      getlibrarylist(obj).then((response) => {
        console.log(response.rows, "response.rows");
        response.rows.forEach((item) => {
          this.Collarr.push({ name: item.preachname, value: item.watchCount });
        });
        this.Collarrname = this.Collarr.map((item) => item.name);

        // 提取 value 属性到一个新数组
        this.Collarrvalue = this.Collarr.map((item) =>
          parseInt(item.value, 10)
        );
        this.statisticson = true;
        this.$nextTick(function () {
          this.getnodeCollect();
        });
        this.total = response.total;
        this.loading = false;
      });
    },

    // 分类树-----------------------------------------
@@ -702,6 +889,7 @@
      } else {
        return this.$modal.msgError("请填写完整信息");
      }
      this.classifyform.hetype = 1;
      addheLibraryAssort(this.classifyform).then((res) => {
        this.getDeptTree();
        this.$modal.msgSuccess("新增成功");
@@ -950,6 +1138,83 @@
    vertical-align: bottom;
  }
}

.bg-purple {
  background: #fff;
}

.grid-content {
  min-height: 36px;
  border-radius: 20px;
  padding: 0 10px;
}
.title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333;
  padding-top: 17px;
  padding-bottom: -4px;

  span {
    margin-left: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
  }
}
.moreIcon {
  font-size: 22px !important;
  margin-left: 400px !important;
  color: #5f84ff !important;
  cursor: pointer;
}
.cooperate {
  width: 100%;
  height: 280px;
  margin-top: 25px;
  display: flex;
  .pieChart {
    flex: 1;
  }
  .Points {
    width: 154px;
    height: 230px;
    text-align: center;
    padding: 20px 0;
    background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
      linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
      linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
      linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    p {
      height: 33px;
      margin-bottom: 10px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #072074;
      line-height: 33px;
    }
    span {
      height: 17px;
      margin-top: 6px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000412;
      line-height: 17px;
    }
  }
}
::v-deep .el-tree-node__content {
  display: -webkit-box;
  display: -ms-flexbox;