|
@@ -1,114 +1,138 @@
|
|
|
<template>
|
|
|
- <div class="gdzl">
|
|
|
- <div class="el-col headerSelect">
|
|
|
- <el-select v-model="year" placeholder="请选择" size="mini">
|
|
|
- <el-option
|
|
|
- v-for="item in yearList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <!-- clearable -->
|
|
|
- <el-cascader
|
|
|
- v-model="region"
|
|
|
- :show-all-levels="false"
|
|
|
- :options="store.state.region_tree"
|
|
|
- @change="regionChange"
|
|
|
- placeholder="行政区"
|
|
|
- size="mini"
|
|
|
- :props="{
|
|
|
- checkStrictly: true,
|
|
|
- expandTrigger: 'hover',
|
|
|
- emitPath: false,
|
|
|
- }"
|
|
|
- ></el-cascader>
|
|
|
+ <div class="innerContainer leftPane" v-drag>
|
|
|
+ <h2 class="Pangetitle darg-div el-col">
|
|
|
+ <span class="pange_text"
|
|
|
+ >{{ type == "gdzl" ? "耕地总览" : "永久基本农田" }}
|
|
|
+ </span>
|
|
|
+ <div class="region">
|
|
|
+ <el-select v-model="year" placeholder="请选择" size="mini">
|
|
|
+ <el-option
|
|
|
+ v-for="item in yearList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </h2>
|
|
|
+ <div class="xz_box">
|
|
|
+ <div class="gdzl">
|
|
|
+ <div class="el-col headerSelect">
|
|
|
+ <el-select v-model="year" placeholder="请选择" size="mini">
|
|
|
+ <el-option
|
|
|
+ v-for="item in yearList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- clearable -->
|
|
|
+ <el-cascader
|
|
|
+ v-model="region"
|
|
|
+ :show-all-levels="false"
|
|
|
+ :options="store.state.region_tree"
|
|
|
+ @change="regionChange"
|
|
|
+ placeholder="行政区"
|
|
|
+ size="mini"
|
|
|
+ :props="{
|
|
|
+ checkStrictly: true,
|
|
|
+ expandTrigger: 'hover',
|
|
|
+ emitPath: false,
|
|
|
+ }"
|
|
|
+ ></el-cascader>
|
|
|
|
|
|
- <el-select v-model="gtype" placeholder="请选择" size="mini">
|
|
|
- <el-option
|
|
|
- v-for="item in typeList"
|
|
|
- :key="item.label"
|
|
|
- :label="item.label"
|
|
|
- :value="item.label"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <!-- <div class="region">
|
|
|
+ <el-select v-model="gtype" placeholder="请选择" size="mini">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeList"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- <div class="region">
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- <div class="echars">
|
|
|
- <div class="echartTitle">
|
|
|
- <div class="block-title">{{ gtype }}总量</div>
|
|
|
- </div>
|
|
|
- <div class="content gdzlc">
|
|
|
- <div class="item" v-for="zl in zllist[gtype]" :key="zl.name">
|
|
|
- <div class="icon">
|
|
|
- <div class="iicon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="echars">
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">{{ gtype }}总量</div>
|
|
|
</div>
|
|
|
- <div class="text">
|
|
|
- <p>{{ zl.name }}</p>
|
|
|
- <span class="cvalue"
|
|
|
- >{{ (sdata.a || 0).toFixed(2) }} {{ zl.unit }}</span
|
|
|
- >
|
|
|
+ <div class="content gdzlc">
|
|
|
+ <div class="item" v-for="zl in zllist[gtype]" :key="zl.name">
|
|
|
+ <div class="icon">
|
|
|
+ <div class="iicon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <p>{{ zl.name }}</p>
|
|
|
+ <span class="cvalue"
|
|
|
+ >{{ (sdata.a || 0).toFixed(2) }} {{ zl.unit }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content scontent" v-show="gtype == '耕地'">
|
|
|
- <div class="item" v-for="(sd, index) in sdlist" :key="index">
|
|
|
- <div class="text">
|
|
|
- <p>{{ sd.name }}</p>
|
|
|
- <span class="cvalue">{{ (sdata[sd.prop] || 0).toFixed(2) }} </span>
|
|
|
- <span class="unit">{{ sd.unit }}</span>
|
|
|
+ <div class="content scontent" v-show="gtype == '耕地'">
|
|
|
+ <div class="item" v-for="(sd, index) in sdlist" :key="index">
|
|
|
+ <div class="text">
|
|
|
+ <p>{{ sd.name }}</p>
|
|
|
+ <span class="cvalue">
|
|
|
+ {{ (sdata[sd.prop] || 0).toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ <span class="unit">{{ sd.unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="echars">
|
|
|
- <div class="echartTitle">
|
|
|
- <div class="block-title">{{ `${gtype}增减` }}变化情况</div>
|
|
|
- <div class="titlesel" v-show="gtype == '耕地'">
|
|
|
- 对比年份
|
|
|
- <div class="selectTab">
|
|
|
- <el-select
|
|
|
- v-model="tab"
|
|
|
- placeholder="请选择"
|
|
|
- :popper-append-to-body="false"
|
|
|
- @change="Getxzxx()"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in yearList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <div class="echars">
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">{{ `${gtype}增减` }}变化情况</div>
|
|
|
+ <div class="titlesel" v-show="gtype == '耕地'">
|
|
|
+ 对比年份
|
|
|
+ <div class="selectTab">
|
|
|
+ <el-select
|
|
|
+ v-model="tab"
|
|
|
+ placeholder="请选择"
|
|
|
+ :popper-append-to-body="false"
|
|
|
+ @change="Getxzxx()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in yearList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="usable">更多</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="usable">更多</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content scontent" v-show="gtype == '耕地'">
|
|
|
- <div class="item" v-for="(bh, index) in bhlist" :key="index">
|
|
|
- <div class="text">
|
|
|
- <p>{{ bh.name }}</p>
|
|
|
- <span class="cvalue">{{ (sdata[bh.prop] || 0).toFixed(2) }} </span>
|
|
|
- <span class="unit">{{ bh.unit }}</span>
|
|
|
+ <div class="content scontent" v-show="gtype == '耕地'">
|
|
|
+ <div class="item" v-for="(bh, index) in bhlist" :key="index">
|
|
|
+ <div class="text">
|
|
|
+ <p>{{ bh.name }}</p>
|
|
|
+ <span class="cvalue">
|
|
|
+ {{ (sdata[bh.prop] || 0).toFixed(2) }}
|
|
|
+ </span>
|
|
|
+ <span class="unit">{{ bh.unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="pietitle" v-show="gtype == '耕地'">历年变化情况</div>
|
|
|
+ <bar class="pie_echart" ref="echartRef0"></bar>
|
|
|
+ </div>
|
|
|
+ <div class="echars gqgd">
|
|
|
+ <Statistics
|
|
|
+ :title="`各区${gtype}分布`"
|
|
|
+ :cityList="cityList"
|
|
|
+ :height="gtype == '耕地' ? 180 : 260"
|
|
|
+ :text="`占全市${gtype}`"
|
|
|
+ textunit="%"
|
|
|
+ ></Statistics>
|
|
|
+ <!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="pietitle" v-show="gtype == '耕地'">历年变化情况</div>
|
|
|
- <bar class="pie_echart" ref="echartRef0"></bar>
|
|
|
- </div>
|
|
|
- <div class="echars gqgd">
|
|
|
- <Statistics
|
|
|
- :title="`各区${gtype}分布`"
|
|
|
- :cityList="cityList"
|
|
|
- :height="gtype == '耕地' ? 180 : 260"
|
|
|
- :text="`占全市${gtype}`"
|
|
|
- textunit="%"
|
|
|
- ></Statistics>
|
|
|
- <!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -121,7 +145,11 @@ import { QueryOne, QueryList } from "@/api/cockpitNew";
|
|
|
import { legends } from "../config.js";
|
|
|
import { loadGeoJSON } from "@/utils/MapHelper/help.js";
|
|
|
export default {
|
|
|
- props: {},
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
year: "",
|