框架，监测预警首页，列表页，表单页

.eslintrc.js

@@ -21,7 +21,8 @@ module.exports = {
   ],
   globals: {
     "ol": true,
-    "UsbPhone": true
+    "UsbPhone": true,
+    "BMap": true
   },
   // add your custom rules here
   rules: {

package-lock.json

@@ -2991,7 +2991,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -3760,6 +3759,34 @@
       "resolved": "http://r.cnpmjs.org/bluebird/download/bluebird-3.5.2.tgz",
       "integrity": "sha1-G+CQjgVKdRdUVJwnBInBUF1KsVo="
     },
+    "bmaplib.curveline": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.curveline/download/bmaplib.curveline-1.0.0.tgz",
+      "integrity": "sha1-gm6wvxxZ+tGyMUK+Zvw2DPAJrqI="
+    },
+    "bmaplib.heatmap": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.heatmap/download/bmaplib.heatmap-1.0.4.tgz",
+      "integrity": "sha1-MBYSYncf54rzVwX/kkV3Jd5dmFA="
+    },
+    "bmaplib.lushu": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.lushu/download/bmaplib.lushu-1.0.7.tgz",
+      "integrity": "sha1-d8F9z3FI0wxG6EMMf/hrIOQYuLg="
+    },
+    "bmaplib.markerclusterer": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.markerclusterer/download/bmaplib.markerclusterer-1.0.13.tgz",
+      "integrity": "sha1-RC1xpsQIRO5H0B9tshZrVFMLW9E=",
+      "requires": {
+        "bmaplib.texticonoverlay": "^1.0.2"
+      }
+    },
+    "bmaplib.texticonoverlay": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/bmaplib.texticonoverlay/download/bmaplib.texticonoverlay-1.0.2.tgz",
+      "integrity": "sha1-14VG6g8DbZ/pZJg3ljFbbBEqBb8="
+    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "http://r.cnpmjs.org/bn.js/download/bn.js-4.11.8.tgz",
@@ -7724,8 +7751,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7743,13 +7769,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7762,18 +7786,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7876,8 +7897,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7887,7 +7907,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7900,20 +7919,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -7930,7 +7946,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -8003,8 +8018,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -8014,7 +8028,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8090,8 +8103,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -8121,7 +8133,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8139,7 +8150,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -8178,13 +8188,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
@@ -10742,6 +10750,14 @@
         "resolve": "^1.1.7"
       }
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npm.taobao.org/linkify-it/download/linkify-it-2.2.0.tgz",
+      "integrity": "sha1-47VGl+eL+RXHCjis14/QngBYsc8=",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "http://r.cnpmjs.org/load-json-file/download/load-json-file-1.1.0.tgz",
@@ -11204,6 +11220,18 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npm.taobao.org/markdown-it/download/markdown-it-8.4.2.tgz",
+      "integrity": "sha1-OG+YmY3BWjdyKqdyIIT0Agvdm1Q=",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
     "math-random": {
       "version": "1.0.1",
       "resolved": "http://r.cnpmjs.org/math-random/download/math-random-1.0.1.tgz",
@@ -11224,6 +11252,11 @@
       "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
       "dev": true
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/mdurl/download/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "http://r.cnpmjs.org/media-typer/download/media-typer-0.3.0.tgz",
@@ -16491,8 +16524,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "http://r.cnpmjs.org/sprintf-js/download/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.14.2",
@@ -17962,6 +17994,11 @@
       "resolved": "http://r.cnpmjs.org/typedarray/download/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npm.taobao.org/uc.micro/download/uc.micro-1.0.6.tgz",
+      "integrity": "sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw="
+    },
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "http://r.cnpmjs.org/uglify-js/download/uglify-js-3.4.9.tgz",
@@ -18462,6 +18499,18 @@
       "resolved": "http://r.cnpmjs.org/vue/download/vue-2.5.17.tgz",
       "integrity": "sha1-D4eJrXGL5oyhhyYpgy7VM1icato="
     },
