测试完成

WXL

2025-04-01 81ffbda9c4396086a740c988ae634c57a27f868d

 src/views/knowledge/education/index.vue

@@ -1,5 +1,6 @@
<template>
  <div class="educationmanagement">

    <!-- 左侧栏 -->
    <div class="sidecolumn">
      <div class="sidecolumn-top">
@@ -39,6 +40,17 @@
              >
              </el-button>
            </span>
            <span v-if="data.id > 0">
              <el-button
                type="text"
                circle
                size="mini"
                @click="() => altertag(node, data)"
                ><span class="button-textxg"
                  ><i class="el-icon-edit-outline"></i
                ></span>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
@@ -57,72 +69,52 @@
              v-show="showSearch"
              label-width="98px"
            >
              <el-form-item label="宣教标题" prop="userName">
              <el-form-item label="通知标题" prop="preachname">
                <el-input
                  v-model="queryParams.userName"
                  v-model="queryParams.preachname"
                  placeholder="请输入"
                  clearable
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="适用科室" prop="region">
                <el-cascader
                  v-model="queryParams.administrative"
                  :options="deptList"
                  :props="props"
                  :show-all-levels="false"
                  clearable
                >
                  <template slot-scope="{ node, data }">
                    <span>{{ data.deptName }}</span>
                    <span v-if="!node.isLeaf">
                      ({{ data.children.length }})
                    </span>
                  </template>
                </el-cascader>
              </el-form-item>
              <el-form-item label="通知内容" prop="userName">
                <el-input
                  v-model="queryParams.userNamevalue"
                  placeholder="请输入"
                  clearable
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="适用方式" prop="shape">
                <el-cascader
                  v-model="queryParams.shapevalue"
                  :options="optionss"
                  :props="propss"
                  clearable
                ></el-cascader>
              </el-form-item>
              <el-form-item label="内容形式" prop="classify">
              <el-form-item label="适用院区" prop="region">
                <el-select
                  v-model="queryParams.classifyvalue"
                  placeholder="请选择"
                  v-model="campus"
                  size="medium"
                  multiple
                  filterable
                  placeholder="请选择分类"
                >
                  <el-option
                    v-for="(item, index) in editabshape"
                    v-for="item in courtyardlist"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="通知内容" prop="userName">
                <el-input
                  v-model="queryParams.preachcontent"
                  placeholder="请输入"
                  clearable
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>

              <el-form-item label="可用状态" prop="classify">
                <el-select
                  v-model="queryParams.classifyvalue"
                  v-model="queryParams.isavailable"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in usable"
                    v-for="(item, index) in qyoptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.label"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
@@ -170,6 +162,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>
@@ -181,10 +183,18 @@
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column label="序号" align="center" key="id" prop="id" />
              <el-table-column
                label="序号"
                fixed
                align="center"
                key="id"
                prop="id"
              />
              <el-table-column
                label="标题"
                fixed
                align="center"
                width="150"
                key="preachname"
                prop="preachname"
                :show-overflow-tooltip="true"
@@ -199,6 +209,7 @@
              <el-table-column
                label="主要内容"
                align="center"
                width="260"
                key="preachcontent"
                prop="preachcontent"
                :show-overflow-tooltip="true"
@@ -233,9 +244,14 @@
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span v-for="item in scope.row.labelInfo.split(',')"
                    >{{ item }}、
                  </span>
                  <div v-if="scope.row.labelInfo">
                    <span v-for="item in scope.row.labelInfo.split(',')"
                      >{{ item }}、
                    </span>
                  </div>
                  <div v-else>
                    <span>无</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
@@ -245,12 +261,17 @@
                prop="suitway"
                width="120"
              >
              <template slot-scope="scope">
                  <span v-for="item in scope.row.suitway.split(',')"
                    >{{ item }}、
                  </span>
                <template slot-scope="scope">
                  <div v-if="scope.row.suitway">
                    <span v-for="item in scope.row.suitway.split(',')"
                      >{{ item }}、
                    </span>
                  </div>
                  <div v-else>
                    <span>无</span>
                  </div>
                </template>
            </el-table-column>
              </el-table-column>
              <el-table-column
                label="内容形式"
                align="center"
@@ -286,12 +307,13 @@

              <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="300"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                  <!-- <el-button
                    size="medium"
                    type="text"
                    @click="goQRCode(scope.row)"
@@ -300,14 +322,14 @@
                    <span class="button-text"
                      ><i class="el-icon-edit"></i>二维码</span
                    ></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
@@ -372,7 +394,7 @@
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="getDeptTree()">取 消</el-button>
        <el-button type="primary" @click="submitsidecolumn">确 定</el-button>
      </div>
    </el-dialog>
@@ -433,6 +455,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>

