map修改

shuishen

2022-07-29 e57c42d8338904f0045a72665f2ad43b5012cc53

map修改

 package-lock.json

Diff too large

 package.json

@@ -11,11 +11,13 @@
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "@dvgis/dc-sdk": "^2.15.0",
    "avue-plugin-ueditor": "^0.1.4",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
    "crypto-js": "^4.0.0",
    "dom-to-image": "^2.6.0",
    "echarts": "^5.0.2",
    "element-china-area-data": "^5.0.2",
    "element-ui": "^2.15.6",
@@ -23,6 +25,7 @@
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.0",
    "js-md5": "^0.7.3",
    "leaflet": "^1.8.0",
    "mockjs": "^1.0.1-beta3",
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",

 public/index.html

@@ -21,7 +21,6 @@

  <!-- 地图 -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script src="libs/Cesium/Cesium.js"></script>
  <script type="text/javascript" src="js/drawTree.js"></script>
  <!-- Avue地图选点 -->
  <script type="text/javascript"
@@ -86,6 +85,7 @@
      color: #ABABAB;
      font-size: 12px;
    }

  </style>
</head>


 src/components/map/plotMap.vue

New file
@@ -0,0 +1,346 @@
/* eslint-disable camelcase */
<template>
    <div>
        <div id="viewer-container" style="height: 100%; width: 100%"></div>
    </div>
</template>

<script>

var farmRegionLayer = null
var plotRegionLayer = null
var farmLogoLayer = null
var addLayers = []
var addPlotLayers = []

export default {
    name: 'mapBox',

    data () {
        return {

        }
    },

    computed: {

    },
    mounted () {
        if (global.viewer != null) {
            global.viewer = null
        }

        function initViewer () {
            global.viewer = new global.DC.Viewer('viewer-container', {
                contextOptions: {
                    webgl: {
                        alpha: true,
                        stencil: true,
                        preserveDrawingBuffer: true
                    }
                },
                sceneMode: 2
            })

            farmRegionLayer = new global.DC.VectorLayer('farmRegionLayer')
            global.viewer.addLayer(farmRegionLayer)

            plotRegionLayer = new global.DC.VectorLayer('plotRegionLayer')
            global.viewer.addLayer(plotRegionLayer)

            farmLogoLayer = new global.DC.HtmlLayer('farmLogoLayer')
            global.viewer.addLayer(farmLogoLayer)

            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
                global.viewer.setOptions({
                    resolutionScale: window.devicePixelRatio
                })
            }

            // 影像
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengyjjddom',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    maximumLevel: 19,
                    tileMatrixLabels: [
                        '0',
                        '1',
                        '2',
                        '3',
                        '4',
                        '5',
                        '6',
                        '7',
                        '8',
                        '9',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19'
                    ]
                })
            )

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengdom',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    maximumLevel: 19,
                    tileMatrixLabels: [
                        '0',
                        '1',
                        '2',
                        '3',
                        '4',
                        '5',
                        '6',
                        '7',
                        '8',
                        '9',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19'
                    ]
                })
            )

            // 矢量电子
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )

            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )

            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    116.56705776, 27.42386903, 1800.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })

            // global.viewer.locationBar.enable = true
        }

        global.DC.ready(initViewer)
    },
    methods: {
        addPolygon (positions, item) {
            const that = this

            const center = this.getCenter(positions)

            const divIcon = new global.DC.DivIcon(
                new global.DC.Position(center[0], center[1], 0),
                `
                        <div class="farm-map-icon">
                            <img src="/img/icon/3858.png" alt="">
                            <div>${item.farmName}</div>
                        </div>
                        `
            )
            divIcon.attrParams = item
            farmLogoLayer.addOverlay(divIcon)

            divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                that.$parent.showDetailPopup(e.overlay.attrParams)
            })

            const polygon = new global.DC.Polygon(positions)
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    244, 157, 21,
                    200
                )
            })
            farmRegionLayer.addOverlay(polygon)
            addLayers.push({ center, name: item.farmName })
        },

        addPlotPolygon (positions, item) {
            const that = this

            const center = this.getCenter(positions)

            // const divIcon = new global.DC.DivIcon(
            //     new global.DC.Position(center[0], center[1], 0),
            //     `
            //             <div class="farm-map-icon">
            //                 <img src="/img/icon/3858.png" alt="">
            //                 // <div>${item.farmName}</div>
            //             </div>
            //             `
            // )
            // divIcon.attrParams = item
            // farmLogoLayer.addOverlay(divIcon)

            // divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
            //     that.$parent.showDetailPopup(e.overlay.attrParams)
            // })

            const polygon = new global.DC.Polygon(positions)
            polygon.attrParams = item
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    129, 255, 84,
                    200
                )
            })

            polygon.on(global.DC.MouseEventType.CLICK, (e) => {
                that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
            })

            plotRegionLayer.addOverlay(polygon)
            addPlotLayers.push({ center, name: item.landName })
        },

        setCenter (name) {
            let center
            addLayers.forEach(item => {
                if (name == item.name) {
                    center = item.center
                }
            })

            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    center[0], center[1], 3000.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },

        setPlotCenter (name) {
            let center
            addPlotLayers.forEach(item => {
                if (name == item.name) {
                    center = item.center
                }
            })

            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    center[0], center[1], 3000.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },

        // 经纬度测算中心位置
        getCenter (arr) {
            let centerLonLat = []
            if (arr.length) {
                const lon = []
                const lat = []
                const poly = []
                for (let i = 0, len = arr.length; i < len; i++) {
                    lon.push(arr[i][0])
                    lat.push(arr[i][1])
                }
                for (let i = 0, len = lon.length; i < len; i++) {
                    poly.push({
                        x: parseFloat(lon[i]),
                        y: parseFloat(lat[i]),
                        z: 0
                    })
                }
                const sortedLongitudeArray = poly.map(item => item.x).sort()
                const sortedLatitudeArray = poly.map(item => item.y).sort()
                const centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(14)
                const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(14)
                console.log(centerLongitude, centerLatitude)
                centerLonLat = [Number(centerLongitude), Number(centerLatitude)]
            }
            return centerLonLat
        }
    }
}
</script>

