init

c123729d · aoobao · c123729d · c123729d · c123729d · c123729d
Commit c123729d authored Jun 14, 2019 by aoobao
30 changed files
--- a/.browserslistrc
+++ b/.browserslistrc
+> 1%
+last 2 versions
--- a/.editorconfig
+++ b/.editorconfig
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.eslintrc.js
+++ b/.eslintrc.js
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  globals: {
+    AMap: true
+  }
+}
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
+# wenzhou_fire_front
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
--- a/package.json
+++ b/package.json
+{
+  "name": "wenzhou_fire_front",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "amap-utils": "^0.2.1",
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "echarts": "^4.2.1",
+    "normalize.css": "^8.0.1",
+    "qs": "^6.7.0",
+    "store": "^2.0.12",
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.3",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.6.10"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>wenzhou_fire_front</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but wenzhou_fire_front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <div id="app">
+    <Header />
+    <div class="app-body">
+
+      <router-view/>
+    </div>
+  </div>
+</template>
+<script>
+import '@/assets/rem'
+import Header from '@/views/Header'
+export default {
+  components: { Header }
+}
+</script>
+
+
+<style lang="scss">
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-size: 0.16rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  .app-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+}
+</style>
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
+// 背景色
+.background {
+  background-color: blue;
+}
\ No newline at end of file
--- a/src/assets/env.js
+++ b/src/assets/env.js
+let URL = '//36.26.78.30:8888/'
+
+let api = 'pubinfo-province-restful/'
+
+let url = URL + api
+
+// if (process.env.NODE_ENV === 'development') {
+//     URL = '//36.26.78.30:8888/'
+//     url = URL + api
+// }
+
+export default {
+  url
+}
\ No newline at end of file
--- a/src/assets/js/axios.js
+++ b/src/assets/js/axios.js
+import axios from 'axios'
+import qs from 'qs'
+import env from '@/assets/env'
+import res from '@/assets/result-model'
+import {
+  errMessage,
+  getItem
+} from '@/assets/js/utils'
+
+let baseAxios = axios.create({
+  baseURL: env.URL,
+  // headers: {
+  //   'Content-Type': 'application/x-www-form-urlencoded'
+  // }
+})
+
+let __token = null
+
+// 发送信息钩子
+baseAxios.interceptors.request.use(
+  function (config) {
+    if (!config.headers.Authorization) {
+      if (__token === null) {
+        __token = getItem('token') || null
+      }
+      let tokenValue = __token
+
+      if (tokenValue) {
+        config.headers.Authorization = `Bearer ${tokenValue}`;
+      }
+    }
+    return config
+  },
+  function (error) {
+    return Promise.reject(error)
+  }
+)
+
+// 返回消息钩子
+baseAxios.interceptors.response.use(
+  function (response) {
+    return response
+  },
+  function (error) {
+    return Promise.reject(error)
+  }
+)
+
+baseAxios.getUrl = (url, params = {}) => {
+  return new Promise(resolve => {
+    baseAxios
+      .get(url, {
+        params
+      })
+      .then(
+        response => {
+          let retData = response.data
+          resolve(retData)
+        },
+        error => {
+          console.warn(error)
+          let errData = res.error('服务器错误', -1, error)
+          resolve(errData)
+        }
+      )
+  })
+}
+
+baseAxios.postUrl = (url, data = {}, showErrflag = true) => {
+  let headers = {}
+  let opts = data
+  if (Object.prototype.toString.call(data) !== '[object FormData]') {
+    headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
+    opts = qs.stringify(data)
+  } else { // formData对象一律认为是要发送流文件
+    headers['Content-Type'] = 'multipart/form-data'
+  }
+
+  return new Promise(resolve => {
+    baseAxios
+      .post(url, opts, {
+        headers
+      })
+      .then(
+        response => {
+          let retData = response.data
+          if (retData.code != 0) {
+            console.warn(url, data, retData)
+          }
+          if (showErrflag) {
+            ifErr(retData)
+          }
+          resolve(retData)
+        },
+        error => {
+          console.warn(error)
+          let errData = res.error('服务器错误', -1, error)
+          resolve(errData)
+        }
+      )
+  })
+}
+
+function ifErr(retData) {
+  if (!retData.isok) {
+    errMessage(retData.msg)
+  }
+}
+
+export default baseAxios
--- a/src/assets/js/importAMap.js
+++ b/src/assets/js/importAMap.js
+import {
+  AMAP_KEY,
+  AMAP_VERSION
+} from '@/assets/setting'
+let _callback = null
+
+window.__AMAP_CALLBACK = function () {
+  // console.log('加载高德地图成功')
+  typeof _callback === 'function' && _callback()
+}
+
+let isLoad = false
+
+export default function requireAMap(callback) {
+  _callback = callback
+  if (!isLoad) {
+    isLoad = true
+    let url = `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${AMAP_KEY}&callback=__AMAP_CALLBACK`;
+
+    let jsapi = document.createElement('script');
+    jsapi.charset = 'utf-8';
+    jsapi.src = url;
+
+    document.head.appendChild(jsapi);
+  } else {
+    // 暂时直接回调
+    window.__AMAP_CALLBACK()
+  }
+
+}
--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
+import store from 'store'
+
+export function setItem(key, value) {
+  return store.set(key, value)
+}
+
+export function getItem(key) {
+  return store.get(key)
+}
+
+export function getPointValue(st) {
+  const temp = st.split('|')
+  let ar = []
+  temp.forEach(str => {
+    if (str) {
+      let arr = []
+      const mat = str.match(/\d+(\.\d+)?/g)
+      for (var i = 1; i < mat.length; i += 2) {
+        var x = parseFloat(mat[i - 1])
+        var y = parseFloat(mat[i])
+        arr.push([x, y])
+      }
+      if (arr.length >= 3) ar.push(arr)
+    }
+  })
+  return ar
+}
+
+export function getBounds(arr) {
+  let minX, minY, maxX, maxY
+  arr.forEach(re => {
+    re.forEach(item => {
+      if (!minX || minX > getXY(item, 0)) minX = getXY(item, 0)
+      if (!minY || minY > getXY(item, 1)) minY = getXY(item, 1)
+      if (!maxX || maxX < getXY(item, 0)) maxX = getXY(item, 0)
+      if (!maxY || maxY < getXY(item, 1)) maxY = getXY(item, 1)
+    })
+  })
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY
+  }
+}
+
+export function errMessage(msg) {
+  alert(msg)
+}
+
+function getXY(item, index) {
+  if (Array.isArray(item)) {
+    return item[index]
+  } else {
+    if (index === 0) return item.getLng()
+    else return item.getLat()
+  }
+}
+
+export default {
+  setItem,
+  getItem,
+  getPointValue,
+  getBounds,
+  errMessage
+}
--- a/src/assets/rem.js
+++ b/src/assets/rem.js
+import {
+  SCREEN_WIDTH,
+  SIZE
+} from '@/assets/setting'
+
+
+window.onresize = function () {
+  resizeScale()
+}
+
+var resizeScale = () => {
+  var width = document.body.offsetWidth
+  let rem = width * SIZE / SCREEN_WIDTH
+
+  document.documentElement.style.fontSize = rem + 'px'
+
+  // return rem + 'px'
+  // var height = document.body.offsetHeight
+  // var wScale = width / SCREEN_WIDTH
+  // var hScale = height / SCREEN_HEIGHT
+  // window.WIDTH_SCALE = wScale
+  // window.HEIGHT_SCALE = hScale
+  // let $app = document.getElementById('app')
+  // //   debugger
+  // if (!$app) {
+  //   setTimeout(() => {
+  //     resizeScale()
+  //   }, 50)
+  // } else {
+  //   $app.style.transform = 'scale(' + wScale + ',' + hScale + ')'
+  // }
+}
+
+resizeScale()
--- a/src/assets/result-model.js
+++ b/src/assets/result-model.js
+// 模拟后台输出格式
+
+export default {
+  success(data, msg) {
+    const res = {};
+    res.data = data || null;
+    res.msg = msg || '成功';
+    res.code = 0;
+    res.isok = true;
+    res.serveTime = new Date();
+    return res;
+  },
+  error(msg, code, data) {
+    const res = {};
+    res.msg = msg || '错误';
+    res.code = code || -1;
+    res.data = data || null;
+    res.isok = false;
+    res.serveTime = new Date();
+    return res;
+  },
+};
--- a/src/assets/setting.js
+++ b/src/assets/setting.js
+// 高德地图key
+export const AMAP_KEY = '104a0cc0ce15a396dde189f4f7d438ff'
+// 高德地图版本号
+export const AMAP_VERSION = '1.4.14'
+// 适配rem (用到宽和html默认font-size) rem 1 = 100px
+export const SCREEN_WIDTH = 1920
+export const SCREEN_HEIGHT = 1080
+export const SIZE = 100
--- a/src/components/map/AMap.vue
+++ b/src/components/map/AMap.vue
+<template>
+  <div class="map" ref="map">
+    <slot></slot>
+  </div>
+</template>
+<script>
+import requireMap from '@/assets/js/importAMap'
+export default {
+  props: {
+    // 地图初始化参数
+    opts: {
+      type: Object,
+      default () {
+        return {
+          zoom: 8,//级别
+          viewMode: '2D'//使用3D视图
+        }
+      }
+    }
+  },
+  data () {
+    let amap = {}
+    return {
+      amap
+    }
+  },
+  provide () {
+    return {
+      amap: this.amap
+    }
+  },
+  mounted () {
+    requireMap(this.initMap)
+  },
+  beforeDestroy () {
+    if (this.amap.$map) {
+      this.amap.$map.destroy()
+      delete this.amap.$map
+    }
+  },
+  methods: {
+    initMap () {
+
+      // this.$store.commit('setMobile', AMap.Browser.mobile)
+      // emit before map create (change opts)
+      this.$emit('beforeCreate')
+      this.amap.$map = new AMap.Map(this.$refs.map, {
+        ...this.opts
+      })
+      setTimeout(() => {
+        this.$emit('created')
+      }, 1);
+    },
+    getMap () {
+      return this.amap.$map || null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.map {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store/index'
+
+import 'normalize.css'
+import '@/assets/css/global.scss'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/src/router.js
+++ b/src/router.js
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    }
+    // ,
+    // {
+    //   path: '/about',
+    //   name: 'about',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (about.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+    // }
+  ]
+})
--- a/src/store/index.js
+++ b/src/store/index.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import user from './modules/user'
+
+Vue.use(Vuex)
+const debug = process.env.NODE_ENV !== 'production'
+export default new Vuex.Store({
+  modules: {
+    user
+  },
+  strict: debug
+})
\ No newline at end of file
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
+// import axios from '@/assets/js/axios.js'
+// import utils from '@/assets/js/utils.js'
+
+const state = {}
+const getters = {}
+const mutations = {}
+const actions = {}
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions
+}
\ No newline at end of file
--- a/src/store/template.js
+++ b/src/store/template.js
+// import axios from '@/assets/js/axios.js'
+// import utils from '@/assets/js/utils.js'
+
+const state = {}
+const getters = {}
+const mutations = {}
+const actions = {}
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions
+}
--- a/src/views/Header.vue
+++ b/src/views/Header.vue
+<template>
+  <div class="header-container">
+    <div class="logo">
+      logo
+    </div>
+    <div class="menu">
+      <span class="menu-item">隐患监测</span>
+      <span class="menu-item">研判分析</span>
+      <span class="menu-item">统计报表</span>
+      <span class="menu-item">数据管理</span>
+      <span class="menu-item">系统设置</span>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.header-container {
+  width: 100%;
+  height: 100px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  .logo {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 5rem;
+    background-color: red;
+  }
+  .menu {
+    .menu-item {
+      margin: 0 20px;
+    }
+  }
+}
+</style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
+<template>
+  <div class="home">
+    <MapView />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import AMap from '@/components/map/AMap'
+import MapView from './Home/MapView'
+export default {
+  name: 'home',
+  components: {
+    MapView
+  }
+}
+</script>
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/views/Home/MapView.vue
+++ b/src/views/Home/MapView.vue
+<template>
+  <a-map :opts="opts">
+
+  </a-map>
+</template>
+<script>
+import AMap from '@/components/map/AMap'
+export default {
+  components: { AMap },
+  data () {
+    return {
+      opts: {
+        zoom: 10,
+        center: [120.672913, 27.980921]
+      }
+    }
+  }
+}
+</script>
--- a/vue.config.js
+++ b/vue.config.js
+module.exports = {
+  publicPath: '/',
+  
+}
--- a/yarn.lock
+++ b/yarn.lock