路由配置

徐旺旺

2020-12-18 d780c5484886feff5b197f1fa3b4ef36b5f202d1

路由配置

 .idea/.gitignore

New file
@@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

 .idea/SewerAndRainNetwork.iml

New file
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$">
      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
      <excludeFolder url="file://$MODULE_DIR$/temp" />
      <excludeFolder url="file://$MODULE_DIR$/tmp" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
</module>

 .idea/inspectionProfiles/Project_Default.xml

New file
@@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
  <profile version="1.0">
    <option name="myName" value="Project Default" />
    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
  </profile>
</component>

 .idea/misc.xml

New file
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="JavaScriptSettings">
    <option name="languageLevel" value="ES6" />
  </component>
</project>

 .idea/modules.xml

New file
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectModuleManager">
    <modules>
      <module fileurl="file://$PROJECT_DIR$/.idea/SewerAndRainNetwork.iml" filepath="$PROJECT_DIR$/.idea/SewerAndRainNetwork.iml" />
    </modules>
  </component>
</project>

 .idea/vcs.xml

New file
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="VcsDirectoryMappings">
    <mapping directory="$PROJECT_DIR$" vcs="Git" />
  </component>
</project>

 src/App.vue

@@ -1,36 +1,17 @@
<template>
  <div id="app" ref="app">
    <map-template></map-template>
    <router-view/>
  </div>
</template>

<script>
import MapTemplate from './views/MapTemplate.vue'

export default {
  name: 'App',
  components: {MapTemplate},
  mounted(){
    this.$nextTick(()=>{
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
      let topH = this.$refs.app.offsetHeight;
      console.log(h)
      this.height = (h - topH) + "px"
    })
  }
}
</script>

<style>
html,body,#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 0px;
  margin: 0px;

  text-align: left;
}
</style>

 src/App2.vue

New file
@@ -0,0 +1,36 @@
<template>
  <div id="app" ref="app">
    <map-template></map-template>
  </div>
</template>

<script>
import MapTemplate from './views/MapTemplate.vue'

export default {
  name: 'App',
  components: {MapTemplate},
  mounted(){
    this.$nextTick(()=>{
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
      let topH = this.$refs.app.offsetHeight;
      console.log(h)
      this.height = (h - topH) + "px"
    })
  }
}
</script>

<style>
html,body,#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 0px;
  margin: 0px;

  text-align: left;
}
</style>

 src/main.js

@@ -1,6 +1,6 @@
import Vue from 'vue'
import App from './App.vue'
// import router from './router'
import router from './router'
import store from './store'
// import registerDirectives from './directive'
import echarts from 'echarts'
@@ -23,7 +23,7 @@
}

window.vm = new Vue({
  // router,
  router,
  store,
  render: h => h(App),
}).$mount('#app')

 src/router/index.js

New file
@@ -0,0 +1,15 @@
import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
import 'nprogress/nprogress.css'
const appConfig = require('@/app.config')
const { routeMode } = appConfig

Vue.use(Router)
const router = new Router({
  base: appConfig.projectName,
  mode: routeMode || 'hash',
  routes: routes
})

export default router

 src/router/routes.js

New file
@@ -0,0 +1,37 @@
/**
 * meta可配置的参数:
 * meta: {
 *  title: { String } 显示在侧边栏、面包屑和标签栏的文字
 *  hideBread: (false) 设为true后此级路由将不会出现在面包屑中
 *  hideMenu: (false) 设为true后在左侧菜单不会显示该页面选项
 *  notCache: (false) 设为true后页面在切换标签后不会缓存，如果需要缓存，无需设置这个字段，而且需要设置页面组件name属性和路由配置的name一致
 *  access: (null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由
 * }
 */
// 默认跳转路由
import App from "../App";
import Index from "../views/baseInfoMgr/pipeline/Index";
import MapTemplate from "../views/MapTemplate";

// 应用业务相关路由，挂载menu上的page
export const routes = [{
    path: '/',
    name: 'Main',
    component: App,
    redirect: '/home',
    children: [{
        path: 'home',
        name: 'Home',
        meta: {
            title: '首页'
        },
        component: MapTemplate
    }, {
        path: 'baseInfoMgr/pipeLine',
        name: 'baseInfoMgr',
        component: Index,
        meta: {
            title: '基础数据维护'
        }
    }]
}]

 src/views/baseInfoMgr/pipeline/Index.vue

New file
@@ -0,0 +1,55 @@
<template>
    <div class="full-screen">
        <div id="map" ref="rootmap"></div>
        <pipe-line-list></pipe-line-list>
    </div>
</template>

<script>
    import 'leaflet/dist/leaflet.css'
    import Sgis from '@src/Sgis'
    import PipeLineList from "./PipeLineList";
    import {mapMutations} from 'vuex'

    export default {
        name: 'MapTemplate',
        components: {PipeLineList},
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            ...mapMutations({
                setMapObj: 'setMapObj',
                setLayerHelper: 'setLayerHelper'
            }),
            init() {
                const mapcontainer = this.$refs.rootmap
                this.mapObj = Sgis.initMap(mapcontainer)
                this.basemapHelper = Sgis.initBasemaps(this.mapObj.map, this.mapObj.L) // 初始化底图
                this.vectorLayerHelper = Sgis.initLayers(this.mapObj.map, this.mapObj.L, {}, this.$nodeEnv) // 初始化业务图层
                this.setLayerHelper(this.vectorLayerHelper)
                return this.map
            },
            setLayerHelper() {

            }
        }
    }
</script>

<style lang="less">
    .full-screen {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;

        #map {
            height: 100%;
            width: 100%;
        }
    }
</style>>

 src/views/baseInfoMgr/pipeline/PipeLineList.vue

New file
@@ -0,0 +1,86 @@
<template>
    <div class="listTable">
        <el-table
                :data="tableData"
                style="width: 100%;height: 300px"
                :default-sort="{prop: 'date', order: 'descending'}"
        >
            <el-table-column
                    prop="date"
                    label="序号"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="维护与操作"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="管段编码">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="所属管线名称">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="管径(mm)">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="材质">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="管道压力(Mpa)">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="流向">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="管沟类型">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="埋没方式">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="埋没时间">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="探测时间">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import 'leaflet/dist/leaflet.css'

    export default {
        name: 'PipeLineList',
        datas: {},
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {}
    }
</script>

<style lang="less">
    .listTable {
        z-index: 999;
        min-height: 300px;
        position: absolute;
        bottom: 0;
    }
</style>>