上传

src/views/Clue/Order/Comp/DialogOrder.vue

@@ -108,9 +108,11 @@ const aftersaleList = ref([])
 const extraPayList = ref([])
 
 const prodTotalPrice = computed(() => {
-  return orderInfo.value.signProducts.reduce(
+  return (
+    orderInfo.value.signProducts?.reduce(
       (pre, cur) => pre + (cur?.price || 0) * (cur?.signNum || 0),
       0
+    ) || 0
   )
 })
 

src/views/Clue/Order/Comp/MallOrderList.vue

@@ -67,9 +67,10 @@
           <div class="p-10px flex justify-center">
             <el-table :data="row.signProducts" stripe style="width: 900px">
               <el-table-column prop="productName" label="成交产品" />
-              <el-table-column prop="specsName" label="产品规格" />
-              <el-table-column prop="signNum" label="成交数量" width="100px" />
-              <el-table-column label="发货状态" prop="sendState" width="100px" />
+              <el-table-column prop="specsName" label="产品规格" width="100px" />
+              <el-table-column prop="signNum" label="成交数量" width="90px" />
+              <el-table-column prop="remark" label="成交备注" />
+              <el-table-column label="发货状态" prop="sendState" width="90px" />
               <el-table-column label="发货备注" width="100px">
                 <template #default="scope">
                   <el-popover

src/views/Clue/Pool/Comp/ClueMap.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="relative w-full h-full">
+    <div id="mapClue" style="height: 100%"></div>
+    <el-autocomplete
+      v-model="areaValue"
+      clearable
+      style="position: absolute; top: 20px; left: 20px; width: 400px"
+      placeholder="输入并搜索位置"
+      :fetch-suggestions="remoteMethod"
+      @select="currentSelect"
+    />
+    <el-collapse v-model="collaspeKey" class="box-card">
+      <el-collapse-item name="nearbySchool">
+        <template #title>
+          <span class="ml-10px font-bold" style="font-size: 16px">附近驾校</span>
+        </template>
+        <div style="padding: 0 10px">
+          <div v-if="nearbySchoolSearching">正在搜索中...</div>
+          <template v-else>
+            <div v-for="p in nearbySchoolList" :key="p.index">
+              <div class="hover-pointer" style="font-size: 14px; color: blue">
+                <i v-if="p.recommend" class="el-icon-star-off"></i>
+                驾校: {{ p.deptName }}-{{ p.name }}
+              </div>
+              <div class="mt5">地址：{{ p.address }}</div>
+              <div class="mt5">
+                直线距离: {{ p.distance }} 公里;
+                <span class="ml0">步行距离：{{ p.walkdistance }}</span>
+              </div>
+              <el-divider style="margin: 3px 0 !important" />
+            </div>
+          </template>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+    <DialogSchoolInfo ref="placeInfoDialog" />
+  </div>
+</template>
+
+<script setup name="ClueMap">
+import { getPlaceList } from '@/api/school/place'
+
+import ImgPostion from '@/assets/imgs/flag/position_black.png'
+import FlagRed from '@/assets/imgs/flag/flag_red.png'
+import FlagYellow from '@/assets/imgs/flag/flag_yellow.png'
+import FlagPurple from '@/assets/imgs/flag/flag_purple.png'
+import FlagGreen from '@/assets/imgs/flag/flag_green.png'
+import FlagBlue from '@/assets/imgs/flag/flag_blue.png'
+import FlagBlack from '@/assets/imgs/flag/flag_black.png'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+import DialogSchoolInfo from './DialogSchoolInfo.vue'
+
+// 地图相关
+const clueMap = ref(null)
+const aMap = ref(null)
+const areaValue = ref('')
+
+const flagMap = {
+  red: FlagRed,
+  yellow: FlagYellow,
+  purple: FlagPurple,
+  green: FlagGreen,
+  blue: FlagBlue,
+  black: FlagBlack
+}
+
+const defaultLatLng = ref({
+  lat: 31.86119,
+  lng: 117.283042
+})
+
+let AutoComplete = ref(null)
+function initMap() {
+  AMapLoader.load({
+    key: '713d839ff505943b0f18e6df45f3b0dc', //设置您的key
+    version: '2.0',
+    plugins: ['AMap.AutoComplete']
+  }).then((AMap) => {
+    aMap.value = AMap
+    AutoComplete.value = new AMap.AutoComplete({
+      city: '合肥'
+    })
+    clueMap.value = new AMap.Map('mapClue', {
+      zoom: 14,
+      zooms: [2, 22],
+      center: [defaultLatLng.value.lng, defaultLatLng.value.lat]
+    })
+    getPageData()
+  })
+}
+
+const placeList = ref([])
+
+async function getPageData() {
+  placeList.value = []
+  const data = await getPlaceList({
+    placeStatus: 0
+  })
+  if (data.placeList) {
+    placeList.value = data.placeList
+    createMarkersInMap()
+    getNearbySchool(defaultLatLng.value)
+  }
+}
+
+// 生成markers
+function createMarkersInMap() {
+  for (let i = 0; i < placeList.value.length; i++) {
+    const element = placeList.value[i]
+    const markerIcon = flagMap[element.flagColor || 'red']
+    const tmpMarker = new aMap.value.Marker({
+      map: clueMap.value,
+      position: [element.lng, element.lat],
+      icon: markerIcon,
+      label: {
+        content: element.name,
+        direction: 'right'
+      },
+      extData: element
+    })
+    tmpMarker.on('click', handleClickMarker)
+  }
+}
+
+const placeInfoDialog = ref()
+function handleClickMarker(ev) {
+  placeInfoDialog.value.open(ev.target.getExtData())
+}
+
+function remoteMethod(searchValue, cb) {
+  if (searchValue) {
+    AutoComplete.value?.search(searchValue, (status, result) => {
+      if (result.tips?.length) {
+        // areaList.value = result?.tips
+        const list = result.tips.map((it) => ({
+          ...it,
+          value: it.name
+        }))
+        cb(list)
+      } else {
+        cb([])
+      }
+    })
+  } else {
+    cb([])
+  }
+}
+
+function currentSelect(val) {
+  if (val) {
+    defaultLatLng.value = {
+      lng: val.location?.lng,
+      lat: val.location?.lat
+    }
+    addmark(val.location?.lng, val.location?.lat, aMap.value)
+  }
+}
+
+const marker = ref(null)
+function addmark(lat, lng, AMap) {
+  marker.value && removeMarker()
+  marker.value = new AMap.Marker({
+    position: new AMap.LngLat(lat, lng),
+    zoom: 14,
+    icon: ImgPostion,
+    offset: [-16, -32]
+  })
+  clueMap.value.add(marker.value)
+  clueMap.value.setCenter([lat, lng], true)
+  getNearbySchool({ lat: lng, lng: lat })
+}
+
+const nearbySchoolList = ref([])
+const nearbySchoolSearching = ref(false)
+const collaspeKey = ref('nearbySchool')
+
+function getNearbySchool(info) {
+  if (info.lng && info.lat) {
+    nearbySchoolList.value = []
+    nearbySchoolSearching.value = true
+    // 推荐的场地
+    let places1 = []
+    // 普通的场地
+    let places2 = []
+
+    const p2 = [info.lng, info.lat]
+    for (let i = 0; i < placeList.value.length; i++) {
+      const element = placeList.value[i]
+      const p1 = [element.lng, element.lat]
+      // 计算直线距离
+      element.distance = (aMap.value.GeometryUtil.distance(p1, p2) / 1000).toFixed(2)
+      element.recommend ? places1.push(element) : places2.push(element)
+    }
+    // 按直线距离排序
+    // 排序
+    if (places1.length > 1) {
+      places1 = places1.sort((a, b) => a.distance - b.distance)
+    }
+    // 排序
+    if (places2.length > 1) {
+      places2 = places2.sort((a, b) => a.distance - b.distance)
+    }
+    // 取普通场地和推荐场地，组合, 取四个
+    nearbySchoolList.value = []
+    for (let i = 0; i < 4; i++) {
+      places1.length > i && nearbySchoolList.value.push(places1[i])
+      places2.length > i && nearbySchoolList.value.push(places2[i])
+      if (nearbySchoolList.value.length === 4) {
+        break
+      }
+    }
+    // 计算步行距离
+    nearbySchoolList.value.map(async (item) => {
+      const p1 = [item.lng, item.lat]
+      const resp = await getWalkingDistance(p1, p2)
+      item.walkdistance = resp
+    })
+    nearbySchoolSearching.value = false
+  }
+}
+
+// 获取两点之间的步行距离
+async function getWalkingDistance(start, end) {
+  return new Promise((resolve) => {
+    aMap.value.plugin('AMap.Walking', () => {
+      const walking = new aMap.value.Walking()
+      let num = 0
+      walking.search(start, end, (status, result) => {
+        if (status === 'complete') {
+          result.routes.forEach((item) => {
+            num += item.distance
+          })
+          resolve(num > 1000 ? `${(num / 1000).toFixed(2)} 公里` : `${num} 米`)
+        } else {
+          resolve('步行数据无法确定')
+        }
+      })
+    })
+  })
+}
+
+function removeMarker() {
+  clueMap.value.remove(marker.value)
+}
+
+function destroyMap() {
+  areaValue.value = undefined
+  clueMap.value = null
+  aMap.value = null
+}
+
+defineExpose({ destroyMap })
+
+onMounted(() => {
+  nextTick(() => {
+    initMap()
+  })
+})
+</script>
+
+<style scoped lang="scss">
+.box-card {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 40%;
+}
+</style>

src/views/Clue/Pool/Comp/DialogClue.vue

@@ -485,7 +485,7 @@ function addmark(lat, lng, AMap) {
     offset: [-16, -32]
   })
   dialogMap.value.add(marker.value)
