diff --git a/src/views/dataV/layOutLand.vue b/src/views/dataV/layOutLand.vue index 76c571c..fc57fb3 100644 --- a/src/views/dataV/layOutLand.vue +++ b/src/views/dataV/layOutLand.vue @@ -14,7 +14,12 @@ 全选
- {{ item.name }} + + {{ item.name }} +
+ +
+
@@ -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 { diff --git a/src/views/dataV/mapland.js b/src/views/dataV/mapland.js index 4c1b449..f73023c 100644 --- a/src/views/dataV/mapland.js +++ b/src/views/dataV/mapland.js @@ -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) { diff --git a/src/views/dataV/pageOne/HomeCount.vue b/src/views/dataV/pageOne/HomeCount.vue index 83b6429..c9c32b0 100644 --- a/src/views/dataV/pageOne/HomeCount.vue +++ b/src/views/dataV/pageOne/HomeCount.vue @@ -2,7 +2,7 @@
-

3200万元

+

104.17亿元

企业总产值

@@ -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; diff --git a/src/views/dataV/pageOne/greenIndustry.vue b/src/views/dataV/pageOne/greenIndustry.vue index e195b99..b3fa11e 100644 --- a/src/views/dataV/pageOne/greenIndustry.vue +++ b/src/views/dataV/pageOne/greenIndustry.vue @@ -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') }, ], }; }, diff --git a/src/views/dataV/pageOne/index.vue b/src/views/dataV/pageOne/index.vue index bed8418..f50cd48 100644 --- a/src/views/dataV/pageOne/index.vue +++ b/src/views/dataV/pageOne/index.vue @@ -48,7 +48,7 @@ export default { data() { return { bg: require('../img/bg.png'), - title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种殖数据统计'], + title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种植数据统计'], }; }, watch: { diff --git a/src/views/dataV/pageOne/industrypercent.vue b/src/views/dataV/pageOne/industrypercent.vue index 9e904cb..dc94832 100644 --- a/src/views/dataV/pageOne/industrypercent.vue +++ b/src/views/dataV/pageOne/industrypercent.vue @@ -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], }, ], }; diff --git a/src/views/dataV/pageOne/moneyIndustry.vue b/src/views/dataV/pageOne/moneyIndustry.vue index 020bc55..d1f3ac7 100644 --- a/src/views/dataV/pageOne/moneyIndustry.vue +++ b/src/views/dataV/pageOne/moneyIndustry.vue @@ -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], //圆角 },