<style lang="scss" scope>
.eagle-eye-map {
    position: fixed;
    right: 10px;
    bottom: 10px;
    border: 5px solid orange;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    z-index: 99;
    overflow: hidden;
}
</style>

 src/main.js

@@ -1,78 +1,99 @@
import Vue from 'vue';
import axios from './router/axios';
import VueAxios from 'vue-axios';
import App from './App';
import router from './router/router';
import './permission'; // 权限
import './error'; // 日志
import './cache'; //页面缓存
import store from './store';
import Vue from 'vue'
import axios from './router/axios'
import VueAxios from 'vue-axios'
import App from './App'
import router from './router/router'
import './permission' // 权限
import './error' // 日志
import './cache' //页面缓存
import store from './store'
import { loadStyle } from './util/util'
import * as urls from '@/config/env';
import Element from 'element-ui';
import * as urls from '@/config/env'
import Element from 'element-ui'
import {
    iconfontUrl,
    iconfontVersion
} from '@/config/env';
import i18n from './lang'; // Internationalization
import './styles/common.scss';
import basicBlock from './components/basic-block/main';
import basicContainer from './components/basic-container/main';
import thirdRegister from './components/third-register/main';
import flowDesign from './components/flow-design/main';
import avueUeditor from 'avue-plugin-ueditor';
import website from '@/config/website';
import crudCommon from '@/mixins/crud';
} from '@/config/env'
import i18n from './lang' // Internationalization
import './styles/common.scss'
import basicBlock from './components/basic-block/main'
import basicContainer from './components/basic-container/main'
import thirdRegister from './components/third-register/main'
import flowDesign from './components/flow-design/main'
import avueUeditor from 'avue-plugin-ueditor'
import website from '@/config/website'
import crudCommon from '@/mixins/crud'
// 业务组件
import tenantPackage from './views/system/tenantpackage';
import tenantPackage from './views/system/tenantpackage'