-  dialogMap.value.setCenter([lat, lng], '', 500)
+  dialogMap.value.setCenter([lat, lng], true)
   getNearbySchool({ lat: lng, lng: lat })
 }
 function removeMarker() {
@@ -557,7 +557,6 @@ function currentSelect(val) {
       lat: val.location?.lat
     }
     addmark(val.location?.lng, val.location?.lat, aMap.value)
-    dialogMap.value.setCenter([val.location?.lng, val.location?.lat], '', 500)
     regeoCode(val.location?.lng, val.location?.lat)
   }
 }

src/views/Clue/Pool/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="relative">
-      <el-tabs v-model="queryType" size="small" @tab-change="resetQuery">
+      <el-tabs v-model="queryType" size="small" @tab-change="quickChange">
         <el-tab-pane label="全部" name="0" />
         <el-tab-pane name="1">
           <template #label>
@@ -31,6 +31,14 @@
           </template>
         </el-tab-pane>
         <el-tab-pane label="公海" name="4" />
+        <el-tab-pane
+          v-if="appStore.getAppInfo?.instanceType == 1"
+          label="地图总览"
+          name="5"
+          style="height: calc(100vh - 160px)"
+        >
+          <ClueMap ref="mapClue" v-if="queryType == 5" />
+        </el-tab-pane>
       </el-tabs>
       <div class="absolute" style="right: 10px; top: 0">
         <el-button plain v-hasPermi="['clue:pool:import']">导入</el-button>