+    "vue-baidu-map": {
+      "version": "0.21.22",
+      "resolved": "https://registry.npm.taobao.org/vue-baidu-map/download/vue-baidu-map-0.21.22.tgz",
+      "integrity": "sha1-a3apHvNPGKeC1zKrD1QaGjqgaeA=",
+      "requires": {
+        "bmaplib.curveline": "^1.0.0",
+        "bmaplib.heatmap": "^1.0.4",
+        "bmaplib.lushu": "^1.0.7",
+        "bmaplib.markerclusterer": "^1.0.13",
+        "markdown-it": "^8.4.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",

package.json

@@ -34,6 +34,7 @@
     "screenfull": "^3.3.3",
     "svg-sprite-loader": "^4.1.1",
     "vue": "^2.5.17",
+    "vue-baidu-map": "^0.21.22",
     "vue-i18n": "^8.1.0",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/assets/scss/aui.scss

@@ -9,3 +9,5 @@
 @import "./pages/404.scss";
 // 模块
 @import "./modules/home.scss";
+// 社管项目
+@import "./smp.scss";

src/components/smp-card.vue

@@ -1,28 +1,42 @@
 <template>
-  <el-card class="smp-card">
-    <div slot="header" class="clearfix">
-      <span>卡片名称</span>
-      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+  <div class="smp-card">
+    <div class="smpc-hd">
+      <span class="smpch-l">{{cardname}}</span>
+      <el-button @click="btnClick" v-if="btnname" class="smpch-r" type="text">{{btnname}}</el-button>
     </div>
-    <slot></slot>
-  </el-card>
+    <div class="smpc-bd">
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
+  props: {
+    cardname: {
+      type: String,
+      default: '卡片名称'
+    },
+    btnname: {
+      type: String,
+      default: ''
+    }
+  },
   data () {
     return {
 
     }
   },
   methods: {
-
+    btnClick () {
+      this.$eimt('btnClick')
+    }
   }
 }
 </script>
 
 <style lang="scss">
 .smp-card{
-  padding: 0!important;
+
 }
 </style>

src/components/smp-img-text.vue

@@ -1,6 +1,24 @@
 <template>
   <div class="smp-img-text">
-    图文摘要
+    <div class="smpit-item" v-for="(item,index) in listData" :key="index">
+      <div class="smpiti-l">
+        <img :src="item.imgUrl">
+      </div>
+      <div class="smpiti-r">
+        <span class="smpiti-r-textbox">
+          <em>事件类型：</em>
+          <strong>【{{item.type}}】</strong>
+        </span>
+        <span class="smpiti-r-textbox">
+          <em>时间：</em>
+          {{item.time}}
+        </span>
+        <span class="smpiti-r-textbox">
+          <em>地点：</em>
+          {{item.address}}
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -18,6 +36,14 @@ export default {
 
     }
   },