import Map from './components/map/main';
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
Vue.component('Map', Map);
import Map from './components/map/main'
import plotMap from './components/map/plotMap'
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.component('Map', Map)
Vue.component('plotMap', plotMap)

import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包

import DcChart from '@dvgis/dc-sdk/dist/dc.chart.min' // chart包
import DcMapv from '@dvgis/dc-sdk/dist/dc.mapv.min' // mapv包
import DcS3M from '@dvgis/dc-sdk/dist/dc.s3m.min' // DcS3M包

import '@dvgis/dc-sdk/dist/dc.core.min.css'

global.DC = DC // 将DC提升到全局变量，方便在工程中直接使用
global.viewer = null // 将viewer提升到全局变量，方便在工程中直接使用

global.echarts = echarts // 将DC提升到全局变量，方便在工程中直接使用

DC.use(DcCore) // 安装DC核心库
DC.use(DcChart) // 安装DC图标库，使用前确保echarts为全局函数
DC.use(DcMapv) // 安装Mapv库
DC.use(DcS3M) // 安装DcS3M库

// 注册全局crud驱动
window.$crudCommon = crudCommon;
window.$crudCommon = crudCommon
// 加载Vue拓展
Vue.use(router);
Vue.use(VueAxios, axios);
Vue.use(router)
Vue.use(VueAxios, axios)
Vue.use(Element, {
    i18n: (key, value) => i18n.t(key, value)
});
})
Vue.use(window.AVUE, {
    size: 'small',
    tableSize: 'small',
    calcHeight: 65,
    i18n: (key, value) => i18n.t(key, value)
});
})
// 注册全局容器
Vue.component('basicContainer', basicContainer);
Vue.component('basicBlock', basicBlock);
Vue.component('thirdRegister', thirdRegister);
Vue.component('avueUeditor', avueUeditor);
Vue.component('flowDesign', flowDesign);
Vue.component('tenantPackage', tenantPackage);
Vue.component('basicContainer', basicContainer)
Vue.component('basicBlock', basicBlock)
Vue.component('thirdRegister', thirdRegister)
Vue.component('avueUeditor', avueUeditor)
Vue.component('flowDesign', flowDesign)
Vue.component('tenantPackage', tenantPackage)
//加载全局组件选地图定位点，每个页面都要使用
import chousePoint from './components/mapOncePoint/chousePoint'
Vue.component("chousePoint", chousePoint);
Vue.component("chousePoint", chousePoint)
// 加载相关url地址
Object.keys(urls).forEach(key => {
    Vue.prototype[key] = urls[key];
});
    Vue.prototype[key] = urls[key]
})
// 加载NutFlow
Vue.use(window.WfDesignBase);
Vue.use(window.WfDesignBase)
// 加载website
Vue.prototype.website = website;
Vue.prototype.website = website
// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
    loadStyle(iconfontUrl.replace('$key', ele));
});
    loadStyle(iconfontUrl.replace('$key', ele))
})

Vue.config.productionTip = false;
Vue.config.productionTip = false

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

 src/views/mapPattern/index.vue

@@ -1,9 +1,6 @@
<template>
  <div style="width: 1920px;
        height: 1080px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;">
    <div style="position: relative; height: 100%;">
        <plot-map ref="plotMap" style="position: absolute; width: 100%; height: 100%;"></plot-map>
    <div class="top">
      <div class="logo">
        <img src="../../../public/mg.png" />
@@ -25,11 +22,12 @@
        <span>&nbsp;&nbsp;退出</span>
      </div>
    </div>
    <div class="down">
      <div class="farm-plant">
        <div class="title"><span>种养品种 · {{ this.page.total }}种</span></div>
            <div class="title">
                <span>种养品种 · {{ this.page.total }}种</span>
            </div>
        <div class="content">
          <div class="list-item" v-for="item in farmPlantList">
                <div class="list-item" v-for="(item, index) in farmPlantList" :key="index">
            <div class="item-img">
              <img :src="item.url" />
              <span>{{ item.strainName }}</span>
