土地资源和首页修改
This commit is contained in:
parent
6d72828ede
commit
00189c9e38
@ -14,7 +14,12 @@
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="doAllChange">全选</el-checkbox>
|
||||
<div style="margin: 15px 0"></div>
|
||||
<el-checkbox-group v-model="checkedlist" @change="doSingleChange">
|
||||
<el-checkbox v-for="item in options" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
|
||||
<el-checkbox v-for="item in options" :label="item.id" :key="item.id">
|
||||
{{ item.name }}
|
||||
<div class="select-color-block">
|
||||
<el-color-picker v-model="item.color" size="small" show-alpha :disabled="false" />
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,12 +77,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ name: '旱地', id: '01' },
|
||||
{ name: '果园', id: '02' },
|
||||
{ name: '水浇地', id: '03' },
|
||||
{ name: '灌溉水田', id: '04' },
|
||||
{ name: '茶园', id: '05' },
|
||||
{ name: '菜地', id: '06' },
|
||||
{ name: '旱地', id: '01', color: '#d96298' },
|
||||
{ name: '果园', id: '02', color: '#d9e961' },
|
||||
{ name: '水浇地', id: '03', color: '#ba8ae3' },
|
||||
{ name: '灌溉水田', id: '04', color: '#88b0d3' },
|
||||
{ name: '茶园', id: '05', color: '#efc0ac' },
|
||||
{ name: '菜地', id: '06', color: '#80f1b0' },
|
||||
],
|
||||
checkAll: false,
|
||||
checkedlist: ['01', '02', '03', '04', '05', '06'],
|
||||
@ -100,13 +105,19 @@ export default {
|
||||
});
|
||||
this.checkedlist = val ? list : [];
|
||||
this.isIndeterminate = false;
|
||||
this.upLayersIds(this.checkedlist);
|
||||
this.upLayersIds(this.checkedlist, this.options);
|
||||
},
|
||||
getColors() {
|
||||
let list = this.options.map((m) => {
|
||||
return m.color;
|
||||
});
|
||||
return list;
|
||||
},
|
||||
doSingleChange(value) {
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.options.length;
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
|
||||
this.upLayersIds(this.checkedlist);
|
||||
this.upLayersIds(this.checkedlist, this.options);
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -131,6 +142,27 @@ export default {
|
||||
min-height: 50px;
|
||||
z-index: 9999;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
.select-color-block {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
::v-deep {
|
||||
.el-checkbox{
|
||||
margin:8px 0;
|
||||
}
|
||||
.el-color-picker {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.el-color-picker__trigger{
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border:0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#landMap::v-deep {
|
||||
|
||||
@ -10,6 +10,40 @@ const mapMixinLand = {
|
||||
loading: false,
|
||||
landType: [],
|
||||
deviceType: [],
|
||||
staticArea: [
|
||||
{
|
||||
id: '01',
|
||||
landPath: "99.88785,24.426105|99.892485,24.424855|99.894545,24.426418|99.89094,24.428137",
|
||||
fillColor: '#d96298', fillOpacity: 0.8, strokeColor: "#d96298", strokeWeight: 1, strokeOpacity: 0.8,
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
landPath: "99.877778,24.414434|99.880525,24.411073|99.883272,24.412245|99.881727,24.414981",
|
||||
fillColor: '#d9e961', fillOpacity: 0.8, strokeColor: "#d9e961", strokeWeight: 1, strokeOpacity: 0.8,
|
||||
},
|
||||
{
|
||||
id: '03',
|
||||
landPath: "99.853174,24.424073|99.850256,24.426105|99.855749,24.426731|99.880812,24.421885",
|
||||
fillColor: '#ba8ae3', fillOpacity: 0.8, strokeColor: "#ba8ae3", strokeWeight: 1, strokeOpacity: 0.8,
|
||||
},
|
||||
{
|
||||
id: '04',
|
||||
landPath: "99.866907,24.415946|99.861243,24.413601|99.859183,24.417196|99.880812,24.421885",
|
||||
fillColor: '#88b0d3', fillOpacity: 0.8, strokeColor: "#88b0d3", strokeWeight: 1, strokeOpacity: 0.8,
|
||||
},
|
||||
{
|
||||
id: '05',
|
||||
landPath: "99.865247,24.416309|99.867736,24.411151|99.869796,24.412323|99.86971,24.415684",
|
||||
fillColor: '#efc0ac', fillOpacity: 0.8, strokeColor: "#efc0ac", strokeWeight: 1, strokeOpacity: 0.8,
|
||||
},
|
||||
{
|
||||
id: '06',
|
||||
landPath: "99.858209,24.408963|99.86087,24.40396|99.863445,24.406305|99.862243,24.408806",
|
||||
fillColor: '#80f1b0', fillOpacity: 0.8, strokeColor: "#80f1b0", strokeWeight: 1, strokeOpacity: 0.8,
|
||||
}
|
||||
|
||||
],
|
||||
overlayGroup:[],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -51,33 +85,49 @@ const mapMixinLand = {
|
||||
mapStyle: 'amap://styles/grey',
|
||||
zoom: 12, // 初始化地图级别
|
||||
doubleClickZoom: false,
|
||||
center: [99.920974, 24.592758]
|
||||
});
|
||||
await this.createAreaPolygon();
|
||||
await this.createAreaPolygon(true);
|
||||
// await this.createDevicePoint();
|
||||
},
|
||||
/** 绘制地块 */
|
||||
createAreaPolygon() {
|
||||
createAreaPolygon(type, ids,options) {
|
||||
const label = [];
|
||||
const overlayGroup = [];
|
||||
this.area.forEach((item) => {
|
||||
let overlayGroupNew = [];
|
||||
// console.info('this.area', this.area)
|
||||
// this.area.forEach((item) => {
|
||||
let areaList = [];
|
||||
if (ids) {
|
||||
if (ids.length > 0) {
|
||||
areaList = this.staticArea.filter((m) => {
|
||||
return ids.includes(m.id)
|
||||
}) || []
|
||||
} else {areaList = [] }
|
||||
|
||||
} else { areaList = this.staticArea }
|
||||
|
||||
if(areaList.length>0){
|
||||
areaList.forEach((item) => {
|
||||
if (item.landPath) {
|
||||
const path = [];
|
||||
const pointList = [];
|
||||
let landPath = "99.890621,24.455971|99.890766,24.455854|99.890959,24.456001"
|
||||
// item.landPath.split('|').forEach((point) => {
|
||||
// path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
|
||||
// pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
|
||||
// });
|
||||
landPath.split('|').forEach((point) => {
|
||||
item.landPath.split('|').forEach((point) => {
|
||||
path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
|
||||
pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
|
||||
});
|
||||
let colorVal='';
|
||||
if(options && options.length>0){
|
||||
let indexF=options.findIndex((m)=>{
|
||||
return m.id==item.id
|
||||
})
|
||||
colorVal=indexF>-1 ? options[indexF].color : ''
|
||||
}
|
||||
const polygon = new this.AMap.Polygon({
|
||||
path: path,
|
||||
fillColor: item.fillColor,
|
||||
fillColor:colorVal|| item.fillColor,
|
||||
fillOpacity: item.fillOpacity,
|
||||
strokeColor: item.strokeColor,
|
||||
strokeWeight: item.strokeWeight,
|
||||
strokeColor:colorVal || '',
|
||||
strokeWeight: colorVal|| item.fillColor,
|
||||
strokeOpacity: item.strokeOpacity,
|
||||
extData: {
|
||||
...item,
|
||||
@ -87,11 +137,14 @@ const mapMixinLand = {
|
||||
this.createInfoWindow(e);
|
||||
});
|
||||
|
||||
overlayGroup.push(polygon);
|
||||
this.overlayGroup.push(polygon);
|
||||
if(type==false){
|
||||
overlayGroupNew.push(polygon)
|
||||
}
|
||||
// 添加地块名称
|
||||
label.push(
|
||||
new this.AMap.Text({
|
||||
text: item.landName,
|
||||
text: item.landName ? item.landName : '名称',
|
||||
anchor: 'center',
|
||||
position: this.getAreaCenter(pointList),
|
||||
style: {
|
||||
@ -104,10 +157,26 @@ const mapMixinLand = {
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
// this.map.add(new this.AMap.OverlayGroup(label));
|
||||
this.map.add(new this.AMap.OverlayGroup(overlayGroup));
|
||||
this.map.setFitView(overlayGroup);
|
||||
this.loading = false;
|
||||
if (type) {
|
||||
if(this.overlayGroup.length>0){
|
||||
this.map.add(new this.AMap.OverlayGroup(this.overlayGroup));
|
||||
this.map.setFitView(this.overlayGroup);
|
||||
this.map.setZoom(13)
|
||||
// this.map.moveCamera(CameraUpdateFactory.zoomTo(15))
|
||||
this.loading = false;
|
||||
}
|
||||
}else{
|
||||
this.map.remove(this.overlayGroup)
|
||||
this.map.add(new this.AMap.OverlayGroup(overlayGroupNew));
|
||||
}
|
||||
|
||||
},
|
||||
getlandPath(ids) {
|
||||
if (ids && ids.length > 0) {
|
||||
let key = Object.keys(this.ob)
|
||||
}
|
||||
},
|
||||
/** 创建设备marker点 */
|
||||
createDevicePoint() {
|
||||
@ -135,8 +204,9 @@ const mapMixinLand = {
|
||||
this.map.add(new this.AMap.OverlayGroup(devicePointList));
|
||||
this.loading = false;
|
||||
},
|
||||
upLayersIds(ids) {
|
||||
console.info('upLayersIds**********',ids)
|
||||
upLayersIds(ids,options) {
|
||||
console.info('upLayersIds**********', ids)
|
||||
this.createAreaPolygon(false, ids,options)
|
||||
},
|
||||
/** 获取地块中心点 */
|
||||
getAreaCenter(location) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="w100 h100">
|
||||
<div class="topBox">
|
||||
<div class="topLft">
|
||||
<p>3200万元</p>
|
||||
<p>104.17亿元</p>
|
||||
<p>企业总产值</p>
|
||||
</div>
|
||||
<div class="topRit">
|
||||
@ -30,11 +30,11 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
dataList: [
|
||||
{ name: '农户', nums: 125, imgs: require('../img/5.png'), homer: '（家）' },
|
||||
{ name: '农企/合作社', nums: 28, imgs: require('../img/6.png'), homer: '（家）' },
|
||||
{ name: '生产加工企业', nums: 56, imgs: require('../img/7.png'), homer: '（家）' },
|
||||
{ name: '农资企业', nums: 811, imgs: require('../img/8.png'), homer: '（家）' },
|
||||
{ name: '种源企业', nums: 69, imgs: require('../img/5.png'), homer: '（家）' },
|
||||
{ name: '农户', nums: 12417, imgs: require('../img/5.png'), homer: '（家）' },
|
||||
{ name: '农企/合作社', nums: 893, imgs: require('../img/6.png'), homer: '（家）' },
|
||||
{ name: '生产加工企业', nums: 73, imgs: require('../img/7.png'), homer: '（家）' },
|
||||
{ name: '农资企业', nums: 6, imgs: require('../img/8.png'), homer: '（家）' },
|
||||
{ name: '种源企业', nums: 5, imgs: require('../img/5.png'), homer: '（家）' },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -56,17 +56,17 @@ export default {
|
||||
p:nth-child(1) {
|
||||
background: url('../img/4.png');
|
||||
background-size: 100% 100%;
|
||||
width: 144px;
|
||||
width: 180px;
|
||||
height: 112px;
|
||||
text-align: center;
|
||||
line-height: 112px;
|
||||
color: #ccefff;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
p:nth-child(2) {
|
||||
background: url('../img/9.png');
|
||||
background-size: 100% 100%;
|
||||
width: 125px;
|
||||
width: 165px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
|
||||
@ -21,12 +21,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{ name: '种子使用', num: 4900.67, percent: '吨', img: require('../img/10.png') },
|
||||
{ name: '农药使用', num: 5100.15, percent: '吨', img: require('../img/11.png') },
|
||||
{ name: '化肥使用', num: 9100.59, percent: '吨', img: require('../img/12.png') },
|
||||
{ name: '饲料', num: 89043.09, percent: '吨', img: require('../img/13.png') },
|
||||
{ name: '兽药', num: 110.34, percent: '吨', img: require('../img/14.png') },
|
||||
{ name: '农机使用', num: 8100.86, percent: '台', img: require('../img/15.png') },
|
||||
{ name: '种子使用', num: 171, percent: '吨', img: require('../img/10.png') },
|
||||
{ name: '农药使用', num: 224.26, percent: '吨', img: require('../img/11.png') },
|
||||
{ name: '化肥使用', num: 41650, percent: '吨', img: require('../img/12.png') },
|
||||
{ name: '饲料', num: 615148, percent: '吨', img: require('../img/13.png') },
|
||||
{ name: '兽药', num: 805.092, percent: '吨', img: require('../img/14.png') },
|
||||
{ name: '农机使用', num: 18170, percent: '台', img: require('../img/15.png') },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@ -48,7 +48,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
bg: require('../img/bg.png'),
|
||||
title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种殖数据统计'],
|
||||
title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种植数据统计'],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -183,7 +183,7 @@ export default {
|
||||
this.statusChart.resize();
|
||||
},
|
||||
initChart2() {
|
||||
let data = ['核桃', '茶叶', '小麦', '玉米'];
|
||||
let data = ['核桃', '茶叶', '小麦', '玉米', '水稻', '薯类', '坚果', '中药材', '烤烟'];
|
||||
let option = {
|
||||
grid: {
|
||||
top: '8%',
|
||||
@ -255,13 +255,13 @@ export default {
|
||||
barBorderRadius: 30,
|
||||
color: function (params) {
|
||||
// 颜色定制显示（按顺序）
|
||||
var colorList = ['#4a5eea', '#f29b76', '#ea9ef3', '#80f1b0'];
|
||||
var colorList = ['#4a5eea', '#f29b76', '#ea9ef3', '#80f1b0','#4a5eea', '#f29b76', '#ea9ef3', '#80f1b0','#4a5eea', ];
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
},
|
||||
},
|
||||
barWidth: 10,
|
||||
data: [63, 100, 30, 26],
|
||||
data: [17.6, 4.6, 1.7, 10.85, 10.85, 1.96, 17.6, 0.816, 20],
|
||||
},
|
||||
{
|
||||
name: '外框',
|
||||
@ -276,7 +276,7 @@ export default {
|
||||
barGap: '-100%',
|
||||
z: 0,
|
||||
barWidth: 10,
|
||||
data: [100, 100, 100, 100],
|
||||
data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -8,31 +8,19 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chartData: [
|
||||
{
|
||||
name: '三岔河镇',
|
||||
value: 50,
|
||||
test: '备注1',
|
||||
},
|
||||
{
|
||||
name: '大寺乡',
|
||||
value: 60,
|
||||
test: '备注2',
|
||||
},
|
||||
{
|
||||
name: '凤山镇',
|
||||
value: 66,
|
||||
test: '备注3',
|
||||
},
|
||||
{
|
||||
name: '小湾镇',
|
||||
value: 72,
|
||||
test: '备注4',
|
||||
},
|
||||
{
|
||||
name: '勐佑镇',
|
||||
value: 80,
|
||||
test: '备注5',
|
||||
},
|
||||
{ name: '凤山镇', value: 31.72 },
|
||||
{ name: '勐佑镇', value: 57.27 },
|
||||
{ name: '三岔河镇', value: 42.12 },
|
||||
{ name: '小湾镇', value: 29.75 },
|
||||
{ name: '洛党镇', value: 38.73 },
|
||||
{ name: '雪山镇', value: 38.73 },
|
||||
{ name: '营盘镇', value: 55.03 },
|
||||
{ name: '郭大寨乡', value: 26.35 },
|
||||
{ name: '大寺乡', value: 33.53 },
|
||||
{ name: '鲁史镇', value: 47.7 },
|
||||
{ name: '诗礼乡', value: 32.56 },
|
||||
{ name: '新华乡', value: 42.12 },
|
||||
{ name: '腰街乡', value: 13.73 },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -138,23 +126,23 @@ export default {
|
||||
})(this.chartData), // 载入y轴数据
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barGap: '-130%',
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1a2859', // 图表颜色
|
||||
},
|
||||
},
|
||||
data: bgData, // 载入背景数据
|
||||
z: 0,
|
||||
},
|
||||
// {
|
||||
// type: 'bar',
|
||||
// barGap: '-130%',
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// barWidth: 12,
|
||||
// itemStyle: {
|
||||
// // normal: {
|
||||
// // color: '#1a2859', // 图表颜色
|
||||
// // },
|
||||
// },
|
||||
// data: bgData, // 载入背景数据
|
||||
// z: 0,
|
||||
// },
|
||||
{
|
||||
type: 'bar',
|
||||
label: {
|
||||
@ -163,18 +151,30 @@ export default {
|
||||
position: 'right', // top, right, inside, insideTop,...
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontSize: 10,
|
||||
},
|
||||
formatter: '{c}' + '万亩',
|
||||
},
|
||||
},
|
||||
barWidth: 12,
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
// 颜色定制显示（按顺序）
|
||||
var colorList = $colorList;
|
||||
return colorList[params.dataIndex];
|
||||
// color: function (params) {
|
||||
// // 颜色定制显示（按顺序）
|
||||
// var colorList = $colorList;
|
||||
// return colorList[params.dataIndex];
|
||||
// },
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#99dcf3' },
|
||||
{ offset: 1, color: '#01589c' },
|
||||
],
|
||||
|
||||
},
|
||||
barBorderRadius: [0, 17, 17, 0], //圆角
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user