From 3a154bdb0a5aaa2c0ac3eac95a6ba747068bd454 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期二, 13 一月 2026 10:00:37 +0800
Subject: [PATCH] 优化
---
admin/src/components/business/OperaJkSketchLineMapWindow.vue | 286 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 286 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/business/OperaJkSketchLineMapWindow.vue b/admin/src/components/business/OperaJkSketchLineMapWindow.vue
new file mode 100644
index 0000000..6b26a1b
--- /dev/null
+++ b/admin/src/components/business/OperaJkSketchLineMapWindow.vue
@@ -0,0 +1,286 @@
+<template>
+ <GlobalWindow
+ :title="title"
+ width="100%"
+ :visible.sync="visible"
+ ><div style="display:flex;">
+ <div style="width: 40%;">
+ <TableLayout >
+ <!-- 鎼滅储琛ㄥ崟 -->
+ <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="" inline>
+ <el-form-item label="" prop="name" style="width: 100px;">
+ <el-input v-model="searchForm.name" placeholder="瀹㈡埛鍚嶇О" @keypress.enter.native="search"></el-input>
+ </el-form-item>
+ <el-form-item label="" prop="code" style="width: 100px;">
+ <el-input v-model="searchForm.code" placeholder="瀹㈡埛绠�鐮�" @keypress.enter.native="search"></el-input>
+ </el-form-item>
+ <section>
+ <el-button type="primary" @click="search">鎼滅储</el-button>
+ <el-button @click="reset">閲嶇疆</el-button>
+ </section>
+ </el-form>
+ <!-- 琛ㄦ牸鍜屽垎椤� -->
+ <template v-slot:table-wrap>
+ <el-table
+ v-loading="isWorking.search"
+ :data="tableData.list"
+ stripe
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column prop="sortnum" label="瀹㈡埛搴忓彿" min-width="80px"></el-table-column>
+ <el-table-column prop="code" label="瀹㈡埛绠�鐮�" min-width="120px">
+ <template scope="{row}">
+ <span title="鐐瑰嚮鏌ョ湅" style="cursor: pointer;" class="blue" @click="showDetail(row)">{{row.code}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="name" label="瀹㈡埛鍚嶇О" min-width="120px">
+ <template scope="{row}">
+ <span title="鐐瑰嚮鏌ョ湅" style="cursor: pointer;" class="blue" @click="showDetail(row)">{{row.name}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="totalNum" label="閫佽揣閲�(鏉�)" min-width="120px"></el-table-column>
+ </el-table>
+ <pagination
+ @size-change="handleSizeChange"
+ @current-change="handlePageChange"
+ :pagination="tableData.pagination"
+ style="width: 60%;"
+ >
+ </pagination>
+ <el-button @click="visible=false" style="position: fixed;bottom: 10px;right: 20px;">杩斿洖</el-button>
+ </template>
+ </TableLayout>
+ </div>
+ <div style="width: 60%;">
+ <div id="container" style="width: 60%"></div>
+ <div id="panel" style='position: absolute; right: 10px;top: 10px;height: 480px;width: 300px;z-index: 100;overflow: auto;'></div>
+ </div>
+ </div>
+
+ <template v-slot:footer>
+ <el-button @click="visible=false">杩斿洖</el-button>
+ </template>
+ </GlobalWindow>
+</template>
+
+<script>
+import BaseTable from '@/components/base/BaseTable'
+import TableLayout from '@/layouts/TableLayout'
+import Pagination from '@/components/common/Pagination'
+import GlobalWindow from '@/components/common/GlobalWindow'
+import AMapLoader from '@amap/amap-jsapi-loader'
+import greenIcon from '@/assets/icons/location-green.png'
+import blueIcon from '@/assets/icons/location-blue.png'
+import redIcon from '@/assets/icons/location-red.png'
+export default {
+ name: 'OperaJkSketchMapWindow',
+ extends: BaseTable,
+ components: { GlobalWindow, Pagination, TableLayout },
+ data () {
+ return {
+ // 琛ㄥ崟鏁版嵁
+ visible: false,
+ title: '',
+ searchForm: {
+ sketchLineId: '',
+ name: '',
+ code: ''
+ },
+ dataList: [],
+ infoWindow: null,
+ locations: [],
+ map: null,
+ model: {
+ }
+ }
+ },
+ created () {
+ this.config({
+ module: '浜ゆ帶-绾胯矾浼樺寲绾胯矾瀹㈡埛璁板綍淇℃伅琛�',
+ api: '/business/jkSketchCustomer',
+ 'field.id': 'id',
+ 'field.main': 'id'
+ })
+ },
+ methods: {
+ open (title, row) {
+ this.title = title + (row.lineName)
+ this.visible = true
+ this.dataList = []
+ this.model = row
+ this.locations = []
+ this.infoWindows = []
+ this.initAMap()
+ this.searchForm.sketchLineId = row.id
+ this.visible = true
+ this.tableData = {
+ // 宸查�変腑鐨勬暟鎹�
+ selectedRows: [],
+ // 鎺掑簭鐨勫瓧娈�
+ sorts: [],
+ // 褰撳墠椤垫暟鎹�
+ list: [],
+ // 鍒嗛〉
+ pagination: {
+ pageIndex: 1,
+ pageSize: 10,
+ total: 0
+ }
+ }
+ this.search()
+ },
+ showDetail (row) {
+ console.error('瀵逛笉璧凤紝璇ュ鎴峰畾浣嶄俊鎭笉瀹屽杽锛�')
+ if (!this.map) {
+ return
+ }
+ if (!row.longitude || !row.latitude) {
+ this.$message.error('瀵逛笉璧凤紝璇ュ鎴峰畾浣嶄俊鎭笉瀹屽杽锛�')
+ return
+ }
+ this.closeInfo()
+ // 鏋勫缓淇℃伅绐椾綋涓樉绀虹殑鍐呭
+ var info = []
+ info.push('<div style="width: 400px;"><div style="width: 100%;font-size: 18px;border-bottom: 1px solid #eeeeee;padding-bottom: 6px;"> <b>瀹㈡埛淇℃伅</b> </div> ')
+ info.push('<div style="padding:0px 0px 0px 4px;"><span><b>濮撳悕锛�' + row.name + '</b><b style="color:red;">銆�' + row.code + '銆�</b></span> ')
+ info.push('<span style="margin-top: 5px;">搴忓彿锛�' + row.sortnum + '</span> ')
+ info.push('<span style="margin-top: 5px;">鍦板潃锛�' + row.location + '</span></div>')
+ info.push('</div>')
+ this.infoWindow = new AMap.InfoWindow({
+ content: info.join('<br/>') // 浣跨敤榛樿淇℃伅绐椾綋妗嗘牱寮忥紝鏄剧ず淇℃伅鍐呭
+ })
+ // this.infoWindow.on('open',showInfoOpen)
+ this.infoWindow.on('close', this.showInfoClose)
+ this.infoWindow.open(this.map, new AMap.LngLat(row.longitude, row.latitude))
+ },
+ closeInfo () {
+ if (this.infoWindow) {
+ this.infoWindow.close()
+ }
+ },
+ showInfoClose () {
+ },
+ loadCustomer () {
+ var that = this
+ this.api.allMapList({
+ sketchLineId: this.model.id
+ }).then(res => {
+ that.dataList = res || []
+ that.locations = []
+ that.dataList.forEach((item, index) => {
+ var allsteps = []
+ allsteps.push([item.startLogitude, item.startLatitude])
+ const steps = (item.steps || '').split(';')
+ if (index != that.dataList.length - 1) {
+ steps.forEach(item1 => {
+ const ll = (item1 || '').split(',')
+ allsteps.push(ll)
+ })
+ allsteps.push([item.endLogitude, item.endLatitude])
+ }
+ try {
+ /* console.log(item)
+ var driving = new AMap.Driving({
+ map: that.map,
+ panel: 'panel'
+ })
+ driving.search(new AMap.LngLat(item.startLogitude, item.startLatitude), new AMap.LngLat(item.endLogitude, item.endLatitude), function (status, result) {
+ if (status === 'complete') {
+ console.log('缁樺埗椹捐溅璺嚎瀹屾垚')
+ } else {
+ console.error('鑾峰彇椹捐溅鏁版嵁澶辫触锛�' + result)
+ }
+ }) */
+ } catch (e) {
+
+ }
+ var color = index === that.dataList.length - 1 ? '#a10e0e' : '#157713'
+ var polyline = new AMap.Polyline({
+ path: [allsteps],
+ isOutline: true,
+ outlineColor: color || '#157713',
+ borderWeight: 1,
+ strokeColor: color || '#157713',
+ strokeOpacity: 1,
+ strokeWeight: 2,
+ // 鎶樼嚎鏍峰紡杩樻敮鎸� 'dashed'
+ strokeStyle: 'solid',
+ // strokeStyle鏄痙ashed鏃舵湁鏁�
+ strokeDasharray: [10, 5],
+ lineJoin: 'round',
+ lineCap: 'round',
+ zIndex: 100
+ })
+
+ that.map.add([polyline])
+ that.map.setFitView()
+
+ const icon = new AMap.Icon({
+ size: new AMap.Size(30, 50), // 鍥炬爣灏哄
+ image: index === 0 ? greenIcon : (index === that.dataList.length - 1 ? redIcon : blueIcon)
+ })
+
+ console.log("=====index====",index)
+ var marker = new AMap.Marker({
+ position: new AMap.LngLat(item.startLogitude, item.startLatitude),
+ icon: icon,
+ anchor: 'bottom-center',
+ offset: new AMap.Pixel(0, 0)
+ })
+ // var title = (index == 0 ? '鍥尯' : (index + '.' + item.name + (' ' + item.location || ''))) + '锛�' + (index != that.dataList.length - 1 ? '璺濅笅涓�绔欙細' : '杩斿洖鍥尯锛�') + ((item.distance || 0) / 1000) + '鍏噷'
+ // marker.setTitle(title)
+ var contnet = '<div>' + (index == 0 ? '鍥尯' : (index + '.' + item.name)) + '</div>'
+ marker.setLabel({
+ direction: 'right',
+ offset: new AMap.Pixel(0, 0),
+ content: contnet
+ })
+ marker.setMap(that.map)
+ // that.locations.push(allsteps)
+ })
+ })
+ },
+ initAMap () {
+ var that = this
+ AMapLoader.load({
+ key: process.env.VUE_APP_AMAP_KEY,
+ version: '2.0',
+ plugins: ['AMap.ToolBar', 'AMap.Driving'],
+ AMapUI: {
+ version: '1.1',
+ plugins: []
+ },
+ Loca: {
+ version: '2.0' // 鏁版嵁鍙鍖�
+ }
+ }).then((AMap) => {
+ that.map = new AMap.Map('container', {
+ viewMode: '2D', // 榛樿浣跨敤 2D 妯″紡
+ zoom: 20, // 鍒濆鍖栧湴鍥惧眰绾�
+ center: [118.39, 31.28] // 鍒濆鍖栧湴鍥句腑蹇冪偣
+ })
+ this.loadCustomer()
+ }).catch(e => {
+ console.log(e)
+ })
+ },
+ getRandomColor (index, total) {
+ const r = 21
+ // const g = 80 +(index*50/total);
+ const g = 120
+ const b = 19
+ return `rgb(${r}, ${g}, ${b})`
+ }
+ }
+}
+</script>
+<style>
+#container {
+ padding: 0px;
+ margin: 0px;
+ width: 100%;
+ height: 90%;
+ position: absolute;
+}
+
+</style>
--
Gitblit v1.9.3