+  props: {
+    listData: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
   methods: {
 
   }
@@ -26,6 +52,6 @@ export default {
 
 <style lang="scss">
 .smp-img-text{
-  padding: 0!important;
+  // padding: 0!important;
 }
 </style>

src/components/smp-list-time.vue

@@ -1,6 +1,14 @@
 <template>
   <ul class="smp-list-time">
-    <li>我是标题</li>
+    <li v-for="(item,index) in listData" :key="index">
+      <div class="smpl-l">
+        <span>【{{item.type}}】</span>
+        <div>{{item.title}}</div>
+      </div>
+      <div class="smpl-r">
+        {{item.time}}
+      </div>
+    </li>
   </ul>
 </template>
 
@@ -12,9 +20,23 @@
 //   time
 // }
 export default {
+  props: {
+    listData: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
   data () {
     return {
-
+      // listData: [
+      //   {
+      //     type: '人员',
+      //     title: '张三可疑行为',
+      //     time: '2020-05-01'
+      //   }
+      // ]
     }
   },
   methods: {
@@ -25,6 +47,6 @@ export default {
 
 <style lang="scss">
 .smp-list-time{
-  padding: 0!important;
+  // padding: 0!important;
 }
 </style>

src/components/smp-map/smp-map-func.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="smp-map-func">
-    <div class="smf-item">地图工具</div>
+    <div class="smpmf-item" v-for="(item,index) in itemArr" :key="index" @click="doTool(item)">
+      <i class="smp-icon-20" :class="[item.icon,{'on':item.isOn}]"></i>
+      <span :class="{'on':item.isOn}">{{item.name}}</span>
+    </div>
   </div>
 </template>
 
@@ -15,17 +18,48 @@
 export default {
   data () {
     return {
-
+      itemArr: [
+        {
+          name: '地图工具',
+          icon: 'smp-i20-sy_map_dtgj_n',
+          isOn: false,
+          func: this.mapTool
+        },
+        {
+          name: '专题监测预警',
+          icon: 'smp-i20-sy_map_ztjcyj_n',
+          isOn: false,
+          func: this.mapTool
+        },
+        {
+          name: 'GIS态势配置',
+          icon: 'smp-i20-sy_map_gis_n',
+          isOn: false,
+          func: this.mapTool
+        },
+        {
+          name: '时间轴',
+          icon: 'smp-i20-sy_map_sjz_n',
+          isOn: false,
+          func: this.mapTool
+        }
+      ]
     }
   },
   methods: {
-
+    mapTool () {
+      console.log(123)
+    },
+    doTool (item) {
+      item.isOn = !item.isOn
+      item.func()
+    }
   }
 }
 </script>
 
 <style lang="scss">
 .smp-map-func{
-  padding: 0!important;
+  // padding: 0!important;
 }
 </style>

src/components/smp-map/smp-map-search.vue

@@ -1,7 +1,38 @@
 <template>
   <div class="smp-map-search">
-    <div class="sms-left">城市选择</div>
-    <div class="sms-right">人员选择和搜索</div>
+    <div class="smpms-l">
+      <div class="smpmsl-l">
+        <i class="smp-nav-icon-16 smp-ni16-sy_dw"></i>
+      </div>
+      <div class="smpmsl-r">
+        <el-select class="smp-map-select" v-model="city" placeholder="请选择">
+          <el-option
+            v-for="(item,index) in cityArr"
+            :key="index"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="smpms-r">
+      <div class="smpmsr-l">
+        <el-select class="smp-map-select" v-model="serachType" placeholder="请选择">
+          <el-option
+            v-for="(item,index) in serachTypeArr"
+            :key="index"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="smpmsr-c">
+        <el-input class="smp-input" v-model="serachVlue" placeholder="请输入内容"></el-input>
+      </div>
+      <div class="smpmsr-r">
+        <el-button type="primary" icon="el-icon-search"></el-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -16,7 +47,29 @@
 export default {
   data () {
     return {
-
+      serachVlue: '',
+      serachType: '',
+      serachTypeArr: [
+        {
+          name: '人员',
+          id: '1'
+        },
+        {
+          name: '地点',
+          id: '2'
+        }
+      ],
+      city: '',
+      cityArr: [
+        {
+          name: '海口',
+          id: '1'
+        },
+        {
+          name: '文昌',
+          id: '2'
+        }
+      ]
     }
   },
   methods: {

src/components/smp-mini-table.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-table
+    :data="tableData"
+    class="smp-mini-table"
+    style="width: 100%"
+    size="mini"
+    >
+    <el-table-column
+      v-for="(item,index) in tableType"
+      :key="index"
+      :prop="item.prop"
+      :label="item.label"
+      :width="item.width||''">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+// props:
+// list_data{
+//   type
+//   title
+//   time
+// }
+// titleName:['type','title','time']
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    tableType: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      // tableData: [{
+      //   date: '2016-05-02',
+      //   name: '王小虎',
+      //   address: '上海市普陀区金沙江路 1518 弄'
+      // }, {
+      //   date: '2016-05-04',
+      //   name: '王小虎',
+      //   address: '上海市普陀区金沙江路 1517 弄'
+      // }, {
+      //   date: '2016-05-01',
+      //   name: '王小虎',
+      //   address: '上海市普陀区金沙江路 1519 弄'
+      // }, {
+      //   date: '2016-05-03',
+      //   name: '王小虎',
+      //   address: '上海市普陀区金沙江路 1516 弄'
+      // }]
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss">
+.smp-table{
+  // padding: 0!important;
+}
+</style>

src/components/smp-page-left.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="smp-page-left">
-    <div class="smp-pl-box">盒子
+  <div class="smp-page-left" :class="{'close':isPageClose}">
+    <div class="smp-pl-box">
       <slot></slot>
     </div>
-    <div class="smp-pl-controler">开</div>
+    <div class="smp-pl-controler" :class="{'close':isPageClose}" @click="closePage">
+    </div>
   </div>
 </template>
 
@@ -11,17 +12,19 @@
 export default {
   data () {
     return {
-
+      isPageClose: false
     }
   },
   methods: {
-
+    closePage () {
+      this.isPageClose = !this.isPageClose
+    }
   }
 }
 </script>
 
 <style lang="scss">
 .smp-page-left{
-  padding: 0!important;
+  // padding: 0!important;
 }
 </style>

src/components/smp-page-right.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="smp-page-right">
-    <div class="smp-pl-box">盒子
+  <div class="smp-page-right" :class="{'close':isPageClose}">
+    <div class="smp-pl-box">
       <slot></slot>
     </div>
-    <div class="smp-pl-controler">开</div>
+    <div class="smp-pl-controler" :class="{'close':isPageClose}" @click="closePage"></div>
   </div>
 </template>
 
@@ -11,17 +11,19 @@
 export default {
   data () {
     return {
-
+      isPageClose: false
     }
   },
   methods: {
-
+    closePage () {
+      this.isPageClose = !this.isPageClose
+    }
   }
 }
 </script>
 
 <style lang="scss">
 .smp-page-right{
-  padding: 0!important;
+  // padding: 0!important;
 }
 </style>