Merge pull request 'lukeyan' (#7) from lukeyan into dev

Reviewed-on: #7

src/utils/request.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 // import { getToken } from '@/utils/token'
 
 const baseURL = 'http://50.146.63.43:20000/'
-// const baseURL = ''
+//const baseURL = `http://${window.location.host}/`
 // axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
   baseURL,

src/views/coastalMap/components/keyPerson.vue

@@ -69,7 +69,52 @@
       </div>
       <!-- 滚动区域 -->
       <div class="roll_body">
-        <PersonScroll></PersonScroll>
+        <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
+          <li v-for="(item, index) in roll_list" :key="index">
+            <div class="roll_item_left">
+              <div class="roll_item_pic"></div>
+              <div class="roll_item_btn">查看详情</div>
+            </div>
+            <div class="roll_item_right">
+              <div v-if="item.per_type == '1'" class="person_type one_type">
+                {{ item.type_text }}
+              </div>
+              <div
+                v-else-if="item.per_type == '2'"
+                class="person_type two_type"
+              >
+                {{ item.type_text }}
+              </div>
+              <div
+                v-else-if="item.per_type == '3'"
+                class="person_type three_type"
+              >
+                {{ item.type_text }}
+              </div>
+              <!-- 信息展示 -->
+              <div class="right_text">
+                <div class="right_text_item">人员姓名</div>
+                <div class="right_text_item">联系电话</div>
+                <div class="right_text_item">证件号码</div>
+                <div class="right_text_item">户籍地址</div>
+                <div class="right_text_item">现住地址</div>
+              </div>
+              <div class="right_value">
+                <div class="right_value_item">{{ item.person_name }}</div>
+                <div class="right_value_item">{{ item.phone_num }}</div>
+                <div class="right_value_item" :title="item.id_card">
+                  {{ item.id_card }}
+                </div>
+                <div class="right_value_item" :title="item.old_address">
+                  {{ item.old_address }}
+                </div>
+                <div class="right_value_item" :title="item.new_address">
+                  {{ item.new_address }}
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -83,13 +128,106 @@ export default {
   components: { PersonScroll },
   data() {
     return {
-      title_text: '重点人员'
+      title_text: "重点人员",
-      // * 测试数据
+      roll_list: [
-      // carouselData: [{ id: 1 }]
+        {
-    }
+          text: "123",
+          per_type: "1",
+          type_text: "在逃人员",
+          person_name: "周大山",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+        {
+          text: "1243",
+          per_type: "3",
+          type_text: "涉恐人员",
+          person_name: "王富强",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+        {
+          text: "12323",
+          per_type: "2",
+          type_text: "精神病人",
+          person_name: "赵磊",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+        {
+          text: "1243",
+          per_type: "2",
+          type_text: "精神病人",
+          person_name: "徐永",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+        {
+          text: "1223",
+          per_type: "2",
+          type_text: "精神病人",
+          person_name: "李文一",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+        {
+          text: "1223",
+          per_type: "1",
+          type_text: "在逃人员",
+          person_name: "谭静",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+        {
+          text: "1243",
+          per_type: "3",
+          type_text: "涉恐人员",
+          person_name: "孙洋洋",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+        {
+          text: "1223",
+          per_type: "1",
+          type_text: "在逃人员",
+          person_name: "董磊",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+        {
+          text: "1223",
+          per_type: "2",
+          type_text: "精神病人",
+          person_name: "郑廖",
+          phone_num: "13455674532",
+          id_card: "321287197606038965",
+          old_address: "射阳县解放路74号",
+          new_address: "江苏省射阳县海河镇革新村二组113号",
+        },
+      ],
+      animateUp: false,
+      timer: null,
+    };
   },
   mounted() {
-    this.init_charts()
+    this.init_charts();
+    this.timer = setInterval(this.scrollAnimate, 1500);
   },
   methods: {
     init_charts() {
@@ -136,16 +274,25 @@ export default {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                shadowColor: "rgba(0, 0, 0, 0.5)",
-              }
+              },
-            }
+            },
-          }
+          },
-        ]
+        ],
-      }
+      };
-      option && myChart.setOption(option)
+      option && myChart.setOption(option);
-    }
+    },
-  }
+    // 滚动播放
-}
+    scrollAnimate() {
+      this.animateUp = true;
+      setTimeout(() => {
+        this.roll_list.push(this.roll_list[0]);
+        this.roll_list.shift();
+        this.animateUp = false;
+      }, 500);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .key_body {
@@ -274,11 +421,113 @@ export default {
         }
       }
     }
-
     .roll_body {
-      display: flex;
+      width: 20vw;
-      align-items: center;
       height: 48vh;
+      // background: #00f5ff;
+      overflow: hidden;
+      .marquee-list {
+        width: 20vw;
+        height: 48vh;
+        padding: 0px;
+        li {
+          margin-left: 2%;
+          margin-right: 2%;
+          width: 96%;
+          height: 15vh;
+          background: url("~@/assets/coastalMap/keyPerson/key_li_back.png")
+            no-repeat;
+          background-size: 100% 100%;
+          margin-top: 1vh;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          list-style: none;
+          text-align: center;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .roll_item_left {
+            width: 5vw;
+            height: 13vh;
+            .roll_item_pic {
+              width: 5vw;
+              height: 10vh;
+              background: #0b4672;
+            }
+            .roll_item_btn {
+              width: 5vw;
+              height: 3vh;
+              color: #fff;
+              background: #00f5ff;
+              font-size: 16px;
+              font-weight: 400;
+              text-align: center;
+              line-height: 3vh;
+              cursor: pointer;
+              background: url("~@/assets/coastalMap/keyPerson/key_li_btn.png")
+                no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+          .roll_item_right {
+            width: 13vw;
+            height: 13vh;
+            position: relative;
+            display: flex;
+            .person_type {
+              position: absolute;
+              width: 3vw;
+              height: 2vh;
+              top: 0px;
+              right: 0px;
+              color: #061122;
+              text-align: center;
+              line-height: 2vh;
+            }
+            .one_type {
+              background: #ffc426;
+            }
+            .two_type {
+              background: #00f5ff;
+            }
+            .three_type {
+              background: #a357ff;
+            }
+            .right_text {
+              width: 5vw;
+              height: 13vh;
+              .right_text_item {
+                width: 5vw;
+                height: 2.6vh;
+                color: #ecf4f9;
+                font-size: 14px;
+                text-align: center;
+                line-height: 2.6vh;
+              }
+            }
+            .right_value {
+              width: 8vw;
+              height: 13vh;
+              .right_value_item {
+                width: 8vw;
+                height: 2.6vh;
+                color: #edf1f7;
+                font-size: 14px;
+                text-align: left;
+                line-height: 2.6vh;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+            }
+          }
+        }
+      }
+      .animate-up {
+        transition: all 0.8s ease-in-out;
+        transform: translateY(-20vh);
+      }
     }
   }
 }