Sfoglia il codice sorgente

项目信息维护 基本信息 地理信息对接高德 基本组件开发

duxiangyu 3 anni fa
parent
commit
2d026a3206

+ 1 - 0
package.json

@@ -8,6 +8,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@saga-web/base": "^2.1.28",
     "@saga-web/cad-engine": "^2.0.595",
     "@saga-web/draw": "^2.1.114",

+ 5 - 0
public/index.html

@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title><%=htmlWebpackPlugin.options.title %></title>
     <script type="text/javascript" src="<%=htmlWebpackPlugin.files.publicPath %>systemConf.js"></script>
+    <script type="text/javascript">
+      window._AMapSecurityConfig = {
+          securityJsCode:'206d40d052767b54cb13500ada5c97fa',
+      }
+</script>
   </head>
   <body>
     <noscript>

+ 2 - 0
public/systemConf.js

@@ -3,6 +3,8 @@ var __systemConf = {
   baseServiceUrl: '/baseService',
   //系统图服务域名
   sysGraphServiceUrl: '/sysGraphService',
+  // 地图key
+  mapKey: 'd42beb96e0e4fb0d49482975abeae1b7',
   //导航菜单
   menus: [{
     "id": "ready",

+ 37 - 0
src/components/project-manage/components/anchor.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <div v-for="item in points" :key="item.value" @click="go(item.value)">{{item.label}}</div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            points: [
+                {
+                    label: '基本信息',
+                    value: 'basic'
+                },
+                {
+                    label: '地理信息',
+                    value: 'geo'
+                },
+                {
+                    label: '项目信息',
+                    value: 'project'
+                },
+                {
+                    label: '商业信息',
+                    value: 'business'
+                }
+            ]
+        }
+    },
+    methods: {
+        go(value) {
+            this.$emit('goAnchor', value)
+        }
+    }
+}
+</script>
+<style lang="less" scoped></style>

