Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
2c057ac63a
Binary file not shown.
|
After Width: | Height: | Size: 728 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1005 B |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 668 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
import { defHttp } from '@/utils/http/axios';
|
||||
enum Api {
|
||||
GetTrendData = '/api/DroneScreenDisplay/GetTrendData',
|
||||
GetTuBanSummary = '/api/DroneScreenDisplay/GetTuBanSummary',
|
||||
GetTotalAndAreaByType = '/api/DroneScreenDisplay/GetTotalAndAreaByType',
|
||||
GetTotalAndArea = '/api/DroneScreenDisplay/GetTotalAndArea'
|
||||
}
|
||||
export function GetTrendData(params:{countyid:string;type:string;datatype:number;begindate?:string;enddate?:string;}) {
|
||||
// datatype 0按天统计，1按月统计
|
||||
return defHttp.get({ url: Api.GetTrendData, params });
|
||||
}
|
||||
export function GetTuBanSummary(params:{countyid:string;type:string;}) {
|
||||
return defHttp.get({ url: Api.GetTuBanSummary, params });
|
||||
}
|
||||
export function GetTotalAndAreaByType(params:{countyid:string;type:string;}) {
|
||||
return defHttp.get({ url: Api.GetTotalAndAreaByType, params });
|
||||
}
|
||||
export function GetTotalAndArea(params:{countyid:string;type:string;}) {
|
||||
return defHttp.get({ url: Api.GetTotalAndArea, params });
|
||||
}
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { getCaseInfoList } from '@/api/monitor/index';
|
||||
import { getLoadCaseInfoListOffence } from '@/api/demo/system';
|
||||
import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts';
|
||||
|
||||
const [registerModal, { openModal, setModalProps }] = useModal();
|
||||
|
||||
|
|
@ -165,6 +166,10 @@
|
|||
|
||||
function handleGetList() {
|
||||
getLoadCaseInfoListOffence(props.currentListQuery).then((res) => {
|
||||
res.items.forEach((item) => {
|
||||
item.area = dataProcessingCount(item.area);
|
||||
item.gengdi_area = dataProcessingCount(item.gengdi_area);
|
||||
});
|
||||
columns.data = res.items;
|
||||
total.value = res.total;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
<a @click="handlePreViewData(column, record, 9)">{{ record.zghsywfgdgdmj }}</a>
|
||||
</template>
|
||||
<!-- 面积只取小数点后两位 -->
|
||||
<template v-if="column.key.slice(-2) === 'mj' && record.countyname == '总计'">
|
||||
<template v-if="column.key.slice(-2) === 'mj'">
|
||||
{{ record[column.key].toFixed(2) }}
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
import axios from 'axios';
|
||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getCaseInfoById } from '@/api/tiankongdi/index';
|
||||
import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts';
|
||||
import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<Exception />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Exception from '@/views/sys/exception/Exception.vue';
|
||||
</script>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="statistical">
|
||||
<Map style="position:absolute;top:0px;left:0px;" ref="MapboxComponent"></Map>
|
||||
<Map style="position: absolute; top: 0px; left: 0px" ref="MapboxComponent"></Map>
|
||||
<div class="statistical-left">
|
||||
<img
|
||||
src="/statistical/left_decorative_left.png"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
width: '84px',
|
||||
height: '920px',
|
||||
width: '73px',
|
||||
height: '100%',
|
||||
}"
|
||||
/>
|
||||
<layerButton
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
@layerbutton_2="layerbutton_2"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: '102px',
|
||||
left: '54px',
|
||||
top: '60px',
|
||||
left: '48px',
|
||||
}"
|
||||
/>
|
||||
<statisticalType
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
@handlerChangePolygonType="handlerChangePolygonType"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: '700px',
|
||||
left: '54px',
|
||||
height: '200px',
|
||||
top: '680px',
|
||||
left: '48px',
|
||||
height: '180px',
|
||||
}"
|
||||
/>
|
||||
<county
|
||||
|
|
@ -40,51 +40,55 @@
|
|||
}"
|
||||
/>
|
||||
</div>
|
||||
<DataScreen :countyId="countyId"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from "vue";
|
||||
import Map from "./LargeScreenMap/index.vue"
|
||||
import { ref } from 'vue';
|
||||
import Map from './LargeScreenMap/index.vue';
|
||||
import layerButton from './mapComponent/left_layerButton.vue';
|
||||
import statisticalType from './mapComponent/left_statisticalType.vue';
|
||||
import county from './mapComponent/left_county.vue';
|
||||
import DataScreen from './dataScreen/index.vue'
|
||||
|
||||
//
|
||||
//
|
||||
const MapboxComponent = ref();
|
||||
|
||||
const countyId = ref('371325')
|
||||
|
||||
// 控制图斑图层
|
||||
function layerbutton_1(data) {
|
||||
MapboxComponent.value.handlerChangeLayerVisible("historyLayerLine",data);
|
||||
MapboxComponent.value.handlerChangeLayerVisible("historyLayerFill",data);
|
||||
MapboxComponent.value.handlerChangeLayerVisible('historyLayerLine', data);
|
||||
MapboxComponent.value.handlerChangeLayerVisible('historyLayerFill', data);
|
||||
}
|
||||
|
||||
// 控制热力图显示
|
||||
function layerbutton_2(data) {
|
||||
MapboxComponent.value.handlerChangeLayerVisible("heatLayer",data);
|
||||
MapboxComponent.value.handlerChangeLayerVisible('heatLayer', data);
|
||||
}
|
||||
|
||||
// 选择区县
|
||||
const currentCounty = ref({name:"",code:""});
|
||||
const currentCounty = ref({ name: '', code: '' });
|
||||
|
||||
function countyClick(data) {
|
||||
currentCounty.value = {name:data['name'],code:data['id']}
|
||||
countyId.value = data.id
|
||||
currentCounty.value = { name: data['name'], code: data['id'] };
|
||||
MapboxComponent.value.handlerChangeCounty(currentCounty.value);
|
||||
}
|
||||
|
||||
// 图例点击
|
||||
function handlerChangePolygonType(data){
|
||||
MapboxComponent.value.handlerChangeCounty(currentCounty.value,data);
|
||||
function handlerChangePolygonType(data) {
|
||||
MapboxComponent.value.handlerChangeCounty(currentCounty.value, data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.statistical {
|
||||
// position: relative;
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,205 @@
|
|||
<template>
|
||||
<div class="sub-title">
|
||||
总数与面积统计
|
||||
</div>
|
||||
<div class="area-data-div">
|
||||
<div class="area-div">
|
||||
<div class="data-item">
|
||||
<div class="data-label data-center">下发图斑数(个）</div>
|
||||
<div class="data-value data-center">{{wfzs}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-label data-center">图斑面积(亩）</div>
|
||||
<div class="data-value data-center">{{ wfmj }}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-label data-center">耕地面积(亩）</div>
|
||||
<div class="data-value data-center">{{xfgdmj}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-label data-center">整改后剩余耕地面积(亩）</div>
|
||||
<div class="data-value data-center">{{zghsywfgdgdmj}}</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-label data-center">核实后新增违法耕地(亩）</div>
|
||||
<div class="data-value data-center">{{hshxzwfgdgdmj}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-div">
|
||||
<div class="sub-title-div">新增建设用地</div>
|
||||
<div class="row-item-div" style="margin-bottom: 22px;">
|
||||
<div class="item-div">
|
||||
<div class="item-label">合法用地(个）</div>
|
||||
<div class="item-value">{{hfzs}}</div>
|
||||
</div>
|
||||
<div class="item-interval"></div>
|
||||
<div class="item-div" style=" padding-left: 17px;">
|
||||
<div class="item-label">合法用地(亩）</div>
|
||||
<div class="item-value">{{hfmj}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item-div" style="margin-bottom: 27px;">
|
||||
<div class="item-div">
|
||||
<div class="item-label">违法用地(个）</div>
|
||||
<div class="item-value">{{wfzs}}</div>
|
||||
</div>
|
||||
<div class="item-interval"></div>
|
||||
<div class="item-div" style=" padding-left: 17px;">
|
||||
<div class="item-label">违法用地(亩）</div>
|
||||
<div class="item-value">{{wfmj}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-title-div" style="margin-bottom:15px;">其他用地</div>
|
||||
<div class="row-item-div">
|
||||
<div class="item-div">
|
||||
<div class="item-label">其他用地(个）</div>
|
||||
<div class="item-value">{{qtzs}}</div>
|
||||
</div>
|
||||
<div class="item-interval"></div>
|
||||
<div class="item-div" style=" padding-left: 17px;">
|
||||
<div class="item-label">其他用地(亩）</div>
|
||||
<div class="item-value">{{qtmj}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, onMounted,watch } from "vue"
|
||||
import { GetTotalAndArea } from '@/api/statistical/index.ts'
|
||||
|
||||
const props = defineProps(['countyId','landType'])
|
||||
|
||||
const hfmj = ref(0)
|
||||
const hfzs = ref(0)
|
||||
const hshxzwfgdgdmj = ref(0)
|
||||
const qtmj = ref(0)
|
||||
const qtzs = ref(0)
|
||||
const wfmj = ref(0)
|
||||
const wfzs = ref(0)
|
||||
const xfgdmj = ref(0)
|
||||
const xfmj = ref(0)
|
||||
const xfzs = ref(0)
|
||||
const zghsywfgdgdmj = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
const getData = () => {
|
||||
GetTotalAndArea({countyid:props.countyId,type:props.landType}).then(res => {
|
||||
hfmj.value = res.hfmj
|
||||
hfzs.value = res.hfzs
|
||||
hshxzwfgdgdmj.value = res.hshxzwfgdgdmj
|
||||
qtmj.value = res.qtmj
|
||||
qtzs.value = res.qtzs
|
||||
wfmj.value = res.wfmj
|
||||
wfzs.value = res.wfzs
|
||||
xfgdmj.value = res.xfgdmj
|
||||
xfmj.value = res.xfmj
|
||||
xfzs.value = res.xfzs
|
||||
zghsywfgdgdmj.value = res.zghsywfgdgdmj
|
||||
})
|
||||
}
|
||||
watch(() => [props.countyId,props.landType], () => {
|
||||
getData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sub-title{
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 2px 6px rgba(5,28,55,0.42);
|
||||
background: url(./statistical/sub_title.png);
|
||||
padding-left: 35px;
|
||||
}
|
||||
.area-data-div{
|
||||
height: 283px;
|
||||
display:flex;
|
||||
padding-top:15px;
|
||||
padding-left:9px;
|
||||
.area-div{
|
||||
width: 156px;
|
||||
margin-right: 36px;
|
||||
:nth-last-child(1){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.data-item{
|
||||
height: 43px;
|
||||
padding-top:6px;
|
||||
margin-bottom: 8px;
|
||||
background: url(./statistical/item_label.png) no-repeat;
|
||||
background-size: cover;
|
||||
.data-center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.data-label{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #7EBBFF;
|
||||
margin-bottom:6px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.data-value{
|
||||
font-family: DIN;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
.data-div{
|
||||
width: 194px;
|
||||
.sub-title-div{
|
||||
height: 19px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #7EBBFF;
|
||||
margin-bottom:19px;
|
||||
background: url(./statistical/item_title.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.row-item-div{
|
||||
display: flex;
|
||||
height:35px;
|
||||
.item-div{
|
||||
flex: 1;
|
||||
.item-label{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #7EBBFF;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.item-value{
|
||||
font-family: DIN;
|
||||
font-weight: 500;
|
||||
font-size: 23px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.item-interval{
|
||||
width: 1px;
|
||||
height: 43px;
|
||||
background: #2A89DA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,556 @@
|
|||
<template>
|
||||
<div class="sub-title">
|
||||
图斑汇总统计
|
||||
</div>
|
||||
<div style="height: 650px;" id="patch-summary"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted,ref,defineProps,watch} from "vue"
|
||||
import * as echarts from 'echarts'
|
||||
import { GetTuBanSummary } from '@/api/statistical/index.ts'
|
||||
|
||||
const props = defineProps(['countyId','landType'])
|
||||
|
||||
const shaft = ref([])
|
||||
const sywfgdgdmj = ref([])
|
||||
const sywfgdtbzs = ref([])
|
||||
const xfmj = ref([])
|
||||
const xftbzs = ref([])
|
||||
let myChart:any = null
|
||||
onMounted(() => {
|
||||
let chartsDom = document.getElementById('patch-summary')
|
||||
myChart = echarts.init(chartsDom)
|
||||
GetTuBanSummary({countyid:props.countyId,type:props.landType}).then(res => {
|
||||
shaft.value = []
|
||||
sywfgdgdmj.value = []
|
||||
sywfgdtbzs.value = []
|
||||
xfmj.value = []
|
||||
xftbzs.value = []
|
||||
res.forEach(item => {
|
||||
shaft.value.push(item.countyname)
|
||||
sywfgdgdmj.value.push(item.sywfgdgdmj)
|
||||
sywfgdtbzs.value.push(item.sywfgdtbzs)
|
||||
xfmj.value.push(item.xfmj)
|
||||
xftbzs.value.push(item.xftbzs)
|
||||
})
|
||||
myChart.setOption({
|
||||
legend:[
|
||||
{
|
||||
data:['总面积(亩/平方米）','耕地面积(亩/平方米）'],
|
||||
right:'0px',
|
||||
top:'10px',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle:{
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
fontWeight: '400',
|
||||
fontSize: '10px',
|
||||
color: '#FFFFFF',
|
||||
}
|
||||
},
|
||||
{
|
||||
data:['下发总数(个）','剩余总数（个）'],
|
||||
left:'0px',
|
||||
top:'10px',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
gridIndex: 2,
|
||||
textStyle:{
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
fontWeight: '400',
|
||||
fontSize: '10px',
|
||||
color: '#FFFFFF',
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: [
|
||||
// 左
|
||||
{
|
||||
left: "0%",
|
||||
width: "40%",
|
||||
height: "90%",
|
||||
containLabel: true,
|
||||
},
|
||||
// 中
|
||||
{
|
||||
width: "0%",
|
||||
},
|
||||
// 右
|
||||
{
|
||||
right: "0%",
|
||||
width: "60%",
|
||||
height: "90%",
|
||||
containLabel: true,
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
inverse: true,
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
//轴线
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(25, 35, 57,0.2)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
show: true,
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
//轴线
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
type: "value",
|
||||
show: false,
|
||||
splitLine: {
|
||||
// 网格线
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
align: "center",
|
||||
type: "category",
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
data: shaft.value,
|
||||
axisLine: {
|
||||
//轴线
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: "#FFFFFF",
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
position: "center",
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
type: "category",
|
||||
inverse: false,
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
data: shaft.value, //使用空格使文字居中
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
position: "left",
|
||||
axisLabel: {
|
||||
fontFamily: 'PingFang SC',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
show: true,
|
||||
margin: 30,
|
||||
// width: 100,
|
||||
align: 'center',
|
||||
},
|
||||
type: "category",
|
||||
inverse: false,
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
//轴线
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: "#FFFFFF",
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
data: shaft.value,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
stack:'left',
|
||||
name: "耕地面积(亩/平方米）",
|
||||
itemStyle: {
|
||||
color: "#FF9C5D",
|
||||
},
|
||||
label:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: 'DIN',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data: sywfgdgdmj.value,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
name: "总面积(亩/平方米）",
|
||||
stack:'left',
|
||||
itemStyle: {
|
||||
color: "#00AEFF",
|
||||
barBorderRadius:[4, 0, 0, 4],
|
||||
},
|
||||
label:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: 'DIN',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data: xfmj.value,
|
||||
},
|
||||
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
stack:'right',
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
name: "下发总数(个）",
|
||||
itemStyle: {
|
||||
color: "#3058E1",
|
||||
},
|
||||
label:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: 'DIN',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data: xftbzs.value,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
stack:'right',
|
||||
name: "剩余总数（个）",
|
||||
itemStyle: {
|
||||
color: "#16C8C5",
|
||||
barBorderRadius:[0, 4, 4, 0],
|
||||
},
|
||||
label:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: 'DIN',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data: sywfgdtbzs.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
||||
})
|
||||
watch(() => [props.countyId,props.landType],() => {
|
||||
GetTuBanSummary({countyid:props.countyId,type:props.landType}).then(res => {
|
||||
shaft.value = []
|
||||
sywfgdgdmj.value = []
|
||||
sywfgdtbzs.value = []
|
||||
xfmj.value = []
|
||||
xftbzs.value = []
|
||||
res.forEach(item => {
|
||||
shaft.value.push(item.countyname)
|
||||
sywfgdgdmj.value.push(item.sywfgdgdmj)
|
||||
sywfgdtbzs.value.push(item.sywfgdtbzs)
|
||||
xfmj.value.push(item.xfmj)
|
||||
xftbzs.value.push(item.xftbzs)
|
||||
})
|
||||
myChart.setOption({
|
||||
legend:[
|
||||
{
|
||||
data:['总面积(亩/平方米）','耕地面积(亩/平方米）'],
|
||||
right:'0px',
|
||||
top:'10px',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
textStyle:{
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
fontWeight: '400',
|
||||
fontSize: '10px',
|
||||
color: '#FFFFFF',
|
||||
}
|
||||
},
|
||||
{
|
||||
data:['下发总数(个）','剩余总数（个）'],
|
||||
left:'0px',
|
||||
top:'10px',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
gridIndex: 2,
|
||||
textStyle:{
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
fontWeight: '400',
|
||||
fontSize: '10px',
|
||||
color: '#FFFFFF',
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: [
|
||||
// 左
|
||||
{
|
||||
left: "0%",
|
||||
width: "40%",
|
||||
height: "90%",
|
||||
containLabel: true,
|
||||
},
|
||||
// 中
|
||||
{
|
||||
width: "0%",
|
||||
},
|
||||
// 右
|
||||
{
|
||||
right: "0%",
|
||||
width: "60%",
|
||||
height: "90%",
|
||||
containLabel: true,
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
inverse: true,
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
//轴线
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(25, 35, 57,0.2)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
show: true,
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
//轴线
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
type: "value",
|
||||
show: false,
|
||||
splitLine: {
|
||||
// 网格线
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
align: "center",
|
||||
type: "category",
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
data: shaft.value,
|
||||
axisLine: {
|
||||
//轴线
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: "#FFFFFF",
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
position: "center",
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
type: "category",
|
||||
inverse: false,
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
data: shaft.value, //使用空格使文字居中
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
position: "left",
|
||||
axisLabel: {
|
||||
fontFamily: 'PingFang SC',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
show: true,
|
||||
margin: 30,
|
||||
// width: 100,
|
||||
align: 'center',
|
||||
},
|
||||
type: "category",
|
||||
inverse: false,
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
//轴线
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: "#FFFFFF",
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
data: shaft.value,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
stack:'left',
|
||||
name: "耕地面积(亩/平方米）",
|
||||
itemStyle: {
|
||||
color: "#FF9C5D",
|
||||
},
|
||||
label:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: 'DIN',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data: sywfgdgdmj.value,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
name: "总面积(亩/平方米）",
|
||||
stack:'left',
|
||||
itemStyle: {
|
||||
color: "#00AEFF",
|
||||
barBorderRadius:[4, 0, 0, 4],
|
||||
},
|
||||
label:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: 'DIN',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data: xfmj.value,
|
||||
},
|
||||
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
stack:'right',
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
name: "下发总数(个）",
|
||||
itemStyle: {
|
||||
color: "#3058E1",
|
||||
},
|
||||
label:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: 'DIN',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data: xftbzs.value,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
xAxisIndex: 2,
|
||||
yAxisIndex: 2,
|
||||
stack:'right',
|
||||
name: "剩余总数（个）",
|
||||
itemStyle: {
|
||||
color: "#16C8C5",
|
||||
barBorderRadius:[0, 4, 4, 0],
|
||||
},
|
||||
label:{
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: 'DIN',
|
||||
fontWeight: '500',
|
||||
fontSize: '11px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data: sywfgdtbzs.value,
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sub-title{
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 2px 6px rgba(5,28,55,0.42);
|
||||
background: url(./statistical/sub_title.png);
|
||||
padding-left: 35px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<a-segmented v-model:value="props.landType" :options="data"
|
||||
style="width: 100%;height:37px;border-radius: 19px;background:#102649;margin-bottom: 23px;"
|
||||
@change="(v) => emits('changeLandType', v)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits } from "vue"
|
||||
const props = defineProps(['landType'])
|
||||
const emits = defineEmits(['changeLandType'])
|
||||
const data = ref([
|
||||
{
|
||||
label: '农用地',
|
||||
value: '农用地'
|
||||
},
|
||||
{
|
||||
label: '建设用地',
|
||||
value: '建设用地'
|
||||
},
|
||||
{
|
||||
label: '推堆土',
|
||||
value: '推堆土'
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ant-segmented-item){
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 19px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.5)
|
||||
}
|
||||
:deep(.ant-segmented-group){
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.ant-segmented-item-selected){
|
||||
background: linear-gradient(-38deg, #3058E1, #4CBBF5);
|
||||
box-shadow: 0px 1px 3px 0px rgba(3,10,26,0.25);
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
|
||||
<div class="show-data">
|
||||
<div class="left-data-item">
|
||||
<div class="item-mark"></div>
|
||||
<div class="item-value">
|
||||
<div>{{`已办结${ybjzs}个`}}</div>
|
||||
<div>{{`共${ybjmj}亩`}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-data-item">
|
||||
<div class="item-value">
|
||||
<div>{{`未办结${wbjzs}个`}}</div>
|
||||
<div>{{`共${wbjmj}亩`}}</div>
|
||||
</div>
|
||||
<div class="item-mark"></div>
|
||||
</div>
|
||||
<div style="width: 150px;position: absolute; top:50%;left:50%;transform:translate(-50%, -90%);z-index:1;">
|
||||
<div style="font-family: DIN;
|
||||
font-weight: 500;
|
||||
font-size: 46px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
display:flex;
|
||||
justify-content:center;">{{totalzs}}</div>
|
||||
<div style="font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
display:flex;
|
||||
justify-content:center;">总数量</div>
|
||||
</div>
|
||||
<div class="left-bg"></div>
|
||||
<div class="center-bg"></div>
|
||||
<div class="right-bg"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, defineProps, watch } from "vue"
|
||||
import { GetTotalAndAreaByType } from '@/api/statistical/index.ts'
|
||||
|
||||
const totalzs = ref(0)
|
||||
const wbjmj = ref(0)
|
||||
const wbjzs = ref(0)
|
||||
const ybjmj = ref(0)
|
||||
const ybjzs = ref(0)
|
||||
|
||||
const props = defineProps(['countyId','landType'])
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
const getData = () => {
|
||||
GetTotalAndAreaByType({countyid: props.countyId,type:props.landType}).then(res => {
|
||||
wbjmj.value = res.wbjmj
|
||||
wbjzs.value = res.wbjzs
|
||||
ybjmj.value = res.ybjmj
|
||||
ybjzs.value = res.ybjzs
|
||||
totalzs.value = res.totalzs
|
||||
})
|
||||
}
|
||||
watch(() => [props.countyId,props.landType], () => {
|
||||
getData()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.show-data{
|
||||
height: 142px;
|
||||
// padding-top: 23px;
|
||||
position: relative;
|
||||
.left-data-item{
|
||||
display: flex;
|
||||
.item-mark{
|
||||
width: 2px;
|
||||
height: 33px;
|
||||
background: #1B62BA;
|
||||
margin-right:12px;
|
||||
}
|
||||
.item-value{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #7EBBFF;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
}
|
||||
.right-data-item{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 30px;
|
||||
.item-mark{
|
||||
width: 2px;
|
||||
height: 33px;
|
||||
background: #04F4C3;
|
||||
|
||||
}
|
||||
.item-value{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #01FFC7;
|
||||
margin-bottom: 8px;
|
||||
margin-right:9px;
|
||||
}
|
||||
}
|
||||
.left-bg{
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
width: 136px;
|
||||
height:38px;
|
||||
background: url(./statistical/select_left_bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.center-bg{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 150px;
|
||||
height:85px;
|
||||
background: url(./statistical/select_center_bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.right-bg{
|
||||
position: absolute;
|
||||
width: 136px;
|
||||
height:39px;
|
||||
background: url(./statistical/select_right_bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
right: 14px;
|
||||
bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
<template>
|
||||
<div class="sub-title">
|
||||
趋势统计
|
||||
</div>
|
||||
<div class="show-charts-div">
|
||||
<div class="button-div">
|
||||
<div :class="`button-item ${unit == 0 && 'select-button-item'}`" @click="unit = 0">天</div>
|
||||
<div :class="`button-item ${unit == 1 && 'select-button-item'}`" @click="unit = 1">月</div>
|
||||
<!-- <div class="button-item">季度</div> -->
|
||||
</div>
|
||||
<div style="height: 184px;" id="trendECharts"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref,toRaw, defineProps, watch} from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
import { GetTrendData } from '@/api/statistical/index.ts'
|
||||
const props = defineProps(['countyId','landType'])
|
||||
|
||||
const unit = ref(0)
|
||||
const illegal = ref([])
|
||||
const buban = ref([])
|
||||
const fugeng = ref([])
|
||||
const other = ref([])
|
||||
const unillegal = ref([])
|
||||
const time = ref([])
|
||||
|
||||
let myChart:any = null
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
const getData = (isInit=true) => {
|
||||
GetTrendData({countyid:props.countyId,type:props.landType,datatype:unit.value}).then(res => {
|
||||
illegal.value = []
|
||||
buban.value = []
|
||||
fugeng.value = []
|
||||
other.value = []
|
||||
unillegal.value = []
|
||||
time.value = []
|
||||
console.log(111,res)
|
||||
res.forEach(item => {
|
||||
illegal.value.push(item.illegal)
|
||||
buban.value.push(item.buban)
|
||||
fugeng.value.push(item.fugeng)
|
||||
other.value.push(item.other)
|
||||
unillegal.value.push(item.unillegal)
|
||||
time.value.push(item.time)
|
||||
})
|
||||
if(isInit){
|
||||
initEcharts()
|
||||
}else{
|
||||
updataEcharts()
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
const initEcharts = () => {
|
||||
let chartDom = document.getElementById('trendECharts');
|
||||
myChart = echarts.init(chartDom);
|
||||
myChart.setOption({
|
||||
xAxis: {
|
||||
// type: 'category',
|
||||
axisLabel:{
|
||||
textStyle:{
|
||||
align: 'center',
|
||||
fontFamily: 'Arial',
|
||||
fontWeight: '400',
|
||||
fontSize: '7px',
|
||||
color: '#5092C1',
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#65C6E7',
|
||||
opacity: 0.2,
|
||||
}
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: time.value
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: ['#65C6E7'],
|
||||
opacity: 0.2,
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#65ABE7',
|
||||
opacity: 0.7,
|
||||
fontFamily: 'Source Han Sans SC',
|
||||
fontWeight: '200',
|
||||
fontSize: '10px',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
right:'0px',
|
||||
top: '5px',
|
||||
orient:'vertical',
|
||||
textStyle:{
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight: '400',
|
||||
fontSize: '10px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data:['合法','违法','其他','拆除复耕','补办手续'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '合法',
|
||||
type: 'line',
|
||||
data: illegal.value,
|
||||
itemStyle:{
|
||||
color:'#FF9C5D',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '违法',
|
||||
type: 'line',
|
||||
data: unillegal.value,
|
||||
itemStyle:{
|
||||
color:'#04CDF4',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'line',
|
||||
data: other.value,
|
||||
itemStyle:{
|
||||
color:'#20A70A',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '拆除复耕',
|
||||
type: 'line',
|
||||
data: fugeng.value,
|
||||
itemStyle:{
|
||||
color:'#AD04F4',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '补办手续',
|
||||
type: 'line',
|
||||
data: buban.value,
|
||||
itemStyle:{
|
||||
color:'#F4E004',
|
||||
}
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '30%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
});
|
||||
}
|
||||
const updataEcharts = () => {
|
||||
let chartDom = document.getElementById('trendECharts');
|
||||
let chart = echarts.getInstanceByDom(chartDom)
|
||||
chart?.setOption({
|
||||
xAxis: {
|
||||
// type: 'category',
|
||||
axisLabel:{
|
||||
textStyle:{
|
||||
align: 'center',
|
||||
fontFamily: 'Arial',
|
||||
fontWeight: '400',
|
||||
fontSize: '7px',
|
||||
color: '#5092C1',
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#65C6E7',
|
||||
opacity: 0.2,
|
||||
}
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: time.value
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: ['#65C6E7'],
|
||||
opacity: 0.2,
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#65ABE7',
|
||||
opacity: 0.7,
|
||||
fontFamily: 'Source Han Sans SC',
|
||||
fontWeight: '200',
|
||||
fontSize: '10px',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
right:'0px',
|
||||
top: '5px',
|
||||
orient:'vertical',
|
||||
textStyle:{
|
||||
fontFamily:'Microsoft YaHei',
|
||||
fontWeight: '400',
|
||||
fontSize: '10px',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
data:['合法','违法','其他','拆除复耕','补办手续'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '合法',
|
||||
type: 'line',
|
||||
data: illegal.value,
|
||||
itemStyle:{
|
||||
color:'#FF9C5D',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '违法',
|
||||
type: 'line',
|
||||
data: unillegal.value,
|
||||
itemStyle:{
|
||||
color:'#04CDF4',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'line',
|
||||
data: other.value,
|
||||
itemStyle:{
|
||||
color:'#20A70A',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '拆除复耕',
|
||||
type: 'line',
|
||||
data: fugeng.value,
|
||||
itemStyle:{
|
||||
color:'#AD04F4',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '补办手续',
|
||||
type: 'line',
|
||||
data: buban.value,
|
||||
itemStyle:{
|
||||
color:'#F4E004',
|
||||
}
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '30%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
});
|
||||
}
|
||||
watch(() => [props.countyId,props.landType,unit.value], () => {
|
||||
getData(false)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sub-title{
|
||||
height: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 2px 6px rgba(5,28,55,0.42);
|
||||
background: url(./statistical/sub_title.png);
|
||||
padding-left: 35px;
|
||||
}
|
||||
.show-charts-div{
|
||||
height: 212px;
|
||||
z-index: 1;
|
||||
.button-div{
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
.button-item{
|
||||
margin-top: 8px;
|
||||
width: 52px;
|
||||
height:20px;
|
||||
margin-right:8px;
|
||||
background: url(./statistical/charts_button.png) no-repeat;
|
||||
background-size: cover;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.select-button-item{
|
||||
background: url(./statistical/selected_charts_button.png) no-repeat;
|
||||
background-size: cover;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<!-- <div class="data-screen-div"> -->
|
||||
<div class="right-data-div">
|
||||
<TitleSelect :landType="landType" @changeLandType="changeLandType"/>
|
||||
<template v-if="firstPage">
|
||||
<TopSelect :landType="landType" :countyId="props.countyId"/>
|
||||
<DataStatistics :landType="landType" :countyId="props.countyId"/>
|
||||
<TrendStatistics :landType="landType" :countyId="props.countyId"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<PatchSummary :countyId="props.countyId" :landType="landType"/>
|
||||
</template>
|
||||
|
||||
<div class="page-turning" @click="() => firstPage = !firstPage">{{firstPage? '下一页' : '上一页'}}</div>
|
||||
<div class="right-decoration"></div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, defineProps } from "vue"
|
||||
import TitleSelect from './TitleSelect/index.vue'
|
||||
import TopSelect from './TopSelect/index.vue'
|
||||
import DataStatistics from './DataStatistics/index.vue'
|
||||
import TrendStatistics from './TrendStatistics/index.vue'
|
||||
import PatchSummary from './PatchSummary/index.vue'
|
||||
|
||||
const props = defineProps(['countyId'])
|
||||
|
||||
const firstPage = ref(true)
|
||||
const landType = ref('农用地')
|
||||
const changeLandType = (value) => {
|
||||
landType.value = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .data-screen-div{
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
.right-data-div{
|
||||
position: absolute;
|
||||
top:0;
|
||||
width: 462px;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
right: 0px;
|
||||
padding: 74px 42px 15px 21px;
|
||||
}
|
||||
// }
|
||||
.page-turning{
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
right: 34px;
|
||||
width: 74px;
|
||||
height: 30px;
|
||||
background: url(./statistical/page_turning.png);
|
||||
background-size: cover;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.right-decoration{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 69px;
|
||||
background: url(./statistical/right_decoration.png);
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,25 +3,26 @@
|
|||
<div class="county_div">
|
||||
<img
|
||||
id="left_direction_left"
|
||||
src="/statistical/left_direction_left.png"
|
||||
src="/statistical/left_direction_left1.png"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
top: '42px',
|
||||
left: '-4px',
|
||||
height: '31px',
|
||||
width: '31px',
|
||||
}"
|
||||
@click="scrollToElement('left')"
|
||||
/>
|
||||
<div ref="countyList" class="county_div_list" id="county_list">
|
||||
<div v-for="(item, index) in list" :key="item.id" :id="item.id" @click="clickCounty(item)">
|
||||
<div ref="countyList" class="county_div_list">
|
||||
<div v-for="item in list" :key="item.id" :id="item.id" @click="clickCounty(item)">
|
||||
<span>{{ item.name }}</span>
|
||||
<img
|
||||
v-if="!item.isClick"
|
||||
id="left_county_nochoose"
|
||||
src="/statistical/left_county_nochoose.png"
|
||||
:style="{
|
||||
marginLeft: '10px',
|
||||
marginRight: '10px',
|
||||
marginLeft: '11.5px',
|
||||
marginRight: '11.5px',
|
||||
}"
|
||||
/>
|
||||
<img
|
||||
|
|
@ -37,10 +38,11 @@
|
|||
</div>
|
||||
<img
|
||||
id="left_direction_right"
|
||||
src="/statistical/left_direction_right.png"
|
||||
src="/statistical/left_direction_right2.png"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
top: '42px',
|
||||
left: '4px',
|
||||
height: '31px',
|
||||
width: '31px',
|
||||
}"
|
||||
|
|
@ -48,7 +50,13 @@
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img id="left_decorative_bottom" src="/statistical/left_decorative_bottom.png" />
|
||||
<img
|
||||
id="left_decorative_bottom"
|
||||
src="/statistical/left_decorative_bottom.png"
|
||||
:style="{
|
||||
width: '840px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -65,17 +73,16 @@
|
|||
const scrollToElement = async (type) => {
|
||||
if (countyList.value) {
|
||||
if (type == 'left') {
|
||||
countyList.value.scrollLeft = countyList.value.scrollLeft - 107;
|
||||
countyList.value.scrollLeft = countyList.value.scrollLeft - 110;
|
||||
}
|
||||
if (type == 'right') {
|
||||
countyList.value.scrollLeft = countyList.value.scrollLeft + 107;
|
||||
countyList.value.scrollLeft = countyList.value.scrollLeft + 110;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 选择区县
|
||||
function clickCounty(record) {
|
||||
|
||||
list.value.forEach((item) => {
|
||||
if (item.cascadeId == record.cascadeId) {
|
||||
item.isClick = true;
|
||||
|
|
@ -105,8 +112,7 @@
|
|||
<style lang="less" scoped>
|
||||
.county_div {
|
||||
display: flex;
|
||||
left: 10px;
|
||||
width: 927px;
|
||||
width: 840px;
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
|
||||
|
|
@ -114,16 +120,20 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 856px;
|
||||
width: 770px;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
top: 35px;
|
||||
left: 30px;
|
||||
width: 110px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0);
|
||||
|
||||
background: linear-gradient(0deg, #6f81d4 0.146484375%, #ffffff 86.7919921875%);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="layerbutton">
|
||||
<div>
|
||||
<div class="layerbutton_div">
|
||||
<img
|
||||
id="left_layerButton_1"
|
||||
src="/statistical/left_layerButton_1.png"
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
src="/statistical/left_layerButton_3.png"
|
||||
@click="layerbutton_1"
|
||||
/>
|
||||
<span v-if="button_1" class="layerbutton_span">图斑</span>
|
||||
<span v-if="button_1" class="layerbutton_div_span">图斑</span>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
v-if="button_2"
|
||||
id="left_layerButton_3"
|
||||
src="/statistical/left_layerButton_3.png"
|
||||
@click="layerbutton_1"
|
||||
@click="layerbutton_2"
|
||||
/>
|
||||
<span v-if="button_2" class="layerbutton_span">热力图</span>
|
||||
<span v-if="button_2" class="layerbutton_div_span">热力图</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -51,35 +51,38 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.layerbutton {
|
||||
&_span {
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
left: -110px;
|
||||
color: #ffffff;
|
||||
&_div {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&_span {
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
left: -85px;
|
||||
top: 3px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#left_layerButton_1 {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 73px;
|
||||
margin-bottom: 15px;
|
||||
width: 78px;
|
||||
height: 63.5px;
|
||||
z-index: 1;
|
||||
}
|
||||
#left_layerButton_3 {
|
||||
position: relative;
|
||||
left: -25px;
|
||||
width: 128px;
|
||||
height: 47px;
|
||||
margin-bottom: 15px;
|
||||
left: -10px;
|
||||
width: 104px;
|
||||
height: 41px;
|
||||
z-index: 0;
|
||||
}
|
||||
#left_layerButton_2 {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 73px;
|
||||
width: 78px;
|
||||
height: 63.5px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,32 +4,34 @@
|
|||
src="/statistical/left_statistical.png"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
height: '100px',
|
||||
width: '200px',
|
||||
}"
|
||||
/>
|
||||
<div class="statistical_div">
|
||||
<a-row>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('违法');">
|
||||
<span class="statistical_div_dot" style="background:#FDA1A1;" />
|
||||
<a-col :span="10" @click="handlerChangePolygonType('违法')">
|
||||
<span class="statistical_div_dot" style="background: #fda1a1" />
|
||||
<span class="statistical_div_span">违法</span>
|
||||
</a-col>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('补办手续');">
|
||||
<span class="statistical_div_dot" style="background:#ABFCFF;" />
|
||||
<a-col :span="10" @click="handlerChangePolygonType('补办手续')">
|
||||
<span class="statistical_div_dot" style="background: #abfcff" />
|
||||
<span class="statistical_div_span">补办手续</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('合法');">
|
||||
<span class="statistical_div_dot" style="background:#FFECB9;"/>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('合法')">
|
||||
<span class="statistical_div_dot" style="background: #ffecb9" />
|
||||
<span class="statistical_div_span">合法</span>
|
||||
</a-col>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('拆除复耕');">
|
||||
<span class="statistical_div_dot" style="background:#C2B3FB;" />
|
||||
<a-col :span="10" @click="handlerChangePolygonType('拆除复耕')">
|
||||
<span class="statistical_div_dot" style="background: #c2b3fb" />
|
||||
<span class="statistical_div_span">拆除复耕</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('其他');">
|
||||
<span class="statistical_div_dot" style="background:#C7FFBC;" />
|
||||
<a-col :span="10" @click="handlerChangePolygonType('其他')">
|
||||
<span class="statistical_div_dot" style="background: #c7ffbc" />
|
||||
<span class="statistical_div_span">其他</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -38,34 +40,39 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineEmits } from 'vue';
|
||||
const emits = defineEmits(['handlerChangePolygonType']);
|
||||
|
||||
import {defineEmits} from "vue"
|
||||
const emits = defineEmits(["handlerChangePolygonType"])
|
||||
|
||||
function handlerChangePolygonType(type:String):void{
|
||||
emits("handlerChangePolygonType",type);
|
||||
}
|
||||
function handlerChangePolygonType(type: String): void {
|
||||
emits('handlerChangePolygonType', type);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.statistical {
|
||||
&_div {
|
||||
position: relative;
|
||||
top: -80px;
|
||||
left: 15px;
|
||||
top: -75px;
|
||||
left: 30px;
|
||||
|
||||
&_dot {
|
||||
display:inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position:relative;
|
||||
left:-5px;
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 20px;
|
||||
// border-radius: 50%;
|
||||
}
|
||||
|
||||
&_span {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 13px;
|
||||
color: #7ebbff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue