修改样式

src/components/BingChart.vue

@@ -40,7 +40,28 @@ export default {
       this.myPieEcharts(this.options);
     },
   },
+  mounted() {
+    window.addEventListener("resize", this.echartsAllSize);
+  },
+  destroyed() {
+    console.log("报告页面销毁了");
+    window.removeEventListener("resize", this.echartsAllSize);
+  },
   methods: {
+    echartsAllSize() {
+      let flag = false;
+      setTimeout(() => {
+        flag = true;
+        if ( flag) {
+          //设置变化的大小
+          console.log("大小变化了---------------------");
+          let myChart = this.$echarts.init(document.getElementById(this.chartId));
+          myChart.resize();
+        }
+      }, 1000);
+      //大小自适应
+      //查看当前页面是否显示
+    },
     myPieEcharts(pieData) {
       let myChart = this.$echarts.init(document.getElementById(this.chartId));
       let option = {
@@ -65,15 +86,23 @@ export default {
           {
             name: ``,
             type: "pie",
-            radius: "90%",
+            radius: "60%",
             label: {
               show: true,
-              position: "inner", //将文字显示在行内
+              position: "outside", //将文字显示在行内 outside  inside
               textStyle: {
-                fontSize: 20, //设置图内显示文字的大小
-                color: "#ffffff", //设置饼状图文字的颜色
+                fontSize: 18, //设置图内显示文字的大小
+                color: "#000000", //设置饼状图文字的颜色
               },
             },
+            // label: {
+            //   show: true,
+            //   position: "inner", //将文字显示在行内
+            //   textStyle: {
+            //     fontSize: 20, //设置图内显示文字的大小
+            //     color: "#ffffff", //设置饼状图文字的颜色
+            //   },
+            // },
             data: [
               {
                 value: pieData[0].value,
@@ -106,6 +135,7 @@ export default {
       };
       pieData && option && myChart.setOption(option);
       window.onresize = function () {
+        console.log("111111111111饼状图大小变化了吗");
         myChart.resize();
       };
     },

src/components/BingChart2.vue

@@ -66,18 +66,26 @@ export default {
           {
             name: ``,
             type: "pie",
-            radius: "90%",
+            radius: "70%",
+            // label:{
+            //   show:true,
+            //   position:'inner',//将文字显示在行内
+            //   textStyle:{ 
+            //     fontSize:20,//设置图内显示文字的大小
+            //     color:'#ffffff'//设置饼状图文字的颜色
+            //   }
+            // },
             label:{
               show:true,
-              position:'inner',//将文字显示在行内
+              position:'outside',//将文字显示在行内
               textStyle:{ 
-                fontSize:20,//设置图内显示文字的大小
-                color:'#ffffff'//设置饼状图文字的颜色
+                fontSize:18,//设置图内显示文字的大小
+                color:'#000000'//设置饼状图文字的颜色
               }
             },
             // name:100-parseInt(pieData[0].value/(pieData[0].value+ pieData[1].value)*100)   + "%"+pieData[1].name,itemStyle:{color:'#FFAE00'
             data: [
-              { value: pieData[0].value, name:'',itemStyle:{color:'#5470C6',fontSize:'20'}},
+              { value: pieData[0].value, name:pieData[0].value+'人已完成',itemStyle:{color:'#5470C6',fontSize:'20'}},
               { value:pieData[0].value+ pieData[1].value==0?'0%' :pieData[1].value, name:100-parseInt(pieData[0].value/(pieData[0].value+ pieData[1].value)*100)   + "%"+pieData[1].name,itemStyle:{color:'#FFAE00',fontSize:'20'}},
             ],
           },
@@ -85,6 +93,7 @@ export default {
       };
       pieData && option && myChart.setOption(option);
       window.onresize = function () {
+        // console.log('饼状图大小变化了吗')
         myChart.resize();
       };
     },

src/components/PlanReport.vue

@@ -107,43 +107,8 @@
             <div style="height: 100%; width: 100%" ref="echarts_zhu"></div>
           </div>
         </div>
-        <!-- <div style="display: flex; margin-top: 40px">
-          <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> -->
+
         <div class="table-content">
-          <!-- <el-form :inline="true" class="demo-form-inline">
-            <el-form-item label="维度占比">
-              <el-select
-                v-model="userType"
-                @change="userTypeChange"
-                placeholder="请选择维度占比"
-              >
-                <el-option label="焦虑" value="焦虑"></el-option>
-                <el-option label="抑郁" value="抑郁"></el-option>
-                <el-option label="压力" value="躯体化"></el-option>
-                <el-option label="精神障碍" value="精神障碍"></el-option>
-                <el-option label="心理健康异常" value="心理健康异常"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-form> -->
           <div class="radio_group_style">
             <el-radio-group
               v-model="userType"
@@ -227,6 +192,7 @@
           </el-form-item>
           <el-form-item label="组织架构选择" class="org_class">
             <el-select
+              collapse-tags
               width="300px"
               multiple
               v-model="orgName"
@@ -295,42 +261,104 @@
               margin-bottom: 40px;
             "
           >
-            <div>
+            <div style="flex: 1">
               <div style="display: flex; font-size: 20px">
-                {{ tabNameCurrent }}:
-                {{
-                  subValue
-                }}&nbsp;&nbsp;&nbsp;&nbsp;已完成&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
-                  style="
-                    background-color: #5470c6;
-                    display: flex;
-                    padding: 0 20px;
-                    margin-left: 20px;
-                    margin-bottom: 20px;
-                    color: #ffffff;
-                  "
-                  >{{ subAll }}人</span
-                >
+                <div style="display: flex; flex: 1; flex-direction: column">
+                  <div style="text-align: center; margin: 4px; border: 1px solid #dddddd">
+                    {{ tabNameCurrent }}
+                  </div>
+                  <div
+                    :title="subValue"
+                    style="
+                      text-align: center;
+                      margin: 4px;
+                      border: 1px solid #dddddd;
+                      display: flex;
+                      cursor: pointer;
+                      overflow: hidden;
+                      -webkit-line-clamp: 1;
+                      display: -webkit-box;
+                      -webkit-box-orient: vertical;
+                    "
+                  >
+                    {{ subValue }}
+                  </div>
+                </div>
+                <div style="display: flex; flex: 1; flex-direction: column">
+                  <div style="text-align: center; margin: 4px; border: 1px solid #dddddd">
+                    已完成
+                  </div>
+                  <div
+                    style="
+                      background-color: #5470c6;
+
+                      padding: 0 20px;
+                      margin: 4px;
+                      color: #ffffff;
+                      text-align: center;
+                      border: 1px solid #dddddd;
+                    "
+                  >
+                    {{ subAll }}人
+                  </div>
+                </div>
+                <div style="display: flex; flex: 1; flex-direction: column">
+                  <div
+                    style="
+                      text-align: center;
+                      margin: 4px;
+                      border: 1px solid #dddddd;
+                      overflow: hidden;
+                      -webkit-line-clamp: 1;
+                      display: -webkit-box;
+                      -webkit-box-orient: vertical;
+                    "
+                  >
+                    中重度{{ dime == "躯体化" ? "压力" : dime }}
+                  </div>
+                  <div
+                    style="
+                      background-color: #ffae00;
+
+                      padding: 0 20px;
+                      margin: 4px;
+
+                      color: #ffffff;
+                      text-align: center;
+                      border: 1px solid #dddddd;
+                    "
+                  >
+                    {{ subSingle }}人
+                  </div>
+                </div>
               </div>
               <!-- this.dime=='躯体化'?'压力':this.dime -->
-              <div style="display: flex; font-size: 20px">
-                {{ tabNameCurrent }}: {{ subValue }}&nbsp;&nbsp;&nbsp;&nbsp;中重度{{
-                  dime == "躯体化" ? "压力" : dime
-                }}<span
-                  style="
-                    background-color: #ffae00;
-                    display: flex;
-                    padding: 0 20px;
-                    margin-left: 20px;
-                    color: #ffffff;
-                  "
-                  >{{ subSingle }}人</span
-                >
-              </div>
+              <!-- <div style="display: flex; font-size: 20px">
+                <div>
+                  <div>{{ tabNameCurrent }}</div>
+                  <div>{{ subValue }}</div>
+                </div>
+
+                <div>
+                  <div>
+                    中重度{{ dime == "躯体化" ? "压力" : dime }}
+                  </div>
+                  <span
+                    style="
+                      background-color: #ffae00;
+                      display: flex;
+                      padding: 0 20px;
+                      margin-left: 20px;
+                      color: #ffffff;
+                    "
+                    >{{ subSingle }}人</span
+                  >
+                </div>
+              </div> -->
             </div>
           </div>
         </div>
-        <div class='finish_class'>
+        <div class="finish_class">
           <el-table
             :data="subData"
             :row-style="{ height: '0px' }"
@@ -512,9 +540,9 @@ export default {
         //   },
         // },
       },
-      dataZoom: {
-        type: "inside", //放大缩小x轴数值
-      },
+      // dataZoom: {
+      //   type: "inside", //放大缩小x轴数值
+      // },
       yAxis: {
         max: 100,
         type: "value",
@@ -565,8 +593,30 @@ export default {
       ],
     };
     // myChart.setOption(option_bing);
+
+    //监听页面大小是否变化
+    //如果变化则需要
+    window.addEventListener("resize", this.echartsAllSize);
+  },
+  destroyed() {
+    console.log("报告页面销毁了");
+    window.removeEventListener("resize", this.echartsAllSize);
   },
   methods: {
+    echartsAllSize() {
+      let flag = false;
+      setTimeout(() => {
+        flag = true;
+        if (this.dialogVisible && flag) {
+          //设置变化的大小
+          let myChart1 = echarts.init(this.echarts_zhu);
+          myChart1.resize();
+        }
+      }, 1000);
+      //大小自适应
+      //查看当前页面是否显示
+    },
+    //change
     //年级改变参数
     gradeChange(val) {
       this.getOrgList(val);
@@ -702,9 +752,6 @@ export default {
           }
           this.option_zhu.xAxis.data = nameList;
           this.option_zhu.series[0].data = scoreList;
-          // let myChart1 = echarts.init(this.echarts_zhu);
-          // myChart1.setOption(this.option_zhu);
-          //
         }
       });
     },
@@ -1062,7 +1109,7 @@ export default {
   border-radius: 20px;
   background-color: #f8f8f8;
 }
-.finish_class>>> .el-table__header-wrapper {
+.finish_class >>> .el-table__header-wrapper {
   border-radius: 20px;
   background-color: #f8f8f8;
 }
@@ -1108,7 +1155,7 @@ export default {
 }
 
 .chart_wrap {
-  flex: 1;
+  //flex: 1;
   // height: 450px;
   .report_top_bingBo {
     display: flex;

src/views/manage/generalSituation.vue

@@ -301,9 +301,9 @@ export default {
         //   },
         // },
       },
-      dataZoom: {
-        type: "inside", //放大缩小x轴数值
-      },
+      // dataZoom: {
+      //   type: "inside", //放大缩小x轴数值
+      // },
       yAxis: {
         max: 100,
         type: "value",
@@ -1008,6 +1008,7 @@ export default {
             // justify-content: center;
             text-align: center;
             // flex: 1;
+            
             -webkit-line-clamp: 1;
             display: -webkit-box;
             -webkit-box-orient: vertical;