@@ -40,15 +38,23 @@
      </div>
      <div class="land-info">
        <div class="content">
          <span>有轮廓的地块:</span><span style="font-size: 26px;font-weight: bold;color: #5ABF78;"> &nbsp;{{landIsAreaStatistic[0]}}</span>
                <span>有轮廓的地块:</span>
                <span
                    style="font-size: 26px;font-weight: bold;color: #5ABF78;"
                >&nbsp;{{landIsAreaStatistic[0]}}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>无轮廓的地块:</span><span style="font-size: 26px;font-weight: bold;color: #E3B745;"> &nbsp;{{landIsAreaStatistic[1]}}</span>
                <span>无轮廓的地块:</span>
                <span
                    style="font-size: 26px;font-weight: bold;color: #E3B745;"
                >&nbsp;{{landIsAreaStatistic[1]}}</span>
        </div>
      </div>
      <div class="farm-land">
        <div class="title"><span>地块 · {{ this.pageLand.total }}种</span></div>
            <div class="title">
                <span>地块 · {{ this.pageLand.total }}种</span>
            </div>
        <div class="content">
          <div class="list-item" v-for="item in landList">
                <div class="list-item" v-for="(item, index) in landList" :key="index">
            <div class="item-img">
              <img :src="item.url" />
              <span>{{ item.landName }}</span>
@@ -58,14 +64,13 @@
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import { getList } from "@/api/farmplant/farmplant";
import { getList as getLandList, selectCount,getLandIsAreaStatistic } from "@/api/land/land";
import { getDetails } from "@/api/farm/farm";
import { getList } from "@/api/farmplant/farmplant"
import { getList as getLandList, selectCount, getLandIsAreaStatistic } from "@/api/land/land"
import { getDetails } from "@/api/farm/farm"
export default {
  components: {
  },
@@ -94,49 +99,65 @@
  },
  created() {
    //获取种样品列表
    this.getFarmPlantList(this.page);
        this.getFarmPlantList(this.page)
    //获取地块列表
    this.getLandList(this.pageLand);
        this.getLandList(this.pageLand)
    //获取农场信息
    this.getFarmInfo();
        this.getFarmInfo()
    //获取统计面积信息
    this.getLandCount();
        this.getLandCount()
    //获取地块轮廓统计信息
    this.getLandIsAreaStatistic();
        this.getLandIsAreaStatistic()
  },
  methods: {
    //获取种养品列表
    getFarmPlantList(page, params = {}) {
      params['farmId'] = this.userInfo.farmId;
      this.loading = true;
            params['farmId'] = this.userInfo.farmId
            this.loading = true
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.farmPlantList = data.records;
        this.loading = false;
        this.selectionClear();
      });
                const data = res.data.data
                this.page.total = data.total
                this.farmPlantList = data.records
                this.loading = false
                // this.selectionClear()
            })
    },
    //获取地块列表
    getLandList(page, params = {}) {
      params['farmId'] = this.userInfo.farmId;
      params['tenantId'] = this.userInfo.tenant_id;
      this.loading = true;
            params['farmId'] = this.userInfo.farmId
            params['tenantId'] = this.userInfo.tenant_id
            this.loading = true
      getLandList(
        page.currentPage,
        page.pageSize,
        Object.assign(params)
      ).then((res) => {
        const data = res.data.data;
        this.pageLand.total = data.total;
        this.landList = data.records;
        this.loading = false;
        this.selectionClear();
      });
                const data = res.data.data

                data.records.forEach(item => {
                    if (item.landRange != '' || item.landRange != null) {
                        item.landRange = item.landRange.replace(/POLYGON\(\(/g, '')
                        item.landRange = item.landRange.replace(/\)\)/g, '')

                        const arr = item.landRange.split(',')
                        var brr = []
                        arr.forEach(it => {
                            brr.push(it.split(' '))
                        })

                        this.$refs.plotMap.addPlotPolygon(brr, item)
                    }
                })

                this.pageLand.total = data.total
                this.landList = data.records
                this.loading = false
                // this.selectionClear()
            })
    },
    //返回上一页
    goToBack() {
@@ -144,21 +165,21 @@
    },
    //获取农场信息
    getFarmInfo() {
      var that = this;
            var that = this
      getDetails(this.userInfo.farmId).then(res => {
        that.farmInfo = res.data.data;
                that.farmInfo = res.data.data
      })
    },
    //获取统计面积信息
    getLandCount() {
      selectCount(this.userInfo.farmId).then(res => {
        this.landAreaInfo = res.data.data;
                this.landAreaInfo = res.data.data
      })
    },
    //获取地块轮廓统计信息
    getLandIsAreaStatistic(){
       getLandIsAreaStatistic(this.userInfo.farmId).then(res=>{
          this.landIsAreaStatistic = res.data.data;
                this.landIsAreaStatistic = res.data.data
       })
    }
  }
