feat:地图

2024-06-19 10:24:04 +08:00 · 2024-06-19 10:24:04 +08:00 · bc98aca1a2
parent 25b81fe812
commit bc98aca1a2
13 changed files with 507 additions and 642 deletions
--- a/index.html
+++ b/index.html
@ -2,12 +2,17 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script>
-      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
-        CSS.supports('top: constant(a)'))
+      var coverSupport =
+        'CSS' in window &&
+        typeof CSS.supports === 'function' &&
+        (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
-        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+          (coverSupport ? ', viewport-fit=cover' : '') +
+          '" />'
+      )
    </script>
    <title></title>
    <!--preload-links-->
--- a/manifest.json
+++ b/manifest.json
@ -70,6 +70,15 @@
    },
    "vueVersion" : "2",
    "h5" : {
-        "template" : "template.html"
+        "template" : "template.html",
+        "sdkConfigs" : {
+            "maps" : {
+                "amap" : {
+                    "key" : "4799ff37874e604a22b910b44ca948e5",
+                    "securityJsCode" : "",
+                    "serviceHost" : ""
+                }
+            }
+        }
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -6,6 +6,7 @@
  "packages": {
    "": {
      "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
        "@escook/request-miniprogram": "^0.2.1",
        "crypto-js": "^4.2.0",
        "echarts": "^4.9.0",
@ -14,6 +15,11 @@
        "moment": "^2.30.1"
      }
    },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
    "node_modules/@escook/request-miniprogram": {
      "version": "0.2.1",
      "resolved": "https://registry.npmmirror.com/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
@ -66,6 +72,11 @@
    }
  },
  "dependencies": {
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
    "@escook/request-miniprogram": {
      "version": "0.2.1",
      "resolved": "https://registry.npmmirror.com/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
--- a/package.json
+++ b/package.json
@ -1,5 +1,6 @@
 {
  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
    "@escook/request-miniprogram": "^0.2.1",
    "crypto-js": "^4.2.0",
    "echarts": "^4.9.0",
--- a/pages.json
+++ b/pages.json
@ -173,57 +173,49 @@
    },
    {
      "path": "pages/gqzq/gqxx/gqxx",
-    	"style" : 
-    	{
+      "style": {
        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/gqzq/gqxx/qk",
-    	"style" : 
-    	{
+      "style": {
        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/gqzq/gqxx/xq",
-    	"style" : 
-    	{
+      "style": {
        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/gqzq/gqxx/qkForm",
-    	"style" : 
-    	{
+      "style": {
        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/gqzq/gqxx/xqForm",
-    	"style" : 
-    	{
+      "style": {
        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/gqzq/zqxx/zqxx",
-    	"style" : 
-    	{
+      "style": {
        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/gqzq/zqxx/table",
-    	"style" : 
-    	{
+      "style": {
        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/gqzq/zqxx/form",
-    	"style" : 
-    	{
+      "style": {
        "navigationBarTitleText": ""
      }
    }
--- a/pages/homeIndex/index.vue
+++ b/pages/homeIndex/index.vue
@ -477,10 +477,9 @@ export default {
  methods: {
    async getImgs () {
      uni.request({
-        url: 'http://223.75.53.124:8005/grb/rainimglist?tm=2024061308',
+        url: 'http://223.75.53.124:8005/grb/rainimglist',
        data: {
          tm: `${this.imgtm}08`
-          // tm: `2024061308`
        },
        success: res => {
          console.log(res.data.data)
--- a/pages/xxsb/dsfrom.vue
+++ b/pages/xxsb/dsfrom.vue
@ -1,5 +1,6 @@
 <template>
  <view class="u-page">
+    <view v-if="!isMap">
      <u-navbar
        title="实时灾情上报"
        @leftClick="navigateBack"
@ -20,7 +21,7 @@
          >
            <u-form-item
              label="灾害发生时间"
-            prop="projectName"
+              prop="otime"
              @click="
                isTime2 = true
                hideKeyboard()
@ -37,7 +38,7 @@
            </u-form-item>
            <u-form-item
              label="严重程度"
-            prop="severityList"
+              prop="severity"
              :borderBottom="false"
              @click="
                isseverity = true
@ -56,6 +57,7 @@
            <u-form-item
              label="灾害发生地点"
              prop="address"
+              @click="toMap"
              :borderBottom="false"
              ref="item1"
            >
@ -220,7 +222,7 @@
          <u-datetime-picker
            :show="isTime2"
            v-model="valueTime2"
-          mode="date"
+            mode="datetime"
            @confirm="confirm2"
            @cancel="cancel2"
          ></u-datetime-picker>
@ -320,16 +322,25 @@
            @select="controlledSelect"
          >
          </u-action-sheet>
-      </view>
+        </view> </view
+    ></view>
+    <view v-if="isMap">
+      <newmap @back="back"></newmap>
    </view>
  </view>
 </template>

 <script>
 import moment from 'moment'
+import newmap from './map.vue'
 export default {
+  name: 'dsfrom',
+  components: {
+    newmap
+  },
  data () {
    return {
+      isMap: false,
      showTextTypeTab: 1,
      activeType: '',
      valueTime2: Number(moment()),
@ -403,6 +414,22 @@ export default {
            message: '请选择时间',
            trigger: ['blur', 'change']
          }
+        ],
+        severity: [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择严重程度',
+            trigger: ['blur', 'change']
+          }
+        ],
+        address: [
+          {
+            type: 'string',
+            required: true,
+            message: '请选择灾害发生点',
+            trigger: ['blur', 'change']
+          }
        ]
      },
      projectType: 1
@ -420,6 +447,19 @@ export default {
    this.$refs.form2.setRules(this.rules)
  },
  methods: {
+    back (lnglat, address) {
+      console.log('搜索框22key', lnglat, address)
+      this.isMap = false
+      this.formList.lgtd = lnglat[0]
+      this.formList.lttd = lnglat[1]
+      this.formList.address = address
+    },
+    toMap () {
+      //   uni.navigateTo({
+      //     url: `./map`
+      //   })
+      this.isMap = true
+    },
    async getresList () {
      let res = null
      this.resList = []
@ -621,11 +661,7 @@ export default {
      console.log('取消')
      this.isTime2 = false
    },
-    toMap () {
-      uni.navigateTo({
-        url: `./map`
-      })
-    },
+
    // 过滤字符串
    BlurText (e) {
      console.log('e', e)
--- a/pages/xxsb/from
+++ b/pages/xxsb/from
@ -1,271 +0,0 @@
-<template>
-  <view class="container">
-    <view class="nav_bar">
-      <u-icon name="arrow-left" @click="rightClick" size="28"></u-icon>
-      <view class="nav_bar_tit"> {{ title[key] }}</view>
-      <view></view>
-    </view>
-    <!-- form__info -->
-    <view class="info">
-      <u-form
-        labelPosition="left"
-        :model="infoForm"
-        ref="infoForm"
-        labelWidth="100"
-      >
-        <template v-if="key == 1">
-          <!-- 工程名称 -->
-          <u-form-item
-            label="工程名称"
-            prop="projectName"
-            borderBottom
-            ref="item3"
-          >
-            <u--input
-              v-model="infoForm.projectName"
-              placeholder="请输入内容"
-              border="surround"
-              disabled
-            ></u--input>
-          </u-form-item>
-          <!-- 是否发电 -->
-          <u-form-item
-            label="是否发电"
-            prop="isPowerGeneration"
-            borderBottom
-            ref="item3"
-          >
-            <u--input
-              v-model="infoForm.isPowerGeneration"
-              placeholder="请输入内容"
-              border="surround"
-              disabled
-            ></u--input>
-          </u-form-item>
-          <!-- 是否泄洪 -->
-          <u-form-item
-            label="是否泄洪"
-            prop="isFloodRelease"
-            borderBottom
-            ref="item3"
-          >
-            <u--input
-              v-model="infoForm.isFloodRelease"
-              placeholder="请输入内容"
-              border="surround"
-              disabled
-            ></u--input>
-          </u-form-item>
-          <!-- 水位(m) -->
-          <u-form-item
-            label="水位(m)"
-            prop="waterLevel"
-            borderBottom
-            ref="item3"
-          >
-            <u--input
-              v-model="infoForm.waterLevel"
-              placeholder="请输入内容"
-              border="surround"
-              disabled
-            ></u--input>
-          </u-form-item>
-          <!-- 入库流量     (m³/s)： -->
-          <u-form-item
-            label="入库流量(m³/s)"
-            prop="inflowVolume"
-            borderBottom
-            ref="item3"
-          >
-            <u--input
-              v-model="infoForm.inflowVolume"
-              placeholder="请输入内容"
-              border="surround"
-              disabled
-            ></u--input>
-          </u-form-item>
-
-          <!-- 出库流量     (m³/s)： -->
-          <u-form-item
-            label="出库流量(m³/s)"
-            prop="outflowVolume"
-            borderBottom
-            ref="item3"
-          >
-            <u--input
-              v-model="infoForm.outflowVolume"
-              placeholder="请输入内容"
-              border="surround"
-              disabled
-            ></u--input>
-          </u-form-item>
-          <!-- 其他运行情况 -->
-          <u-form-item
-            label="其他运行情况"
-            prop="remark"
-            borderBottom
-            ref="item3"
-          >
-            <u--textarea
-              v-model="infoForm.remark"
-              placeholder="请输入内容"
-              disabled
-            ></u--textarea>
-          </u-form-item>
-          <!-- 附件 -->
-          <u-form-item
-            label="附件"
-            prop="checkboxValue1"
-            borderBottom
-            ref="item3"
-          >
-          </u-form-item>
-        </template>
-        <template v-if="key == 2"></template>
-        <template v-if="key == 3"></template>
-      </u-form>
-
-      <view>
-        <u-button
-          type="primary"
-          text="上报"
-          customStyle="margin: 10px"
-          @click="submit"
-        ></u-button>
-      </view>
-    </view>
-  </view>
-</template>
-<script>
-import moment from 'moment'
-export default {
-  props: ['info'],
-  data () {
-    return {
-      infoForm: {
-        projectName: '',
-        isPowerGeneration: '',
-        isFloodRelease: '',
-        waterLevel: '',
-        inflowVolume: '',
-        outflowVolume: '',
-        remark: '',
-        reportUnit: '',
-        reportTime: '',
-        projectType: '',
-        checkboxValue1: '水库',
-        reporter: '' // 上报人
-      },
-
-      key: '',
-      title: {
-        1: '运行情况上报',
-        2: '工程险情上报',
-        3: '实时灾情上报'
-      }
-    }
-  },
-  onLoad (options) {
-    this.key = options.key
-    console.log('搜索框', options.key)
-  },
-  mounted () {
-    console.log('info', this.info)
-  },
-  methods: {
-    submit () {},
-    reset () {
-      const validateList = [
-        'userInfo.start',
-        'userInfo.end',
-        'userInfo.checkboxValue1'
-      ]
-      this.$refs.uForm.resetFields()
-      this.$refs.uForm.clearValidate()
-      setTimeout(() => {
-        this.$refs.uForm.clearValidate(validateList)
-        // 或者使用 this.$refs.uForm.clearValidate()
-      }, 10)
-    },
-    // 返回按钮
-    rightClick () {
-      console.log('rightClick')
-
-      uni.navigateTo({
-        url: '/pages/xxsb/index'
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.container {
-  font-size: 14px;
-  background-color: #f3f5f8;
-}
-.tabs_h {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 56rpx;
-  line-height: 88rpx;
-  background-color: #fff;
-  margin-bottom: 12rpx;
-  text-align: center;
-}
-.leftTab {
-  width: 80px;
-}
-.rightTab {
-  width: 80px;
-}
-.activetextTypeTab,
-.activetextTypeTab:hover {
-  //   border-bottom: 3rpx solid #2286f6;
-  color: #026be0;
-}
-
-.nav_bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin-top: 30px;
-  padding-top: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #dfdfdf;
-  box-shadow: 0 5px 10px -8px #dfdfdf inset;
-  background-color: #fff;
-  margin-bottom: 12rpx;
-}
-.nav_bar_tit {
-  text-align: center;
-}
-.info {
-  background-color: #fff;
-  margin-bottom: 12rpx;
-  //   text-align: right;
-  padding: 20px;
-}
-
-.fl {
-  display: flex;
-  justify-content: start;
-  align-items: left;
-}
-.flsb {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.u-image {
-  width: 100%; /* 或者其他尺寸 */
-  transition: transform 0.3s; /* 平滑的放大效果 */
-}
-</style>
--- a/pages/xxsb/from.vue
+++ b/pages/xxsb/from.vue
@ -171,7 +171,7 @@
          <u-popup
            :show="isName"
            @close="isName = false"
-            mode="right"
+            mode="bottom"
            @open="open"
          >
            <view style="padding: 30px 20px">
--- a/pages/xxsb/fromSeverity.vue
+++ b/pages/xxsb/fromSeverity.vue
@ -464,7 +464,9 @@ export default {
      // console.log('radioChange', n);
    },
    navigateBack () {
-      uni.navigateBack()
+      uni.reLaunch({
+        url: '/pages/xxsb/index'
+      })
    },

    severitySelect (e) {
--- a/pages/xxsb/map.vue
+++ b/pages/xxsb/map.vue
@ -1,30 +1,111 @@
 <template>
-  <view class="mapBox">
-    <div>fdfdfd</div>
-    <map id="myMap"></map>
-    <button  text="确定"></button>
+  <view>
+    <!-- <map id="container" latitude="39.9" longitude="116.4"></map> -->
+    <map
+      id="container"
+      :latitude="lnglat[1]"
+      :longitude="lnglat[0]"
+      enable-scroll
+      enable-rotate
+    ></map>
+    <view class="text">
+      <text class="tit">当前位置</text>
+      <view id="adds">{{ address }}</view>
+    </view>
+    <view class="text">
+      <p class="tit">经/纬度</p>
+
+      <view
+        ><span id="lng">{{ lnglat[0] }}， {{ lnglat[1] }}</span></view
+      >
+    </view>
+    <u-button
+      type="primary"
+      text="确定"
+      customStyle="margin-top: 50px"
+      @click="backclick"
+    ></u-button>
  </view>
 </template>
 <script>
+// import AMapLoader from '@amap/amap-jsapi-loader'
+
 export default {
+  name: 'map-view',
  data () {
    return {
-      lng: 120.12345,
-      lat: 30.6789,
-      scale: 16
+      lnglat: [109.139726, 29.665203],
+      geocoder: null,
+      marker: null,
+      geocoder: null,
+      address: null,
+      markers: [
+        {
+          latitude: 29.665203,
+          longitude: 109.139726,
+          iconPath: '../../static/tabs/add.png'
+        }
+      ]
+    }
+  },
+  mounted () {},
+  onShow () {},
+  onLoad () {
+    this.initAMap()
+  },
+  methods: {
+    backclick () {
+      this.$emit('back', this.lnglat, this.address)
+    },
+    mapClick (val) {
+      console.log('val', val)
+    },
+    initAMap () {
+      const self = this
+      console.log('erreee')
+      uni.getLocation({
+        type: 'gcj02',
+        isHighAccuracy: 'true',
+        geocode: 'true',
+        success: function (res) {
+          console.log('res', res)
+
+          const latitude = res.latitude
+          const longitude = res.longitude
+          // this.lnglat = [109.139726, 29.665203]
+          self.lnglat = [longitude, latitude]
+          // this.lnglat = [res.longitude, res.latitude]
+
+          console.log('lnglatlnglat', self.lnglat, res)
+          console.log('地址', res.address)
+          if (res.address) {
+            console.log('地址', res.address.province)
+            self.address =
+              res.address.province +
+              res.address.city +
+              res.address.district +
+              res.address.street +
+              res.address.poiName
+            console.log('地址', self.address)
+          }
+        }
+      })
    }
  }
 }
 </script>
-
-<style lang="scss" scoped>
-.mapBox {
+<style scoped>
+#container {
  width: 100%;
-  height: 100%;
-  padding: 10px;
+  height: 450px;
 }
-#id {
-  height: 300px;
-  background-color: pink;
+.text {
+  margin: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+.text .tit {
+  font-size: 14px;
+  font-weight: bold;
 }
 </style>
--- a/static/tabs/add.png
+++ b/static/tabs/add.png
--- a/static/tabs/dw-icon.png
+++ b/static/tabs/dw-icon.png