tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

精细分类根据级别显示村级矢量，点击某镇级高亮其他遮罩

Browse Source
This commit is contained in:
伊丽莎白 2023-06-06 16:45:43 +08:00
parent baf444b013
commit 8d96ed92fb
3 changed files with 337 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

449
src/views/crops/classify/Classify.vue
View File

@ -8,10 +8,8 @@
<span>作物分类面积统计</span> <span>作物分类面积统计</span>
<p @click="Deta()"> <p @click="Deta()">
下载 &nbsp; 下载 &nbsp;
<img <img src="@/assets/icons/svg/downloads.svg"
src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
style="width: 14px; height: 14px; cursor: pointer"
/>
</p> </p>
</div> </div>
<div ref="areaDiv" class="areaDiv"></div> <div ref="areaDiv" class="areaDiv"></div>
@ -21,10 +19,8 @@
<span>作物类型统计</span> <span>作物类型统计</span>
<p @click="Deta2()"> <p @click="Deta2()">
下载 &nbsp; 下载 &nbsp;
<img <img src="@/assets/icons/svg/downloads.svg"
src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
style="width: 14px; height: 14px; cursor: pointer"
/>
</p> </p>
</div> </div>
<div ref="typesofDiv" class="typesofDiv"></div> <div ref="typesofDiv" class="typesofDiv"></div>
@ -46,36 +42,15 @@
</div> </div>
</div> </div>
<div class="leftFoldDiv" @click="leftFoldClick()"> <div class="leftFoldDiv" @click="leftFoldClick()">
<el-tooltip <el-tooltip :disabled="leftWraFlag" :show-arrow="false" hide-after="0" show-after="200" class="box-item"
:disabled="leftWraFlag" effect="dark" content="展开" placement="top">
:show-arrow="false"
hide-after="0"
show-after="200"
class="box-item"
effect="dark"
content="展开"
placement="top"
>
<!-- <el-icon v-if="!leftWraFlag"><ArrowRightBold /></el-icon> --> <!-- <el-icon v-if="!leftWraFlag"><ArrowRightBold /></el-icon> -->
<img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" /> <img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip :disabled="!leftWraFlag" :show-arrow="false" hide-after="0" show-after="200"
:disabled="!leftWraFlag" class="box-item" effect="dark" content="收起" placement="top">
:show-arrow="false"
hide-after="0"
show-after="200"
class="box-item"
effect="dark"
content="收起"
placement="top"
>
<!-- <el-icon v-if="leftWraFlag"><ArrowLeftBold /></el-icon> --> <!-- <el-icon v-if="leftWraFlag"><ArrowLeftBold /></el-icon> -->
<img <img class="imgrotate" v-if="leftWraFlag" src="@/assets/images/close1.png" alt="" />
class="imgrotate"
v-if="leftWraFlag"
src="@/assets/images/close1.png"
alt=""
/>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
@ -85,10 +60,8 @@
<span>作物类型统计-高标准农田</span> <span>作物类型统计-高标准农田</span>
<p @click="Deta3()"> <p @click="Deta3()">
下载 &nbsp; 下载 &nbsp;
<img <img src="@/assets/icons/svg/downloads.svg"
src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
style="width: 14px; height: 14px; cursor: pointer"
/>
</p> </p>
</div> </div>
<div ref="farmlandDiv" class="farmlandDiv"></div> <div ref="farmlandDiv" class="farmlandDiv"></div>
@ -99,57 +72,25 @@
<span>作物类型统计-行政区划</span> <span>作物类型统计-行政区划</span>
<p @click="Deta4()"> <p @click="Deta4()">
下载 &nbsp; 下载 &nbsp;
<img <img src="@/assets/icons/svg/downloads.svg"
src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
style="width: 14px; height: 14px; cursor: pointer"
/>
</p> </p>
</div> </div>
<el-select <el-select popper-class="select_city" @change="selectTab(item)" v-model="value" clearable
popper-class="select_city" placeholder="全部">
@change="selectTab(item)" <el-option v-for="item in Township.arr" :key="item.tomeCode" :label="item.tomeName"
v-model="value" :value="item.tomeCode" />
clearable
placeholder="全部"
>
<el-option
v-for="item in Township.arr"
:key="item.tomeCode"
:label="item.tomeName"
:value="item.tomeCode"
/>
</el-select> </el-select>
<div ref="ASdivisionDiv" class="ASdivision"></div> <div ref="ASdivisionDiv" class="ASdivision"></div>
</div> </div>
<div class="rightFoldDiv" @click="rightFoldClick()"> <div class="rightFoldDiv" @click="rightFoldClick()">
<el-tooltip <el-tooltip :disabled="!rightWraFlag" hide-after="0" :show-arrow="false" show-after="200"
:disabled="!rightWraFlag" class="box-item" effect="dark" content="收起" placement="top">
hide-after="0"
:show-arrow="false"
show-after="200"
class="box-item"
effect="dark"
content="收起"
placement="top"
>
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" /> <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip :disabled="rightWraFlag" hide-after="0" :show-arrow="false" show-after="200"
:disabled="rightWraFlag" class="box-item" effect="dark" content="展开" placement="top">
hide-after="0" <img class="imgrotate" v-if="!rightWraFlag" src="@/assets/images/close1.png" alt="" />
:show-arrow="false"
show-after="200"
class="box-item"
effect="dark"
content="展开"
placement="top"
>
<img
class="imgrotate"
v-if="!rightWraFlag"
src="@/assets/images/close1.png"
alt=""
/>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
@ -158,18 +99,11 @@
<template #title>图例</template> <template #title>图例</template>
<div class="mt-4"> <div class="mt-4">
<el-checkbox-group v-model="checkList" @change="change"> <el-checkbox-group v-model="checkList" @change="change">
<el-checkbox <el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
v-for="(value, item, key) in dic"
:key="key"
:style="{
background: value.color, background: value.color,
border: `1px solid ${value.color}`, border: `1px solid ${value.color}`,
width: `100%`, width: `100%`,
}" }" :v-model="value.disabled" :disabled="value.disabled" :label="item" />
:v-model="value.disabled"
:disabled="value.disabled"
:label="item"
/>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</el-collapse-item> </el-collapse-item>
@ -217,42 +151,21 @@
<div class="searchDiv"> <div class="searchDiv">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="时间:"> <el-form-item label="时间:">
<el-select <el-select popper-class="selectCity" v-model="formInline.yearMonth" placeholder="请选择">
popper-class="selectCity" <el-option v-for="(item, index) in timeArr" :key="index" :label="Zitem" :value="item" />
v-model="formInline.yearMonth"
placeholder="请选择"
>
<el-option
v-for="(item, index) in timeArr"
:key="index"
:label="Zitem"
:value="item"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="统计方式:"> <el-form-item label="统计方式:">
<el-select <el-select popper-class="selectCity" v-model="formInline.flag" placeholder="请选择">
popper-class="selectCity"
v-model="formInline.flag"
placeholder="请选择"
>
<el-option label="行政区划" value="2" /> <el-option label="行政区划" value="2" />
<el-option label="高标准农田" value="1" /> <el-option label="高标准农田" value="1" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="镇:"> <el-form-item label="镇:">
<el-select <el-select v-model="formInline.divisions" :disabled="formInline.flag == '2' ? false : true"
v-model="formInline.divisions" :placeholder="formInline.flag == '2' ? '全部' : '请选择'" popper-class="selectCity">
:disabled="formInline.flag == '2' ? false : true" <el-option v-for="(item, index) in selectOption" :key="index" :label="item.tomeName"
:placeholder="formInline.flag == '2' ? '全部' : '请选择'" :value="item.tomeCode" />
popper-class="selectCity"
>
<el-option
v-for="(item, index) in selectOption"
:key="index"
:label="item.tomeName"
:value="item.tomeCode"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -273,61 +186,28 @@
</div> </div>
<div v-show="SwitchFlag" class="tableBox"> <div v-show="SwitchFlag" class="tableBox">
<div class="tableBorder"> <div class="tableBorder">
<el-table <el-table :data="amount" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%"
:data="amount" highlight-current-row header-row-class-name="tabth" v-if="!operate">
:header-cell-style="{ 'text-align': 'center' }"
style="width: 100%"
highlight-current-row
header-row-class-name="tabth"
v-if="!operate"
>
<el-table-column align="center" prop="合计" width="80" /> <el-table-column align="center" prop="合计" width="80" />
<el-table-column <el-table-column v-for="(item, index) in tableItem" :key="index" :prop="item.value"
v-for="(item, index) in tableItem" :label="index == 0 ? item.lable : item.lable + '(亩)'" align="center" />
:key="index"
:prop="item.value"
:label="index == 0 ? item.lable : item.lable + '(亩)'"
align="center"
/>
<el-table-column prop="address" v-if="operate" align="center" label="操作"> <el-table-column prop="address" v-if="operate" align="center" label="操作">
<template #default="scope"> <template #default="scope">
<span <span style="color: rgba(67, 181, 143, 1); cursor: pointer" @click="download(scope.row)">
style="color: rgba(67, 181, 143, 1); cursor: pointer"
@click="download(scope.row)"
>
下载 下载
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<el-table <el-table :data="tableNewData" :header-cell-style="{ 'text-align': 'center' }" height="90%"
:data="tableNewData" highlight-current-row header-row-class-name="tabth">
:header-cell-style="{ 'text-align': 'center' }" <el-table-column type="index" width="80" align="center" label="序号" :index="Nindex" />
height="90%" <el-table-column v-for="(item, index) in tableItem" :key="index" :prop="item.value"
highlight-current-row :label="index == 0 ? item.lable : item.lable + '(亩)'" align="center" />
header-row-class-name="tabth"
>
<el-table-column
type="index"
width="80"
align="center"
label="序号"
:index="Nindex"
/>
<el-table-column
v-for="(item, index) in tableItem"
:key="index"
:prop="item.value"
:label="index == 0 ? item.lable : item.lable + '(亩)'"
align="center"
/>
<el-table-column prop="address" v-if="operate" align="center" label="操作"> <el-table-column prop="address" v-if="operate" align="center" label="操作">
<template #default="scope"> <template #default="scope">
<span <span style="color: rgba(67, 181, 143, 1); cursor: pointer" @click="download(scope.row)">
style="color: rgba(67, 181, 143, 1); cursor: pointer"
@click="download(scope.row)"
>
下载 下载
</span> </span>
</template> </template>
@ -335,14 +215,8 @@
</el-table> </el-table>
<div class="example-pagination-block"> <div class="example-pagination-block">
共{{ insectarr.length }}条 共{{ insectarr.length }}条
<el-pagination <el-pagination background layout="prev, pager, next" :total="insectarr.length"
background :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange" />
layout="prev, pager, next"
:total="insectarr.length"
:current-page="currentPage"
:page-size="pageSize"
@current-change="handleCurrentChange"
/>
</div> </div>
</div> </div>
<div v-show="!SwitchFlag" class="chartMode"> <div v-show="!SwitchFlag" class="chartMode">
@ -372,6 +246,7 @@ import {
import axios from 'axios'; import axios from 'axios';
import * as xlsx from 'xlsx'; // Vue3 版本 import * as xlsx from 'xlsx'; // Vue3 版本
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import townJson from './town.json'
let viewer = ref(null); let viewer = ref(null);
const areaDiv = ref(null); const areaDiv = ref(null);
@ -659,7 +534,6 @@ const onSubmit = () => {
(currentPage.value - 1) * pageSize.value, (currentPage.value - 1) * pageSize.value,
(currentPage.value - 1) * pageSize.value + pageSize.value (currentPage.value - 1) * pageSize.value + pageSize.value
); );
console.log(tableNewData);
const statInfo = chartModeDiv.value; // 获取图表元素 const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度 statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
statInfo.style.height = window.innerHeight - 100 + 'px'; statInfo.style.height = window.innerHeight - 100 + 'px';
@ -797,7 +671,6 @@ const Deta4 = item => {
} }
}); });
}); });
console.log(brr);
exportExcel(brr, `${region}作物长势等级统计-行政区划`, 'Sheet1'); exportExcel(brr, `${region}作物长势等级统计-行政区划`, 'Sheet1');
}); });
} }
@ -1164,21 +1037,26 @@ function initMap() {
// 图层点击事件 // 图层点击事件
layerClick(); layerClick();
// 监听相机移动，实现根据缩放级别村级矢量的显隐
cameraMove()
// 图层遮罩
maskLayer()
// // 添加镇级矢量 // // 添加镇级矢量
// addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town'); // addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
let cityDS = Cesium.GeoJsonDataSource.load(
`${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`,
{
fill: Cesium.Color.YELLOW.withAlpha(0.01),
strokeWidth: 3,
markerSymbol: '?',
clampToGround: true,
outline: true,
outlineColor: Cesium.Color.BLACK,
}
);
viewer.dataSources.add(cityDS); // let cityDS = Cesium.GeoJsonDataSource.load(
// `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`,
// {
// fill: Cesium.Color.YELLOW.withAlpha(0.01),
// strokeWidth: 3,
// markerSymbol: '?',
// clampToGround: true,
// outline: true,
// outlineColor: Cesium.Color.BLACK,
// }
// );
// viewer.dataSources.add(cityDS);
zoomInCenter(viewer); zoomInCenter(viewer);
} }
@ -1227,7 +1105,6 @@ function getLevel(height) {
} }
function change(e, a) { function change(e, a) {
// console.log('e:', e, a);
// removeWms('crop'); // removeWms('crop');
// addwms(); // addwms();
} }
@ -1239,8 +1116,8 @@ function zoomInCenter(viewer) {
if (!isNaN(Amount)) { if (!isNaN(Amount)) {
viewer.scene.camera.zoomIn(Amount); viewer.scene.camera.zoomIn(Amount);
var ray = viewer.camera.getPickRay(movement.position); // var ray = viewer.camera.getPickRay(movement.position);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene); // var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
} }
}, Cesium.ScreenSpaceEventType.WHEEL); }, Cesium.ScreenSpaceEventType.WHEEL);
} }
@ -1296,7 +1173,6 @@ function addWms(layers, customName, bottom) {
map.customName = customName; //自己定义各种属性 map.customName = customName; //自己定义各种属性
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层 let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
// if (customName.indexOf('gbznt') > -1) { // if (customName.indexOf('gbznt') > -1) {
// console.log('dididididi');
// // viewer.imageryLayers.lower(dd);//将图层下移一层 // // viewer.imageryLayers.lower(dd);//将图层下移一层
// viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层 // viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
// viewer.imageryLayers.raise(dd); //将图层上移一层 // viewer.imageryLayers.raise(dd); //将图层上移一层
@ -1306,10 +1182,114 @@ function addWms(layers, customName, bottom) {
viewer.imageryLayers.raise(dd); //将图层上移一层 viewer.imageryLayers.raise(dd); //将图层上移一层
} }
} }
// 根据根据级别显示村级矢量
function cameraMove() {
if (viewer) {
viewer.scene.camera.moveEnd.addEventListener(function () {
// 获取级别
let alti = viewer.camera.positionCartographic.height;
if (alti && alti < 20000) {
// 根据中心点经纬度添加，前提是添加过镇的实体
// let centerResult = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2))
// if (Cesium.defined(centerResult)) {
// let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult)
// let pick = viewer.scene.pick(curPosition)
// if (pick) {
// let info = pick.id.properties.XZDM || null
// removeWms(['village'], false)
// if (info) {
// addvillage(
// `XZDM=${info._value}`,
// 'village'
// );
// }
// }
// }
// 添加全部
addWms('shuzisannong:huangdaoqu_village', 'village')
} else {
removeWms(['village'], false)
}
})
}
}
let previousPickedEntity = 1;
// 图层遮罩鼠标移动高亮
function maskLayer() {
// 添加矢量遮罩
if (viewer) {
// let url = `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`
let url = townJson
Cesium.GeoJsonDataSource.load(url, {
stroke: Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0)"), //轮廓颜色
fill: Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.01)"), //内部颜色
// strokeWidth: 3, //轮廓宽度,无效
// clampToGround: true,//是否贴地
}).then(function (dataSource) {
dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
viewer.dataSources.add(dataSource); //添加
// let entities = dataSource.entities.values;
// for (var i = 0; i < entities.length; i++) {
// let entity = entities[i];
// entity.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.8)")
// }
});
// 监听鼠标移动
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
handler.setInputAction(async function (movement) {
const earthPosition = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);//当前世界坐标笛卡尔积
if (Cesium.defined(earthPosition)) {
let pickedFeature = viewer.scene.pick(movement.position);//返回最上层模型属性
if (pickedFeature && typeof (pickedFeature) != "undefined") {
// 取消先前要素高亮
if (previousPickedEntity && Cesium.defined(previousPickedEntity)) {
if (previousPickedEntity === 1) {
// 第一次添加，全部加暗
//layerName是加载时给geojson添加的属性
const dataSources = viewer.dataSources._dataSources
for (let k = dataSources.length - 1; k >= 0; k--) {
// if (dataSources[k].name.indexOf('geojsonDataSource') > -1) {
if (dataSources[k].name && dataSources[k].name === 'geojsonDataSource') {
// this.viewer.dataSources.remove(dataSources[k])
let entities = dataSources[k].entities.values;
for (var i = 0; i < entities.length; i++) {
let entity = entities[i];
entity.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.4)")
}
}
}
} else {
previousPickedEntity.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.4)");
previousPickedEntity = null
}
}
// 高亮当前选中要素
if (Cesium.defined(pickedFeature.id) && Cesium.defined(pickedFeature.id.polygon)) {
pickedFeature.id.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0)");
previousPickedEntity = pickedFeature.id
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
}
// 图层点击事件 // 图层点击事件
let XZDM = ''; let XZDM = ''
function layerClick() { function layerClick() {
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
handler.setInputAction(async function (movement) { handler.setInputAction(async function (movement) {
var ray = viewer.camera.getPickRay(movement.position); var ray = viewer.camera.getPickRay(movement.position);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene); var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
@ -1321,11 +1301,7 @@ function layerClick() {
let level = getLevel(alti); let level = getLevel(alti);
const layers = viewer.imageryLayers._layers; const layers = viewer.imageryLayers._layers;
// 获取镇的图层 （点击镇后，再点击种植结构） // 获取镇的图层 （点击镇后，再点击种植结构）
const index = layers.findIndex( const index = layers.findIndex(item => item._imageryProvider._layers && item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town');
item =>
item._imageryProvider._layers &&
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
);
if (index > -1) { if (index > -1) {
const providerPoint = layers[index]; const providerPoint = layers[index];
// 拿取最后一个图层 // 拿取最后一个图层
@ -1374,12 +1350,13 @@ function layerClick() {
'red' 'red'
); );
// 移除以前的 // 移除以前的
removeWms(['village_CQL']); // removeWms(['village_CQL']);
// 添加新的 // 添加新的
addvillage( // 更改为根据级别添加村级矢量
`XZDM=${newData.properties.XZDM}`, // addvillage(
'village_CQL' // `XZDM=${newData.properties.XZDM}`,
); // 'village_CQL'
// );
// 隐藏pop // 隐藏pop
hiddenOverlayChart(); hiddenOverlayChart();
} else { } else {
@ -1401,15 +1378,14 @@ function layerClick() {
} }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
} }
// 种植结构 // 种植结构
async function zuowuClick(layers, cartographic, level, xy, movement) { async function zuowuClick(layers, cartographic, level, xy, movement) {
let newData = []; let newData = [];
let promise = layers.map(async item => { let promise = layers.map(async item => {
if (item._imageryProvider._layers) { if (item._imageryProvider._layers) {
// 是种植结构图层 // 是种植结构图层
if ( if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1
) {
const providerPoint = item; const providerPoint = item;
// 拿取最后一个图层 // 拿取最后一个图层
let provider = providerPoint._imageryProvider; let provider = providerPoint._imageryProvider;
@ -1595,8 +1571,9 @@ function showOverlayChart(position) {
pop.style.left = position.x + 10 + 'px'; pop.style.left = position.x + 10 + 'px';
pop.style.zIndex = 99; pop.style.zIndex = 99;
} }
//列表模式模式切换 //列表模式模式切换
const SwitchMode = () => { function SwitchMode() {
SwitchFlag.value = !SwitchFlag.value; SwitchFlag.value = !SwitchFlag.value;
const statInfo = chartModeDiv.value; // 获取图表元素 const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度 statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
@ -1777,6 +1754,7 @@ const getaArea = () => {
let arr = []; let arr = [];
let a = {}; let a = {};
getareas().then(res => { getareas().then(res => {
if (res.features) {
Township.crr = res.features; Township.crr = res.features;
data.title.forEach((item, indexs) => { data.title.forEach((item, indexs) => {
let town = res.features.map(i => { let town = res.features.map(i => {
@ -1793,6 +1771,7 @@ const getaArea = () => {
} }
}); });
}); });
}
ASdivision(); ASdivision();
// selectTab(); // selectTab();
}); });
@ -1905,7 +1884,7 @@ const selectTab = () => {
// 移除镇高亮 // 移除镇高亮
deleteEntityByName('townLine'); deleteEntityByName('townLine');
// 添加新的 // 添加新的
addvillage(`XZDM=${value.value}`, 'village_CQL'); // addvillage(`XZDM=${value.value}`, 'village_CQL');
}; };
//列表模式-年 //列表模式-年
const theTimes = () => { const theTimes = () => {
@ -2261,8 +2240,7 @@ function typesof() {
brr = item.area; brr = item.area;
} }
}); });
return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${ return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
params.color
};"></span>${params.seriesName}:${Number(brr)}亩`; };"></span>${params.seriesName}:${Number(brr)}亩`;
} }
return ''; return '';
@ -2585,7 +2563,6 @@ function farmland() {
} }
// 图表点击事件 // 图表点击事件
function ChartClick(item) { function ChartClick(item) {
console.log('item:', item);
// 移除镇边界 // 移除镇边界
removeWms(['huangdaoqu_town'], true); removeWms(['huangdaoqu_town'], true);
removeWms(['shuzisannong:huangdaoqu_town']); removeWms(['shuzisannong:huangdaoqu_town']);
@ -3294,7 +3271,6 @@ function chartModes() {
var tooltip = option.tooltip; var tooltip = option.tooltip;
// 提示框自定义内容包括总合及文字 // 提示框自定义内容包括总合及文字
function formatFun(params) { function formatFun(params) {
// console.log('params====>', params)
let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行 let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
let totalNum = 0; // 用于存储当前列总数 let totalNum = 0; // 用于存储当前列总数
// params为当前柱状图数组数量 遍历求和并添加类目label：value // params为当前柱状图数组数量 遍历求和并添加类目label：value
@ -3336,6 +3312,7 @@ $height: calc(100vh - 100px);
.centerBox { .centerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
.imgrotate { .imgrotate {
transform: rotate(180deg); transform: rotate(180deg);
} }
@ -3361,11 +3338,9 @@ $height: calc(100vh - 100px);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
background: linear-gradient( background: linear-gradient(180deg,
180deg,
rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 1) 33.33%,
rgba(41, 255, 219, 1) 100% rgba(41, 255, 219, 1) 100%);
);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -3376,11 +3351,9 @@ $height: calc(100vh - 100px);
height: 25px; height: 25px;
border-radius: 20px; border-radius: 20px;
font-size: 14px; font-size: 14px;
background: linear-gradient( background: linear-gradient(180deg,
180deg,
rgba(16, 111, 111, 1) 0%, rgba(16, 111, 111, 1) 0%,
rgba(47, 214, 214, 1) 100% rgba(47, 214, 214, 1) 100%);
);
border: 1.5px solid rgba(23, 194, 180, 1); border: 1.5px solid rgba(23, 194, 180, 1);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -3388,14 +3361,18 @@ $height: calc(100vh - 100px);
} }
} }
} }
.tabulation { .tabulation {
display: none; display: none;
padding: 20px; padding: 20px;
.tableBox { .tableBox {
padding: 0 10px; padding: 0 10px;
.tableBorder { .tableBorder {
border-radius: 8px; border-radius: 8px;
margin-bottom: 10px; margin-bottom: 10px;
.el-table--fit { .el-table--fit {
border-radius: 8px; border-radius: 8px;
border: 2px solid rgba(100, 195, 164, 0.8); border: 2px solid rgba(100, 195, 164, 0.8);
@ -3403,39 +3380,47 @@ $height: calc(100vh - 100px);
0px 1px 2px 0px rgba(100, 195, 164, 0.8); 0px 1px 2px 0px rgba(100, 195, 164, 0.8);
} }
} }
:deep(
.el-table .el-table__header-wrapper th, :deep(.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th .el-table .el-table__fixed-header-wrapper th) {
) {
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
} }
height: 90%; height: 90%;
:deep(.el-table__inner-wrapper) { :deep(.el-table__inner-wrapper) {
height: 96% !important; height: 96% !important;
} }
.example-pagination-block { .example-pagination-block {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
:deep(.tabth) { :deep(.tabth) {
background-color: rgba(247, 247, 247, 1); background-color: rgba(247, 247, 247, 1);
} }
} }
.chartMode { .chartMode {
width: 100%; width: 100%;
height: 85%; height: 85%;
.chartModeDiv { .chartModeDiv {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.searchDiv { .searchDiv {
display: flex; display: flex;
.dow { .dow {
float: right; float: right;
margin-right: 10px; margin-right: 10px;
} }
.modeDiv { .modeDiv {
width: 234px; width: 234px;
height: 26px; height: 26px;
@ -3456,11 +3441,13 @@ $height: calc(100vh - 100px);
border-radius: 8px; border-radius: 8px;
line-height: 26px; line-height: 26px;
} }
.Selected { .Selected {
background: rgba(100, 195, 164, 1); background: rgba(100, 195, 164, 1);
border-radius: 8px 0px 0px 8px; border-radius: 8px 0px 0px 8px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.Selecteds { .Selecteds {
background: rgba(100, 195, 164, 1); background: rgba(100, 195, 164, 1);
border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px;
@ -3469,6 +3456,7 @@ $height: calc(100vh - 100px);
} }
} }
} }
.leftWra { .leftWra {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -3478,6 +3466,7 @@ $height: calc(100vh - 100px);
background: rgba(2, 31, 26, 0.85); background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5); box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
transition: transform 1s; transition: transform 1s;
.leftFoldDiv { .leftFoldDiv {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -3488,6 +3477,7 @@ $height: calc(100vh - 100px);
font-size: 30px; font-size: 30px;
color: #ccc; color: #ccc;
} }
.leftTop { .leftTop {
height: 40%; height: 40%;
max-width: 100%; max-width: 100%;
@ -3521,6 +3511,7 @@ $height: calc(100vh - 100px);
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.tableDiv { .tableDiv {
// background: rgba(255, 255, 255, 0.05); // background: rgba(255, 255, 255, 0.05);
width: 100%; width: 100%;
@ -3528,24 +3519,30 @@ $height: calc(100vh - 100px);
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
height: 20%; height: 20%;
overflow: hidden; overflow: hidden;
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
:deep(.el-table tr) { :deep(.el-table tr) {
background-color: transparent; background-color: transparent;
} }
:deep(.el-table) { :deep(.el-table) {
--el-table-border-color: none; --el-table-border-color: none;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) { :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
background-color: revert; background-color: revert;
} }
div { div {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.Crops { .Crops {
display: flex; display: flex;
width: 100%; width: 100%;
@ -3557,11 +3554,9 @@ $height: calc(100vh - 100px);
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
opacity: 1; opacity: 1;
background: linear-gradient( background: linear-gradient(90deg,
90deg,
rgba(21, 173, 148, 0.1) 0%, rgba(21, 173, 148, 0.1) 0%,
rgba(21, 173, 148, 0) 100% rgba(21, 173, 148, 0) 100%);
);
div { div {
display: flex; display: flex;
@ -3606,6 +3601,7 @@ $height: calc(100vh - 100px);
background: rgba(2, 31, 26, 0.85); background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5); box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
transition: transform 1s; transition: transform 1s;
.rightFoldDiv { .rightFoldDiv {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -3616,6 +3612,7 @@ $height: calc(100vh - 100px);
font-size: 30px; font-size: 30px;
color: #ccc; color: #ccc;
} }
.rightTop { .rightTop {
width: 100%; width: 100%;
height: 40%; height: 40%;
@ -3785,6 +3782,7 @@ $height: calc(100vh - 100px);
align-items: flex-start; align-items: flex-start;
display: none; display: none;
} }
#pop { #pop {
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
@ -3879,6 +3877,7 @@ $height: calc(100vh - 100px);
background: rgba(41, 255, 255, 0.7) !important; background: rgba(41, 255, 255, 0.7) !important;
display: none; display: none;
} }
.selectCity { .selectCity {
background: #fff; background: #fff;
} }

1
src/views/crops/classify/town.json Normal file
View File

File diff suppressed because one or more lines are too long

87
yarn-error.log Normal file
View File

@ -0,0 +1,87 @@
Arguments:
C:\Program Files\nodejs\node.exe D:\Program Files (x86)\Yarn\bin\yarn.js install
PATH:
D:\Python27\;D:\Python27\Scripts;C:\Program Files\Eclipse Adoptium\jdk-17.0.5.8-hotspot\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;%NVM_HOME%;%NVM_SYMLINK%;D:\Program Files\Git\cmd;C:\Program Files\Docker\Docker\resources\bin;D:\Program Files (x86)\Tencent\微信web开发者工具\dll;D:\Program Files (x86)\Yarn\bin\;D:\xshell\xftp\;D:\xshell\xshell\;C:\Users\HP\AppData\Local\Microsoft\WindowsApps;C:\Users\HP\AppData\Roaming\nvm;C:\Program Files\nodejs;D:\Program Files\Microsoft VS Code\bin;D:\Program Files\JetBrains\IntelliJ IDEA 2022.2\bin;;C:\Users\HP\AppData\Local\Yarn\bin;
Yarn version:
1.22.4
Node version:
14.20.0
Platform:
win32 x64
Trace:
SyntaxError: C:\Users\HP\AppData\Local\Yarn\Cache\v6\npm-@turf-center-mean-6.5.0-2dc329c003f8012ba9ae7812a61b5647e1ae86a2-integrity\node_modules\@turf\center-mean\.yarn-metadata.json: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at D:\Program Files (x86)\Yarn\lib\cli.js:1625:59
at Generator.next (<anonymous>)
at step (D:\Program Files (x86)\Yarn\lib\cli.js:310:30)
at D:\Program Files (x86)\Yarn\lib\cli.js:321:13
npm manifest:
{
"name": "ruoyi",
"version": "3.8.4",
"description": "若依管理系统",
"author": "若依",
"license": "MIT",
"scripts": {
"dev": "vite",
"start": "vite",
"build:prod": "vite build",
"build:stage": "vite build --mode staging",
"preview": "vite preview"
},
"repository": {
"type": "git",
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
},
"dependencies": {
"@element-plus/icons-vue": "2.0.10",
"@fit-screen/vue": "^0.2.0",
"@turf/turf": "^6.5.0",
"@vueuse/core": "9.5.0",
"axios": "0.27.2",
"echarts": "^5.3.0",
"echarts-gl": "^2.0.9",
"element-plus": "2.2.21",
"file-saver": "2.0.5",
"fuse.js": "6.6.2",
"jquery": "^3.6.4",
"js-cookie": "3.0.1",
"jsencrypt": "3.3.1",
"lib-flexible": "^0.3.2",
"moment": "^2.29.4",
"nprogress": "0.2.0",
"pinia": "2.0.22",
"postcss-px2rem": "^0.3.0",
"v-scale-screen": "^2.2.0",
"vue": "3.2.45",
"vue-cropper": "1.0.3",
"vue-json-excel": "^0.3.0",
"vue-router": "4.1.4",
"vue-video-player": "^6.0.0",
"vue3-image-preview": "^0.2.6",
"vue3-video-play": "^1.3.1-beta.6",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "3.1.0",
"@vue/compiler-sfc": "3.2.45",
"sass": "1.56.1",
"unplugin-auto-import": "0.11.4",
"vite": "3.2.3",
"vite-plugin-compression": "0.5.1",
"vite-plugin-svg-icons": "2.0.1",
"vite-plugin-vue-setup-extend": "0.4.0"
}
}
yarn manifest:
No manifest
Lockfile:
No lockfile