@@ -166,11 +187,12 @@
</script>
<style lang="scss" scope>
.top {
    position: absolute;
    top: 0;
  width: 100%;
  height: 80px;
  background: #000000;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.5;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;

  .logo {
    position: absolute;
@@ -191,7 +213,7 @@
      height: 33px;
      font-size: 25px;
      font-weight: bold;
      color: #5ABF78;
            color: #5abf78;
      text-align: center;
      padding-top: 13px;
    }
@@ -201,7 +223,7 @@
      height: 19px;
      font-size: 14px;
      font-weight: 400;
      color: #FFFFFF;
            color: #ffffff;
      text-align: center;
      padding-top: 6px;
    }
@@ -211,10 +233,10 @@
    width: 136px;
    height: 33px;
    line-height: 33px;
    background: rgba(236, 95, 89, 0.8000);
        background: rgba(236, 95, 89, 0.8);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #EC5F59;
        border: 1px solid #ec5f59;
    position: absolute;
    top: 24px;
    right: 33px;
@@ -230,90 +252,10 @@

    span {
      font-size: 14px;
      color: #FFFFFF;
            color: #ffffff;
      font-weight: 400;
    }
  }


}

.down {
  width: 100%;

  .farm-plant {
    width: 292px;
    height: 550px;
    position: absolute;
    left: 30px;
    top: 242px;

    .title {
      width: 292px;
      height: 50px;
      background: #5ABF78;
      border-radius: 4px 4px 0px 0px;
      opacity: 1;
      line-height: 50px;
      font-size: 17px;
      font-weight: bold;
      color: #FFFFFF;

      span {
        margin-left: 20px;
      }
    }

    .content {
      width: 292px;
      // height: 500px;
      background: #08551E;
      border-radius: 4px 4px 0px 0px;
      opacity: 0.9;
      padding-bottom: 30px;

      .list-item {
        width: 252px;
        margin: auto;
        display: flex;
        height: 64px;
        line-height: 64px;
        border-bottom: 1px solid #cccccc;
        flex-flow: row nowrap;
        justify-content: space-between;

        .item-img {
          margin-left: 5px;
          display: flex;

          img {
            margin-top: 12px;
            width: 40px;
            height: 40px;
            background: #2389EF;
            border-radius: 84px 84px 84px 84px;
            opacity: 1;
          }

          span {
            margin-left: 11px;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
          }
        }

        .item-num {
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
        }


      }
    }


  }

  .land-info{
@@ -325,35 +267,36 @@
      margin: auto;
      width: 431px;
      height: 56px;
      background: #000000;
        background: rgba(0, 0, 0, 0.5);
      border-radius: 28px 28px 28px 28px;
      opacity: 0.5;
      display: flex;
      justify-content: center;
      align-items:center;
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
        color: #ffffff;
    }
  }

  .farm-land {
.farm-plant {
    position: absolute;
    left: 30px;
    top: 242px;
    z-index: 99;

    width: 292px;
    height: 550px;
    position: absolute;
    right: 30px;
    top: 242px;

    .title {
      width: 292px;
      height: 50px;
      background: #5ABF78;
        background: #5abf78;
      border-radius: 4px 4px 0px 0px;
      opacity: 1;
      line-height: 50px;
      font-size: 17px;
      font-weight: bold;
      color: #FFFFFF;
        color: #ffffff;

      span {
        margin-left: 20px;
@@ -362,11 +305,15 @@

    .content {
      width: 292px;
        height: calc(100% - 50px);
        background: rgba(8, 85, 30, 0.9);
      // height: 500px;
      background: #08551E;
      border-radius: 4px 4px 0px 0px;
      opacity: 0.9;
      padding-bottom: 30px;

        overflow-x: hidden;
        overflow-y: auto;

      .list-item {
        width: 252px;
@@ -386,7 +333,7 @@
            margin-top: 12px;
            width: 40px;
            height: 40px;
            background: #2389EF;
                    background: #2389ef;
            border-radius: 84px 84px 84px 84px;
            opacity: 1;
          }
@@ -395,17 +342,93 @@
            margin-left: 11px;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
                    color: #ffffff;
          }
        }

        .item-num {
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
                color: #ffffff;
            }
        }
    }
        }

