|  | @@ -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: "",
 |