Jelajahi Sumber

修改样式

plg 4 bulan lalu
induk
melakukan
f479a7fc97

TEMPAT SAMPAH
src/assets/img/home/bg.png


TEMPAT SAMPAH
src/assets/img/home/detail.png


TEMPAT SAMPAH
src/assets/img/home/isCom.png


TEMPAT SAMPAH
src/assets/img/home/isNo.png


TEMPAT SAMPAH
src/assets/img/home/isRun.png


TEMPAT SAMPAH
src/assets/img/side/side_bg.png


+ 1 - 0
src/views/loginNew.vue

@@ -146,6 +146,7 @@ export default {
             (res) => {
               console.log(res, "登录返回");
               if (res && res.code == 200) {
+                debugger;
                 // type等于3  超级管理员
                 // type等于2  普通管理员
                 // type等于1  普通用户等不能登录

+ 321 - 296
src/views/manage/generalSituation.vue

@@ -9,24 +9,25 @@
             <span :title="userInfo.orgName" class="yuan_name">{{
               userInfo.orgName
             }}</span>
-            <span class="yuan_num">总人数</span>
+
             <span class="yuan_people">{{ peopleData["总人数"] }}人</span>
           </div>
-          <div class="computer">
+          <!-- <div class="computer">
             <div v-for="(item, key) in peopleData" :key="key">
               <div class="computer_detail" v-if="key != '总人数'">
                 {{ key }}:{{ item }}人
               </div>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
       <div class="plan">
         <div class="plan_inner">
           <span class="plan_top">近期测试</span>
           <div class="table_header">
-            <div class="detail">测试名称</div>
+            <div class="detail">计划名称</div>
             <div class="detail">创建时间</div>
+            <div class="detail">结束时间</div>
             <div class="detail">状态</div>
           </div>
           <div class="table_a">
@@ -34,22 +35,54 @@
               <div style="text-align: center; margin-top: 10px">暂无数据</div>
             </div>
             <div v-else>
-              <div class="table_body" v-for="item in tableData" :key="item.id">
-                <div class="detail">{{ item.planName }}</div>
-                <div class="detail">{{ item.createDate }}</div>
-                <div
-                  class="detail"
-                  :style="{
-                    color:
-                      item.planStatus == '1'
-                        ? '#ff7800'
-                        : item.planStatus == '2'
-                        ? '#2342ff'
-                        : '#333333',
-                    fontWeight: '700',
-                  }"
-                >
-                  {{ planStatusFun(item) }}
+              <div
+                class="table_body"
+                v-for="(item, index) in tableData"
+                :key="item.id"
+                :style="{ backgroundColor: index % 2 == 0 ? '#ffffff' : '#F8F8F8' }"
+              >
+                <!-- <div :style="{backgroundColor:index ==0?'':'s'}">
+                
+                </div> -->
+                <div class="detail" :title="item.planName">{{ item.planName }}</div>
+                <div class="detail">{{ item.createTime }}</div>
+                <div class="detail">{{ item.planEndTime }}</div>
+                <!-- item.planStatus -->
+                <div class="detail">
+                  <!-- {{ planStatusFun(item) }} -->
+                  <div
+                    style="display: flex; justify-content: center; align-items: center"
+                    v-if="item.planStatus == '3'"
+                  >
+                    <img
+                      style="width: 16px"
+                      src="../../assets/img/home/isCom.png"
+                      alt=""
+                    />&nbsp;&nbsp;
+                    <div style="color: #333333">已完成</div>
+                  </div>
+                  <div
+                    style="display: flex; justify-content: center; align-items: center"
+                    v-if="item.planStatus == '2'"
+                  >
+                    <img
+                      style="width: 16px"
+                      src="../../assets/img/home/isRun.png"
+                      alt=""
+                    />&nbsp;&nbsp;
+                    <div style="color: #f6cb00">进行中</div>
+                  </div>
+                  <div
+                    style="display: flex; justify-content: center; align-items: center"
+                    v-if="item.planStatus == '1'"
+                  >
+                    <img
+                      style="width: 16px"
+                      src="../../assets/img/home/isNo.png"
+                      alt=""
+                    />&nbsp;&nbsp;
+                    <div style="color: #d52121">未开始</div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -58,168 +91,101 @@
       </div>
     </div>
     <div class="recently">
-      <div class="recently_bottom">
-        <div class="recently_bottom_font">
+      <!-- <div class="recently_bottom_font">
           最近测试结果: {{ planData.planName }} &nbsp;&nbsp;&nbsp;&nbsp;<span
             style="cursor: pointer; color: #00bf78"
             @click="queryDetail"
             >查看详情</span
           >
-        </div>
-        <div class="block">
-          <!-- <div class="block_left" style="">
-            <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> -->
-          <div class="block_left" style="">
-            <div class="chart_wrap">
-              <PieChart :options="options1" chartId="myPieChart10" chartName="完成度" />
-            </div>
-            <div class="chart_wrap" style="">
-              <PieChart
-                :options="options6"
-                chartId="myPieChart15"
-                chartName="存在心理健康情况"
-              />
-            </div>
-            <div class="chart_wrap">
-              <PieChart :options="options2" chartId="myPieChart11" 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="block_left">
+        <div class="block_ren">
+          <div class="re">最近测评结果</div>
+          <div class="detail">
+            <img
+              @click="queryDetail"
+              style="width: 120px; cursor: pointer"
+              src="../../assets//img/home/detail.png"
+              alt=""
+            />
           </div>
-          <div class="block_left" style="">
-            <!-- <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="options3" chartId="myPieChart12" chartName="抑郁" />
-            </div>
-            <div class="chart_wrap">
-              <PieChart :options="options4" chartId="myPieChart13" chartName="压力" />
-            </div>
-            <div class="chart_wrap">
-              <PieChart :options="options5" chartId="myPieChart14" chartName="精神障碍" />
-            </div>
-          
+        </div>
+        <div style="width: 100%">
+          <div class="block_table">
+            <div class="block_detail">计划名称</div>
+            <div class="block_detail">测试人数</div>
+            <div class="block_detail">测试时间</div>
           </div>
-
-          <!-- <div class="block_left">
-            <div>
-              <div class="block_table">
-                <div class="block_detail">计划名称</div>
-                <div class="block_detail">专业</div>
-                <div class="block_detail">测试时间</div>
-                <div class="block_detail">测试人数</div>
-              </div>
-              <div class="block_body">
-                <div
-                  v-if="planData.hasOwnProperty('planName')"
-                  style="display: flex; flex: 1"
-                >
-                  <div class="block_detail" v-for="(item, key) in planData" :key="key">
-                    {{ item }}
-                  </div>
-                </div>
-                <div v-else style="width: 100%; text-align: center; margin-top: 10px">
-                  <div>暂无数据</div>
-                </div>
-              </div>
-              <div v-if="planData.hasOwnProperty('planName')" class="profession">
-                {{ planData["planName"] }}计划总分等级人数
-              </div>
-              <div v-else class="profession">计划总分等级人数</div>
-            </div>
-
+          <div class="block_body">
             <div
               v-if="planData.hasOwnProperty('planName')"
-              class="echarts_style"
-              ref="echarts_zhu"
-            ></div>
-            <div
-              v-else
-              style="
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 100%;
-              "
+              style="display: flex; padding-left: 20px; padding-right: 20px;flex:1"
             >
-              <span style="text-align: center">暂无数据</span>
+              <!-- <div style='width:20px'></div> -->
+              <div class="block_detail" >
+                <!-- {{ planData.planName }} -->
+                <span class="plan_dp" :title="planData.planName"> {{ planData.planName }}</span>
+              </div>
+              <div class="block_detail" >
+            
+                <span  class="plan_dp" :title="planData.userNum"> {{ planData.userNum }}</span>
+              </div>
+              <div class="block_detail" >
+                <span class="plan_dp" :title="planData.createTime"> {{ planData.createTime }}</span>
+              </div>
             </div>
-          </div> -->
-          <!-- <div class="block_right">
-            <div class="block_avg">
-              各个专业维度平均分
-              <el-select
-                v-model="profession"
-                placeholder="请选择"
-                @change="professionChange"
-              >
-                <el-option
-                  v-for="item in professionOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                </el-option>
-              </el-select>
+            <div v-else style="width: 100%; text-align: center; margin-top: 10px">
+              <div>暂无数据</div>
             </div>
-            <div v-if="profession != ''" class="block_lei" ref="echarts_lei"></div>
-            <div
-              v-else
-              style="
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 100%;
-              "
+          </div>
+        </div>
+
+        <div
+          v-if="planData.hasOwnProperty('planName')"
+          class="echarts_style"
+          ref="echarts_zhu"
+        ></div>
+        <div
+          v-else
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+          "
+        >
+          <span style="text-align: center">暂无数据</span>
+        </div>
+      </div>
+      <div class="block_right">
+        <div class="block_avg">
+          各个专业维度平均分
+          <el-select v-model="profession" placeholder="请选择" @change="professionChange">
+            <el-option
+              v-for="item in professionOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
             >
-              暂无数据
-            </div>
-          </div> -->
+            </el-option>
+          </el-select>
+        </div>
+        <div v-if="profession != ''" class="block_lei" ref="echarts_lei"></div>
+        <div
+          v-else
+          style="
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+          "
+        >
+          暂无数据
         </div>
       </div>
     </div>
-    <PlanReport ref="register"  />
+    <PlanReport ref="register" />
   </div>
 </template>
 <script>
@@ -317,6 +283,7 @@ export default {
         type: "inside", //放大缩小x轴数值
       },
       yAxis: {
+        max: 100,
         type: "value",
         boundaryGap: [0, 0.01],
         minInterval: 1,
@@ -327,10 +294,39 @@ export default {
           data: [],
           barWidth: "15", //修改柱状图的宽度
           itemStyle: {
-            color: "#CCFFD7",
+            color: new echarts.graphic.LinearGradient(
+              //前四个参数用于配置渐变色的起止位置,这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
+              //通过修改前4个参数,可以实现不同的渐变方向
+              /*第五个参数则是一个数组,用于配置颜色的渐变过程。
+                          每项为一个对象,包含offset和color两个参数
+                        */
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  //代表渐变色从正上方开始
+                  offset: 0, //offset范围是0~1,用于表示位置,0是指0%处的颜色
+                  color: "#644BFD",
+                }, //柱图渐变色
+                {
+                  offset: 1, //指100%处的颜色
+                  color: "#00F6E3",
+                },
+              ]
+            ),
             borderWidth: 2,
-            borderColor: "#2EE053",
-            barBorderRadius: [10, 10, 0, 0], //修改柱状图圆角
+            // borderColor: "#2EE053",
+            barBorderRadius: [10, 10, 10, 10], //修改柱状图圆角
+          },
+          label: {
+            show: true,
+            position: "top",
+            color: "#006FFF",
+            formatter: function (params) {
+              return params.value + "%";
+            },
           },
         },
       ],
