From 5d39c1041c0c5094d140623e5fb3ac388b8d2691 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 02 Aug 2022 11:43:40 +0800
Subject: [PATCH] 地图
---
/dev/null | 5
.eslintrc.js | 11 +
src/components/map/plotMap.vue | 111 ++++++++----
package.json | 136 +++++++-------
src/views/test.vue | 15 +
src/views/mapPattern/index.vue | 217 +++++++++++++++++++++++
6 files changed, 373 insertions(+), 122 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index a4029fc..5d0424b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,17 +1,26 @@
+/*
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2022-07-29 15:27:24
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2022-08-02 11:33:06
+ * @FilePath: \zhny_web\.eslintrc.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
module.exports = {
root: true,
env: {
node: true
},
'extends': [
+ 'eslint:recommended',
'plugin:vue/essential',
- 'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"no-unused-vars": "off"
},
+
parserOptions: {
parser: 'babel-eslint'
}
diff --git a/.postcssrc.js b/.postcssrc.js
deleted file mode 100644
index 100cc01..0000000
--- a/.postcssrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
- plugins: {
- autoprefixer: {}
- }
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index 1686334..ae7508b 100644
--- a/package.json
+++ b/package.json
@@ -1,70 +1,70 @@
{
- "name": "saber-admin",
- "version": "2.9.1",
- "private": true,
- "scripts": {
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build",
- "lint": "vue-cli-service lint",
- "analyz": "npm_config_report=true npm run build",
- "test:unit": "vue-cli-service test:unit",
- "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",
- "jquery": "^3.6.0",
- "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",
- "ol": "^6.5.0",
- "olcs": "^2.12.0",
- "portfinder": "^1.0.23",
- "script-loader": "^0.7.2",
- "vue": "^2.6.10",
- "vue-axios": "^2.1.2",
- "vue-i18n": "^8.7.0",
- "vue-router": "^3.0.1",
- "vuex": "^3.1.1"
- },
- "devDependencies": {
- "@vue/cli-plugin-babel": "^3.1.1",
- "@vue/cli-plugin-eslint": "^3.1.5",
- "@vue/cli-service": "^3.1.4",
- "chai": "^4.1.2",
- "node-sass": "^6.0.1",
- "sass-loader": "^10.0.5",
- "vue-template-compiler": "^2.5.17",
- "webpack-bundle-analyzer": "^3.0.3"
- },
- "lint-staged": {
- "*.js": [
- "vue-cli-service lint",
- "git add"
- ],
- "*.vue": [
- "vue-cli-service lint",
- "git add"
- ]
- },
- "description": "* BladeX是一个商业化软件，系列产品知识产权归**上海布雷德科技有限公司**独立所有\r * 您一旦开始复制、下载、安装或者使用本产品，即被视为完全理解并接受本协议的各项条款\r * 更多详情请看：[BladeX商业授权许可协议](/LICENSE)",
- "main": ".eslintrc.js",
- "repository": {
- "type": "git",
- "url": "http://guoshilong@s16s652780.51mypc.cn:49896/r/zhny_web.git"
- },
- "author": "",
- "license": "ISC"
+ "name": "saber-admin",
+ "version": "2.9.1",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint",
+ "analyz": "npm_config_report=true npm run build",
+ "test:unit": "vue-cli-service test:unit",
+ "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",
+ "jquery": "^3.6.0",
+ "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",
+ "ol": "^6.5.0",
+ "olcs": "^2.12.0",
+ "portfinder": "^1.0.23",
+ "script-loader": "^0.7.2",
+ "vue": "^2.6.10",
+ "vue-axios": "^2.1.2",
+ "vue-i18n": "^8.7.0",
+ "vue-router": "^3.0.1",
+ "vuex": "^3.1.1"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "^3.1.1",
+ "@vue/cli-plugin-eslint": "^3.1.5",
+ "@vue/cli-service": "^3.1.4",
+ "chai": "^4.1.2",
+ "node-sass": "^6.0.1",
+ "sass-loader": "^10.0.5",
+ "vue-template-compiler": "^2.5.17",
+ "webpack-bundle-analyzer": "^3.0.3"
+ },
+ "lint-staged": {
+ "*.js": [
+ "vue-cli-service lint",
+ "git add"
+ ],
+ "*.vue": [
+ "vue-cli-service lint",
+ "git add"
+ ]
+ },
+ "description": "* BladeX是一个商业化软件，系列产品知识产权归**上海布雷德科技有限公司**独立所有\r * 您一旦开始复制、下载、安装或者使用本产品，即被视为完全理解并接受本协议的各项条款\r * 更多详情请看：[BladeX商业授权许可协议](/LICENSE)",
+ "main": ".eslintrc.js",
+ "repository": {
+ "type": "git",
+ "url": "http://guoshilong@s16s652780.51mypc.cn:49896/r/zhny_web.git"
+ },
+ "author": "",
+ "license": "ISC"
}
diff --git a/src/components/map/plotMap.vue b/src/components/map/plotMap.vue
index 2355472..0e9d0bc 100644
--- a/src/components/map/plotMap.vue
+++ b/src/components/map/plotMap.vue
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
<template>
<div>
<div id="viewer-container" style="height: 100%; width: 100%"></div>
@@ -70,11 +69,81 @@
// 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.WebMapTileServiceImageryProvider({
- url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdomjuly/MapServer/WMTS',
// url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- layer: 'nanchengyjjddom',
+ layer: 'nanchengdomjuly',
style: 'default',
tileMatrixSetID: 'default028mm',
format: 'image/png',
@@ -105,40 +174,8 @@
})
)
- 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(
diff --git a/src/views/mapPattern/index.vue b/src/views/mapPattern/index.vue
index 89376b7..c045e43 100644
--- a/src/views/mapPattern/index.vue
+++ b/src/views/mapPattern/index.vue
@@ -1,5 +1,5 @@
<template>
- <div style="position: relative; height: 100%;">
+ <div @click="bodyClick($event)" style="position: relative; height: 100%;">
<plot-map ref="plotMap" style="position: absolute; width: 100%; height: 100%;"></plot-map>
<div class="top">
<div class="logo">
@@ -24,10 +24,10 @@
</div>
<div class="farm-plant">
<div class="title">
- <span>种养品种 · {{ this.page.total }}种</span>
+ <span>种养品种 · {{ this.plotPlantBreed.length }}种</span>
</div>
<div class="content">
- <div class="list-item" v-for="(item, index) in farmPlantList" :key="index">
+ <div class="list-item" v-for="(item, index) in plotPlantBreed" :key="index">
<div class="item-img">
<img :src="item.url" />
<span>{{ item.strainName }}</span>
@@ -42,14 +42,14 @@
有轮廓的地块：
<span
style="font-size: 26px;font-weight: bold;color: #5ABF78;"
- >{{landIsAreaStatistic[0]}}</span>
+ >{{landIsAreaStatistic.length > 0 ? landIsAreaStatistic[0] : 0}}</span>
</div>
<div>
无轮廓的地块：
<span
style="font-size: 26px;font-weight: bold;color: #E3B745;"
- >{{landIsAreaStatistic[1]}}</span>
+ >{{landIsAreaStatistic.length > 1 ? landIsAreaStatistic[1] : 0}}</span>
</div>
</div>
</div>
@@ -58,12 +58,50 @@
<span>地块 · {{ this.pageLand.total }}种</span>
</div>
<div class="content">
- <div class="list-item" v-for="(item, index) in landList" :key="index">
+ <div
+ class="list-item"
+ v-for="(item, index) in landList"
+ :key="index"
+ @click="setCenter(item)"
+ >
<div class="item-img">
<img :src="item.url" />
<span>{{ item.landName }}</span>
</div>
<div class="item-num">{{ item.landArea }}亩</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="plot-detail-popup" v-show="cPShow" ref="showCP">
+ <div class="header">
+ <div class="plot-name">
+ <div class="name">{{ currentPlotDetails.landName }}</div>
+ <i class="el-icon-edit-outline" title="编辑地块名称"></i>
+ </div>
+ <div class="plot-area-type">
+ <div class="l">
+ 占地面积：{{ currentPlotDetails.landArea }}{{ currentPlotDetails.dica }}
+ <span
+ class="type"
+ >{{ currentPlotDetails.dic }}</span>
+ </div>
+ <div class="r">
+ 进入地块
+ <i class="el-icon-arrow-right"></i>
+ </div>
+ </div>
+ </div>
+
+ <div class="body">
+ <div class="list" v-for="(item, index) in cPPBreed" :key="index">
+ <div class="l">
+ <img :src="item.url" />
+ {{ item.strainName }}
+ </div>
+ <div
+ class="r"
+ >{{ item.createTime }}{{ item.plantingWay == 0 ? "移摘" : item.plantingWay == 1 ? "播种" : "秧苗" }}</div>
</div>
</div>
</div>
@@ -91,10 +129,25 @@
total: 0,
},
farmPlantList: [],
+
+ // 数据合并后的种养品种
+ plotPlantBreed: [],
+
+ // 当前地块种养品种
+ cPPBreed: [],
+
+ // 当前地块对应弹框
+ cPShow: false,
+
+ // 当前点击地块详情
+ currentPlotDetails: {},
+
+ plotClickNum: 0,
+
landList: [],
farmInfo: {},
landAreaInfo: {},
- landIsAreaStatistic: [0, 0],
+ landIsAreaStatistic: [],
}
},
@@ -126,7 +179,41 @@
const data = res.data.data
this.page.total = data.total
this.farmPlantList = data.records
+
+ let arr = []
+ this.farmPlantList.forEach(item => {
+ if (arr.length > 0) {
+ let result = arr.some(it => {
+ if (item.strainName == it.strainName) {
+ it.area += Number(item.area)
+
+ return true
+ }
+ })
+
+ if (!result) {
+ arr.push({
+ strainName: item.strainName,
+ area: Number(item.area),
+ url: item.url
+ })
+ }
+ } else {
+ arr.push({
+ strainName: item.strainName,
+ area: Number(item.area),
+ url: item.url
+ })
+ }
+ })
+
+ this.plotPlantBreed = arr
+
+
this.loading = false
+
+
+
// this.selectionClear()
})
},
@@ -186,10 +273,48 @@
console.log(res)
this.landIsAreaStatistic = res.data.data
})
+ },
+
+ // 地块定位
+ setCenter (item) {
+ this.$refs.plotMap.setPlotCenter(item.landName)
+ },
+
+ plotDetailsPopupShow (params) {
+ this.currentPlotDetails = params
+
+ let arr = []
+
+ this.farmPlantList.forEach((item, index) => {
+ if (params.id == item.landId) {
+ arr.push(item)
+ }
+ })
+
+ this.cPPBreed = arr
+
+ this.cPShow = true
+ },
+
+ bodyClick (e) {
+ if (this.plotClickNum == 0) {
+ this.plotClickNum++
+ return
+ }
+
+ if (this.$refs.showCP) {
+ console.log(1)
+ let isSelf = this.$refs.showCP.contains(e.target)
+ if (!isSelf) {
+ this.plotClickNum = 0
+ this.cPShow = false
+ }
+ }
}
}
}
</script>
+
<style lang="scss" scope>
.top {
position: absolute;
@@ -414,6 +539,7 @@
border-bottom: 1px solid #cccccc;
flex-flow: row nowrap;
justify-content: space-between;
+ cursor: pointer;
.item-img {
margin-left: 5px;
@@ -444,4 +570,81 @@
}
}
}
+
+.plot-detail-popup {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+
+ width: 462px;
+ height: 262px;
+
+ transform: translate(-50%, -50%);
+ z-index: 11;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 8px;
+ overflow: hidden;
+
+ .header {
+ display: flex;
+ flex-direction: column;
+ padding: 0 20px;
+ height: 80px;
+ background: #2cd2a9;
+ color: #fff;
+
+ & > div {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ }
+
+ .plot-name {
+ }
+
+ .plot-area-type {
+ justify-content: space-between;
+ }
+ }
+
+ .body {
+ padding: 10px 20px;
+ height: calc(100% - 80px);
+ background: rgba(0, 0, 0, 0);
+ box-sizing: border-box;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ .list:first-child {
+ margin: 0;
+ }
+
+ .list {
+ margin-top: 10px;
+ padding: 0 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 50px;
+ background: #fff;
+ font-size: 14px;
+
+ .l {
+ display: flex;
+ align-items: center;
+ color: #2cd2a9;
+
+ img {
+ margin-right: 10px;
+ width: 30px;
+ height: 30px;
+ }
+ }
+
+ .r {
+ color: #999;
+ }
+ }
+ }
+}
</style>
diff --git a/src/views/test.vue b/src/views/test.vue
index 04e63b9..9b07369 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,10 +1,17 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2022-07-29 15:27:24
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2022-08-02 11:31:53
+ * @FilePath: \zhny_web\src\views\test.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
<template>
- <basic-container>测试页</basic-container>
+ <basic-container>测试页</basic-container>
</template>
<script>
- export default {};
+export default {};
</script>
-<style>
-</style>
+<style></style>
--
Gitblit v1.9.3