.farm-land {
    position: absolute;
    right: 30px;
    top: 242px;

    z-index: 99;

    width: 292px;
    height: 550px;

    .title {
        width: 292px;
        height: 50px;
        background: #5abf78;
        border-radius: 4px 4px 0px 0px;
        opacity: 1;
        line-height: 50px;
        font-size: 17px;
        font-weight: bold;
        color: #ffffff;

        span {
            margin-left: 20px;
        }
    }

    .content {
        width: 292px;
        height: calc(100% - 50px);
        background: rgba(8, 85, 30, 0.9);
        // height: 500px;

        border-radius: 4px 4px 0px 0px;
        opacity: 0.9;
        padding-bottom: 30px;

        overflow-x: hidden;
        overflow-y: auto;

        .list-item {
            width: 252px;
            margin: auto;
            display: flex;
            height: 64px;
            line-height: 64px;
            border-bottom: 1px solid #cccccc;
            flex-flow: row nowrap;
            justify-content: space-between;

            .item-img {
                margin-left: 5px;
                display: flex;

                img {
                    margin-top: 12px;
                    width: 40px;
                    height: 40px;
                    background: #2389ef;
                    border-radius: 84px 84px 84px 84px;
                    opacity: 1;
                }

                span {
                    margin-left: 11px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #ffffff;
                }
            }

            .item-num {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
      }
    }
  }

 src/views/process/process.vue

@@ -1,6 +1,7 @@
<template>
  <basic-container>
    <avue-crud :option="option"
        <avue-crud
            :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
@@ -17,23 +18,25 @@
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
            @on-load="onLoad"
        >
      <template slot="menuLeft">
        <el-button type="danger"
                <el-button
                    type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.process_delete"
                   @click="handleDelete">删 除
        </el-button>
                    @click="handleDelete"
                >删 除</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/process/process";
  import {mapGetters} from "vuex";
import { getList, getDetail, addjg, update, remove } from "@/api/process/process"
import { mapGetters } from "vuex"

  export default {
    data() {
@@ -116,7 +119,7 @@
          ]
        },
        data: []
      };
        }
    },
    computed: {
      ...mapGetters(["permission"]),
@@ -126,42 +129,42 @@
          viewBtn: this.vaildData(this.permission.process_view, false),
          delBtn: this.vaildData(this.permission.process_delete, false),
          editBtn: this.vaildData(this.permission.process_edit, false)
        };
            }
      },
      ids() {
        let ids = [];
            let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
                ids.push(ele.id)
            })
            return ids.join(",")
      }
    },
    methods: {
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
            addjg(row).then(() => {
                this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
                })
                done()
        }, error => {
          loading();
          window.console.log(error);
        });
                loading()
                window.console.log(error)
            })
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
                this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
                })
                done()
        }, error => {
          loading();
          console.log(error);
        });
                loading()
                console.log(error)
            })
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
@@ -170,20 +173,20 @@
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
                    return remove(row.id)
          })
          .then(() => {
            this.onLoad(this.page);
                    this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
                    })
                })
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
                this.$message.warning("请选择至少一条数据")
                return
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
@@ -191,60 +194,60 @@
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
                    return remove(this.ids)
          })
          .then(() => {
            this.onLoad(this.page);
                    this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
                    })
                    this.$refs.crud.toggleSelection()
                })
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
                    this.form = res.data.data
                })
        }
        done();
            done()
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
            this.query = {}
            this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
      },
      selectionChange(list) {
        this.selectionList = list;
            this.selectionList = list
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
            this.selectionList = []
            this.$refs.crud.toggleSelection()
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
            this.page.currentPage = currentPage
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
            this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
            this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true;
            this.loading = true
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
      }
    }
  };

 src/views/retrieval/retrieval.vue

