Browse Source

发到手机页面调整并优化,综合分析页面底图名称显示优化。

DESKTOP-6LTVLN7\Liumouren 2 years ago
parent
commit
a403cda904

+ 4 - 0
src/assets/global.css

@@ -352,3 +352,7 @@ body iframe {
   max-height: 60vh;
   overflow-y: auto;
 }
+/* 综合分析页面的图例文字样式 */
+.el-dropdown {
+  color: #ffffff !important;
+}

+ 12 - 8
src/components/common/BottomForm/PutPhone.vue

@@ -36,13 +36,13 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="所属街道" prop="c_area_code">
+      <!-- <el-form-item label="所属街道" prop="c_area_code">
         <el-input v-model="c_area_code_str" disabled placeholder="请选择关联任务,自动填入"></el-input>
       </el-form-item>
       <el-form-item label="任务类型" prop="c_task_type">
         <el-input v-model="c_task_type_str" disabled placeholder="请选择关联任务,自动填入"></el-input>
-      </el-form-item>
-      <el-form-item label="选择疑点">
+      </el-form-item> -->
+      <el-form-item label="选择疑点" prop="c_doubtful_points">
         <el-cascader
           v-model="c_doubtful_pointsList"
           :disabled="legendTreeOptionsLoading"
@@ -180,6 +180,7 @@ export default {
     this.$bus.$on("putPhone", () => {
       this.changeShowBottomMenusStatus();
     });
+    this.createTaskForm.c_task_name = "任务-" + this.$dayjs().format("YYYYMMDDHHmmss");
   },
   destroy() {
     // 当容器销毁时,需要停止监听该事件
@@ -306,7 +307,7 @@ export default {
       // 表单校验
       this.$refs[formName].validate(valid => {
         if (valid) {
-          if (this.c_doubtful_pointsList) {
+          if (this.c_doubtful_pointsList.length > 0) {
             this.c_doubtful_pointsList.forEach(item => {
               this.createTaskForm.c_doubtful_points = item[1];
               this.createTaskForm.c_task_id = this.$CryptoJS.buildGuid();
@@ -323,6 +324,10 @@ export default {
                   if (res.code === 200) {
                     this.$message.success(res.message);
                     this.submitLoading = false;
+                    setTimeout(() => {
+                      // 检验成功后关闭弹窗
+                      this.clearDialogVisible(formName);
+                    }, 0);
                   } else {
                     this.submitLoading = false;
                     this.$message.error(res.message);
@@ -334,11 +339,10 @@ export default {
                 }
               );
             });
+          } else {
+            this.submitLoading = false;
+            this.$message.warning("请先选择疑点后提交!");
           }
-          setTimeout(() => {
-            // 检验成功后关闭弹窗
-            this.clearDialogVisible(formName);
-          }, 0);
         } else {
           return false;
         }

+ 159 - 26
src/views/ComprehensiveAnalysis.vue

@@ -77,20 +77,31 @@
     <div class="comprehensive-analysis-infobox">
       当前显示的疑点数 : &nbsp;<span>{{ currentTotal }}</span>
     </div>
-    <div
-      class="comprehensive-analysis-leftjuanlianInfo"
-      :style="basemap == 1 ? 'color:#e6a23c' : 'color:#303133'"
-      @click="changeBase(1)"
-    >
-      {{ basemapName }}
+    <div class="comprehensive-analysis-leftjuanlianInfo" @click="changeBase(1)">
+      <div class="top"></div>
+      <div class="bottom"></div>
+      <div class="mapTitle">
+        <div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <div></div>
+        <div :class="basemap == 1 ? 'mapTitlective' : 'unMapTitlective'">{{ basemapName }}</div>
+      </div>
     </div>
-    <div
-      class="comprehensive-analysis-rightjuanlianInfo"
-      :style="basemap == 2 ? 'color:#e6a23c' : 'color:#303133'"
-      v-show="showJLInfo"
-      @click="changeBase(2)"
-    >
-      {{ basemapName2 }}
+    <div class="comprehensive-analysis-rightjuanlianInfo" v-show="showJLInfo" @click="changeBase(2)">
+      <div class="top"></div>
+      <div class="bottom"></div>
+      <div class="mapTitle">
+        <div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <div></div>
+        <div :class="basemap == 2 ? 'mapTitlective' : 'unMapTitlective'">{{ basemapName2 }}</div>
+      </div>
     </div>
     <!-- 属性弹窗 -->
     <AttributePopup
@@ -2384,7 +2395,8 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-@commonBorderColor: rgb(0, 170, 255);
+@commonBorderColor: #00aaff64;
+@mapTitleBgColor: #00476b;
 .comprehensive-analysis {
   &-law-popup {
     position: fixed;
@@ -2454,41 +2466,157 @@ export default {
 
   &-leftjuanlianInfo {
     position: absolute;
-    border: none;
-    left: 0.5%;
+    width: 250px;
+    border-left: 5px solid #2fb8ff;
+    left: 0px;
     top: 15px;
     pointer-events: auto;
     color: #e6a23c;
     font-size: 20px;
-    background-color: #ffffff;
+    background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
     padding: 5px 10px;
-    border-radius: 5px;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     -khtml-user-select: none;
     user-select: none;
-    text-shadow: 1px 1px #000000;
     cursor: pointer;
   }
+  &-leftjuanlianInfo .top {
+    position: absolute;
+    height: 3px;
+    left: -5px;
+    width: 100%;
+    top: -6px;
+    background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
+    border-left: 5px solid #2fb8ff;
+  }
+
+  &-leftjuanlianInfo .bottom {
+    position: absolute;
+    height: 3px;
+    left: -5px;
+    width: 100%;
+    bottom: -6px;
+    background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
+    border-left: 5px solid #2fb8ff;
+  }
+
+  &-leftjuanlianInfo .mapTitle {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    align-items: center;
+    & > div:nth-child(1) {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-content: space-around;
+      justify-content: space-evenly;
+      align-items: center;
+      & div {
+        width: 3px;
+        height: 3px;
+        background-color: #2fb8ff;
+        transform: rotate(45deg);
+        margin: 3px;
+      }
+    }
+    & > div:nth-child(2) {
+      width: 6px;
+      height: 6px;
+      background-color: #2fb8ff;
+      transform: rotate(45deg);
+      margin: 6px;
+    }
+    & > div:nth-child(3) {
+      font-size: 20px;
+      letter-spacing: 2px;
+      font-weight: bold;
+      font-family: pingfangSC;
+    }
+  }
+  &-rightjuanlianInfo .mapTitle {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    align-content: center;
+    align-items: center;
+    & > div:nth-child(1) {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-content: space-around;
+      justify-content: space-evenly;
+      align-items: center;
+      & div {
+        width: 3px;
+        height: 3px;
+        background-color: #2fb8ff;
+        transform: rotate(45deg);
+        margin: 3px;
+      }
+    }
+    & > div:nth-child(2) {
+      width: 6px;
+      height: 6px;
+      background-color: #2fb8ff;
+      transform: rotate(45deg);
+      margin: 6px;
+    }
+    & > div:nth-child(3) {
+      font-size: 20px;
+      letter-spacing: 2px;
+      font-weight: bold;
+      font-family: pingfangSC;
+    }
+  }
+  .unMapTitlective {
+    color: #2fb8ff;
+  }
+  .mapTitlective {
+    background-image: linear-gradient(0deg, #33eeff, #ffffff);
+    text-shadow: 0 0 5px #fff;
+    background-clip: text;
+    color: transparent;
+  }
+  &-rightjuanlianInfo .top {
+    position: absolute;
+    height: 3px;
+    right: -5px;
+    width: 100%;
+    top: -6px;
+    background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
+    border-right: 5px solid #2fb8ff;
+  }
+
+  &-rightjuanlianInfo .bottom {
+    position: absolute;
+    height: 3px;
+    right: -5px;
+    width: 100%;
+    bottom: -6px;
+    background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
+    border-right: 5px solid #2fb8ff;
+  }
 
   &-rightjuanlianInfo {
     position: absolute;
-    border: none;
-    right: 0.5%;
+    width: 250px;
+    border-right: 5px solid #2fb8ff;
+    right: 0;
     top: 15px;
     pointer-events: auto;
     color: #303133;
     font-size: 20px;
-    background-color: #ffffff;
+    background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
     padding: 5px 10px;
-    border-radius: 5px;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     -khtml-user-select: none;
     user-select: none;
-    text-shadow: 1px 1px #000000;
     cursor: pointer;
   }
 
@@ -2592,10 +2720,12 @@ export default {
     color: #fff;
     border-radius: 3px;
     position: absolute;
-    left: 160px;
-    top: 15px;
+    left: 15px;
+    bottom: 15px;
     pointer-events: auto;
+    transition: 0.6s;
     cursor: pointer;
+    z-index: 999;
     .left-arrow {
       width: 7px;
       height: 7px;
@@ -2613,6 +2743,9 @@ export default {
       position: absolute;
       left: 34px;
     }
+    &:hover {
+      background: #00aaff;
+    }
   }
 
   &-legendbox {