up
This commit is contained in:
33
src/api/crops/maize.js
Normal file
33
src/api/crops/maize.js
Normal file
@ -0,0 +1,33 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getcornTotalYearValue(query) { //作物产量预估
|
||||
return request({
|
||||
url: 'equipment/cornTotalYearValue',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getcornHeightStandardFarmland(query) { //作物产量预估高标准农田
|
||||
return request({
|
||||
url: 'equipment/cornHeightStandardFarmland',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getcornGetAllTowns(query) { //作物产量预估行政区划---镇
|
||||
return request({
|
||||
url: 'equipment/cornGetAllTowns',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getcornGetAllVillages(query) { //作物产量预估行政区划---街道
|
||||
return request({
|
||||
url: 'equipment/cornGetAllVillages',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
33
src/api/crops/peanut.js
Normal file
33
src/api/crops/peanut.js
Normal file
@ -0,0 +1,33 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getpeanutTotalYearValue(query) { //作物产量预估
|
||||
return request({
|
||||
url: 'equipment/peanutTotalYearValue',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getpeanutHeightStandardFarmland(query) { //作物产量预估高标准农田
|
||||
return request({
|
||||
url: 'equipment/peanutHeightStandardFarmland',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getpeanutGetAllTowns(query) { //作物产量预估行政区划---镇
|
||||
return request({
|
||||
url: 'equipment/peanutGetAllTowns',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getpeanutGetAllVillages(query) { //作物产量预估行政区划---街道
|
||||
return request({
|
||||
url: 'equipment/peanutGetAllVillages',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@ -43,4 +43,20 @@ export function getgarrison() {//镇的地图服务
|
||||
url: 'http://139.199.98.175:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function getgrowthTime(query) { //年
|
||||
return request({
|
||||
url: 'crops/growthTime',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getgrowthList(query) { //列表模式
|
||||
return request({
|
||||
url: 'crops/growthList',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
33
src/api/crops/soybean.js
Normal file
33
src/api/crops/soybean.js
Normal file
@ -0,0 +1,33 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getsoybeanTotalYearValue(query) { //作物产量预估
|
||||
return request({
|
||||
url: 'equipment/soybeanTotalYearValue',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getsoybeanHeightStandardFarmland(query) { //作物产量预估高标准农田
|
||||
return request({
|
||||
url: 'equipment/soybeanHeightStandardFarmland',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getsoybeanGetAllTowns(query) { //作物产量预估行政区划---镇
|
||||
return request({
|
||||
url: 'equipment/soybeanGetAllTowns',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getsoybeanGetAllVillages(query) { //作物产量预估行政区划---街道
|
||||
return request({
|
||||
url: 'equipment/soybeanGetAllVillages',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
50
src/api/crops/wheat.js
Normal file
50
src/api/crops/wheat.js
Normal file
@ -0,0 +1,50 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getwheatTotalYearValue(query) { //作物产量预估
|
||||
return request({
|
||||
url: 'equipment/wheatTotalYearValue',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getwheatHeightStandardFarmland(query) { //作物产量预估高标准农田
|
||||
return request({
|
||||
url: 'equipment/wheatHeightStandardFarmland',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getwheatGetAllTowns(query) { //作物产量预估行政区划---镇
|
||||
return request({
|
||||
url: 'equipment/wheatGetAllTowns',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getwheatGetAllVillages(query) { //作物产量预估行政区划---街道
|
||||
return request({
|
||||
url: 'equipment/wheatGetAllVillages',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getparameterEstimationYear(query) { //列表模式年
|
||||
return request({
|
||||
url: 'equipment/parameterEstimationYear',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getparameterEstimation(query) { //列表模式搜索
|
||||
return request({
|
||||
url: 'equipment/parameterEstimation',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@ -52,7 +52,7 @@ export function getlistDroughtsYear() {//获取年
|
||||
})
|
||||
}
|
||||
|
||||
export function getlistDroughts(query) {//列表模式默认数据
|
||||
export function getlistDroughts(query) {//列表模式获取数据
|
||||
return request({
|
||||
url: 'equipment/listDroughts',
|
||||
method: 'get',
|
||||
|
||||
1
src/components/tiandituapi/tianditu_api.js
Normal file
1
src/components/tiandituapi/tianditu_api.js
Normal file
File diff suppressed because one or more lines are too long
@ -50,5 +50,6 @@ const tagsViewStore = useTagsViewStore();
|
||||
.fixed-header {
|
||||
padding-right: 17px;
|
||||
}
|
||||
width:100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
<!-- <header-search id="header-search" class="right-menu-item" /> -->
|
||||
|
||||
<el-button class="mode" @click="tabMode">
|
||||
{{ flag ? '列表模式' : '地图模式' }}
|
||||
列表模式
|
||||
</el-button>
|
||||
<screenfull v-if="flag" id="screenfull" class="right-menu-item hover-effect" />
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
@ -60,6 +60,11 @@ import useAppStore from '@/store/modules/app';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import Logo from '@/layout/components/Sidebar/Logo.vue';
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
|
||||
const appStore = useAppStore();
|
||||
const userStore = useUserStore();
|
||||
@ -104,13 +109,23 @@ function setLayout() {
|
||||
}
|
||||
|
||||
const tabMode = () => {
|
||||
flag.value = !flag.value;
|
||||
if( document.querySelector('.mode').innerText=='地图模式'){
|
||||
flag.value = true;
|
||||
localStorage.setItem(router.currentRoute.value.path,true);
|
||||
}else{
|
||||
flag.value = false;
|
||||
localStorage.setItem(router.currentRoute.value.path,false);
|
||||
}
|
||||
if (!flag.value) {
|
||||
window.document.querySelector('.centerBox').style.display = 'none';
|
||||
window.document.querySelector('.tabulation').style.display = 'block';
|
||||
document.querySelector('.mode').innerText='地图模式'
|
||||
window.document.querySelector('#screenfull').style.display = 'none';
|
||||
} else {
|
||||
window.document.querySelector('.tabulation').style.display = 'none';
|
||||
window.document.querySelector('.centerBox').style.display = 'block';
|
||||
document.querySelector('.mode').innerText='列表模式'
|
||||
window.document.querySelector('#screenfull').style.display = 'block';
|
||||
}
|
||||
|
||||
console.log();
|
||||
|
||||
@ -79,6 +79,7 @@ app.component('svg-icon', SvgIcon)
|
||||
app.use(FitScreen)
|
||||
app.use(vue3videoPlay);
|
||||
|
||||
|
||||
directive(app)
|
||||
|
||||
// 使用element-plus 并且设置全局的大小
|
||||
|
||||
@ -193,7 +193,7 @@
|
||||
</div>
|
||||
<div class="rowWra">
|
||||
<span>面积：</span>
|
||||
<span>{{ item.Shape_Area }} 亩</span>
|
||||
<span>{{ item.Shape_Area.toFixed(2) }} 亩</span>
|
||||
</div>
|
||||
<div class="rowWra">
|
||||
<span>镇名：</span>
|
||||
@ -373,7 +373,9 @@ import axios from 'axios';
|
||||
import * as xlsx from 'xlsx'; // Vue3 版本
|
||||
import { ElMessage } from 'element-plus';
|
||||
import townJson from './town.json';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
let viewer = ref(null);
|
||||
const areaDiv = ref(null);
|
||||
const typesofDiv = ref(null);
|
||||
@ -861,15 +863,15 @@ let dd = {
|
||||
其他: [],
|
||||
};
|
||||
let dic = {
|
||||
小麦: { color: 'rgba(255, 141, 26, 1)', disabled: false },
|
||||
玉米: { color: 'rgba(255, 255, 26, 1)', disabled: true },
|
||||
大豆: { color: 'rgba(255, 201, 148, 1)', disabled: false },
|
||||
地瓜: { color: 'rgba(255, 84, 84, 1)', disabled: false },
|
||||
小麦: { color: 'rgba(25, 196, 22, 1)', disabled: false },
|
||||
玉米: { color: 'rgba(255, 240, 26, 1)', disabled: true },
|
||||
大豆: { color: 'rgba(255, 184, 148, 1)', disabled: false },
|
||||
地瓜: { color: 'rgba(255, 77, 77, 1)', disabled: false },
|
||||
花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
|
||||
蓝莓: { color: 'rgba(26, 255, 255, 1)', disabled: false },
|
||||
茶叶: { color: 'rgba(26, 255, 140, 1)', disabled: false },
|
||||
蓝莓: { color: 'rgba(26, 110, 255, 1)', disabled: false },
|
||||
茶叶: { color: 'rgba(0, 209, 195, 1)', disabled: false },
|
||||
马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
|
||||
白菜和萝卜: { color: 'rgba(140, 255, 26, 1)', disabled: true },
|
||||
白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: true },
|
||||
其他: { color: 'rgba(140, 26, 255, 1)', disabled: false },
|
||||
};
|
||||
// 图层字典
|
||||
@ -900,7 +902,7 @@ let dictionaryArr = [
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
color: 'rgba(255, 141, 26, 1)',
|
||||
color: 'rgba(25, 196, 22, 1)',
|
||||
},
|
||||
area: '',
|
||||
},
|
||||
@ -909,7 +911,7 @@ let dictionaryArr = [
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
color: 'rgba(255, 255, 26, 1)',
|
||||
color: 'rgba(255, 240, 26, 1)',
|
||||
},
|
||||
area: '',
|
||||
},
|
||||
@ -937,7 +939,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(255, 201, 148, 1)',
|
||||
color: 'rgba(255, 184, 148, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -952,7 +954,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(255, 84, 84, 1)',
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -967,7 +969,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(26, 255, 255, 1)',
|
||||
color: 'rgba(26, 110, 255, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -982,7 +984,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(26, 255, 140, 1)',
|
||||
color: 'rgba(0, 209, 195, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -1012,7 +1014,7 @@ let dictionaryArr = [
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(140, 255, 26, 1)',
|
||||
color: 'rgba(201, 255, 148, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
@ -1081,7 +1083,16 @@ function initonMounted() {
|
||||
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
localStorage.setItem(router.currentRoute.value.path, true);
|
||||
}
|
||||
onUpdated(() => {
|
||||
console.log(localStorage.getItem(router.currentRoute.value.path));
|
||||
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
|
||||
document.querySelector('.mode').innerText = '地图模式';
|
||||
} else {
|
||||
document.querySelector('.mode').innerText = '列表模式';
|
||||
}
|
||||
});
|
||||
const mapOption = {
|
||||
url:
|
||||
'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
|
||||
@ -1798,6 +1809,18 @@ function rightFoldClick() {
|
||||
//接口
|
||||
//镇
|
||||
const getTownships = city => {
|
||||
dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
大豆: [],
|
||||
地瓜: [],
|
||||
花生: [],
|
||||
蓝莓: [],
|
||||
茶叶: [],
|
||||
马铃薯: [],
|
||||
白菜和萝卜: [],
|
||||
其他: [],
|
||||
};
|
||||
getTownship({ divisions: city }).then(res => {
|
||||
res.data.forEach((item, i) => {
|
||||
for (let index = 0; index < Object.values(item).length; index++) {
|
||||
@ -1860,6 +1883,18 @@ const getTownships = city => {
|
||||
};
|
||||
//村
|
||||
const getvillages = city => {
|
||||
dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
大豆: [],
|
||||
地瓜: [],
|
||||
花生: [],
|
||||
蓝莓: [],
|
||||
茶叶: [],
|
||||
马铃薯: [],
|
||||
白菜和萝卜: [],
|
||||
其他: [],
|
||||
};
|
||||
getvillage({ divisions: city }).then(res => {
|
||||
Township.brr = res.data;
|
||||
let arr = [...res.data];
|
||||
@ -1878,7 +1913,7 @@ const getvillages = city => {
|
||||
}
|
||||
});
|
||||
Object.keys(dd).forEach(it => {
|
||||
const index = town.findIndex(a => a && a.type === it);
|
||||
const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
|
||||
if (index > -1) {
|
||||
dd[it].push(1);
|
||||
} else {
|
||||
@ -2595,10 +2630,8 @@ function farmland() {
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
// 自定义悬浮文字的格式，params.value 为当前柱状图的数值
|
||||
console.log(params);
|
||||
let a = 0;
|
||||
highStandardArr.value.forEach(item => {
|
||||
console.log(item);
|
||||
if (item.name == params.seriesName && item.region == params.name) {
|
||||
a = item.area;
|
||||
}
|
||||
@ -2665,11 +2698,11 @@ function farmland() {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 141, 26, 1)',
|
||||
color: 'rgba(25, 196, 22, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 141, 26, 1)',
|
||||
color: 'rgba(25, 196, 22, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
@ -2687,11 +2720,11 @@ function farmland() {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 201, 148, 1)',
|
||||
color: 'rgba(255, 184, 148, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 201, 148, 1)',
|
||||
color: 'rgba(255, 184, 148, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
@ -2709,11 +2742,11 @@ function farmland() {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(26, 255, 140, 1)',
|
||||
color: 'rgba(0, 209, 195, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(26, 255, 140, 1)',
|
||||
color: 'rgba(0, 209, 195, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
@ -2949,16 +2982,16 @@ function ASdivision() {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(26, 255, 140, 1)', // 设置边框颜色
|
||||
borderColor: 'rgba(0, 209, 195, 1)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(26, 255, 140, 1)', // 0% 处的颜色
|
||||
color: 'rgba(0, 209, 195, 1)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(26, 255, 140, 1)', // 100% 处的颜色
|
||||
color: 'rgba(0, 209, 195, 1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -2987,16 +3020,16 @@ function ASdivision() {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(255, 84, 84, 1)', // 设置边框颜色
|
||||
borderColor: 'rgba(255, 77, 77, 1)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 84, 84, 1)', // 0% 处的颜色
|
||||
color: 'rgba(255, 77, 77, 1)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 84, 84, 1)', // 100% 处的颜色
|
||||
color: 'rgba(255, 77, 77, 1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -3024,16 +3057,16 @@ function ASdivision() {
|
||||
itemStyle: {
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(255, 201, 148, 1)', // 设置边框颜色
|
||||
borderColor: 'rgba(255, 184, 148, 1)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 201, 148, 1)', // 0% 处的颜色
|
||||
color: 'rgba(255, 184, 148, 1)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 201, 148, 1)', // 100% 处的颜色
|
||||
color: 'rgba(255, 184, 148, 1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -3100,16 +3133,16 @@ function ASdivision() {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(255, 141, 26, 1)', // 设置边框颜色
|
||||
borderColor: 'rgba(25, 196, 22, 1)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 141, 26, 1)', // 0% 处的颜色
|
||||
color: 'rgba(25, 196, 22, 1)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 141, 26, 1)', // 100% 处的颜色
|
||||
color: 'rgba(25, 196, 22, 1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -3138,16 +3171,16 @@ function ASdivision() {
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
barBorderRadius: [0, 0, 0, 0], //
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: 'rgba(26, 255, 255, 1)', // 设置边框颜色
|
||||
borderColor: 'rgba(26, 110, 255, 1)', // 设置边框颜色
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(26, 255, 255, 1)', // 0% 处的颜色
|
||||
color: 'rgba(26, 110, 255, 1)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(26, 255, 255, 1)', // 100% 处的颜色
|
||||
color: 'rgba(26, 110, 255, 1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -3225,6 +3258,7 @@ function chartModes() {
|
||||
item.白菜和萝卜 !== undefined && Cabbage.push(item.白菜和萝卜);
|
||||
item.其他 !== undefined && Other.push(item.其他);
|
||||
});
|
||||
let ends = (10 / arr.length) * 100;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -3250,19 +3284,45 @@ function chartModes() {
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
width: '40%',
|
||||
top: '90%',
|
||||
start: 0,
|
||||
end: ends,
|
||||
showDataShadow: false,
|
||||
showDetail: false,
|
||||
fillerColor: 'rgba(64, 158, 255)',
|
||||
borderRadius: '50%',
|
||||
moveHandleSize: 0,
|
||||
moveHandleStyle: {},
|
||||
left: '30%',
|
||||
height: 12,
|
||||
handleSize: '80%',
|
||||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||||
handleStyle: {
|
||||
borderWidth: 0,
|
||||
color: 'rgba(64, 158, 255)',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
top: 10,
|
||||
left: 10,
|
||||
icon: 'rect',
|
||||
itemWidth: 4, // 图例图表宽度
|
||||
itemHeight: 12, // 图例图标高度
|
||||
data: ['餐费', '打车费', '零食', '日用品'],
|
||||
data: [],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '13%',
|
||||
bottom: '8%',
|
||||
top: '15%',
|
||||
bottom: '15%',
|
||||
top: '10%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
@ -3271,7 +3331,7 @@ function chartModes() {
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
rotate: 40,
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
@ -3309,7 +3369,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 141, 26, 1)',
|
||||
color: 'rgba(25, 196, 22, 1)',
|
||||
},
|
||||
data: WheatArr,
|
||||
},
|
||||
@ -3319,7 +3379,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 255, 26, 1)',
|
||||
color: 'rgba(255, 240, 26, 1)',
|
||||
},
|
||||
data: CornArr,
|
||||
},
|
||||
@ -3329,7 +3389,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 201, 148, 1)',
|
||||
color: 'rgba(255, 184, 148, 1)',
|
||||
},
|
||||
data: Soybean,
|
||||
},
|
||||
@ -3339,7 +3399,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 84, 84, 1)',
|
||||
color: 'rgba(255, 77, 77, 1)',
|
||||
},
|
||||
data: SweetPotato,
|
||||
},
|
||||
@ -3359,7 +3419,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(26, 255, 255, 1)',
|
||||
color: 'rgba(26, 110, 255, 1)',
|
||||
},
|
||||
data: Blueberries,
|
||||
},
|
||||
@ -3369,7 +3429,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(26, 255, 140, 1)',
|
||||
color: 'rgba(0, 209, 195, 1)',
|
||||
},
|
||||
data: Tea,
|
||||
},
|
||||
@ -3389,7 +3449,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(140, 255, 26, 1)',
|
||||
color: 'rgba(201, 255, 148, 1)',
|
||||
},
|
||||
data: Cabbage,
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -34,7 +34,7 @@
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="tableData"
|
||||
style="width: 100%;"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="yesFlooding" label="面积" />
|
||||
@ -91,7 +91,7 @@
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="highStandardArr"
|
||||
style="width: 100%;font-size: 12px;"
|
||||
style="width: 100%; font-size: 12px"
|
||||
>
|
||||
<el-table-column prop="region" label="区域名称" />
|
||||
<el-table-column
|
||||
@ -133,7 +133,7 @@
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="ZoningData"
|
||||
style="width: 100%;font-size: 12px;"
|
||||
style="width: 100%; font-size: 12px"
|
||||
>
|
||||
<el-table-column prop="name" label="区域名称" />
|
||||
<el-table-column
|
||||
@ -321,7 +321,9 @@ import axios from 'axios';
|
||||
import 'echarts-gl';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import * as xlsx from 'xlsx'; // Vue3 版本
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
let viewer = ref(null);
|
||||
const areaDiv = ref(null);
|
||||
const typesofDiv = ref(null);
|
||||
@ -433,6 +435,9 @@ let TypeTime = {
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
initonMounted()
|
||||
});
|
||||
function initonMounted(){
|
||||
getydamageAreas('370211'); //农作物受灾面积统计
|
||||
getproportions('370211'); //农作物受灾面积占比
|
||||
gethighStandards(); //高标准农田冷冻等级面积统计
|
||||
@ -453,6 +458,14 @@ onMounted(() => {
|
||||
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
}
|
||||
onUpdated(() => {
|
||||
console.log(localStorage.getItem(router.currentRoute.value.path));
|
||||
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
|
||||
document.querySelector('.mode').innerText = '地图模式';
|
||||
} else {
|
||||
document.querySelector('.mode').innerText = '列表模式';
|
||||
}
|
||||
});
|
||||
|
||||
/*-------------地图------------------------*/
|
||||
@ -1455,6 +1468,7 @@ function areachar() {
|
||||
top: '5%',
|
||||
data: ['面积'],
|
||||
right: '5%',
|
||||
bottom:5,
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
fontSize: 14, //字体大小
|
||||
@ -1708,7 +1722,7 @@ function chartModes() {
|
||||
arr.push(item.region);
|
||||
item.洪涝 !== undefined ? 洪涝.push(item.洪涝) : 洪涝.push(0);
|
||||
});
|
||||
|
||||
let ends = (10 / arr.length) * 100;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -1740,38 +1754,32 @@ function chartModes() {
|
||||
icon: 'rect',
|
||||
itemWidth: 4, // 图例图表宽度
|
||||
itemHeight: 12, // 图例图标高度
|
||||
data: ['餐费', '打车费', '零食', '日用品'],
|
||||
data: [],
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
// start: 0,//默认为0
|
||||
// end: 100,//默认为100
|
||||
type: 'slider',
|
||||
show: false,
|
||||
// xAxisIndex: [0],
|
||||
handleSize: 0, //滑动条的 左右2个滑动条的大小
|
||||
startValue: 0, // 初始显示值
|
||||
endValue: 6, // 结束显示值
|
||||
height: 10, //组件高度
|
||||
left: '5%', //左边的距离
|
||||
right: '4%', //右边的距离
|
||||
bottom: 5, //底边的距离
|
||||
borderColor: '#000',
|
||||
fillerColor: '#269cdb',
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
|
||||
showDataShadow: false, //是否显示数据阴影 默认auto
|
||||
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
||||
realtime: true, //是否实时更新
|
||||
filterMode: 'filter',
|
||||
width: '40%',
|
||||
top: '90%',
|
||||
start: 0,
|
||||
end: ends,
|
||||
showDataShadow: false,
|
||||
showDetail: false,
|
||||
fillerColor: 'rgba(64, 158, 255)',
|
||||
borderRadius: '50%',
|
||||
moveHandleSize: 0,
|
||||
moveHandleStyle: {},
|
||||
left: '30%',
|
||||
height: 12,
|
||||
handleSize: '80%',
|
||||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||||
handleStyle: {
|
||||
borderWidth: 0,
|
||||
color: 'rgba(64, 158, 255)',
|
||||
},
|
||||
},
|
||||
//下面这个属性是里面拖到
|
||||
{
|
||||
type: 'inside',
|
||||
show: true,
|
||||
// xAxisIndex: [0],
|
||||
start: 1, //默认为1
|
||||
end: 100, //默认为100
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
@ -2238,7 +2246,7 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
.searchDiv {
|
||||
display: flex;
|
||||
:deep(.el-input__wrapper){
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100px;
|
||||
}
|
||||
.dow {
|
||||
@ -2303,7 +2311,7 @@ $height: calc(100vh - 100px);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 40%;
|
||||
height: 38%;
|
||||
.areaDiv {
|
||||
width: 100%;
|
||||
height: 327px;
|
||||
|
||||
@ -367,7 +367,9 @@ import axios from 'axios';
|
||||
import 'echarts-gl';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import * as xlsx from 'xlsx'; // Vue3 版本
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
let viewer = ref(null);
|
||||
const areaDiv = ref(null);
|
||||
const typesofDiv = ref(null);
|
||||
@ -437,12 +439,6 @@ let dic = {
|
||||
中度干旱: { color: 'rgba(205, 92, 92, 1)', disabled: false },
|
||||
重度干旱: { color: 'red', disabled: false },
|
||||
};
|
||||
watch(
|
||||
() => Township.arr,
|
||||
val => {
|
||||
console.log('val:', val);
|
||||
}
|
||||
);
|
||||
//行政区划数据
|
||||
var data = {
|
||||
title: [],
|
||||
@ -468,6 +464,10 @@ let layersDic = {
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
initonMounted()
|
||||
});
|
||||
|
||||
function initonMounted() {
|
||||
getareaStatisticsDroughts('370211'); //干旱等级面积统计
|
||||
getproportionOfAreas('370211'); //干旱等级面积占比
|
||||
geteachFreezingGradeAreas(); //高标准农田干旱等级面积占比
|
||||
@ -492,7 +492,9 @@ onMounted(() => {
|
||||
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
});
|
||||
localStorage.setItem(router.currentRoute.value.path, true);
|
||||
}
|
||||
|
||||
|
||||
/*-------------地图------------------------*/
|
||||
const mapOption = {
|
||||
@ -1117,9 +1119,6 @@ const onSubmit = () => {
|
||||
droughtRating: formInline.value.droughtRating,
|
||||
area: formInline.value.area,
|
||||
}).then(res => {
|
||||
console.log(res.data);
|
||||
let data = [];
|
||||
let newData = [];
|
||||
tableItem.value = [
|
||||
{
|
||||
lable: '',
|
||||
@ -2690,11 +2689,12 @@ function chartModes() {
|
||||
console.log(item.重度干旱);
|
||||
arr.push(item.region);
|
||||
item.湿润 !== undefined ? 湿润.push(item.湿润) : 湿润.push(0);
|
||||
item.适宜 !== undefined ? 适宜.push(item.适宜) : 适宜.psuh(0);
|
||||
item.适宜 !== undefined ? 适宜.push(item.适宜) : 适宜.push(0);
|
||||
item.轻度干旱 !== undefined ? 轻度干旱.push(item.轻度干旱) : 轻度干旱.push(0);
|
||||
item.中度干旱 !== undefined ? 中度干旱.push(item.中度干旱) : 中度干旱.push(0);
|
||||
item.重度干旱 !== undefined ? 重度干旱.push(item.重度干旱) : 重度干旱.push(0);
|
||||
});
|
||||
let ends = (10 / arr.length) * 100;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -2726,38 +2726,32 @@ function chartModes() {
|
||||
icon: 'rect',
|
||||
itemWidth: 4, // 图例图表宽度
|
||||
itemHeight: 12, // 图例图标高度
|
||||
data: ['餐费', '打车费', '零食', '日用品'],
|
||||
data: [],
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
// start: 0,//默认为0
|
||||
// end: 100,//默认为100
|
||||
type: 'slider',
|
||||
show: false,
|
||||
// xAxisIndex: [0],
|
||||
handleSize: 0, //滑动条的 左右2个滑动条的大小
|
||||
startValue: 0, // 初始显示值
|
||||
endValue: 6, // 结束显示值
|
||||
height: 10, //组件高度
|
||||
left: '5%', //左边的距离
|
||||
right: '4%', //右边的距离
|
||||
bottom: 5, //底边的距离
|
||||
borderColor: '#000',
|
||||
fillerColor: '#269cdb',
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
|
||||
showDataShadow: false, //是否显示数据阴影 默认auto
|
||||
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
||||
realtime: true, //是否实时更新
|
||||
filterMode: 'filter',
|
||||
width: '40%',
|
||||
top: '90%',
|
||||
start: 0,
|
||||
end: ends,
|
||||
showDataShadow: false,
|
||||
showDetail: false,
|
||||
fillerColor: 'rgba(64, 158, 255)',
|
||||
borderRadius: '50%',
|
||||
moveHandleSize: 0,
|
||||
moveHandleStyle: {},
|
||||
left: '30%',
|
||||
height: 12,
|
||||
handleSize: '80%',
|
||||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||||
handleStyle: {
|
||||
borderWidth: 0,
|
||||
color: 'rgba(64, 158, 255)',
|
||||
},
|
||||
},
|
||||
//下面这个属性是里面拖到
|
||||
{
|
||||
type: 'inside',
|
||||
show: true,
|
||||
// xAxisIndex: [0],
|
||||
start: 1, //默认为1
|
||||
end: 100, //默认为100
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
@ -2773,7 +2767,7 @@ function chartModes() {
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
rotate: 40,
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
|
||||
@ -107,9 +107,8 @@
|
||||
<el-table-column prop="tyName" label="台风名称" />
|
||||
<el-table-column prop="weizhi" label="位置">
|
||||
<template #default="scope">
|
||||
<span
|
||||
>
|
||||
{{`${scope.row.longitude}°E/${scope.row.latitude}°N` }}
|
||||
<span>
|
||||
{{ `${scope.row.longitude}°E/${scope.row.latitude}°N` }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -269,33 +268,7 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<el-dialog
|
||||
destroy-on-close
|
||||
v-model="centerDialog"
|
||||
title="台风灾害预测信息"
|
||||
width="30%"
|
||||
center
|
||||
>
|
||||
<el-table
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="taifenData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="date1" label="行政区划" />
|
||||
<el-table-column prop="date2" label="预计受影响人口(单位：人)" />
|
||||
<el-table-column prop="date3" label="预计经济损失(单位：万元)" />
|
||||
<el-table-column prop="date4" label="预计受灾面积(单位：公顷)" />
|
||||
<el-table-column prop="date5" label="预计成灾面积(单位：公顷)" />
|
||||
</el-table>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="SaveResults()">保存预测结果</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
||||
<div class="detailsDiv">
|
||||
<el-dialog
|
||||
@ -321,7 +294,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<span>位置</span>
|
||||
<p>{{`${detailsArr.longitude}°E/${detailsArr.latitude}°N`}}</p>
|
||||
<p>{{ `${detailsArr.longitude}°E/${detailsArr.latitude}°N` }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>预计受影响人口（单位：人）</span>
|
||||
@ -340,6 +313,11 @@
|
||||
<p></p>
|
||||
</div> -->
|
||||
</div>
|
||||
<template #footer>
|
||||
<span v-if="butFlag" class="dialog-footer">
|
||||
<el-button type="primary" @click="SaveResults()">保存预测结果</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
@ -393,6 +371,7 @@ let typhoonName = ref('');
|
||||
let typhoonTime = ref([]);
|
||||
const taifenData = ref([{ date1: '黄岛区', date2: '', date3: '', date4: '', date5: '' }]);
|
||||
const SaveResultsDiv = ref([]);
|
||||
let butFlag = ref(false);
|
||||
const ruleForm = ref({
|
||||
lng: '', //台风点经度
|
||||
lat: '', //台风点纬度
|
||||
@ -961,8 +940,8 @@ function deleteEntityByName(name) {
|
||||
}
|
||||
const details = e => {
|
||||
detailsVisible.value = true;
|
||||
butFlag.value = false;
|
||||
detailsArr.value = e;
|
||||
console.log(e);
|
||||
};
|
||||
|
||||
//折叠
|
||||
@ -990,11 +969,9 @@ function rightFoldClick() {
|
||||
//
|
||||
const submitClick = () => {
|
||||
submitForm(ruleFormRef);
|
||||
// centerDialogVisible.value = false;
|
||||
// centerDialog.value = true;
|
||||
// console.log(ruleForm);
|
||||
};
|
||||
const submitForm = async formEl => {
|
||||
butFlag.value = true;
|
||||
if (ruleForm.value.duration.length < 1) {
|
||||
ElMessage.error('请输入过境时间');
|
||||
return;
|
||||
@ -1018,30 +995,34 @@ const submitForm = async formEl => {
|
||||
nextTick(() => {
|
||||
loadingInstance.close();
|
||||
});
|
||||
taifenData.value[0].date2 = res.data[0];
|
||||
taifenData.value[0].date3 = res.data[1];
|
||||
taifenData.value[0].date4 = res.data[2];
|
||||
taifenData.value[0].date5 = res.data[3];
|
||||
centerDialog.value = true;
|
||||
detailsVisible.value = true;
|
||||
let obj = {
|
||||
tyName: typhoonName.value,
|
||||
longitude: ruleForm.value.lng,
|
||||
latitude: ruleForm.value.lat,
|
||||
affectedPopulation: res.data[0],
|
||||
economicLosses: res.data[1],
|
||||
disasterArea: res.data[2],
|
||||
affectedArea: res.data[3],
|
||||
};
|
||||
detailsArr.value = obj;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const SaveResults = () => {
|
||||
centerDialog.value = false;
|
||||
let time = new Date();
|
||||
detailsVisible.value = false;
|
||||
gettyphoonDamageSave({
|
||||
tyName: typhoonName.value,
|
||||
longitude: ruleForm.value.lng,
|
||||
latitude: ruleForm.value.lat,
|
||||
weizhi:`${ruleForm.value.lng}°E/${ruleForm.value.lat}°N`,
|
||||
radius7: ruleForm.value.radius7,
|
||||
qxdm: '370211',
|
||||
createdTime: moment(new Date()).add('year', 0).format('YYYY-MM-DD '),
|
||||
affectedPopulation: taifenData.value[0].date2,
|
||||
affectedArea: taifenData.value[0].date4,
|
||||
economicLosses: taifenData.value[0].date3,
|
||||
disasterArea: taifenData.value[0].date5,
|
||||
affectedPopulation: detailsArr.value.affectedPopulation,
|
||||
affectedArea: detailsArr.value.affectedArea,
|
||||
economicLosses: detailsArr.value.economicLosses,
|
||||
disasterArea: detailsArr.value.disasterArea,
|
||||
}).then(res => {
|
||||
console.log(res.data);
|
||||
ElMessage({
|
||||
@ -2100,7 +2081,6 @@ const gettyphoonDamageSelects = () => {
|
||||
gettyphoonDamageSelect({ startTime: '', endTime: '' }).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
console.log(res.data);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
@ -2949,8 +2929,8 @@ $height: calc(100vh - 100px);
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
height: 100%;
|
||||
:deep(.el-table--fit){
|
||||
height:100
|
||||
:deep(.el-table--fit) {
|
||||
height: 100;
|
||||
}
|
||||
.farmlandHeader {
|
||||
display: flex;
|
||||
@ -2960,14 +2940,14 @@ $height: calc(100vh - 100px);
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin: 20px 0;
|
||||
:deep(.el-input__wrapper){
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: rgba(22, 94, 102, 1);
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
}
|
||||
:deep(.el-date-editor .el-range-input) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
:deep(.el-table tr) {
|
||||
background-color: transparent;
|
||||
@ -3357,6 +3337,29 @@ $height: calc(100vh - 100px);
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.frameDiv {
|
||||
:deep(.el-dialog) {
|
||||
background-color: rgba(3, 48, 54, 0.95);
|
||||
border: 2px solid rgba(4, 153, 153, 1);
|
||||
}
|
||||
|
||||
:deep(.el-dialog__title) {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
border-top-right-radius:0 ;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: none;
|
||||
background: rgba(22, 94, 102, 1);
|
||||
}
|
||||
:deep(.el-input-group__append) {
|
||||
box-shadow: none;
|
||||
background: rgba(22, 94, 102, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
v-model="value"
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
@ -366,7 +366,9 @@ import axios from 'axios';
|
||||
import 'echarts-gl';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import * as xlsx from 'xlsx'; // Vue3 版本
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
let viewer = ref(null);
|
||||
const areaDiv = ref(null);
|
||||
const typesofDiv = ref(null);
|
||||
@ -499,6 +501,9 @@ let TypeTime = {
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
initonMounted();
|
||||
});
|
||||
function initonMounted() {
|
||||
getstatisticsOfTheAreas('370211'); //冷冻等级面积统计
|
||||
getproportionOfAreas('370211'); //冷冻等级面积占比
|
||||
geteachFreezingGradeAreas(); //高标准农田冷冻等级面积统计
|
||||
@ -525,6 +530,15 @@ onMounted(() => {
|
||||
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
localStorage.setItem(router.currentRoute.value.path, true);
|
||||
}
|
||||
onUpdated(() => {
|
||||
console.log(localStorage.getItem(router.currentRoute.value.path));
|
||||
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
|
||||
document.querySelector('.mode').innerText = '地图模式';
|
||||
} else {
|
||||
document.querySelector('.mode').innerText = '列表模式';
|
||||
}
|
||||
});
|
||||
|
||||
/*-------------地图------------------------*/
|
||||
@ -1548,7 +1562,6 @@ const exportExcel = (tableData, fileName = '用户列表', pageName = 'Sheet1')
|
||||
轻度冻害: '轻度冻害(亩)',
|
||||
中度冻害: '中度冻害(亩)',
|
||||
重度冻害: '重度冻害(亩)',
|
||||
area: '面积(亩)',
|
||||
};
|
||||
const list = changeTableHead(tableData, fieldNameObj);
|
||||
// 创建工作表
|
||||
@ -2011,7 +2024,7 @@ function chartModes() {
|
||||
const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
|
||||
let arr = [];
|
||||
let 无冻害 = [];
|
||||
let 轻度冻害=[];
|
||||
let 轻度冻害 = [];
|
||||
let 中度冻害 = [];
|
||||
let 重度冻害 = [];
|
||||
insectarr.value.forEach(item => {
|
||||
@ -2022,6 +2035,7 @@ function chartModes() {
|
||||
item.重度冻害 !== undefined ? 重度冻害.push(item.重度冻害) : 重度冻害.push(0);
|
||||
item.轻度冻害 !== undefined ? 轻度冻害.push(item.轻度冻害) : 轻度冻害.push(0);
|
||||
});
|
||||
let ends = (10 / arr.length) * 100;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -2049,34 +2063,28 @@ function chartModes() {
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
// start: 0,//默认为0
|
||||
// end: 100,//默认为100
|
||||
type: 'slider',
|
||||
show: false,
|
||||
// xAxisIndex: [0],
|
||||
handleSize: 0, //滑动条的 左右2个滑动条的大小
|
||||
startValue: 0, // 初始显示值
|
||||
endValue: 6, // 结束显示值
|
||||
height: 10, //组件高度
|
||||
left: '5%', //左边的距离
|
||||
right: '4%', //右边的距离
|
||||
bottom: 5, //底边的距离
|
||||
borderColor: '#000',
|
||||
fillerColor: '#269cdb',
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
|
||||
showDataShadow: false, //是否显示数据阴影 默认auto
|
||||
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
||||
realtime: true, //是否实时更新
|
||||
filterMode: 'filter',
|
||||
width: '40%',
|
||||
top: '90%',
|
||||
start: 0,
|
||||
end: ends,
|
||||
showDataShadow: false,
|
||||
showDetail: false,
|
||||
fillerColor: 'rgba(64, 158, 255)',
|
||||
borderRadius: '50%',
|
||||
moveHandleSize: 0,
|
||||
moveHandleStyle: {},
|
||||
left: '30%',
|
||||
height: 12,
|
||||
handleSize: '80%',
|
||||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||||
handleStyle: {
|
||||
borderWidth: 0,
|
||||
color: 'rgba(64, 158, 255)',
|
||||
},
|
||||
},
|
||||
//下面这个属性是里面拖到
|
||||
{
|
||||
type: 'inside',
|
||||
show: true,
|
||||
// xAxisIndex: [0],
|
||||
start: 1, //默认为1
|
||||
end: 100, //默认为100
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
@ -2085,7 +2093,7 @@ function chartModes() {
|
||||
icon: 'rect',
|
||||
itemWidth: 4, // 图例图表宽度
|
||||
itemHeight: 12, // 图例图标高度
|
||||
data: ['餐费', '打车费', '零食', '日用品'],
|
||||
data: [],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
@ -2831,7 +2839,7 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
.searchDiv {
|
||||
display: flex;
|
||||
:deep(.el-input__wrapper){
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100px;
|
||||
}
|
||||
.dow {
|
||||
@ -3050,7 +3058,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.rightbottom {
|
||||
width: 100%;
|
||||
height:59%;
|
||||
height: 59%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user