|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="app-container box">
|
|
|
+ <div class="app-container box progress">
|
|
|
<div class="box-top">
|
|
|
<customForm ref="formRef" :model="queryParams" :config="FormConfig">
|
|
|
<template #action>
|
|
|
@@ -29,42 +29,106 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div class="box-content">
|
|
|
- <div class="num">
|
|
|
- <div class="num-item">
|
|
|
- <div class="num-left"></div>
|
|
|
- <div class="num-right">
|
|
|
- <div class="num-item-title">总数</div>
|
|
|
- <div class="num-item-text">{{ numParam.total || 0 }}</div>
|
|
|
- <img src="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
-
|
|
|
<div class="box-left">
|
|
|
- <div class="box-left-content" style="position: relative; z-index: 99998">
|
|
|
+ <div class="box-left-content">
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">{{ titles[route.query.type] }}</div>
|
|
|
+ <el-select
|
|
|
+ v-if="route.query.type == 'judge'"
|
|
|
+ clearable
|
|
|
+ v-model="judgetype"
|
|
|
+ placeholder="请选择判定类型"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in zllist.judge"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name.replace(/\n/g, '')"
|
|
|
+ :value="index"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-else-if="route.query.type == 'result'"
|
|
|
+ clearable
|
|
|
+ v-model="resulttype"
|
|
|
+ placeholder="请选择判定类型"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in zllist.result"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name.replace(/\n/g, '')"
|
|
|
+ :value="index"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="ntype">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeoptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
<echarts-map
|
|
|
ref="echartsMap"
|
|
|
+ class="map_echart"
|
|
|
:mapData="mapGeoJson"
|
|
|
:regionLevel="regionLevel"
|
|
|
@mapClick="mapClick"
|
|
|
@mapClicker="mapClicker"
|
|
|
></echarts-map>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="box-left-content" style="position: relative; z-index: 9999">
|
|
|
- <el-table :data="tableData" style="width: 100%">
|
|
|
+ <div class="box-left-content">
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">{{ titles[route.query.type] }}统计表</div>
|
|
|
+ <el-select v-model="nunit">
|
|
|
+ <el-option
|
|
|
+ v-for="item in units"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData" class="table">
|
|
|
<el-table-column
|
|
|
- prop="date"
|
|
|
- label="行政区"
|
|
|
- width="150"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column label="图斑数" header-align="center" />
|
|
|
- <el-table-column label="图斑面积" />
|
|
|
+ v-for="(columni, cindex) in judgeTable"
|
|
|
+ :key="cindex"
|
|
|
+ :prop="columni.prop"
|
|
|
+ :label="columni.label"
|
|
|
+ :width="columni.width"
|
|
|
+ :align="columni.align"
|
|
|
+ >
|
|
|
+ {{ columni.prop }}
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ v-for="(child, chi) in columni.list || []"
|
|
|
+ :key="chi"
|
|
|
+ :prop="child.prop"
|
|
|
+ :label="child.label"
|
|
|
+ :width="child.width"
|
|
|
+ :align="child.align"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- v-if' should be moved to the wrapper element -->
|
|
|
+ <!-- v-if="columni.list" -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商业服务用地">
|
|
|
+ <el-table-column prop="name" label="图斑数" />
|
|
|
+ <el-table-column label="面积"> </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">{{ titles[route.query.type] }}统计图</div>
|
|
|
+ <el-select v-model="ntype">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeoptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
<bar class="pie_echart" ref="echartRef"></bar>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -75,6 +139,7 @@
|
|
|
import customForm from "@/components/custom-form.vue";
|
|
|
import EchartsMap from "@/components/echarts/EchartsMap.vue";
|
|
|
import bar from "@/components/echarts/bar.vue";
|
|
|
+import { FormConfig, titles, units, TableHeader, judgeTable } from "./config";
|
|
|
import { nextTick } from "vue";
|
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
|
@@ -82,18 +147,6 @@ const { proxy } = getCurrentInstance();
|
|
|
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
|
|
|
const echartRef = ref();
|
|
|
const echartsMap = ref();
|
|
|
-const eData = ref({
|
|
|
- xData: ["2020", "2021", "2022", "2023"],
|
|
|
- yData: [
|
|
|
- [-10, 10, 10, 10],
|
|
|
- [-10, 10, 10, 10],
|
|
|
- [-10, 10, 10, 10],
|
|
|
- ],
|
|
|
- legend: ["未判定", "已判定（拆分前）", "已判定（拆分后）"],
|
|
|
- yName: "个",
|
|
|
- stack: "ad",
|
|
|
- barWidth:'20px'
|
|
|
-});
|
|
|
const mapGeoJson = ref({
|
|
|
type: "FeatureCollection",
|
|
|
features: [
|
|
|
@@ -863,80 +916,31 @@ const mapGeoJson = ref({
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
-const FormConfig = ref([
|
|
|
- [
|
|
|
- {
|
|
|
- label: "行政区",
|
|
|
- prop: "state",
|
|
|
- span: 5,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "监测时相",
|
|
|
- prop: "time",
|
|
|
- span: 5,
|
|
|
- },
|
|
|
- {
|
|
|
- prop: "action",
|
|
|
- span: 5,
|
|
|
- },
|
|
|
- ],
|
|
|
-]);
|
|
|
const tableData = ref([
|
|
|
{
|
|
|
date: "2016-05-03",
|
|
|
name: "Tom",
|
|
|
- state: "California",
|
|
|
- city: "Los Angeles",
|
|
|
-
|
|
|
- zip: "CA 90036",
|
|
|
+ gs: 100,
|
|
|
},
|
|
|
{
|
|
|
date: "2016-05-02",
|
|
|
name: "Tom",
|
|
|
- state: "California",
|
|
|
- city: "Los Angeles",
|
|
|
-
|
|
|
- zip: "CA 90036",
|
|
|
+ gs: 100,
|
|
|
},
|
|
|
{
|
|
|
date: "2016-05-04",
|
|
|
name: "Tom",
|
|
|
- state: "California",
|
|
|
- city: "Los Angeles",
|
|
|
-
|
|
|
- zip: "CA 90036",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-01",
|
|
|
- name: "Tom",
|
|
|
- state: "California",
|
|
|
- city: "Los Angeles",
|
|
|
-
|
|
|
- zip: "CA 90036",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-08",
|
|
|
- name: "Tom",
|
|
|
- state: "California",
|
|
|
- city: "Los Angeles",
|
|
|
-
|
|
|
- zip: "CA 90036",
|
|
|
+ gs: 100,
|
|
|
},
|
|
|
{
|
|
|
- date: "2016-05-06",
|
|
|
+ date: "2016-05-04",
|
|
|
name: "Tom",
|
|
|
- state: "California",
|
|
|
- city: "Los Angeles",
|
|
|
-
|
|
|
- zip: "CA 90036",
|
|
|
+ gs: 100,
|
|
|
},
|
|
|
{
|
|
|
- date: "2016-05-07",
|
|
|
+ date: "2016-05-04",
|
|
|
name: "Tom",
|
|
|
- state: "California",
|
|
|
- city: "Los Angeles",
|
|
|
-
|
|
|
- zip: "CA 90036",
|
|
|
+ gs: 100,
|
|
|
},
|
|
|
]);
|
|
|
const data = reactive({
|
|
|
@@ -957,31 +961,62 @@ const data = reactive({
|
|
|
{ required: true, message: "角色顺序不能为空", trigger: "blur" },
|
|
|
],
|
|
|
},
|
|
|
+ eData: {
|
|
|
+ xData: ["2020", "2021", "2022", "2023"],
|
|
|
+ yData: [
|
|
|
+ [-10, 10, 10, 10],
|
|
|
+ [-10, 10, 10, 10],
|
|
|
+ [-10, 10, 10, 10],
|
|
|
+ ],
|
|
|
+ legend: ["未判定", "已判定（拆分前）", "已判定（拆分后）"],
|
|
|
+ yName: "个",
|
|
|
+ stack: "ad",
|
|
|
+ barWidth: "20px",
|
|
|
+ },
|
|
|
});
|
|
|
-const zllist = ref({
|
|
|
- all: [
|
|
|
- { name: "监测\n图斑" },
|
|
|
- { name: "已举证\n图斑", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- { name: "县级\n已审核", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- { name: "市级\n已审核", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- { name: "省级\n已审核", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- ],
|
|
|
- judge: [
|
|
|
- { name: "监测\n图斑" },
|
|
|
- { name: "未判定\n图斑", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- { name: "已判定\n图斑\n(拆分前)", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- { name: "已判定\n图斑\n(拆分后)", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- ],
|
|
|
- result: [
|
|
|
- { name: "已判定\n图斑" },
|
|
|
- { name: "判定为\n合法用地", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- { name: "判定为\n违法用地", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
- { name: "判定为\n其它用地", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+const showdata = reactive({
|
|
|
+ zllist: {
|
|
|
+ all: [
|
|
|
+ { name: "监测\n图斑" },
|
|
|
+ { name: "已举证\n图斑", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ { name: "县级\n已审核", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ { name: "市级\n已审核", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ { name: "省级\n已审核", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ ],
|
|
|
+ judge: [
|
|
|
+ { name: "监测\n图斑" },
|
|
|
+ { name: "未判定\n图斑", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ { name: "已判定\n图斑\n(拆分前)", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ { name: "已判定\n图斑\n(拆分后)", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ ],
|
|
|
+ result: [
|
|
|
+ { name: "已判定\n图斑" },
|
|
|
+ { name: "判定为\n合法用地", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ { name: "判定为\n违法用地", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ { name: "判定为\n其它用地", prop: "zb", prop1: "zb", prop3: "%" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+
|
|
|
+ ntype: "0",
|
|
|
+ typeoptions: [
|
|
|
+ { name: "图斑数", id: "0" },
|
|
|
+ { name: "图斑面积", id: "1" },
|
|
|
],
|
|
|
+ nunit: "0",
|
|
|
+ judgetype: "",
|
|
|
+ resulttype: "",
|
|
|
});
|
|
|
const zldata = ref({});
|
|
|
-const { queryParams, form, rules } = toRefs(data);
|
|
|
+const { queryParams, form, rules, eData } = toRefs(data);
|
|
|
+const { zllist, typeoptions, ntype, nunit, judgetype, resulttype } =
|
|
|
+ toRefs(showdata);
|
|
|
|
|
|
+onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ // 初始化主题样式
|
|
|
+ echartRef.value.setOptions(eData.value);
|
|
|
+ });
|
|
|
+});
|
|
|
/** 查询角色列表 */
|
|
|
function getList() {
|
|
|
// loading.value = true;
|
|
|
@@ -992,10 +1027,6 @@ function getList() {
|
|
|
// loading.value = false;
|
|
|
// }
|
|
|
// );
|
|
|
- nextTick(() => {
|
|
|
- // console.log(echartsMap.value, "echartsMap");
|
|
|
- echartRef.value.setOptions(eData.value);
|
|
|
- });
|
|
|
}
|
|
|
function setLnbh(data) {
|
|
|
// this.eData.yName = `变化面积${this.unitList[this.nowunit].unit}`;
|
|
|
@@ -1011,11 +1042,29 @@ function setLnbh(data) {
|
|
|
getList();
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
+.echartTitle {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #166cad;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #409eff;
|
|
|
+ .block-title {
|
|
|
+ width: calc(100% - 320px);
|
|
|
+ }
|
|
|
+ .el-select {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+}
|
|
|
.box {
|
|
|
background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #f2f2f2;
|
|
|
+ padding: 15px;
|
|
|
.box-top {
|
|
|
background: #fff;
|
|
|
padding: 10px;
|
|
|
@@ -1026,126 +1075,92 @@ getList();
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
margin-top: 10px;
|
|
|
+
|
|
|
&-content {
|
|
|
background: #fff;
|
|
|
width: calc(50% - 5px);
|
|
|
height: 100%;
|
|
|
z-index: 3;
|
|
|
+ padding: 10px;
|
|
|
+ // position: relative;
|
|
|
+ // z-index: 99998;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.gdzlc {
|
|
|
- height: 80px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+.progress {
|
|
|
+ .gdzlc {
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .item {
|
|
|
- // width: 48%;
|
|
|
- height: 75px;
|
|
|
- background: #f2f2f2;
|
|
|
- border-radius: 5px;
|
|
|
+ .item {
|
|
|
+ // width: 48%;
|
|
|
+ height: 75px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ border-radius: 5px;
|
|
|
|
|
|
- .icon {
|
|
|
- width: 85px;
|
|
|
- height: 100%;
|
|
|
- display: inline-block;
|
|
|
+ .icon {
|
|
|
+ width: 85px;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
|
|
|
- background: #0297d7;
|
|
|
- text-align: center;
|
|
|
- padding: 15px 10px;
|
|
|
- .title {
|
|
|
- // display: flex;
|
|
|
- // align-items: center; /* 垂直居中 */
|
|
|
- // justify-content: center;
|
|
|
+ background: #76b9ed;
|
|
|
+ text-align: center;
|
|
|
+ padding: 15px 10px;
|
|
|
+ .title {
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center; /* 垂直居中 */
|
|
|
+ // justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tree {
|
|
|
+ padding: 8px 10px;
|
|
|
+ line-height: 18px;
|
|
|
}
|
|
|
- }
|
|
|
- .tree {
|
|
|
- padding: 8px 10px;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
|
|
|
- .text {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 85px);
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- padding: 5px 20px;
|
|
|
- .ibolk {
|
|
|
+ .text {
|
|
|
display: inline-block;
|
|
|
- padding-right: 10px;
|
|
|
- }
|
|
|
- .progrestext {
|
|
|
- padding-left: 10px;
|
|
|
- border-left: 1px solid #d7d7d7;
|
|
|
- .radio {
|
|
|
- color: #f59a23;
|
|
|
+ width: calc(100% - 85px);
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 5px 20px;
|
|
|
+ .ibolk {
|
|
|
+ display: inline-block;
|
|
|
+ padding-right: 10px;
|
|
|
}
|
|
|
- .protitle {
|
|
|
- font-weight: normal;
|
|
|
+ .progrestext {
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 1px solid #d7d7d7;
|
|
|
+ .radio {
|
|
|
+ color: #f59a23;
|
|
|
+ }
|
|
|
+ .protitle {
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .higtext {
|
|
|
- background: #81d3f8;
|
|
|
- border: 2px solid #00ffff;
|
|
|
- border-left: 0px;
|
|
|
+ .higtext {
|
|
|
+ background: #81d3f8;
|
|
|
+ border: 2px solid #00ffff;
|
|
|
+ border-left: 0px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.box-content {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .map_echart {
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(50% - 60px);
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .num {
|
|
|
- width: 80%;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .num-left {
|
|
|
- height: 100%;
|
|
|
- display: inline-block;
|
|
|
- width: 65px;
|
|
|
- }
|
|
|
- .num-right {
|
|
|
- height: 100%;
|
|
|
- display: inline-block;
|
|
|
- width: 65px;
|
|
|
- }
|
|
|
- &-item {
|
|
|
- text-align: center;
|
|
|
- &-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: red;
|
|
|
- line-height: 20px;
|
|
|
- padding-bottom: 5px;
|
|
|
- }
|
|
|
- &-text {
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 700;
|
|
|
- color: #000;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
- img {
|
|
|
- margin-top: -29px;
|
|
|
- }
|
|
|
- .color1 {
|
|
|
- color: #ff4141;
|
|
|
- }
|
|
|
- .color2 {
|
|
|
- color: #fbca38;
|
|
|
- }
|
|
|
- .color3 {
|
|
|
- color: #8cf347;
|
|
|
- }
|
|
|
- }
|
|
|
+ .pie_echart {
|
|
|
+ margin-top: 20px;
|
|
|
+ /* margin-left: 20px; */
|
|
|
+ width: 43vw;
|
|
|
+ height: 20vh;
|
|
|
}
|
|
|
}
|
|
|
-.pie_echart {
|
|
|
- margin-top: 20px;
|
|
|
- /* margin-left: 20px; */
|
|
|
- width: 43vw;
|
|
|
- height: 30vh;
|
|
|
-}
|
|
|
</style>
|
|
|
|