@@ -441,6 +486,7 @@
  getheLibraryAssort,
  delheLibraryAssort,
  addheLibraryAssort,
  editheLibraryAssort,
  addtargetillness,
  getlibrarylist,
  dellibraryinfo,
@@ -449,11 +495,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 {
@@ -477,15 +524,20 @@
      total: 0,
      nameeducation: "",
      haoeducation: "",
      statisticson: false,
      indexid: null,
      inputValue: "",
      htmlRichText: "",
      radio: "主分类",
      inputVisible: false,
      previewtf: false,
      illnessVisible: false, //指标疾病弹框
      deptOptions: [],
      courtyardlist: [],
      optionsillness: [],
      illnesslistapi: [],
      illnesslist: [],
      campus: [],
      defaultProps: {
        children: "heLibraryAssortList",
        label: "assortname",
@@ -529,6 +581,7 @@
      }, //类别表单
      optionss: [],
      mode: [],
      qyoptions: [],
      languagelist: [],
      editabshape: [],
      usable: [],
@@ -536,7 +589,9 @@
      xjxsoptions: [],
      deptList: [],
      props: { multiple: true, value: "deptId", label: "deptName" },

      Collarr: [],
      Collarrname: [],
      Collarrvalue: [],
      //类别列表
      editableTabs: [],
      // 查询参数
@@ -556,15 +611,19 @@
    this.usable = store.getters.usable;
    this.precedencetype = store.getters.precedencetype;
    this.editabshape = store.getters.editabshape;
    this.qyoptions = store.getters.usable;
    this.courtyardlist = store.getters.courtyardlist;
  },

  methods: {
    /** 查询宣教列表 */
    getList() {
      //   this.loading = true;
      this.loading = true;
      getlibrarylist(this.queryParams).then((response) => {
        console.log(response);
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      listDept(this.queryParams).then((response) => {
        this.deptList = this.handleTree(response.data, "deptId");
@@ -581,6 +640,113 @@
      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: "40%", bottom: "10%" },
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "查看次数",
            type: "bar",
            data: this.Collarrvalue,
            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 = {};
@@ -589,6 +755,7 @@
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.campus = this.campus.join(",");
      this.getList();
    },
    /** 重置按钮操作 */
@@ -601,44 +768,84 @@
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.ids = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({
        path: "/knowledge/education/compilequer/",
        path: "/knowledge/educationinfo/",
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push({
        path: "/knowledge/education/compilequer/",
        query: { id: "1" },
        path: "/knowledge/educationinfo/",
        query: { id: row.id },
      });
    },
    // 查看宣教
    Vieweducation() {
      this.$router.push({
        path: "/knowledge/education/examine/",
        query: { id: "1" },
      });
    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>'
      );
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      const userIds = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
        .then(function () {
          return delFollowupinfo(userIds);
          return dellibraryinfo(userIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 打开统计图表
    statistics() {
      this.Collarrname=[];
      this.Collarrvalue=[];
      //取数据
      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;
      });
    },

    // 分类树-----------------------------------------
@@ -652,12 +859,21 @@
    getDeptTree() {
      getheLibraryAssort({}).then((res) => {
        this.deptOptions = res.rows;
        console.log(res);
        this.dialogFormVisible = false;
      });
    },

    // 添加类别树
    submitsidecolumn() {
      if (this.classifyform.id) {
        editheLibraryAssort(this.classifyform).then((res) => {
          this.getDeptTree();
          this.$modal.msgSuccess("修改成功");
          this.classifyform = {};
          this.dialogFormVisible = false;
        });
        return;
      }
      let calssvalue = {};
      if (
        this.classifyform.pid &&
@@ -675,6 +891,7 @@
      } else {
        return this.$modal.msgError("请填写完整信息");
      }
      this.classifyform.hetype = 1;
      addheLibraryAssort(this.classifyform).then((res) => {
        this.getDeptTree();
        this.$modal.msgSuccess("新增成功");
@@ -710,6 +927,16 @@
          })
          .catch(() => {});
      }
    },
    altertag(a, b) {
      this.dialogFormVisible = true;
      if (!b.pid) {
        this.radio = "主分类";
      } else {
        this.radio = "子分类";
      }
      this.classifyform = b;
      this.dialogFormVisible = true;
    },

    // 筛选节点
@@ -809,7 +1036,7 @@
  margin-top: 20px;
  margin: 20px;
  padding: 30px;
  background: #edf1f7;
  background: #fff;
  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);
@@ -913,6 +1140,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;
@@ -924,6 +1228,24 @@
  font-size: 20px;
  cursor: pointer;
}
::v-deep .el-tree {
  position: relative;
  cursor: default;
  border-radius: 5px;
  background: #eff8fe;
  color: #606266;
  border: 1px solid #bbe1fa;
  // 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);
}
::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #7799fb;
  color: #fff;
}
::v-deep .el-button--mini.is-circle {
  padding: 7px;
  margin: 0;