@@ -411,7 +407,7 @@ export default {
   },
   methods: {
     queryDetail() {
-      console.log(this.planData)
+      console.log(this.planData);
       this.$refs.register.open(this.planData);
     },
     //根据组织编号查询总人数
@@ -433,6 +429,7 @@ export default {
       this.$http.get(url, {}, (res) => {
         if (res && res.code == 200) {
           this.tableData = res.data.content;
+          debugger;
           //   this.total = res.data.totalElements;
         } else {
           // this.$toast.fail(res.msg);
@@ -453,8 +450,8 @@ export default {
               return (
                 key == "planName" ||
                 key == "planOrgName" ||
-                key == "createDate" ||
-                key == "userNum"||
+                key == "createTime" ||
+                key == "userNum" ||
                 key == "id"
               );
             });
@@ -503,38 +500,29 @@ export default {
         {},
         (res) => {
           let dimensionList = res.data;
-          this.options1 = [
-            { value: this.completeNum + this.unComplete, name: "已完成人数" },
-            { value: this.unComplete, name: "未完成占比" },
-          ];
-
-          this.options2 = [
-            { value: this.completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
-            { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
-          ];
-
-          this.options3 = [
-            { value: this.completeNum, name: "已完成人数" },
-            { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
-          ];
-
-          this.options4 = [
-            { value: this.completeNum, name: "已完成人数" },
-            { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
-          ];
 
-          this.options5 = [
-            { value: this.completeNum, name: "已完成人数" },
-            { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
-          ];
-
-          this.options6 = [
-            {
-              value: this.completeNum,
-              name: "已完成人数",
-            },
-            { value: this.completeNum- this.abnormalNum, name: "心理健康占比" },
-          ];
+          let nameList = [];
+          nameList.push("心理健康");
+          nameList.push("抑郁");
+          nameList.push("压力");
+          nameList.push("焦虑");
+          nameList.push("精神障碍");
+          let scoreList = [];
+          scoreList.push(
+            parseInt(((this.completeNum - this.abnormalNum) / this.completeNum) * 100)
+          );
+          scoreList.push((parseInt(dimensionList[1]["抑郁"]) / this.completeNum) * 100);
+          scoreList.push((parseInt(dimensionList[2]["压力"]) / this.completeNum) * 100);
+          scoreList.push((parseInt(dimensionList[0]["焦虑"]) / this.completeNum) * 100);
+          scoreList.push(
+            (parseInt(dimensionList[3]["精神障碍"]) / this.completeNum) * 100
+          );
+          this.echarts_zhu = this.$refs.echarts_zhu;
+          this.option.xAxis.data = nameList;
+          this.option.series[0].data = scoreList;
+          debugger;
+          let myChart1 = echarts.init(this.echarts_zhu);
+          myChart1.setOption(this.option);
         }
       );
     },
@@ -555,6 +543,7 @@ export default {
           this.echarts_zhu = this.$refs.echarts_zhu;
           this.option.xAxis.data = nameList;
           this.option.series[0].data = scoreList;
+          debugger;
           let myChart1 = echarts.init(this.echarts_zhu);
           myChart1.setOption(this.option);
         }
@@ -652,11 +641,11 @@ export default {
   border-radius: 2px;
 }
 .table_a::-webkit-scrollbar-thumb {
-  background: #40a0ff49;
+  background: #afafaf49;
   border-radius: 10px;
 }
 .table_a::-webkit-scrollbar-thumb:hover {
-  background: #40a0ff;
+  background: #b6b6b6;
 }
 .pp {
   display: flex;
@@ -664,7 +653,7 @@ export default {
   /* justify-content: center; */
   height: 100%;
   width: 100%;
-  background-color: #ffffff;
+  background-color: #f7f7f7;
   //   background-color: aqua;
   .general_situation {
     height: 260px;
@@ -672,15 +661,19 @@ export default {
     display: flex;
     min-width: 980px;
     .number_people {
+      background: url(../../assets/img/home/bg.png) no-repeat;
+      background-size: cover;
       border-radius: 20px;
-      flex: 6;
-      background-color: #48d68e;
+      flex: 5;
+      // background-color: #48d68e;
       display: flex;
       flex-direction: column;
       .number_people_top {
         margin-top: 20px;
         margin-left: 20px;
         color: #ffffff;
+        font-size: 24px;
+        letter-spacing: 3px;
         margin-bottom: 20px;
         font-weight: 700;
       }
@@ -688,11 +681,9 @@ export default {
         display: flex;
         color: #ffffff;
         .out {
-          width: 150px;
-          height: 150px;
           border-radius: 20px;
           margin-left: 20px;
-          background-color: #7fe2b0;
+          // background-color: #7fe2b0;
           display: flex;
           flex-direction: column;
           .yuan_name {
@@ -701,20 +692,16 @@ export default {
             white-space: nowrap;
             margin-left: 20px;
             margin-top: 20px;
-            color: #000000;
-            font-size: 20px;
-          }
-          .yuan_num {
-            margin-left: 20px;
-            margin-top: 20px;
-            color: #000000;
-            font-size: 14px;
+            color: #ffffff;
+            letter-spacing: 3px;
+            font-size: 32px;
           }
           .yuan_people {
             margin-left: 20px;
             margin-top: 20px;
             color: #ffffff;
-            font-size: 30px;
+            font-size: 60px;
+            letter-spacing: 3px;
           }
         }
         .computer {
@@ -737,17 +724,19 @@ export default {
     .plan {
       display: flex;
       // height:30%;
-      flex: 4;
+      flex: 10;
 
       .plan_inner {
         padding: 20px;
         border-radius: 20px;
         margin-left: 20px;
-        background-color: #f7f7f7;
+        background-color: #ffffff;
         display: flex;
         width: 100%;
         flex-direction: column;
         .plan_top {
+          font-size: 24px;
+          letter-spacing: 3px;
           font-weight: 700;
           color: #000000;
           margin-bottom: 20px;
@@ -756,9 +745,13 @@ export default {
         .table_header {
           display: flex;
           // justify-content: space-around;
-          background-color: #ffffff;
+          background-color: #00bf78;
+          border-radius: 20px;
           line-height: 40px;
           font-weight: 700;
+          font-size: 18px;
+          letter-spacing: 3px;
+          color: #ffffff;
           .detail {
             flex: 1;
             text-align: center;
@@ -769,8 +762,13 @@ export default {
           .table_body {
             display: flex;
             // justify-content: space-around;
-            line-height: 30px;
+            line-height: 40px;
             .detail {
+              display: inline-block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              width: 100%;
               flex: 1;
               text-align: center;
             }
@@ -781,92 +779,119 @@ export default {
   }
   .recently {
     width: 100%;
-    // height: 100%;
-    // overflow: auto;
+    background-color: #f7f7f7;
     height: calc(100% - 260px);
-    // background-color: #000000;
-    .recently_bottom {
-      height: calc(100% - 20px);
-      margin-top: 20px;
-      // margin-bottom:20px;
-      background-color: #f7f7f7;
-      width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 20px;
+
+    .block_left {
+      // box-sizing: border-box;
+      // padding:10px;
       border-radius: 20px;
+
       display: flex;
+      // padding-left: 10px;
       flex-direction: column;
+      // padding: 10px;
+      flex: 5;
+      background-color: #ffffff;
+      height: 100%;
+      width: 100%;
+      align-items: center;
+      // background-color: #ffffff;
+      .block_ren {
+        padding-top: 10px;
 
-      .recently_bottom_font {
-        padding: 10px;
-        font-weight: 700;
-        background-color: #ffffff;
-      }
-      .block {
+        // padding-right: 20px;
         width: 100%;
-        height: 100%;
         display: flex;
-        flex-direction: column;
+        justify-content: space-between;
         align-items: center;
-        .block_left {
+        .re {
+          letter-spacing: 3px;
+          padding: 0 20px;
+          color: #222222;
+          font-weight: 700;
+          font-size: 24px;
+        }
+        .detail {
+          padding: 0 20px;
+        }
+      }
+      .chart_wrap {
+        flex: 1;
+        // height: 450px;
+      }
+      .block_table {
+        margin-top: 10px;
+        margin-left: 20px;
+        margin-right: 20px;
+        background-color: #f8f8f8;
+        border-radius: 20px;
+
+        display: flex;
+
+        .block_detail {
+          font-weight: 700;
+          padding: 10px;
+          flex: 1;
           display: flex;
-          padding-left: 10px;
-          flex-direction: row;
-          // padding: 10px;
-          flex: 6;
-          //   background-color: #000000;
-          height: 100%;
-          width: 100%;
-          align-items: center;
-          background-color: #ffffff;
-          .chart_wrap {
-            flex: 1;
-            // height: 450px;
-          }
-          .block_table {
-            display: flex;
-            background-color: #ffffff;
-            .block_detail {
-              font-weight: 700;
-              padding: 10px;
-              flex: 1;
-              display: flex;
-              justify-content: center;
-            }
-          }
-          .block_body {
-            display: flex;
-            .block_detail {
-              justify-content: center;
-              padding: 10px;
-              flex: 1;
-              display: flex;
-            }
-          }
-          .profession {
-            font-weight: 700;
-          }
-          .echarts_style {
-            width: 100%;
-            flex: 1;
-            // background-color: #000000;
-          }
+          justify-content: center;
         }
-        .block_right {
-          flex: 4;
-          // background-color: #d32d2d;
-          height: 100%;
+      }
+      .block_body {
+        width: 100%;
+        display: flex;
+
+        .block_detail {
+          background-color: #ffffff;
+          text-align: center;
+          line-height: 36px;
           display: flex;
-          flex-direction: column;
-          .block_avg {
-            margin-left: 20px;
-            font-weight: 700;
-          }
-          .block_lei {
-            flex: 1;
-            // background-color: #000000;
-            margin-left: 20px;
+          flex: 1;
+          width: 100%;
+          overflow: hidden;
+      
+          .plan_dp{
+            text-align: center;
+            // flex: 1;
+            display: inline-block;
+            white-space: nowrap;
+            // width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
         }
       }
+      .profession {
+        font-weight: 700;
+      }
+      .echarts_style {
+        width: 100%;
+        flex: 1;
+        // background-color: #000000;
+      }
+    }
+    .block_right {
+      box-sizing: border-box;
+
+      flex: 10;
+      // background-color: #d32d2d;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: #f7f7f7;
+      .block_avg {
+        margin-left: 20px;
+        font-weight: 700;
+      }
+      .block_lei {
+        flex: 1;
+        // background-color: #000000;
+        margin-left: 20px;
+      }
     }
   }
 }

+ 16 - 5
src/views/manage/manageMain.vue

@@ -65,7 +65,7 @@
                   <span class="menu_name">{{ item.name }}</span>
                 </div>
               </template>
-              <el-menu-item-group style="background-color: #000000">
+              <el-menu-item-group style="background-color:#000000">
                 <el-menu-item v-for="el in item.child" :key="el.id" :index="el.path">
                   <span class="menu_sub_tt"
                     ><span class="menu_sub_t1">&nbsp;</span>{{ el.name }}</span
@@ -130,7 +130,7 @@
       </el-header>
       <el-container style="flex: 1; overflow: auto">
         <el-main style="background-color: #f5f5f5; display: flex">
-          <div class="el-main-inner">
+          <div class="el-main-inner" :style="{ backgroundColor: isTmpPath=='/manage/generalSituation'?'#F7F7F7':'#ffffff' }">
             <transition name="fade" mode="out-in">
               <router-view></router-view>
             </transition>
@@ -265,6 +265,7 @@ export default {
     };
 
     return {
+      isTmpPath:"",
       //是否显示退出菜单
       isShowMenu: false,
       userInfo: {}, //用户信息
@@ -610,6 +611,8 @@ export default {
     }
   },
   mounted() {
+    //获取当前的路由信息
+
     let codeImage = sessionStorage.getItem("codeImage");
     this.urlJump = codeImage + "?invitationCode=";
     let that = this;
@@ -619,6 +622,8 @@ export default {
     this.bus.$on("menuStatusUpdate", (e) => {
       that.$refs.menu.activeIndex = e;
       that.active = e;
+      console.log('-----------------')
+      console.log(that.active)
       //  that.$forceUpdate()
       that.selectMenu(e);
     });
@@ -642,6 +647,9 @@ export default {
     },
     //匹配获取页签名称-2020-03-17 lwl
     selectMenu(param) {
+      // console.log("-----------selectMenu");
+      // console.log(param);
+      this.isTmpPath=param
       this.menuList.forEach((item) => {
         if (item.path == param) {
           this.crumbParent = item.name;
@@ -740,6 +748,8 @@ export default {
 </script>
 >
 <style>
+.side_class {
+}
 .el-submenu .el-menu-item {
   height: 50px;
   line-height: 50px;
@@ -871,6 +881,8 @@ export default {
   /*height: 98vh;*/
   height: 100vh;
   text-align: left;
+  // background: url('../../assets/img/side/side_bg.png') no-repeat;
+  // background-size: 100% 100vh;
   /*padding-top: 60px;*/
   // border-top-right-radius: 40px;
   // border-bottom-right-radius: 40px;
@@ -1045,10 +1057,7 @@ export default {
 }
 .el-main-inner {
   display: flex;
-
   width: 100%;
-
-  background-color: #fff;
   padding: 20px;
   border-radius: 40px;
 }
@@ -1082,6 +1091,8 @@ export default {
   // border-top-left-radius: 40px;
   // border-bottom-left-radius: 40px;
   background-color: #000000;
+  // background: url('../../assets/img/side/side_bg.png') no-repeat;
+  // background-size: 100% 100vh;
 }
 .main_top_1 {
   border-top-left-radius: 40px;