up
This commit is contained in:
@ -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