@@ -39,6 +47,7 @@
         </el-button>
       </div>
     </div>
+    <template v-if="queryType != 5">
       <!-- 搜索工作栏 -->
       <Search v-if="!loading" ref="searchRef" :schema="allSchemas.searchSchema" labelWidth="0">
         <template #actionMore>
@@ -143,6 +152,7 @@
           </template>
         </el-table-column>
       </SSTable>
+    </template>
 
     <DialogClue
       v-if="!loading"
@@ -164,11 +174,13 @@
 </template>
 
 <script setup name="CluePool">
+import { useAppStore } from '@/store/modules/app'
 import { getSimpleFieldList } from '@/api/clue/clueField'
 import DialogClue from './Comp/DialogClue.vue'
 import DrawerClue from './Comp/DrawerClue.vue'
 import DialogSuccess from './Comp/DialogSuccess.vue'
 import DialogFollow from './Comp/DialogFollow.vue'
+import ClueMap from './Comp/ClueMap.vue'
 import { getSimpleUserList as getUserOption } from '@/api/system/user'
 
 import { removeNullField } from '@/utils'
@@ -177,6 +189,7 @@ import { formatDate } from '@/utils/formatTime'
 import * as ClueApi from '@/api/clue'
 
 const message = useMessage() // 消息弹窗
+const appStore = useAppStore()
 
 const searchRef = ref()
 const queryType = ref('2')
@@ -223,10 +236,24 @@ function getCheckedColumns(list) {
   showColumns.value = list && list.length ? list : allSchemas.value.tableColumns
 }
 
+const mapClue = ref()
+function quickChange(name) {
+  try {
+    if (name != '5') {
+      resetQuery()
+      mapClue.value && mapClue.value.destroyMap()
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 function resetQuery() {
-  searchRef.value.reset()
+  nextTick(() => {
+    searchRef.value && searchRef.value.reset()
     tableObject.value.pageNo = 1
     getTableList()
+  })
 }
 
 async function getTableList() {

src/views/Home/Index.vue

@@ -102,7 +102,7 @@
               <span class="mr-10px">{{ item.username }}</span>
               <span>已跟进{{ item.followNum }}条线索</span>
             </li>
-            <br />
+            <!-- <br /> -->
             <!-- </TransitionGroup> -->
           </ul>
         </el-skeleton>