@@ -1,6 +1,7 @@
<template>
  <basic-container>
    <avue-crud :option="option"
        <avue-crud
            :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
@@ -17,23 +18,25 @@
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
            @on-load="onLoad"
        >
      <template slot="menuLeft">
        <el-button type="danger"
                <el-button
                    type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.retrieval_delete"
                   @click="handleDelete">删 除
        </el-button>
                    @click="handleDelete"
                >删 除</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/retrieval/retrieval";
  import {mapGetters} from "vuex";
import { getList, getDetail, addck, update, remove } from "@/api/retrieval/retrieval"
import { mapGetters } from "vuex"

  export default {
    data() {
@@ -143,7 +146,7 @@
          ]
        },
        data: []
      };
        }
    },
    computed: {
      ...mapGetters(["permission"]),
@@ -153,42 +156,42 @@
          viewBtn: this.vaildData(this.permission.retrieval_view, false),
          delBtn: this.vaildData(this.permission.retrieval_delete, false),
          editBtn: this.vaildData(this.permission.retrieval_edit, false)
        };
            }
      },
      ids() {
        let ids = [];
            let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
                ids.push(ele.id)
            })
            return ids.join(",")
      }
    },
    methods: {
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
            addck(row).then(() => {
                this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
                })
                done()
        }, error => {
          loading();
          window.console.log(error);
        });
                loading()
                window.console.log(error)
            })
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
                this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
                })
                done()
        }, error => {
          loading();
          console.log(error);
        });
                loading()
                console.log(error)
            })
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
@@ -197,20 +200,20 @@
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
                    return remove(row.id)
          })
          .then(() => {
            this.onLoad(this.page);
                    this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
                    })
                })
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
                this.$message.warning("请选择至少一条数据")
                return
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
@@ -218,60 +221,60 @@
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
                    return remove(this.ids)
          })
          .then(() => {
            this.onLoad(this.page);
                    this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
                    })
                    this.$refs.crud.toggleSelection()
                })
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
                    this.form = res.data.data
                })
        }
        done();
            done()
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
            this.query = {}
            this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
      },
      selectionChange(list) {
        this.selectionList = list;
            this.selectionList = list
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
            this.selectionList = []
            this.$refs.crud.toggleSelection()
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
            this.page.currentPage = currentPage
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
            this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
            this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true;
            this.loading = true
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
      }
    }
  };

 vue.config.js

@@ -1,9 +1,29 @@
const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const dvgisDist = './node_modules/@dvgis'

module.exports = {
    //路径前缀
    publicPath: "/",
    lintOnSave: true,
    productionSourceMap: false,
    chainWebpack: (config) => {
        config.plugin('copy').use(CopywebpackPlugin, [
            [
                {
                    from: path.join(dvgisDist, 'dc-sdk/dist/resources'),
                    to: 'libs/dc-sdk/resources'
                }
                // {
                //     from: './public/wp',
                //     to: 'wp'
                // },
                // {
                //     from: './public/qx',
                //     to: 'qx'
                // }
            ]
        ])
        //忽略的打包文件
        config.externals({
            'vue': 'Vue',
@@ -26,7 +46,7 @@
        proxy: {
            '/api': {
                //本地服务接口地址
                // target: 'http://localhost:89',
                // target: 'http://192.168.0.126:89',
                //远程演示服务地址,可用于直接启动项目
                target: 'http://182.106.212.58:8013/api',
                ws: true,