修改计划对比

src/components/CompareOrigin.vue

@@ -0,0 +1,215 @@
+<template>
+    <div>
+      <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="60%" style="border-radius: 40px">
+        <div slot="title">
+          <p style="text-align: center; margin-bottom: 20px; font-weight: 700">
+            <!-- {{ planName }}完成及得分情况 -->
+            专业报告对比
+          </p>
+          <div class="c_wrap">
+            <p class="c_name">
+                
+            </p>
+            <div class="c_main">
+              <div class="chart_wrap">
+                <PieChart :options="options1" chartId="myPieChart1" chartName="完成度" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options2" chartId="myPieChart2" chartName="焦虑" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options3" chartId="myPieChart3" chartName="抑郁" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options4" chartId="myPieChart4" chartName="压力" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options5" chartId="myPieChart5" chartName="精神障碍" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options6" chartId="myPieChart6" chartName="存在心理健康情况" />
+              </div>
+            </div>
+            <p class="c_name">{{ comparePlanList[1].planName }}</p>
+            <div class="c_main">
+              <div class="chart_wrap">
+                <PieChart :options="options7" chartId="myPieChart7" chartName="完成度" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options8" chartId="myPieChart8" chartName="焦虑" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options9" chartId="myPieChart9" chartName="抑郁" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options10" chartId="myPieChart10" chartName="压力" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options11" chartId="myPieChart11" chartName="精神障碍" />
+              </div>
+              <div class="chart_wrap">
+                <PieChart :options="options12" chartId="myPieChart12" chartName="存在心理健康情况" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+  
+      <div></div>
+    </div>
+  </template>
+  <script>
+  //引入echarts组件
+  import * as echarts from "echarts";
+  import PieChart from "@/components/PieChart";
+  
+  export default {
+    components: {
+      PieChart,
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        options1: [],
+        options2: [],
+        options3: [],
+        options4: [],
+        options5: [],
+        options6: [],
+        options7: [],
+        options8: [],
+        options9: [],
+        options10: [],
+        options11: [],
+        options12: [],
+        completeNum: 0,
+        unComplete: 0,
+        userType: "",
+        comparePlanList: [],
+        comparePlanDate: []
+      };
+    },
+    mounted() {
+  
+    },
+    methods: {
+      open(arr) {
+        this.comparePlanList = arr;
+        this.queryCompletePople(0);
+        this.queryCompletePople(1);
+        this.dialogVisible = true;
+      },
+  
+      // 查询计划完成和未完成人数
+      queryCompletePople(i) {
+        //调用接口返回信息
+        let url = `/plan/countComplete?planId=${this.comparePlanList[i].id}`;
+        this.$http.get(url, {}, (res) => {
+          if (res.code == 200) {
+            debugger
+            this.comparePlanDate[i] = { 'unComplete': res.data[0], 'completeNum': res.data[1] }
+            this.getPlanDimNun(i);
+          }
+        });
+      },
+  
+      // 查询不同维度的中重度数量
+      getPlanDimNun(i) {
+        this.$http.get(
+          `userRecordScore/countNumByPlanDim?planId=${this.comparePlanList[i].id}`,
+          {},
+          (res) => {
+            let dimensionList = res.data;
+            if (i == 0) {
+              this.options1 = [
+                { value: this.comparePlanDate[0].completeNum + this.comparePlanDate[0].unComplete, name: "已完成人数" },
+                { value: this.comparePlanDate[0].unComplete, name: "未完成占比" },
+              ];
+  
+              this.options2 = [
+                { value: this.comparePlanDate[0].completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
+                { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
+              ];
+  
+              this.options3 = [
+                { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
+                { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
+              ];
+  
+              this.options4 = [
+                { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
+                { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
+              ];
+  
+              this.options5 = [
+                { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
+                { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
+              ];
+  
+              this.options6 = [
+                {
+                  value: this.comparePlanDate[0].completeNum - dimensionList[3]["精神障碍"],
+                  name: "已完成人数",
+                },
+                { value: dimensionList[3]["精神障碍"], name: "精神障碍" },
+              ];
+            } else {
+              this.options7 = [
+                { value: this.comparePlanDate[1].completeNum + this.unComplete, name: "已完成人数" },
+                { value: this.comparePlanDate[1].unComplete, name: "未完成占比" },
+              ];
+              this.options8 = [
+                { value: this.comparePlanDate[1].completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
+                { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
+              ];
+  
+              this.options9 = [
+                { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
+                { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
+              ];
+  
+              this.options10 = [
+                { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
+                { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
+              ];
+  
+              this.options11 = [
+                { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
+                { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
+              ];
+  
+              this.options12 = [
+                {
+                  value: this.comparePlanDate[1].completeNum - dimensionList[3]["精神障碍"],
+                  name: "已完成人数",
+                },
+                { value: dimensionList[3]["精神障碍"], name: "精神障碍" },
+              ];
+            }
+          }
+        );
+      }
+    },
+  };
+  </script>
+  <style lang="less" scoped>
+  .c_wrap {
+    // display: flex;
+    width: 100%;
+  }
+  
+  .c_main {
+    width: 100%;
+    display: flex;
+  }
+  
+  .pag_class /deep/ .el-input__inner {
+    width: 100% !important;
+  }
+  
+  .chart_wrap {
+    flex: 1;
+    height: 200px;
+  }
+  </style>
+  

src/components/ComparePlanProfession.vue

@@ -1,535 +1,212 @@
 <template>
-  <div class="out">
-    <el-dialog
-      :visible.sync="dialogVisible"
-      :close-on-click-modal="false"
-      width="80%"
-      style="border-radius: 40px"
-    >
-      <div slot="title" id="el-com">
-        <p style="text-align: center; font-weight: 700; margin-bottom: 20px">
-          不同专业对比
+  <div>
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="60%" style="border-radius: 40px">
+      <div slot="title">
+        <p style="text-align: center; margin-bottom: 20px; font-weight: 700">
+          <!-- {{ planName }}完成及得分情况 -->
+          专业报告对比
         </p>
-        <p class="data_asyni">数据对比</p>
-        <div class="table-content">
-          <div ref="echarts_ld" style="width: 70vw; height: 100vh"></div>
-        </div>
-        <!-- <p class="data_asyni">选择计划对比</p> -->
-        <p class="data_asyni" style="margin-top: 20px">选择维度</p>
-
-        <div class="table-content">
-          <el-radio-group
-            class="data_asyni"
-            v-model="radio"
-            size="mini"
-            v-if="radioList.length > 0"
-            @input="singleFun"
-          >
-            <el-radio v-for="item in radioList" :key="item" :label="item">{{
-              item
-            }}</el-radio>
-          </el-radio-group>
-          <div ref="echarts_plan" style="width: 70vw; height: 50vh"></div>
+        <div class="c_wrap">
+          <p class="c_name">{{ comparePlanList[0].planName }}</p>
+          <div class="c_main">
+            <div class="chart_wrap">
+              <PieChart :options="options1" chartId="myPieChart1" chartName="完成度" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options2" chartId="myPieChart2" chartName="焦虑" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options3" chartId="myPieChart3" chartName="抑郁" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options4" chartId="myPieChart4" chartName="压力" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options5" chartId="myPieChart5" chartName="精神障碍" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options6" chartId="myPieChart6" chartName="存在心理健康情况" />
+            </div>
+          </div>
+          <p class="c_name">{{ comparePlanList[1].planName }}</p>
+          <div class="c_main">
+            <div class="chart_wrap">
+              <PieChart :options="options7" chartId="myPieChart7" chartName="完成度" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options8" chartId="myPieChart8" chartName="焦虑" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options9" chartId="myPieChart9" chartName="抑郁" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options10" chartId="myPieChart10" chartName="压力" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options11" chartId="myPieChart11" chartName="精神障碍" />
+            </div>
+            <div class="chart_wrap">
+              <PieChart :options="options12" chartId="myPieChart12" chartName="存在心理健康情况" />
+            </div>
+          </div>
         </div>
       </div>
     </el-dialog>
+
+    <div></div>
   </div>
 </template>
 <script>
 //引入echarts组件
 import * as echarts from "echarts";
-import { Loading } from "element-ui";
+import PieChart from "@/components/PieChart";
 
 export default {
+  components: {
+    PieChart,
+  },
   data() {
     return {
-      planInfo: {},
       dialogVisible: false,
-      compareVisible: false,
-
-      echarts_ld: "",
-      option_w: {},
-
-      echarts_plan: "",
-      groupData: [],
-      radioList: [],
-      radio: "",
+      options1: [],
+      options2: [],
+      options3: [],
+      options4: [],
+      options5: [],
+      options6: [],
+      options7: [],
+      options8: [],
+      options9: [],
+      options10: [],
+      options11: [],
+      options12: [],
+      completeNum: 0,
+      unComplete: 0,
+      userType: "",
+      comparePlanList: [],
+      comparePlanDate: []
     };
   },
   mounted() {
-    this.echarts_ld = this.$refs.echarts_ld;
-    this.echarts_plan = this.$refs.echarts_plan;
-    this.option_w = {
-      title: {},
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
-        },
-      },
-      legend: {},
-      grid: {
-        containLabel: true,
-      },
-      xAxis: {
-        type: "category",
-        data: [],
-        axisLabel: {
-          interval: 0,
-          rotate: -90,
-        },
-      },
-      yAxis: {
-        type: "value",
-        boundaryGap: [0, 0.01],
-        minInterval: 1,
-      },
-      series: [
-        {
-          name: "专业1",
-          type: "bar",
-          data: [0],
-          itemStyle: {
-            normal: {
-              color: "red", //柱状颜色
-            },
-          },
-        },
-        {
-          name: "专业2",
-          type: "bar",
-          data: [0],
-          itemStyle: {
-            normal: {
-              color: "#81B7DE", //柱状颜色
-            },
-          },
-        },
-      ],
-    };
-    // const myChart = echarts.init(this.echarts_ld);
-    // myChart.setOption(this.option_w);
-
-    this.option_plan = {
-      title: {},
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
-        },
-      },
-      legend: {},
-      grid: {
-        containLabel: true,
-      },
-      xAxis: {
-        type: "category",
-        data: ["人生意义--中等"],
-      },
-      yAxis: {
-        type: "value",
-        boundaryGap: [0, 0.01],
-        minInterval: 1,
-      },
-      series: [
-        {
-          name: "专业1",
-          type: "bar",
-          data: [0, 23489, 29034, 104970, 131744, 0],
-         
-        },
-        {
-          name: "专业2",
-          type: "bar",
-          data: [19325, 23438, 31000, 121594, 134141, 681807],
-          barWidth: '15',//修改柱状图的宽度
-        },
-      ],
-    };
 
-    // setTimeout(() => {
-    //   myChart.resize();
-    // }, 2000);
   },
   methods: {
-    open(val) {
-      this.planInfo = val;
+    open(arr) {
+      this.comparePlanList = arr;
+      this.queryCompletePople(0);
+      this.queryCompletePople(1);
       this.dialogVisible = true;
-      this.radio = "";
-      this.getChannel();
-      this.searchList();
     },
-    //进来先查询下组织架构
-    //查询出来组织架构
-    //与专业进行对比
-    getChannel() {
-      this.$http.get(`/org/findAllOrgByPOrgNo`, {}, (res) => {
-        //  this.$toast.success({message:'成功'});
-        if (res && res.code == 200) {
-          //将值赋值给list
-          if (res.data.length > 0) {
-            this.groupData = res.data;
-            //得到的组织架构数据
-            console.log(res.data);
-          } else {
-            this.groupData = [];
-          }
-          // this.channelList = res.data;
-        } else {
-          this.$message.error(res.msg);
-        }
-      });
-    },
-    //进来调用已选列表接口
-    searchList() {
-      let loadingInstance = Loading.service({
-        text: "loading",
-        background: "rgba(0, 0, 0, 0.4)",
-        target: document.querySelector("#el-com"),
-      });
-      //&orgNo=${this.planInfo.planOrgNo}
-      let url = `/plan/countByOrgNoAndDimension?planId=${this.planInfo.id}`;
-      this.$http.get(url, {}, (res) => {
-        console.log(res);
-        if (res && res.code == 200) {
-          this.allData = res.data;
-          //获取到数据后进行加工
-          //Y轴展示的内容字段
-          //循环全部数据得到全部维度和全部专业的问题
-          this.allFun();
-          this.singleFun(this.radio);
-          // console.log(tabList)
-          this.$nextTick(() => {
-            // 以服务的方式调用的 Loading 需要异步关闭
-            loadingInstance.close();
-          });
-        } else {
-          // this.$toast.fail(res.msg);
-          this.$nextTick(() => {
-            // 以服务的方式调用的 Loading 需要异步关闭
-            loadingInstance.close();
-          });
-          this.$message.error(res.msg);
-        }
-      });
-    },
-    //渲染第一个图表
-    allFun() {
-      let data = JSON.parse(JSON.stringify(this.allData));
-      let tabList = [];
-      //先判断就有几个专业
-      let proList = [];
-      //储存每个专业的值
-      let proAll = [];
 
-      //储存数据为格式化的数据--各个专业的数据
-      let formatterPro = [];
-      let radioArr = [];
-      //储存全部一级数据
-      for (let item in data) {
-        // console.log(item)
-
-        if (this.radio == "") {
-          this.radio = item;
-        }
-        radioArr.push(item);
-        for (let item1 in data[item]) {
-          // console.log(item+'-'+itemInner);
-          // tabList.push(item);
-          // tabList.push('中等');
-          tabList.push(item + "-" + item1);
-          for (let item2 in data[item][item1]) {
-            // console.log(item2)
-            proList.push(item2);
-            let obj = { name: item2, value: data[item][item1][item2] };
-            proAll.push(obj);
-          }
+    // 查询计划完成和未完成人数
+    queryCompletePople(i) {
+      //调用接口返回信息
+      let url = `/plan/countComplete?planId=${this.comparePlanList[i].id}`;
+      this.$http.get(url, {}, (res) => {
+        if (res.code == 200) {
+          debugger
+          this.comparePlanDate[i] = { 'unComplete': res.data[0], 'completeNum': res.data[1] }
+          this.getPlanDimNun(i);
         }
-      }
-      this.radioList = radioArr;
-      //针对 专业数组进行去重
-
-      let prolistFin = proList.filter((item, index, proList) => {
-        return proList.indexOf(item) == index;
       });
-      //
-      //输出全部指标
-      //循环得到专业指标
-      for (let i = 0; i < prolistFin.length; i++) {
-        let lin = [];
-        for (let j = 0; j < proAll.length; j++) {
-          if (proAll[j].name == prolistFin[i]) {
-            //
-            lin.push(proAll[j].value);
-          }
-        }
-        formatterPro.push(lin);
-      }
-      //储存的需要渲染的数据
-      console.log("需要渲染的数据");
-      console.log(formatterPro);
-
-      //设置data数据
-      this.option_w.xAxis.data = tabList;
-      //设置各个专业的数据
-      //将设置为汉语专业
-      //
-      let prolistFinName = [];
-      console.log(prolistFin);
-      console.log(JSON.stringify(this.groupData));
-      for (let i = 0; i < prolistFin.length; i++) {
-        //
-        for (let j = 0; j < this.groupData.length; j++) {
-          if (prolistFin[i] === this.groupData[j].orgNo) {
-            prolistFinName.push(this.groupData[j].orgName);
-          }
-        }
-      }
-
-      let series = [];
-
-
-      let color =['']
-      for (let i = 0; i < prolistFinName.length; i++) {
-        //
-        let obj = {
-          //name: prolistFinName[i],
-          name: prolistFinName[i],
-          type: "bar",
-          data: formatterPro[i],
-          // itemStyle: {
-          //   normal: {
-          //     color: "#93E083", //柱状颜色
-          //   },
-          // },
-        };
-        series.push(obj);
-      }
-      this.option_w.series = series;
-      //重新渲染柱状图
-      let myChart = echarts.init(this.echarts_ld);
-      myChart.setOption(this.option_w);
     },
-    singleFun(val) {
-      let data = JSON.parse(JSON.stringify(this.allData));
-      let tabList = [];
-      //先判断就有几个专业
-      let proList = [];
-      //储存每个专业的值
-      let proAll = [];
 
-      //储存数据为格式化的数据--各个专业的数据
-      let formatterPro = [];
-      for (let item in data) {
-        // console.log(item)
-        if (item == val) {
-          for (let item1 in data[item]) {
-            // console.log(item+'-'+itemInner);
-            // tabList.push(item + "-" + item1);
-            tabList.push(item1);
-            for (let item2 in data[item][item1]) {
-              //
-              // console.log(item2)
-              proList.push(item2);
-              let obj = { name: item2, value: data[item][item1][item2] };
-              proAll.push(obj);
-            }
-          }
-        }
-      }
-      //针对 专业数组进行去重
-
-      let prolistFin = proList.filter((item, index, proList) => {
-        return proList.indexOf(item) == index;
-      });
-      //输出全部指标
-      //循环得到专业指标
-      for (let i = 0; i < prolistFin.length; i++) {
-        let lin = [];
-        for (let j = 0; j < proAll.length; j++) {
-          if (proAll[j].name == prolistFin[i]) {
-            //
-            lin.push(proAll[j].value);
-          }
-        }
-        console.log(lin);
-        formatterPro.push(lin);
-      }
-      //储存的需要渲染的数据
-      console.log("需要渲染的数据");
-      console.log(formatterPro);
-
-      //设置data数据
-      this.option_plan.xAxis.data = tabList;
-
-      let prolistFinName = [];
-      for (let i = 0; i < prolistFin.length; i++) {
-        //
-        for (let j = 0; j < this.groupData.length; j++) {
-          if (prolistFin[i] == this.groupData[j].orgNo) {
-            prolistFinName.push(this.groupData[j].orgName);
+    // 查询不同维度的中重度数量
+    getPlanDimNun(i) {
+      this.$http.get(
+        `userRecordScore/countNumByPlanDim?planId=${this.comparePlanList[i].id}`,
+        {},
+        (res) => {
+          let dimensionList = res.data;
+          if (i == 0) {
+            this.options1 = [
+              { value: this.comparePlanDate[0].completeNum + this.comparePlanDate[0].unComplete, name: "已完成人数" },
+              { value: this.comparePlanDate[0].unComplete, name: "未完成占比" },
+            ];
+
+            this.options2 = [
+              { value: this.comparePlanDate[0].completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
+              { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
+            ];
+
+            this.options3 = [
+              { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
+              { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
+            ];
+
+            this.options4 = [
+              { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
+              { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
+            ];
+
+            this.options5 = [
+              { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
+              { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
+            ];
+
+            this.options6 = [
+              {
+                value: this.comparePlanDate[0].completeNum - dimensionList[3]["精神障碍"],
+                name: "已完成人数",
+              },
+              { value: dimensionList[3]["精神障碍"], name: "精神障碍" },
+            ];
+          } else {
+            this.options7 = [
+              { value: this.comparePlanDate[1].completeNum + this.unComplete, name: "已完成人数" },
+              { value: this.comparePlanDate[1].unComplete, name: "未完成占比" },
+            ];
+            this.options8 = [
+              { value: this.comparePlanDate[1].completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
+              { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
+            ];
+
+            this.options9 = [
+              { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
+              { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
+            ];
+
+            this.options10 = [
+              { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
+              { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
+            ];
+
+            this.options11 = [
+              { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
+              { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
+            ];
+
+            this.options12 = [
+              {
+                value: this.comparePlanDate[1].completeNum - dimensionList[3]["精神障碍"],
+                name: "已完成人数",
+              },
+              { value: dimensionList[3]["精神障碍"], name: "精神障碍" },
+            ];
           }
         }
-      }
-      //设置各个专业的数据
-      let series = [];
-      for (let i = 0; i < prolistFinName.length; i++) {
-        //
-        let obj = {
-          name: prolistFinName[i],
-          type: "bar",
-          data: formatterPro[i],
-          barWidth: '15',//修改柱状图的宽度
-        };
-        series.push(obj);
-      }
-      this.option_plan.series = series;
-      //重新渲染柱状图
-      let myChart = echarts.init(this.echarts_plan);
-      myChart.setOption(this.option_plan);
-    },
+      );
+    }
   },
 };
 </script>
 <style lang="less" scoped>
-.out/deep/ .el-dialog {
-  border-radius: 20px !important;
-  background-color: #f7f7f7 !important;
-}
-
-.pag_class /deep/ .el-input__inner {
-  width: 100% !important;
+.c_wrap {
+  // display: flex;
+  width: 100%;
 }
 
-.compare_class {
+.c_main {
+  width: 100%;
   display: flex;
-  flex-direction: row;
-  .compare_user1 {
-    flex: 1;
-    margin-right: 10px;
-    background-color: #f1f7ff;
-    padding: 20px 20px;
-    border-radius: 20px;
-    .compare_user1_out {
-      display: flex;
-      align-items: center;
-      img {
-        width: 100px;
-      }
-      .compare_user1_info {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        height: 100px;
-        margin-left: 30px;
-        font-size: 20px;
-      }
-    }
-    .compare_group {
-      font-size: 20px;
-      margin-top: 20px;
-      color: #999999;
-    }
-    .compare_group_detail {
-      margin-top: 20px;
-      font-size: 20px;
-      color: #006fff;
-    }
-  }
-  .compare_user2 {
-    margin-left: 10px;
-    flex: 1;
-    background-color: #fff4f2;
-    border-radius: 20px;
-    padding: 20px 20px;
-    .compare_user1_out {
-      display: flex;
-      align-items: center;
-      img {
-        width: 100px;
-      }
-      .compare_user1_info {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        height: 100px;
-        margin-left: 30px;
-        font-size: 20px;
-      }
-    }
-    .compare_group {
-      font-size: 20px;
-      margin-top: 20px;
-      color: #999999;
-    }
-    .compare_group_detail {
-      margin-top: 20px;
-      font-size: 20px;
-      color: #ff3014;
-    }
-  }
 }
 
-.compare_plan {
-  margin-top: 40px;
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: row;
-  .compare_plan_out1 {
-    flex: 1;
-    margin-right: 10px;
-    display: flex;
-    justify-content: space-between;
-    .compare_plan_time {
-      color: #999999;
-    }
-  }
-
-  .compare_plan_out2 {
-    margin-left: 10px;
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    .compare_plan_time {
-      color: #999999;
-    }
-  }
-}
-.compare_score {
-  display: flex;
-  flex-direction: row;
-  .compare_score_inner {
-    padding-left: 20px;
-    flex: 1;
-    .compare_score_left {
-      color: #006fff;
-      margin-top: 20px;
-      margin-bottom: 10px;
-      font-size: 20px;
-      letter-spacing: 3px;
-    }
-    .compare_score_right {
-      color: #ff3014;
-      margin-top: 20px;
-      margin-bottom: 10px;
-      font-size: 20px;
-      letter-spacing: 3px;
-    }
-    .compare_result {
-      font-size: 20px;
-      letter-spacing: 3px;
-    }
-  }
-}
-.data_asyni {
-  font-size: 20px;
-  padding-left: 20px;
-  margin-bottom: 20px;
+.pag_class /deep/ .el-input__inner {
+  width: 100% !important;
 }
 
-.table-content {
-  padding-top: 20px;
-  background-color: #ffffff;
-  border-radius: 20px;
+.chart_wrap {
+  flex: 1;
+  height: 200px;
 }
 </style>

src/components/ComparePlanProfession2.vue

@@ -0,0 +1,535 @@
+<template>
+  <div class="out">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      width="80%"
+      style="border-radius: 40px"
+    >
+      <div slot="title" id="el-com">
+        <p style="text-align: center; font-weight: 700; margin-bottom: 20px">
+          不同专业对比
+        </p>
+        <p class="data_asyni">数据对比</p>
+        <div class="table-content">
+          <div ref="echarts_ld" style="width: 70vw; height: 100vh"></div>
+        </div>
+        <!-- <p class="data_asyni">选择计划对比</p> -->
+        <p class="data_asyni" style="margin-top: 20px">选择维度</p>
+
+        <div class="table-content">
+          <el-radio-group
+            class="data_asyni"
+            v-model="radio"
+            size="mini"
+            v-if="radioList.length > 0"
+            @input="singleFun"
+          >
+            <el-radio v-for="item in radioList" :key="item" :label="item">{{
+              item
+            }}</el-radio>
+          </el-radio-group>
+          <div ref="echarts_plan" style="width: 70vw; height: 50vh"></div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+//引入echarts组件
+import * as echarts from "echarts";
+import { Loading } from "element-ui";
+
+export default {
+  data() {
+    return {
+      planInfo: {},
+      dialogVisible: false,
+      compareVisible: false,
+
+      echarts_ld: "",
+      option_w: {},
+
+      echarts_plan: "",
+      groupData: [],
+      radioList: [],
+      radio: "",
+    };
+  },
+  mounted() {
+    this.echarts_ld = this.$refs.echarts_ld;
+    this.echarts_plan = this.$refs.echarts_plan;
+    this.option_w = {
+      title: {},
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+      },
+      legend: {},
+      grid: {
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: [],
+        axisLabel: {
+          interval: 0,
+          rotate: -90,
+        },
+      },
+      yAxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        minInterval: 1,
+      },
+      series: [
+        {
+          name: "专业1",
+          type: "bar",
+          data: [0],
+          itemStyle: {
+            normal: {
+              color: "red", //柱状颜色
+            },
+          },
+        },
+        {
+          name: "专业2",
+          type: "bar",
+          data: [0],
+          itemStyle: {
+            normal: {
+              color: "#81B7DE", //柱状颜色
+            },
+          },
+        },
+      ],
+    };
+    // const myChart = echarts.init(this.echarts_ld);
+    // myChart.setOption(this.option_w);
+
+    this.option_plan = {
+      title: {},
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+      },
+      legend: {},
+      grid: {
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: ["人生意义--中等"],
+      },
+      yAxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        minInterval: 1,
+      },
+      series: [
+        {
+          name: "专业1",
+          type: "bar",
+          data: [0, 23489, 29034, 104970, 131744, 0],
+         
+        },
+        {
+          name: "专业2",
+          type: "bar",
+          data: [19325, 23438, 31000, 121594, 134141, 681807],
+          barWidth: '15',//修改柱状图的宽度
+        },
+      ],
+    };
+
+    // setTimeout(() => {
+    //   myChart.resize();
+    // }, 2000);
+  },
+  methods: {
+    open(val) {
+      this.planInfo = val;
+      this.dialogVisible = true;
+      this.radio = "";
+      this.getChannel();
+      this.searchList();
+    },
+    //进来先查询下组织架构
+    //查询出来组织架构
+    //与专业进行对比
+    getChannel() {
+      this.$http.get(`/org/findAllOrgByPOrgNo`, {}, (res) => {
+        //  this.$toast.success({message:'成功'});
+        if (res && res.code == 200) {
+          //将值赋值给list
+          if (res.data.length > 0) {
+            this.groupData = res.data;
+            //得到的组织架构数据
+            console.log(res.data);
+          } else {
+            this.groupData = [];
+          }
+          // this.channelList = res.data;
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    //进来调用已选列表接口
+    searchList() {
+      let loadingInstance = Loading.service({
+        text: "loading",
+        background: "rgba(0, 0, 0, 0.4)",
+        target: document.querySelector("#el-com"),
+      });
+      //&orgNo=${this.planInfo.planOrgNo}
+      let url = `/plan/countByOrgNoAndDimension?planId=${this.planInfo.id}`;
+      this.$http.get(url, {}, (res) => {
+        console.log(res);
+        if (res && res.code == 200) {
+          this.allData = res.data;
+          //获取到数据后进行加工
+          //Y轴展示的内容字段
+          //循环全部数据得到全部维度和全部专业的问题
+          this.allFun();
+          this.singleFun(this.radio);
+          // console.log(tabList)
+          this.$nextTick(() => {
+            // 以服务的方式调用的 Loading 需要异步关闭
+            loadingInstance.close();
+          });
+        } else {
+          // this.$toast.fail(res.msg);
+          this.$nextTick(() => {
+            // 以服务的方式调用的 Loading 需要异步关闭
+            loadingInstance.close();
+          });
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    //渲染第一个图表
+    allFun() {
+      let data = JSON.parse(JSON.stringify(this.allData));
+      let tabList = [];
+      //先判断就有几个专业
+      let proList = [];
+      //储存每个专业的值
+      let proAll = [];
+
+      //储存数据为格式化的数据--各个专业的数据
+      let formatterPro = [];
+      let radioArr = [];
+      //储存全部一级数据
+      for (let item in data) {
+        // console.log(item)
+
+        if (this.radio == "") {
+          this.radio = item;
+        }
+        radioArr.push(item);
+        for (let item1 in data[item]) {
+          // console.log(item+'-'+itemInner);
+          // tabList.push(item);
+          // tabList.push('中等');
+          tabList.push(item + "-" + item1);
+          for (let item2 in data[item][item1]) {
+            // console.log(item2)
+            proList.push(item2);
+            let obj = { name: item2, value: data[item][item1][item2] };
+            proAll.push(obj);
+          }
+        }
+      }
+      this.radioList = radioArr;
+      //针对 专业数组进行去重
+
+      let prolistFin = proList.filter((item, index, proList) => {
+        return proList.indexOf(item) == index;
+      });
+      //
+      //输出全部指标
+      //循环得到专业指标
+      for (let i = 0; i < prolistFin.length; i++) {
+        let lin = [];
+        for (let j = 0; j < proAll.length; j++) {
+          if (proAll[j].name == prolistFin[i]) {
+            //
+            lin.push(proAll[j].value);
+          }
+        }
+        formatterPro.push(lin);
+      }
+      //储存的需要渲染的数据
+      console.log("需要渲染的数据");
+      console.log(formatterPro);
+
+      //设置data数据
+      this.option_w.xAxis.data = tabList;
+      //设置各个专业的数据
+      //将设置为汉语专业
+      //
+      let prolistFinName = [];
+      console.log(prolistFin);
+      console.log(JSON.stringify(this.groupData));
+      for (let i = 0; i < prolistFin.length; i++) {
+        //
+        for (let j = 0; j < this.groupData.length; j++) {
+          if (prolistFin[i] === this.groupData[j].orgNo) {
+            prolistFinName.push(this.groupData[j].orgName);
+          }
+        }
+      }
+
+      let series = [];
+
+
+      let color =['']
+      for (let i = 0; i < prolistFinName.length; i++) {
+        //
+        let obj = {
+          //name: prolistFinName[i],
+          name: prolistFinName[i],
+          type: "bar",
+          data: formatterPro[i],
+          // itemStyle: {
+          //   normal: {
+          //     color: "#93E083", //柱状颜色
+          //   },
+          // },
+        };
+        series.push(obj);
+      }
+      this.option_w.series = series;
+      //重新渲染柱状图
+      let myChart = echarts.init(this.echarts_ld);
+      myChart.setOption(this.option_w);
+    },
+    singleFun(val) {
+      let data = JSON.parse(JSON.stringify(this.allData));
+      let tabList = [];
+      //先判断就有几个专业
+      let proList = [];
+      //储存每个专业的值
+      let proAll = [];
+
+      //储存数据为格式化的数据--各个专业的数据
+      let formatterPro = [];
+      for (let item in data) {
+        // console.log(item)
+        if (item == val) {
+          for (let item1 in data[item]) {
+            // console.log(item+'-'+itemInner);
+            // tabList.push(item + "-" + item1);
+            tabList.push(item1);
+            for (let item2 in data[item][item1]) {
+              //
+              // console.log(item2)
+              proList.push(item2);
+              let obj = { name: item2, value: data[item][item1][item2] };
+              proAll.push(obj);
+            }
+          }
+        }
+      }
+      //针对 专业数组进行去重
+
+      let prolistFin = proList.filter((item, index, proList) => {
+        return proList.indexOf(item) == index;
+      });
+      //输出全部指标
+      //循环得到专业指标
+      for (let i = 0; i < prolistFin.length; i++) {
+        let lin = [];
+        for (let j = 0; j < proAll.length; j++) {
+          if (proAll[j].name == prolistFin[i]) {
+            //
+            lin.push(proAll[j].value);
+          }
+        }
+        console.log(lin);
+        formatterPro.push(lin);
+      }
+      //储存的需要渲染的数据
+      console.log("需要渲染的数据");
+      console.log(formatterPro);
+
+      //设置data数据
+      this.option_plan.xAxis.data = tabList;
+
+      let prolistFinName = [];
+      for (let i = 0; i < prolistFin.length; i++) {
+        //
+        for (let j = 0; j < this.groupData.length; j++) {
+          if (prolistFin[i] == this.groupData[j].orgNo) {
+            prolistFinName.push(this.groupData[j].orgName);
+          }
+        }
+      }
+      //设置各个专业的数据
+      let series = [];
+      for (let i = 0; i < prolistFinName.length; i++) {
+        //
+        let obj = {
+          name: prolistFinName[i],
+          type: "bar",
+          data: formatterPro[i],
+          barWidth: '15',//修改柱状图的宽度
+        };
+        series.push(obj);
+      }
+      this.option_plan.series = series;
+      //重新渲染柱状图
+      let myChart = echarts.init(this.echarts_plan);
+      myChart.setOption(this.option_plan);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.out/deep/ .el-dialog {
+  border-radius: 20px !important;
+  background-color: #f7f7f7 !important;
+}
+
+.pag_class /deep/ .el-input__inner {
+  width: 100% !important;
+}
+
+.compare_class {
+  display: flex;
+  flex-direction: row;
+  .compare_user1 {
+    flex: 1;
+    margin-right: 10px;
+    background-color: #f1f7ff;
+    padding: 20px 20px;
+    border-radius: 20px;
+    .compare_user1_out {
+      display: flex;
+      align-items: center;
+      img {
+        width: 100px;
+      }
+      .compare_user1_info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        height: 100px;
+        margin-left: 30px;
+        font-size: 20px;
+      }
+    }
+    .compare_group {
+      font-size: 20px;
+      margin-top: 20px;
+      color: #999999;
+    }
+    .compare_group_detail {
+      margin-top: 20px;
+      font-size: 20px;
+      color: #006fff;
+    }
+  }
+  .compare_user2 {
+    margin-left: 10px;
+    flex: 1;
+    background-color: #fff4f2;
+    border-radius: 20px;
+    padding: 20px 20px;
+    .compare_user1_out {
+      display: flex;
+      align-items: center;
+      img {
+        width: 100px;
+      }
+      .compare_user1_info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        height: 100px;
+        margin-left: 30px;
+        font-size: 20px;
+      }
+    }
+    .compare_group {
+      font-size: 20px;
+      margin-top: 20px;
+      color: #999999;
+    }
+    .compare_group_detail {
+      margin-top: 20px;
+      font-size: 20px;
+      color: #ff3014;
+    }
+  }
+}
+
+.compare_plan {
+  margin-top: 40px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  .compare_plan_out1 {
+    flex: 1;
+    margin-right: 10px;
+    display: flex;
+    justify-content: space-between;
+    .compare_plan_time {
+      color: #999999;
+    }
+  }
+
+  .compare_plan_out2 {
+    margin-left: 10px;
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    .compare_plan_time {
+      color: #999999;
+    }
+  }
+}
+.compare_score {
+  display: flex;
+  flex-direction: row;
+  .compare_score_inner {
+    padding-left: 20px;
+    flex: 1;
+    .compare_score_left {
+      color: #006fff;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      font-size: 20px;
+      letter-spacing: 3px;
+    }
+    .compare_score_right {
+      color: #ff3014;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      font-size: 20px;
+      letter-spacing: 3px;
+    }
+    .compare_result {
+      font-size: 20px;
+      letter-spacing: 3px;
+    }
+  }
+}
+.data_asyni {
+  font-size: 20px;
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  padding-top: 20px;
+  background-color: #ffffff;
+  border-radius: 20px;
+}
+</style>

src/components/PieChart2.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="pie-chart-content">
+      <div ref="myPieChart" :id="chartId" style="width: 100%;height: 200px;"></div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "pieChart",
+    components: {},
+    props: {
+      options: {
+        type: Array,
+        default: function () {
+          return []
+        },
+      },
+      chartId: {
+        type: String,
+        default: ''
+      },
+      chartName: {
+        type: String,
+        default: ''
+      },
+    },
+    data() {
+      return {
+        color: ['#FCEF9A', '#D54039', '#56743E', '#FF917C'],
+        pieData: [],
+      }
+    },
+    // mounted() {
+    //   this.myPieEcharts(this.options);
+    // },
+    computed: {},
+    watch: {
+      options() {
+          this.myPieEcharts(this.options);
+      }
+    },
+    methods: {
+      myPieEcharts(pieData) {
+        console.log('pieData', pieData)
+        let myChart = this.$echarts.init(document.getElementById(this.chartId));
+        console.log(myChart);
+        //配置图表
+        let option = {
+          title: {
+            text: this.chartName,
+            subtext: "百分比",
+            left: "center",
+            top: '60%'
+          },
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            orient: "vertical",
+            left: "left",
+            // top: "38%",
+            // bottom:0
+          },
+          series: [
+            {
+              name: "",
+              type: "pie",
+              radius: "40%",
+              center: ["50%", "40%"],
+              // data: [
+              //   { value: 1048, name: 'Search Engine' },
+              //   { value: 735, name: 'Direct' },
+              //   { value: 580, name: 'Email' },
+              //   { value: 484, name: 'Union Ads' },
+              //   { value: 300, name: 'Video Ads' }
+              // ],
+              data: pieData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
+              },
+            },
+          ],
+        };
+  
+        pieData && option && myChart.setOption(option);
+  
+        window.onresize = function () {
+          myChart.resize();
+        };
+      },
+      pieDataHandle(param) {
+  
+        this.pieData = [];
+  
+        // param.groupData.map((item,index) => {
+        //
+        //   this.lineData.push({
+        //     type: 'line',
+        //     name: item.name,
+        //     data: item.value,
+        //   });
+        //
+        // });
+        //
+        // this.myLineEcharts(param.category,this.lineData);
+  
+      }
+  
+    },
+  }
+  </script>
+  
+  <style scoped>
+  .pie-chart-content {
+    width: 100%;
+    height: 100%;
+  }
+  </style>
+  

src/components/pieChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pie-chart-content">
-    <div ref="myPieChart" :id="chartId" style="width: 100%; height: 450px"></div>
+    <div ref="myPieChart" :id="chartId" style="width: 100%; height: 200px"></div>
   </div>
 </template>
 

src/router/router.js

@@ -180,6 +180,12 @@ export const routerList = [
         name: "gameRecordDetail",
         component: () => import("../views/manage/gameRecordDetail"),
       },
+      // 计划对比-专业报告对比
+      {
+        path: "comparePlanProfession",
+        name: "ComparePlanProfession",
+        component: () => import("../components/ComparePlanProfession"),
+      },
     ],
   },
 ];

src/utils/http.js

@@ -17,8 +17,8 @@ import { router } from "@/router";
 // axios.defaults.baseURL = 'https://child.hhnao.com:8070';
 // axios.defaults.baseURL = 'https://child.hhnao.com:8070';
 //https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx01d1a44906973cf2&redirect_uri=http%3A%2F%2F192.168.18.51%3A8085&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
-export const basePath='http://10.113.248.4:8089'
-// export const basePath = "http://43.143.198.30:8089";
+// export const basePath='http://10.113.248.4:8089'
+export const basePath = "http://43.143.198.30:8089";
 // const base_url = 'http://43.143.198.30:8089/'
 // const base_url = 'http://10.113.248.4:8090/'
 // export const basePath='http://43.143.198.30:8086'

src/views/manage/channelManagement/contract.vue

@@ -3,116 +3,46 @@
     <div class="record-main">
       <div class="compare_out">
         <div class="user" @click="isClikcObj(true)">
-          <img style="width: 100px" :src="userImg" /><span style="position: absolute"
-            >用户对比</span
-          >
+          <img style="width: 100px" :src="userImg" /><span style="position: absolute">用户对比</span>
         </div>
         <div class="user" @click="isClikcObj(false)">
-          <img style="width: 100px" :src="planImg" /><span style="position: absolute"
-            >计划对比</span
-          >
+          <img style="width: 100px" :src="planImg" /><span style="position: absolute">计划对比</span>
         </div>
       </div>
       <!-- <img src="../../../assets/report/lv.png" alt=""> -->
       <el-row>
         <el-col :span="24">
           <div class="search-head">
-            <el-input
-              v-show="isUser"
-              v-model="name"
-              clearable
-              placeholder="请输入姓名"
-            ></el-input>
+            <el-input v-show="isUser" v-model="name" clearable placeholder="请输入姓名"></el-input>
             <div v-show="isUser">&nbsp;&nbsp;&nbsp;&nbsp;</div>
-            <el-input
-              v-show="isUser"
-              v-model="studentNumber"
-              clearable
-              placeholder="请输入学号"
-            ></el-input>
+            <el-input v-show="isUser" v-model="studentNumber" clearable placeholder="请输入学号"></el-input>
             <div v-show="isUser">&nbsp;&nbsp;&nbsp;&nbsp;</div>
-            <el-input
-              v-show="!isUser"
-              v-model="planName"
-              clearable
-              placeholder="请输入计划名称"
-            ></el-input>
+            <el-input v-show="!isUser" v-model="planName" clearable placeholder="请输入计划名称"></el-input>
             <div v-show="!isUser">&nbsp;&nbsp;&nbsp;&nbsp;</div>
-            <el-cascader
-              v-show="userInfo.roleType == '5'"
-              placeholder="请选择组织架构"
-              v-model="group"
-              :options="groupData"
-              :props="{ checkStrictly: true }"
-              clearable
-            ></el-cascader>
+            <el-cascader v-show="userInfo.roleType == '5'" placeholder="请选择组织架构" v-model="group" :options="groupData"
+              :props="{ checkStrictly: true }" clearable></el-cascader>
             <!-- :props="{ checkStrictly: true }" -->
-            <el-cascader
-              v-show="userInfo.roleType == '4'"
-              placeholder="请选择组织架构"
-              v-model="group"
-              :options="groupData"
-              clearable
-            ></el-cascader>
+            <el-cascader v-show="userInfo.roleType == '4'" placeholder="请选择组织架构" v-model="group" :options="groupData"
+              clearable></el-cascader>
             &nbsp;&nbsp;&nbsp;&nbsp;
-            <el-button type="primary" round icon="el-icon-search" @click="searchTarget"
-              >搜索</el-button
-            >
+            <el-button type="primary" round icon="el-icon-search" @click="searchTarget">搜索</el-button>
             <el-button type="info" round @click="clearSearch">清空</el-button>
           </div>
         </el-col>
       </el-row>
 
       <div class="table-content" v-show="isUser">
-        <el-table
-          height="100%"
-          v-show="isUser"
-          :data="tableData"
-          :row-style="{ height: '0px' }"
-          :cell-style="{ padding: '5px' }"
-          :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
-        >
-          <el-table-column
-            v-if="isUser"
-            show-overflow-tooltip
-            prop="userName"
-            label="姓名"
-            align="center"
-            width=""
-          >
+        <el-table height="100%" v-show="isUser" :data="tableData" :row-style="{ height: '0px' }"
+          :cell-style="{ padding: '5px' }" :header-cell-style="{ background: '#F8F8F8', color: '#606266' }">
+          <el-table-column v-if="isUser" show-overflow-tooltip prop="userName" label="姓名" align="center" width="">
           </el-table-column>
-          <el-table-column
-            v-if="isUser"
-            prop="userNo"
-            label="学号"
-            align="center"
-            width=""
-          >
+          <el-table-column v-if="isUser" prop="userNo" label="学号" align="center" width="">
           </el-table-column>
-          <el-table-column
-            v-if="isUser"
-            prop="totalScore"
-            label="总分"
-            align="center"
-            width=""
-          >
+          <el-table-column v-if="isUser" prop="totalScore" label="总分" align="center" width="">
           </el-table-column>
-          <el-table-column
-            v-if="isUser"
-            prop="gender"
-            label="性别"
-            align="center"
-            width=""
-            :formatter="genderFun"
-          >
+          <el-table-column v-if="isUser" prop="gender" label="性别" align="center" width="" :formatter="genderFun">
           </el-table-column>
-          <el-table-column
-            v-if="isUser"
-            prop="orgName"
-            label="所属组织架构"
-            align="center"
-            width=""
-          >
+          <el-table-column v-if="isUser" prop="orgName" label="所属组织架构" align="center" width="">
           </el-table-column>
           <el-table-column label="操作" width="400" align="center">
             <template slot-scope="scope">
@@ -142,14 +72,8 @@
       </div>
 
       <div class="table-content" v-show="!isUser">
-        <el-table
-          height="100%"
-          v-show="!isUser"
-          :data="tableData"
-          :row-style="{ height: '0px' }"
-          :cell-style="{ padding: '5px' }"
-          :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
-        >
+        <el-table height="100%" v-show="!isUser" :data="tableData" :row-style="{ height: '0px' }"
+          :cell-style="{ padding: '5px' }" :header-cell-style="{ background: '#F8F8F8', color: '#606266' }">
           <!-- <el-table-column prop="name" label="姓名" align="center" width=""  show-overflow-tooltip>
           </el-table-column> -->
           <!-- <el-table-column
@@ -183,47 +107,15 @@
          
           >
           </el-table-column> -->
-          <el-table-column
-            v-if="!isUser"
-            show-overflow-tooltip
-            prop="planName"
-            label="计划名称"
-            align="center"
-            width=""
-          >
+          <el-table-column v-if="!isUser" show-overflow-tooltip prop="planName" label="计划名称" align="center" width="">
           </el-table-column>
-          <el-table-column
-            v-if="!isUser"
-            prop="createDate"
-            label="创建时间"
-            align="center"
-            width=""
-          >
+          <el-table-column v-if="!isUser" prop="createDate" label="创建时间" align="center" width="">
           </el-table-column>
-          <el-table-column
-            v-if="!isUser"
-            prop="planEndTime"
-            label="结束时间"
-            align="center"
-            width=""
-          >
+          <el-table-column v-if="!isUser" prop="planEndTime" label="结束时间" align="center" width="">
           </el-table-column>
-          <el-table-column
-            v-if="!isUser"
-            prop="createUserName"
-            label="创建人"
-            align="center"
-            width=""
-          >
+          <el-table-column v-if="!isUser" prop="createUserName" label="创建人" align="center" width="">
           </el-table-column>
-          <el-table-column
-            v-if="!isUser"
-            prop="planStatus"
-            label="状态"
-            :formatter="forMaPlan"
-            align="center"
-            width=""
-          >
+          <el-table-column v-if="!isUser" prop="planStatus" label="状态" :formatter="forMaPlan" align="center" width="">
           </el-table-column>
           <el-table-column label="操作" width="400" align="center">
             <template slot-scope="scope">
@@ -234,11 +126,8 @@
                     <span> 个人报告列表 </span>
                   </div>
                 </div>
-                <div
-                  class="detail_button_out"
-                  v-if="!isUser && scope.row.planStatus == '3'"
-                >
-                  <div class="detail_button" @click="planReport(scope.row)">
+                <div class="detail_button_out" v-if="!isUser && scope.row.planStatus == '3'">
+                  <div class="detail_button" @click="compareReport(scope.row)">
                     <img src="../../../assets/img/table/search.png" />
                     <span> 专业报告对比 </span>
                   </div>
@@ -255,17 +144,9 @@
         </el-table>
       </div>
       <!-- small -->
-      <el-pagination
-        class="pag_class"
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page.sync="pageNum"
-        layout="total, sizes, prev, pager, next"
-        :page-size="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="total"
-      >
+      <el-pagination class="pag_class" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page.sync="pageNum" layout="total, sizes, prev, pager, next" :page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]" :total="total">
       </el-pagination>
       <!-- <el-pagination small background layout="total prev, pager, next" :total="36">
       </el-pagination> -->
@@ -273,6 +154,27 @@
     <CompareUser ref="register" @search="searchTarget" />
     <ComparePlanUser ref="planUser" @search="searchTarget" />
     <ComparePlanProfession ref="planProfession" @search="searchTarget" />
+    <el-dialog title="请选择计划" :visible.sync="choosePlanVisible">
+      <el-table height="100%" :data="comparePlanList" :row-style="{ height: '0px' }" :cell-style="{ padding: '5px' }"
+        :header-cell-style="{ background: '#F8F8F8', color: '#606266' }" @select="selectHandle" ref="multipleTable">
+        <el-table-column type="selection" width="55">
+        </el-table-column>
+        <el-table-column v-if="!isUser" show-overflow-tooltip prop="planName" label="计划名称" align="center" width="">
+        </el-table-column>
+        <el-table-column v-if="!isUser" prop="createDate" label="创建时间" align="center" width="">
+        </el-table-column>
+        <el-table-column v-if="!isUser" prop="planEndTime" label="结束时间" align="center" width="">
+        </el-table-column>
+        <el-table-column v-if="!isUser" prop="createUserName" label="创建人" align="center" width="">
+        </el-table-column>
+        <el-table-column v-if="!isUser" prop="planStatus" label="状态" :formatter="forMaPlan" align="center" width="">
+        </el-table-column>
+      </el-table>
+      <div class="btn_area">
+        <el-button @click="chooseCancel">取消</el-button>
+        <el-button v-if="comparePlanList.length > 0" type="primary" @click="chooseEnsure">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -360,9 +262,13 @@ export default {
       },
       channel: "",
       channelList: [{ name: "渠道天成", id: "1" }],
+      choosePlanVisible: false,
+      currentPlanId: '',
+      comparePlanList: [],
+      chooseComparePlanList: []
     };
   },
-  created() {},
+  created() { },
   mounted() {
     this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
 
@@ -372,6 +278,7 @@ export default {
       this.$router.push({ path: "/" });
     }
     this.searchTarget();
+    this.isClikcObj(false);
   },
   methods: {
     isClikcObj(val) {
@@ -579,23 +486,18 @@ export default {
     searchList() {
       let url;
       if (this.isUser) {
-        url = `/user/findUserListByPage?pageSize=${this.pageSize}&pageNum=${
-          this.pageNum
-        }&roleType=1${
-          this.group.length == 0
+        url = `/user/findUserListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum
+          }&roleType=1${this.group.length == 0
             ? `&orgNo=${this.userInfo.orgNo}`
             : `&orgNo=${this.group[this.group.length - 1]}`
-        }${this.name == "" ? "" : `&userName=${this.name}`}${
-          this.studentNumber == "" ? "" : `&userNo=${this.studentNumber}`
-        }`;
+          }${this.name == "" ? "" : `&userName=${this.name}`}${this.studentNumber == "" ? "" : `&userNo=${this.studentNumber}`
+          }`;
       } else {
-        url = `/plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}${
-          this.planName == "" ? "" : `&planName=${this.planName}`
-        }${
-          this.group.length == 0
+        url = `/plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}${this.planName == "" ? "" : `&planName=${this.planName}`
+          }${this.group.length == 0
             ? `&orgNo=${this.userInfo.orgNo}`
             : `&orgNo=${this.group[this.group.length - 1]}`
-        }`;
+          }`;
       }
       this.$http.get(url, {}, (res) => {
         if (res && res.code == 200) {
@@ -631,12 +533,41 @@ export default {
     getTimes(param) {
       this.monthTimes = param;
     },
+
+    compareReport(val) {
+      this.chooseComparePlanList[0] = val;
+      this.currentPlanId = val.id
+      this.filterComplete();
+      this.choosePlanVisible = true;
+    },
+
+    // 筛选已完成计划
+    filterComplete() {
+      this.comparePlanList = this.tableData.filter((item) => {
+        console.log(item)
+        return item.planStatus == 3 && item.id != this.currentPlanId;
+      })
+    },
+    selectHandle(selection, row) {
+      this.$refs.multipleTable.clearSelection();
+      this.$refs.multipleTable.toggleRowSelection(row);
+      this.chooseComparePlanList[1] = row;
+    },
+    chooseEnsure() {
+      this.choosePlanVisible = false;
+      this.$refs.planProfession.open(this.chooseComparePlanList);
+    },
+    chooseCancel() {
+      this.choosePlanVisible = false;
+      this.chooseComparePlanList = [];
+    }
   },
 };
 </script>
 
 <style lang="less" scoped>
 @import "../../../styles/theme.less";
+
 .pag_class {
   text-align: end;
 }
@@ -644,6 +575,7 @@ export default {
 .pag_class /deep/.el-input__inner {
   width: 100% !important;
 }
+
 .pag_class /deep/.el-pagination--small span:not([class*="suffix"]) {
   height: 22px;
   line-height: 28px !important;
@@ -653,21 +585,25 @@ export default {
   position: relative;
   width: 100%;
   height: 80vh;
+
   .compare_out {
     line-height: 40px;
     position: absolute;
 
     top: -42px;
     display: flex;
+
     // background-color: #00bf78;
     .user {
       cursor: pointer;
       position: relative;
+
       span {
         top: -5px;
         left: 19px;
         font-weight: 700;
       }
+
       // background-image: image("../.");
       // background-color: #00bf78;
       // background-image: url("../../../assets/report/lv.png");
@@ -683,6 +619,7 @@ export default {
     overflow-y: auto;
     display: flex;
     flex-direction: column;
+
     .search-head {
       width: 100%;
       display: flex;
@@ -728,19 +665,23 @@ export default {
   padding-left: 10px;
   flex: 3;
 }
+
 .detail_button_out {
   flex: 1;
   display: flex;
   justify-content: space-around;
+
   .detail_button {
     display: flex;
     align-items: center;
     cursor: pointer;
     letter-spacing: 2px;
+
     img {
       width: 15px;
       margin-right: 5px;
     }
+
     span {
       color: #00bf78;
       // font-weight: 600;
@@ -756,20 +697,24 @@ export default {
   line-height: 40px;
   width: 100%;
 }
+
 .dig_update /deep/.el-dialog {
   box-shadow: none !important;
   background: transparent !important;
 }
+
 .demo-ruleForm /deep/ .el-form-item {
   margin-right: 10px;
   vertical-align: top;
   display: flex !important;
   flex-direction: column;
 }
+
 .demo-ruleForm /deep/.el-dialog__header {
   background-color: #ffffff;
   padding-left: 140px !important;
 }
+
 .demo-ruleForm /deep/.el-form-item__label {
   text-align: left;
   vertical-align: middle;
@@ -809,10 +754,16 @@ export default {
   border-radius: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
+
   .dig_title {
     margin-bottom: 30px;
     text-align: center;
     font-weight: 700;
   }
 }
+
+.btn_area {
+  padding: 36px 0 0;
+  text-align: center;
+}
 </style>