+ 48 - 0
src/components/project-manage/components/basic.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="basic-container">
+    <Title :name="name" />
+    <div class="basic-content">
+      <div class="basic-line">
+        项目ID:<span>{{ "XXXXXXXXX" }}</span>
+      </div>
+      <div class="basic-line">
+        项目本地名称:<span>{{ "XXXXXXXXX" }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Title from "./title.vue";
+export default {
+  components: {
+    Title,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.basic {
+  &-container {
+    padding-bottom: 40px;
+  }
+  &-content {
+    display: flex;
+    padding-left: 16px;
+  }
+  &-line {
+    font-size: 14px;
+    color: #646c73;
+    span {
+      color: #1f2429;
+    }
+    &:nth-child(2) {
+      margin-left: 157px;
+    }
+  }
+}
+</style>

+ 109 - 0
src/components/project-manage/components/formItem.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="formitem">
+    <div class="label" :style="{ width: labelWidth + 'px' }">
+      {{ label }}
+      <Popover
+        v-if="showPop"
+        titleText="我是标题"
+        type="base"
+        placement="top-left"
+      >
+        <template #content>
+          <article>
+            {{ popText }}
+          </article>
+        </template>
+        <Icon class="icon" :name="'tagError'" />
+      </Popover>
+      :
+    </div>
+    <Input
+      v-if="formType === 'input'"
+      v-model="value"
+      :placeholder="placeholder"
+    ></Input>
+    <Input
+      v-if="formType === 'input-unit'"
+      v-model="value"
+      :placeholder="placeholder"
+      :right-button="[
+        {
+          id: '1',
+          name: unit,
+          checked: 'checked',
+        },
+      ]"
+    />
+    <MSelect
+      v-if="formType === 'select'"
+      width="180"
+      v-model="value"
+      :data="selectData"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: String,
+    formType: {
+      type: String,
+      default: "input",
+    },
+    initValue: [String, Number, Array, Object],
+    placeholder: String,
+    labelWidth: {
+      type: Number,
+      default: 100,
+    },
+    unit: String,
+    selectData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    showPop: {
+      type: Boolean,
+      default: false,
+    },
+    popText: String,
+  },
+  data() {
+    return {
+      value: this.initValue,
+    };
+  },
+  watch: {
+    initValue(val, old) {
+      if (val !== old) {
+        this.value = val;
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.formitem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  .label {
+    font-size: 14px;
+    text-align: right;
+    color: #646c73;
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .icon {
+      width: 11.5px;
+      height: 11.5px;
+      /deep/ .v-svg-tagError {
+        width: 11.5px !important;
+        height: 11.5px !important;
+      }
+    }
+  }
+}
+</style>

+ 151 - 0
src/components/project-manage/components/geo.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="geo-container">
+    <Title name="地理信息" />
+    <div class="geo-content">
+      <div id="map-container"></div>
+      <div class="map-search-input">
+        <el-input id="tipinput" placeholder="搜索" v-model="inputVal2">
+          <i slot="prefix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+      </div>
+      <div class="form-content">
+        <FormItem label="省市区县" :initValue="geoFormData.district" />
+        <FormItem label="详细地址" :initValue="geoFormData.address" />
+        <el-row>
+          <el-col :span="12">
+            <FormItem
+              label="经度"
+              :initValue="geoFormData.lng"
+              formType="input-unit"
+              unit="度"
+            />
+          </el-col>
+          <el-col :span="12"
+            ><FormItem
+              label="纬度"
+              :initValue="geoFormData.lat"
+              formType="input-unit"
+              unit="度"
+          /></el-col>
+        </el-row>
+        <FormItem
+          label="抗震设防烈度"
+          :initValue="geoFormData.level"
+          formType="select"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Title from "./title.vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import FormItem from "./formItem.vue";
+export default {
+  components: {
+    Title,
+    FormItem,
+  },
+  data() {
+    return {
+      map: null,
+      inputVal2: "",
+      autocomplete: null,
+      markers: [],
+
+      geoFormData: {
+        district: "",
+        address: "",
+        lng: "",
+        lat: "",
+        level: null,
+      },
+    };
+  },
+  mounted() {
+    AMapLoader.load({
+      key: window.__systemConf.mapKey,
+      version: "2.0",
+      plugins: [],
+    }).then((Amap) => {
+      this.map = new Amap.Map("map-container", {
+        zoom: 11,
+        resizeEnable: true,
+      });
+      Amap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
+        const autoOptions = {
+          input: "tipinput",
+        };
+        this.autocomplete = new Amap.Autocomplete(autoOptions);
+
+        this.autocomplete.on("select", (e) => {
+          console.log(e);
+          const location = e.poi.location;
+          if (location) {
+            this.setLocation(location);
+            this.addMarker(Amap, location, e.poi.name);
+            const { district, address } = e.poi;
+            this.geoFormData.district = district;
+            this.geoFormData.address = address;
+            this.geoFormData.lng = location.lng.toString();
+            this.geoFormData.lat = location.lat.toString();
+            this.geoFormData.level = null;
+          }
+        });
+      });
+    });
+  },
+  methods: {
+    pressEnter() {},
+    setLocation(location) {
+      if (location) {
+        this.map.setCenter([location.lng, location.lat], true);
+      }
+    },
+    addMarker(Amap, location, name) {
+      this.clearMarker();
+      const marker = new Amap.Marker({
+        position: [location.lng, location.lat],
+        title: name,
+      });
+      marker.setLabel({
+        offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+        content: `<div class='info'>${name}</div>`, //设置文本标注内容
+        direction: "right", //设置文本标注方位
+      });
+      this.markers.push(marker);
+      this.map.add(marker);
+    },
+    clearMarker(Amap) {
+      this.markers.forEach((marker) => this.map.remove(marker));
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.geo-container {
+  width: 100%;
+  .geo-content {
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    position: relative;
+    #map-container {
+      width: 100%;
+      height: 200px;
+    }
+    .map-search-input {
+      position: absolute;
+      top: 12px;
+      left: 24px;
+      background-color: #fff;
+    }
+    .form-content {
+      margin-top: 24px;
+    }
+  }
+}
+/deep/ .amap-marker-label {
+  background-color: red;
+}
+</style>

+ 32 - 0
src/components/project-manage/components/title.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="name">{{name}}</div>
+</template>
+<script>
+export default {
+    props: {
+        name: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.name {
+    height: 20px;
+    line-height: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: #1f2429;
+    margin-bottom: 20px;
+    &::before {
+        content: '';
+        display: inline-block;  
+        width: 3px;
+        height:100%;
+        background-color: #0091FF;
+        margin-right: 12px;
+    }
+}
+</style>

+ 34 - 10
src/components/project-manage/index.vue

@@ -1,16 +1,40 @@
 <template>
-    <div>
-        <Button>123123</Button>
+  <div class="container">
+    <div class="left">
+      <Anchor />
     </div>
+    <div class="right">
+      <Basic name="基本信息" />
+      <Geo nam="地理信息" />
+    </div>
+  </div>
 </template>
 <script>
+import Anchor from "./components/anchor.vue";
+import Basic from "./components/basic.vue";
+import Geo from "./components/geo.vue";
 export default {
-    mounted() {
-        
-    },
-    methods: {
-
-    }
-}
+  components: {
+    Anchor,
+    Basic,
+    Geo,
+  },
+  mounted() {},
+  methods: {},
+};
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  display: flex;
+  .left {
+    flex: 0 0 143px;
+  }
+  .right {
+    width: 100%;
+    padding: 20px;
+    background-color: #ffffff;
+    overflow-y: auto;
+  }
+}
+</style>

+ 6 - 2
src/meri.js

@@ -1,4 +1,8 @@
 import Vue from 'vue'
-import {Button} from 'meri-design'
+import {Button, Input, MSelect, Icon, Popover} from 'meri-design'
 
-Vue.use(Button)
+Vue.use(Button)
+Vue.use(Input)
+Vue.use(MSelect)
+Vue.use(Icon)
+Vue.use(Popover)