| @@ -0,0 +1 @@ | |||||
| <div :id="id" class="chart"></div> | |||||
| @@ -0,0 +1,269 @@ | |||||
| import * as echarts from 'echarts'; | |||||
| import elementResizeDetectorMaker from 'element-resize-detector'; | |||||
| export default { | |||||
| props: { | |||||
| id: { | |||||
| type: String, | |||||
| default: 'bar' | |||||
| }, | |||||
| data: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return [ | |||||
| { | |||||
| name: '1月', | |||||
| value: '10' | |||||
| }, | |||||
| { | |||||
| name: '2月', | |||||
| value: '19' | |||||
| } | |||||
| ]; | |||||
| } | |||||
| }, | |||||
| unit: { | |||||
| type: String, | |||||
| default: '单位:万元' | |||||
| }, | |||||
| interval: { | |||||
| type: Number, | |||||
| default: null | |||||
| }, | |||||
| rotate: { | |||||
| type: Number, | |||||
| default: 0 | |||||
| }, | |||||
| serverName: { | |||||
| type: String, | |||||
| default: '面积' | |||||
| }, | |||||
| color: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)'] | |||||
| } | |||||
| }, | |||||
| barBorderRadius: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return [0, 0, 0, 0] | |||||
| } | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| chart: null | |||||
| }; | |||||
| }, | |||||
| watch: { | |||||
| data: { | |||||
| handler: function (val) { | |||||
| this.$nextTick(function () { | |||||
| setTimeout(() => { | |||||
| this.initChart(); | |||||
| }, 2000) | |||||
| }); | |||||
| }, | |||||
| immediate: true, | |||||
| deep: true | |||||
| } | |||||
| }, | |||||
| create () { | |||||
| }, | |||||
| mounted () { | |||||
| // setTimeout(()=>{ | |||||
| // this.initChart(); | |||||
| // },2000) | |||||
| }, | |||||
| computed: { | |||||
| }, | |||||
| methods: { | |||||
| // 设置监听器 页面尺寸变化重新绘制图表 | |||||
| initResizeCallBack () { | |||||
| const erd = elementResizeDetectorMaker(); | |||||
| erd.listenTo(document.getElementById(this.id), () => { | |||||
| this.$nextTick(() => { | |||||
| if (document.getElementById(this.id).offsetWidth > 500){ | |||||
| this.rotate = 60; | |||||
| }else{ | |||||
| this.rotate = 0; | |||||
| } | |||||
| this.chart.resize(); | |||||
| this.chart.setOption({ | |||||
| // 新的配置项,例如: | |||||
| xAxis: { | |||||
| axisLabel: { | |||||
| rotate: this.rotate | |||||
| }, | |||||
| } | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| initChart () { | |||||
| this.chart = echarts.init(document.getElementById(this.id)); | |||||
| this.chartSetOption(); | |||||
| }, | |||||
| chartSetOption () { | |||||
| let xAxisData = []; | |||||
| let data = []; | |||||
| let bgData = []; | |||||
| this.data.forEach(item => { | |||||
| xAxisData.push(item.name) | |||||
| data.push(item.value) | |||||
| bgData.push(100) | |||||
| }); | |||||
| const option = { | |||||
| color: ["#2195fe","#04e26f","#f7cc3a","#f77e3f"], | |||||
| tooltip: { | |||||
| trigger: "axis", | |||||
| axisPointer: { | |||||
| type: "line", | |||||
| lineStyle: { | |||||
| opacity: 0, | |||||
| }, | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| data: ["村集体", "农民", "公司", "其它"], | |||||
| top: '3%', | |||||
| right: '5%', | |||||
| textStyle: { | |||||
| color: 'rgba(210, 238, 255, 1)', | |||||
| }, | |||||
| }, | |||||
| grid: { | |||||
| left: "5%", | |||||
| right: "5%", | |||||
| bottom: "5%", | |||||
| top: "15%", | |||||
| containLabel: true, | |||||
| z: 22, | |||||
| }, | |||||
| xAxis: [ | |||||
| { | |||||
| splitArea: { | |||||
| show: false, | |||||
| areaStyle: { | |||||
| color: ['RGBA(13, 31, 64, 1)'] | |||||
| } | |||||
| }, | |||||
| splitLine: { | |||||
| show: false, | |||||
| lineStyle: { | |||||
| color: ['rgba(18, 40, 83, 1)'], | |||||
| width: 100 | |||||
| } | |||||
| }, | |||||
| type: "category", | |||||
| gridIndex: 0, | |||||
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//xAxisData | |||||
| axisTick: { | |||||
| alignWithLabel: true, | |||||
| }, | |||||
| axisLine: { | |||||
| lineStyle: { | |||||
| color: "#0c3b71", | |||||
| }, | |||||
| }, | |||||
| axisLabel: { | |||||
| show: true, | |||||
| rotate: this.rotate, | |||||
| color: 'rgba(185, 211, 235, 1)' | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| yAxis: [ | |||||
| { | |||||
| type: "value", | |||||
| name: this.unit, | |||||
| nameTextStyle: { | |||||
| color: 'rgba(185, 211, 235, 1)' | |||||
| }, | |||||
| axisLabel: { | |||||
| formatter: "{value}", | |||||
| textStyle: { | |||||
| color: "rgba(185, 211, 235, 1)", | |||||
| }, | |||||
| }, | |||||
| axisLine: { | |||||
| lineStyle: { | |||||
| color: "#27b4c2", | |||||
| }, | |||||
| }, | |||||
| axisTick: { | |||||
| show: false, | |||||
| }, | |||||
| splitLine: { | |||||
| show: true, | |||||
| lineStyle: { | |||||
| color: "#11366e", | |||||
| }, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| type: "value", | |||||
| gridIndex: 0, | |||||
| max: 100, | |||||
| splitNumber: 12, | |||||
| splitLine: { | |||||
| show: false, | |||||
| }, | |||||
| axisLine: { | |||||
| show: false, | |||||
| }, | |||||
| axisTick: { | |||||
| show: false, | |||||
| }, | |||||
| axisLabel: { | |||||
| show: false, | |||||
| } | |||||
| }, | |||||
| ], | |||||
| series: [ | |||||
| { | |||||
| name: '村集体', | |||||
| barWidth: 20, | |||||
| type: 'bar', | |||||
| stack: 'Ad', | |||||
| emphasis: { | |||||
| focus: 'series' | |||||
| }, | |||||
| data: [320, 332, 301, 334, 390, 330, 320] | |||||
| }, | |||||
| { | |||||
| name: '农民', | |||||
| type: 'bar', | |||||
| stack: 'Ad', | |||||
| emphasis: { | |||||
| focus: 'series' | |||||
| }, | |||||
| data: [120, 132, 101, 134, 90, 230, 210] | |||||
| }, | |||||
| { | |||||
| name: '公司', | |||||
| type: 'bar', | |||||
| stack: 'Ad', | |||||
| emphasis: { | |||||
| focus: 'series' | |||||
| }, | |||||
| data: [220, 182, 191, 234, 290, 330, 310] | |||||
| }, | |||||
| { | |||||
| name: '其它', | |||||
| type: 'bar', | |||||
| stack: 'Ad', | |||||
| emphasis: { | |||||
| focus: 'series' | |||||
| }, | |||||
| data: [150, 232, 201, 154, 190, 330, 410] | |||||
| }, | |||||
| ] | |||||
| }; | |||||
| this.chart.setOption(option); | |||||
| this.initResizeCallBack(); | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,6 @@ | |||||
| .chart { | |||||
| overflow: visible; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| z-index: 2; | |||||
| } | |||||
| @@ -0,0 +1,3 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped></style> | |||||
| @@ -4,7 +4,7 @@ export default { | |||||
| props: { | props: { | ||||
| id: { | id: { | ||||
| type: String, | type: String, | ||||
| default: 'lines' | |||||
| default: 'line' | |||||
| }, | }, | ||||
| data: { | data: { | ||||
| type: Array, | type: Array, | ||||
| @@ -60,12 +60,12 @@ export default { | |||||
| }, | }, | ||||
| chartSetOption () { | chartSetOption () { | ||||
| let xAxisData = []; | |||||
| let data = []; | |||||
| this.data.forEach(item => { | |||||
| xAxisData.push(item.name) | |||||
| data.push(item.value) | |||||
| }); | |||||
| // let xAxisData = []; | |||||
| // let data = []; | |||||
| // this.data.forEach(item => { | |||||
| // xAxisData.push(item.name) | |||||
| // data.push(item.value) | |||||
| // }); | |||||
| const option = { | const option = { | ||||
| grid: { | grid: { | ||||
| left: "5%", | left: "5%", | ||||
| @@ -90,11 +90,7 @@ export default { | |||||
| { | { | ||||
| offset: 0.5, | offset: 0.5, | ||||
| color: this.color[1], | color: this.color[1], | ||||
| }, | |||||
| { | |||||
| offset: 0, | |||||
| color: this.color[2], | |||||
| }, | |||||
| } | |||||
| ]), | ]), | ||||
| }, | }, | ||||
| xAxis: [ | xAxis: [ | ||||
| @@ -113,7 +109,7 @@ export default { | |||||
| splitLine: { | splitLine: { | ||||
| show: false | show: false | ||||
| }, | }, | ||||
| data: xAxisData | |||||
| data: ['鸭池镇','梨树镇','岔河镇','田坝镇','长春镇堡','八寨镇','林口镇'] //xAxisData | |||||
| }, | }, | ||||
| ], | ], | ||||
| yAxis: [ | yAxis: [ | ||||
| @@ -147,10 +143,10 @@ export default { | |||||
| ], | ], | ||||
| series: [ | series: [ | ||||
| { | { | ||||
| name: "", | |||||
| type: "line", | |||||
| name: 'Email', | |||||
| type: 'line', | |||||
| stack: 'Total', | |||||
| smooth: true, | smooth: true, | ||||
| symbolSize: 12, | |||||
| itemStyle: { | itemStyle: { | ||||
| normal: { | normal: { | ||||
| color: this.color[0], | color: this.color[0], | ||||
| @@ -162,31 +158,87 @@ export default { | |||||
| color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ | color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ | ||||
| { | { | ||||
| offset: 1, | offset: 1, | ||||
| color: this.areaStyle[0], | |||||
| }, | |||||
| { | |||||
| offset: 0.5, | |||||
| color: this.areaStyle[1], | |||||
| color: this.color[0], | |||||
| }, | }, | ||||
| { | { | ||||
| offset: 0, | offset: 0, | ||||
| color: this.areaStyle[2], | |||||
| color: 'rgba(0,0,0,0)', | |||||
| }, | }, | ||||
| ]), | ]), | ||||
| }, | }, | ||||
| }, | }, | ||||
| }, | }, | ||||
| markPoint: { | |||||
| itemStyle: { | |||||
| normal: { | |||||
| color: "red", | |||||
| data: [120, 132, 101, 134, 90, 230, 210] | |||||
| }, | |||||
| { | |||||
| name: 'Union Ads', | |||||
| type: 'line', | |||||
| stack: 'Total', | |||||
| smooth: true, | |||||
| itemStyle: { | |||||
| normal: { | |||||
| color: this.color[1], | |||||
| lineStyle: { | |||||
| color: this.color[1], | |||||
| width: 1, | |||||
| }, | |||||
| areaStyle: { | |||||
| color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ | |||||
| { | |||||
| offset: 1, | |||||
| color: this.color[1], | |||||
| }, | |||||
| { | |||||
| offset: 0, | |||||
| color: 'rgba(0,0,0,0)', | |||||
| }, | |||||
| ]), | |||||
| }, | }, | ||||
| }, | }, | ||||
| }, | }, | ||||
| data: data | |||||
| } | |||||
| data: [220, 182, 191, 234, 290, 330, 310] | |||||
| }, | |||||
| // { | |||||
| // name: "", | |||||
| // type: "line", | |||||
| // smooth: true, | |||||
| // symbolSize: 12, | |||||
| // itemStyle: { | |||||
| // normal: { | |||||
| // color: this.color[0], | |||||
| // lineStyle: { | |||||
| // color: this.color[0], | |||||
| // width: 1, | |||||
| // }, | |||||
| // areaStyle: { | |||||
| // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ | |||||
| // { | |||||
| // offset: 1, | |||||
| // color: this.areaStyle[0], | |||||
| // }, | |||||
| // { | |||||
| // offset: 0.5, | |||||
| // color: this.areaStyle[1], | |||||
| // }, | |||||
| // { | |||||
| // offset: 0, | |||||
| // color: this.areaStyle[2], | |||||
| // }, | |||||
| // ]), | |||||
| // }, | |||||
| // }, | |||||
| // }, | |||||
| // markPoint: { | |||||
| // itemStyle: { | |||||
| // normal: { | |||||
| // color: "red", | |||||
| // }, | |||||
| // }, | |||||
| // }, | |||||
| // data: data | |||||
| // } | |||||
| ], | ], | ||||
| };; | |||||
| }; | |||||
| this.chart.setOption(option); | this.chart.setOption(option); | ||||
| this.initResizeCallBack(); | this.initResizeCallBack(); | ||||
| @@ -42,6 +42,12 @@ const routes = [ | |||||
| path: '/sanqing', | path: '/sanqing', | ||||
| name: 'sanqing', | name: 'sanqing', | ||||
| component: () => import('@/views/sanqing/index.vue') | component: () => import('@/views/sanqing/index.vue') | ||||
| }, | |||||
| // // 三清五治 | |||||
| { | |||||
| path: '/industry', | |||||
| name: 'industry', | |||||
| component: () => import('@/views/industry/index.vue') | |||||
| } | } | ||||
| ]; | ]; | ||||
| @@ -78,10 +78,11 @@ export function assetLiabilityAnalysis (deptId, year) { | |||||
| } | } | ||||
| // 资金一张图-右中-资金收入排名 | // 资金一张图-右中-资金收入排名 | ||||
| export function rankingOfFundIncome (deptId, year) { | |||||
| export function rankingOfFundIncome (deptId, year, num) { | |||||
| let query = { | let query = { | ||||
| deptId, | deptId, | ||||
| year | |||||
| year, | |||||
| num | |||||
| } | } | ||||
| return request({ | return request({ | ||||
| url: 'api/home/xixia/finance/zjsrpm', | url: 'api/home/xixia/finance/zjsrpm', | ||||
| @@ -91,10 +92,11 @@ export function rankingOfFundIncome (deptId, year) { | |||||
| } | } | ||||
| // 资金一张图-右下-资金支出排名 | // 资金一张图-右下-资金支出排名 | ||||
| export function rankingOfCapitalExpenditure (deptId, year) { | |||||
| export function rankingOfCapitalExpenditure (deptId, year, num) { | |||||
| let query = { | let query = { | ||||
| deptId, | deptId, | ||||
| year | |||||
| year, | |||||
| num | |||||
| } | } | ||||
| return request({ | return request({ | ||||
| url: 'api/home/xixia/finance/zjzhcpm', | url: 'api/home/xixia/finance/zjzhcpm', | ||||
| @@ -33,7 +33,7 @@ export default { | |||||
| getData () { | getData () { | ||||
| if (this.year, this.deptId) { | if (this.year, this.deptId) { | ||||
| this.isLoad = false; | this.isLoad = false; | ||||
| rankingOfCapitalExpenditure(this.deptId, this.year).then(res => { | |||||
| rankingOfCapitalExpenditure(this.deptId, this.year, 100).then(res => { | |||||
| let data = res.data.map(item => { | let data = res.data.map(item => { | ||||
| return [item.name, item.value, item.index] | return [item.name, item.value, item.index] | ||||
| }) | }) | ||||
| @@ -38,7 +38,7 @@ export default { | |||||
| getData () { | getData () { | ||||
| if (this.year, this.deptId) { | if (this.year, this.deptId) { | ||||
| this.isLoad = false; | this.isLoad = false; | ||||
| rankingOfFundIncome(this.deptId, this.year).then(res => { | |||||
| rankingOfFundIncome(this.deptId, this.year, 100).then(res => { | |||||
| let data = res.data.map(item => { | let data = res.data.map(item => { | ||||
| return [item.name, item.value, item.index] | return [item.name, item.value, item.index] | ||||
| }) | }) | ||||
| @@ -0,0 +1,34 @@ | |||||
| export default [ | |||||
| [ | |||||
| { | |||||
| show: true, | |||||
| name: '农用地(亩)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '建设用地(亩)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '未利用地(亩)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '农用地(宗)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '建设用地(宗)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '未利用地(宗)', | |||||
| value: '103' | |||||
| } | |||||
| ] | |||||
| ] | |||||
| @@ -0,0 +1,52 @@ | |||||
| <div class="buttom2"> | |||||
| <div style="display: flex;justify-content: space-between;"> | |||||
| <div class="flex_main"> | |||||
| <i></i> | |||||
| <p class="tt">集体资源资产统计</p> | |||||
| <div class="flex_block"> | |||||
| <p>数量</p> | |||||
| <p>{{data.jtzyzc.num}}个</p> | |||||
| </div> | |||||
| <div class="flex_block"> | |||||
| <p>用地面积</p> | |||||
| <p>{{data.jtzyzc.ydmj}}亩</p> | |||||
| </div> | |||||
| <div class="flex_block"> | |||||
| <p>建筑面积</p> | |||||
| <p>{{data.jtzyzc.jzmj}}㎡</p> | |||||
| </div> | |||||
| </div> | |||||
| <div class="flex_main"> | |||||
| <i></i> | |||||
| <p class="tt">农业设施设备统计</p> | |||||
| <div class="flex_block"> | |||||
| <p>数量</p> | |||||
| <p>{{data.nysssb.num}}个</p> | |||||
| </div> | |||||
| <div class="flex_block"> | |||||
| <p>用地面积</p> | |||||
| <p>{{data.nysssb.ydmj}}亩</p> | |||||
| </div> | |||||
| <div class="flex_block"> | |||||
| <p>建筑面积</p> | |||||
| <p>{{data.nysssb.jzmj}}㎡</p> | |||||
| </div> | |||||
| </div> | |||||
| <div class="flex_main"> | |||||
| <i></i> | |||||
| <p class="tt">农户资产统计</p> | |||||
| <div class="flex_block"> | |||||
| <p>数量</p> | |||||
| <p>{{data.nhzc.num}}个</p> | |||||
| </div> | |||||
| <div class="flex_block"> | |||||
| <p>用地面积</p> | |||||
| <p>{{data.nhzc.ydmj}}亩</p> | |||||
| </div> | |||||
| <div class="flex_block"> | |||||
| <p>建筑面积</p> | |||||
| <p>{{data.nhzc.jzmj}}㎡</p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| @@ -0,0 +1,24 @@ | |||||
| import BlockValue from '@/components/value/index.vue'; | |||||
| export default { | |||||
| components: { | |||||
| BlockValue | |||||
| }, | |||||
| props: { | |||||
| data: { | |||||
| type: Object, | |||||
| default: function () { | |||||
| return {} | |||||
| } | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,94 @@ | |||||
| .buttom2 { | |||||
| width: 100%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| position: absolute; | |||||
| bottom: 30px; | |||||
| left: 460px; | |||||
| z-index: 2; | |||||
| flex: 1; | |||||
| .flex_main{ | |||||
| background: url("bg.png") no-repeat 10px center; | |||||
| background-size: calc(100% - 10px) 100%; | |||||
| width: 220px; | |||||
| height: 150px; | |||||
| padding: 15px 15px 15px 25px; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| margin-bottom: 15px; | |||||
| position: relative; | |||||
| .flex_block{ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| p:nth-child(1){ | |||||
| color: #e6f1ff; | |||||
| } | |||||
| } | |||||
| .tt{ | |||||
| text-shadow: 2px 2px 4px #000000; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | |||||
| } | |||||
| i{ | |||||
| display: block; | |||||
| height: 100%; | |||||
| width: 5px; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| } | |||||
| &:nth-child(1){ | |||||
| i{ | |||||
| background-color: #00d6f8; | |||||
| } | |||||
| .flex_block{ | |||||
| p:nth-child(2){ | |||||
| color: #00d6f8; | |||||
| } | |||||
| } | |||||
| } | |||||
| &:nth-child(2){ | |||||
| i{ | |||||
| background-color: #f7cc3a; | |||||
| } | |||||
| .flex_block{ | |||||
| p:nth-child(2){ | |||||
| color: #f7cc3a; | |||||
| } | |||||
| } | |||||
| } | |||||
| &:nth-child(3){ | |||||
| i{ | |||||
| background-color: #04e26f; | |||||
| } | |||||
| .flex_block{ | |||||
| p:nth-child(2){ | |||||
| color: #04e26f; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .flex_main_right{ | |||||
| background: url("bg2.png") no-repeat center; | |||||
| background-size: 100% 100%; | |||||
| width: 220px; | |||||
| height: 100px; | |||||
| margin-bottom: 15px; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: space-evenly; | |||||
| p:nth-child(1){ | |||||
| color: #01d5f8; | |||||
| font-size: 26px; | |||||
| font-weight: bold; | |||||
| span{ | |||||
| font-size: 14px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,34 @@ | |||||
| export default [ | |||||
| [ | |||||
| { | |||||
| show: true, | |||||
| name: '农用地(亩)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '建设用地(亩)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '未利用地(亩)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '农用地(宗)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '建设用地(宗)', | |||||
| value: '716' | |||||
| }, | |||||
| { | |||||
| show: true, | |||||
| name: '未利用地(宗)', | |||||
| value: '103' | |||||
| } | |||||
| ] | |||||
| ] | |||||
| @@ -0,0 +1,13 @@ | |||||
| <div class="buttom2"> | |||||
| <div> | |||||
| <div class="flex_main_right"> | |||||
| <p>{{data.xy23}}<span>万元</span></p> | |||||
| <p>2023年盘活效益</p> | |||||
| </div> | |||||
| <div class="flex_main_right"> | |||||
| <p>{{data.xy24}}<span>万元</span></p> | |||||
| <p>2024年盘活效益</p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| @@ -0,0 +1,24 @@ | |||||
| import BlockValue from '@/components/value/index.vue'; | |||||
| export default { | |||||
| components: { | |||||
| BlockValue | |||||
| }, | |||||
| props: { | |||||
| data: { | |||||
| type: Object, | |||||
| default: function () { | |||||
| return {} | |||||
| } | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,93 @@ | |||||
| .buttom2 { | |||||
| width: 220px; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| position: absolute; | |||||
| top: 100px; | |||||
| right: 460px; | |||||
| z-index: 2; | |||||
| .flex_main{ | |||||
| background: url("bg.png") no-repeat 10px center; | |||||
| background-size: calc(100% - 10px) 100%; | |||||
| width: 220px; | |||||
| height: 150px; | |||||
| padding: 15px 15px 15px 25px; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| margin-bottom: 15px; | |||||
| position: relative; | |||||
| .flex_block{ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| p:nth-child(1){ | |||||
| color: #e6f1ff; | |||||
| } | |||||
| } | |||||
| .tt{ | |||||
| text-shadow: 2px 2px 4px #000000; | |||||
| font-size: 18px; | |||||
| font-weight: bold; | |||||
| } | |||||
| i{ | |||||
| display: block; | |||||
| height: 100%; | |||||
| width: 5px; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| } | |||||
| &:nth-child(1){ | |||||
| i{ | |||||
| background-color: #00d6f8; | |||||
| } | |||||
| .flex_block{ | |||||
| p:nth-child(2){ | |||||
| color: #00d6f8; | |||||
| } | |||||
| } | |||||
| } | |||||
| &:nth-child(2){ | |||||
| i{ | |||||
| background-color: #f7cc3a; | |||||
| } | |||||
| .flex_block{ | |||||
| p:nth-child(2){ | |||||
| color: #f7cc3a; | |||||
| } | |||||
| } | |||||
| } | |||||
| &:nth-child(3){ | |||||
| i{ | |||||
| background-color: #04e26f; | |||||
| } | |||||
| .flex_block{ | |||||
| p:nth-child(2){ | |||||
| color: #04e26f; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .flex_main_right{ | |||||
| background: url("bg2.png") no-repeat center; | |||||
| background-size: 100% 100%; | |||||
| width: 220px; | |||||
| height: 100px; | |||||
| margin-bottom: 15px; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: space-evenly; | |||||
| p:nth-child(1){ | |||||
| color: #01d5f8; | |||||
| font-size: 26px; | |||||
| font-weight: bold; | |||||
| span{ | |||||
| font-size: 14px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,12 @@ | |||||
| <Pannel title="产业类型分析" height="340" flexIble> | |||||
| <div class="full"> | |||||
| <div class="buttom"> | |||||
| <Pie | |||||
| :title="'总资产'" | |||||
| :titleNum="countNum + '万元'" | |||||
| :showTit="false" | |||||
| :data="data" | |||||
| ></Pie> | |||||
| </div> | |||||
| </div> | |||||
| </Pannel> | |||||
| @@ -0,0 +1,37 @@ | |||||
| import Pannel from '@/components/pannelNew/index.vue'; | |||||
| import Pie from '@/components/charts/pie/index.vue'; | |||||
| export default { | |||||
| components: { | |||||
| Pie, | |||||
| Pannel | |||||
| }, | |||||
| props: { | |||||
| data: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return [] | |||||
| } | |||||
| }, | |||||
| countNum: { | |||||
| type: Number, | |||||
| default: 0 | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| tabIndex: '1' | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| console.log(this.countNum) | |||||
| }, | |||||
| methods: { | |||||
| tabChange (info) { | |||||
| //console.log(info); | |||||
| this.tabIndex = info.id | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,17 @@ | |||||
| .full { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| .top { | |||||
| height: 50px !important; | |||||
| width: 100%; | |||||
| display: flex !important; | |||||
| align-items: center !important; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| .buttom { | |||||
| flex: 1; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,12 @@ | |||||
| <Pannel title="产业规模分析" height="300" flexIble> | |||||
| <div class="full"> | |||||
| <div class="buttom"> | |||||
| <LinesCharts id="bar3" | |||||
| :color="['#f7cc3a', '#01d5f8']" | |||||
| :barBorderRadius="[15, 15, 15, 15]" | |||||
| :data="data" | |||||
| unit="单位:亩" | |||||
| ></LinesCharts> | |||||
| </div> | |||||
| </div> | |||||
| </Pannel> | |||||
| @@ -0,0 +1,32 @@ | |||||
| import Pannel from '@/components/pannelNew/index.vue'; | |||||
| import LinesCharts from '@/components/charts/lines/index.vue'; | |||||
| export default { | |||||
| components: { | |||||
| LinesCharts, | |||||
| Pannel | |||||
| }, | |||||
| props: { | |||||
| data: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return [] | |||||
| } | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| nysssbDeptList:[] | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| }, | |||||
| methods: { | |||||
| tabChange (info) { | |||||
| this.tabIndex = info.id | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,17 @@ | |||||
| .full { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| .top { | |||||
| height: 50px !important; | |||||
| width: 100%; | |||||
| display: flex !important; | |||||
| align-items: center !important; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| .buttom { | |||||
| flex: 1; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,12 @@ | |||||
| <Pannel title="产业权属分布" height="300" flexIble> | |||||
| <div class="full"> | |||||
| <div class="buttom"> | |||||
| <Bar | |||||
| :color="['#f7cc3a', '#f7803f']" | |||||
| :barBorderRadius="[15, 15, 15, 15]" | |||||
| :data="data" | |||||
| unit="单位:亩" | |||||
| ></Bar> | |||||
| </div> | |||||
| </div> | |||||
| </Pannel> | |||||
| @@ -0,0 +1,29 @@ | |||||
| import Pannel from '@/components/pannelNew/index.vue'; | |||||
| import Bar from '@/components/charts/bar-stack/index.vue'; | |||||
| export default { | |||||
| components: { | |||||
| Bar, | |||||
| Pannel | |||||
| }, | |||||
| props: { | |||||
| data: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return [] | |||||
| } | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,17 @@ | |||||
| .full { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| .top { | |||||
| height: 50px !important; | |||||
| width: 100%; | |||||
| display: flex !important; | |||||
| align-items: center !important; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| .buttom { | |||||
| flex: 1; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,13 @@ | |||||
| <Pannel title="产业权属分析" height="340" flexIble> | |||||
| <div class="full"> | |||||
| <div class="buttom"> | |||||
| <Pie | |||||
| id="bar6" | |||||
| :title="'总资产'" | |||||
| :titleNum="countNum + '万元'" | |||||
| :showTit="false" | |||||
| :data="data" | |||||
| ></Pie> | |||||
| </div> | |||||
| </div> | |||||
| </Pannel> | |||||
| @@ -0,0 +1,37 @@ | |||||
| import Pannel from '@/components/pannelNew/index.vue'; | |||||
| import Pie from '@/components/charts/pie/index.vue'; | |||||
| export default { | |||||
| components: { | |||||
| Pie, | |||||
| Pannel | |||||
| }, | |||||
| props: { | |||||
| data: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return [] | |||||
| } | |||||
| }, | |||||
| countNum: { | |||||
| type: Number, | |||||
| default: 0 | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| tabIndex: '1' | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| console.log(this.countNum) | |||||
| }, | |||||
| methods: { | |||||
| tabChange (info) { | |||||
| //console.log(info); | |||||
| this.tabIndex = info.id | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,17 @@ | |||||
| .full { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| .top { | |||||
| height: 50px !important; | |||||
| width: 100%; | |||||
| display: flex !important; | |||||
| align-items: center !important; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| .buttom { | |||||
| flex: 1; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,12 @@ | |||||
| <Pannel title="产业经营分析" height="300" flexIble> | |||||
| <div class="full"> | |||||
| <div class="buttom"> | |||||
| <LinesCharts id="bar5" | |||||
| :color="['#f7cc3a', '#01d5f8']" | |||||
| :barBorderRadius="[15, 15, 15, 15]" | |||||
| :data="data" | |||||
| unit="单位:亩" | |||||
| ></LinesCharts> | |||||
| </div> | |||||
| </div> | |||||
| </Pannel> | |||||
| @@ -0,0 +1,60 @@ | |||||
| import Pannel from '@/components/pannelNew/index.vue'; | |||||
| import LinesCharts from '@/components/charts/lines/index.vue'; | |||||
| export default { | |||||
| components: { | |||||
| LinesCharts, | |||||
| Pannel | |||||
| }, | |||||
| props: { | |||||
| data: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return [] | |||||
| } | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| chartData: [ | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '100' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '190' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '180' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '170' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '160' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '150' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '240' | |||||
| } | |||||
| ] | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| }, | |||||
| methods: { | |||||
| tabChange (info) { | |||||
| this.tabIndex = info.id | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,17 @@ | |||||
| .full { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| .top { | |||||
| height: 50px !important; | |||||
| width: 100%; | |||||
| display: flex !important; | |||||
| align-items: center !important; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| .buttom { | |||||
| flex: 1; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,11 @@ | |||||
| <Pannel title="产业类型分布" height="300" flexIble> | |||||
| <div class="full"> | |||||
| <div class="buttom"> | |||||
| <Bar id="bar4" | |||||
| :color="['#f7cc3a', '#f7803f']" | |||||
| :data="data" | |||||
| unit="单位:亩" | |||||
| ></Bar> | |||||
| </div> | |||||
| </div> | |||||
| </Pannel> | |||||
| @@ -0,0 +1,57 @@ | |||||
| import Pannel from '@/components/pannelNew/index.vue'; | |||||
| import Bar from '@/components/charts/bar-stack/index.vue'; | |||||
| export default { | |||||
| components: { | |||||
| Bar, | |||||
| Pannel | |||||
| }, | |||||
| props: { | |||||
| data: { | |||||
| type: Array, | |||||
| default: function () { | |||||
| return [] | |||||
| } | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| chartData: [ | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '100' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '190' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '180' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '170' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '160' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '150' | |||||
| }, | |||||
| { | |||||
| name: 'A镇', | |||||
| value: '240' | |||||
| } | |||||
| ] | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,17 @@ | |||||
| .full { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| .top { | |||||
| height: 50px !important; | |||||
| width: 100%; | |||||
| display: flex !important; | |||||
| align-items: center !important; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| .buttom { | |||||
| flex: 1; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,29 @@ | |||||
| export const comps = { | |||||
| '1': { | |||||
| left: [{ | |||||
| name: 'Left11', | |||||
| data: [] | |||||
| },{ | |||||
| name: 'Left21', | |||||
| data: [] | |||||
| },{ | |||||
| countNum: 0, | |||||
| name: 'Left31', | |||||
| data: [] | |||||
| }], | |||||
| right: [{ | |||||
| name: 'Right11', | |||||
| data: [] | |||||
| },{ | |||||
| name: 'Right21', | |||||
| data: [] | |||||
| },{ | |||||
| name: 'Right31', | |||||
| data: [] | |||||
| }], | |||||
| buttom: [{ | |||||
| name: 'Bottom1', | |||||
| data: {} | |||||
| }] | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,17 @@ | |||||
| <div class="page"> | |||||
| <MainGis @getData="getData"></MainGis> | |||||
| <Header title="产业一张图" callBack></Header> | |||||
| <!-- 项目初始化 --> | |||||
| <div class="row"> | |||||
| <component :is="item.name" v-for="(item, index) in currentComp.buttom" :key="index" :data="item.data"></component> | |||||
| </div> | |||||
| <div class="left_side col space_between zIndextop"> | |||||
| <component :is="item.name" v-for="(item, index) in currentComp.left" :key="index" :data="item.data" :countNum="item.name == 'Left31'?item.countNum:0"></component> | |||||
| </div> | |||||
| <div class="right_side col space_between zIndextop"> | |||||
| <component :is="item.name" v-for="(item, index) in currentComp.right" :key="index" :data="item.data"></component> | |||||
| </div> | |||||
| <Left></Left> | |||||
| <Right></Right> | |||||
| <Footer></Footer> | |||||
| </div> | |||||
| @@ -0,0 +1,148 @@ | |||||
| import Header from '@/components/headerNew/index.vue'; | |||||
| import Footer from '@/components/footer/index.vue'; | |||||
| import Left from '@/components/left/index.vue'; | |||||
| import Right from '@/components/right/index.vue'; | |||||
| import Tabs from '@/components/tabs/index.vue'; | |||||
| import Left11 from './comps/left/top/1/index.vue'; | |||||
| import Left21 from './comps/left/middle/1/index.vue'; | |||||
| import Left31 from './comps/left/bottom/1/index.vue'; | |||||
| import Right11 from './comps/right/top/1/index.vue'; | |||||
| import Right21 from './comps/right/middle/1/index.vue'; | |||||
| import Right31 from './comps/right/bottom/1/index.vue'; | |||||
| import Bottom1 from './comps/buttom/1/index.vue'; | |||||
| import Bottom2 from './comps/buttom/2/index.vue'; | |||||
| import Popover from './popover/index.vue'; | |||||
| import MainGis from './main-gis/index.vue'; | |||||
| import { comps } from './data.js' | |||||
| import { getStatistic } from "@/api/index"; | |||||
| import { getInfo } from "@/api/login"; | |||||
| import {mapGetters} from "vuex"; | |||||
| export default { | |||||
| components: { | |||||
| MainGis, | |||||
| Header, | |||||
| Footer, | |||||
| Left, | |||||
| Right, | |||||
| Tabs, | |||||
| Left11, | |||||
| Left21, | |||||
| Left31, | |||||
| Right11, | |||||
| Right21, | |||||
| Right31, | |||||
| Popover, | |||||
| Bottom2, | |||||
| Bottom1 | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| comps, | |||||
| tab: '1', | |||||
| allData: {}, | |||||
| deptIdPage:100 | |||||
| }; | |||||
| }, | |||||
| watch: { | |||||
| // year: { | |||||
| // handler () { | |||||
| // this.getData(this.deptIdPage); | |||||
| // }, | |||||
| // immediate: true, // 立即执行 | |||||
| // }, | |||||
| // deptId: { | |||||
| // handler () { | |||||
| // this.getData(this.deptIdPage); | |||||
| // }, | |||||
| // immediate: true, // 立即执行 | |||||
| // } | |||||
| }, | |||||
| computed: { | |||||
| ...mapGetters(['year', 'deptId']), | |||||
| currentComp: function () { | |||||
| return this.comps[this.tab] | |||||
| } | |||||
| }, | |||||
| created () { | |||||
| getInfo().then(res => { | |||||
| this.deptIdPage = res.user.deptId; | |||||
| this.getData(res.user.deptId); | |||||
| }) | |||||
| }, | |||||
| mounted () { | |||||
| }, | |||||
| methods: { | |||||
| getData(deptId){ | |||||
| this.currentComp.right[0].data = []; | |||||
| this.currentComp.right[1].data = []; | |||||
| this.currentComp.right[2].data = []; | |||||
| this.currentComp.left[0].data = []; | |||||
| this.currentComp.left[1].data = []; | |||||
| this.currentComp.left[2].data = []; | |||||
| getStatistic({deptId: deptId}).then((response) => { | |||||
| response.data.jtzyzcDeptList.map(rr => { | |||||
| this.currentComp.right[0].data.push({ | |||||
| name: rr.deptName, | |||||
| value: rr.ydmj | |||||
| }) | |||||
| }) | |||||
| response.data.nysssbDeptList.map(rr => { | |||||
| this.currentComp.right[1].data.push({ | |||||
| name: rr.deptName, | |||||
| value: rr.ydmj | |||||
| }) | |||||
| }) | |||||
| response.data.nhzcDeptList.map(rr => { | |||||
| this.currentComp.right[2].data.push({ | |||||
| name: rr.deptName, | |||||
| value: rr.ydmj | |||||
| }) | |||||
| }) | |||||
| response.data.jtzyzcTypeList.map(rr => { | |||||
| this.currentComp.left[0].data.push({ | |||||
| name: rr.threeDetailType, | |||||
| value: rr.ydmj | |||||
| }) | |||||
| }) | |||||
| response.data.nysssbTypeList.map(rr => { | |||||
| this.currentComp.left[1].data.push({ | |||||
| name: rr.threeDetailType, | |||||
| value: rr.ydmj | |||||
| }) | |||||
| }) | |||||
| response.data.nhzcTypeList.map(rr => { | |||||
| this.currentComp.left[2].data.push({ | |||||
| name: rr.threeDetailType, | |||||
| value: rr.ydmj, | |||||
| unit: '万元' | |||||
| }) | |||||
| }) | |||||
| this.currentComp.buttom[0].data = { | |||||
| jtzyzc: response.data.jtzyzc,//集体资源资产 | |||||
| nysssb: response.data.nysssb,//农业设施设备 | |||||
| nhzc: response.data.nhzc, | |||||
| } | |||||
| this.currentComp.buttom[1].data = { | |||||
| xy23: response.data.xy23, | |||||
| xy24: response.data.xy24 | |||||
| } | |||||
| console.log(this.currentComp) | |||||
| this.allData = response.data; | |||||
| }); | |||||
| }, | |||||
| tabChange (info) { | |||||
| this.tab = info.id; | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,12 @@ | |||||
| .map { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| right: 0; | |||||
| bottom: 0; | |||||
| } | |||||
| .buttom_side { | |||||
| top: 100px; | |||||
| bottom: auto; | |||||
| left: 685px; | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -0,0 +1,32 @@ | |||||
| export const comps = { | |||||
| '1': { | |||||
| 'left': [ | |||||
| 'Left11', | |||||
| 'Left21', | |||||
| 'Left31', | |||||
| ], | |||||
| 'right': [ | |||||
| 'Right11', | |||||
| 'Right21', | |||||
| 'Right31', | |||||
| ], | |||||
| 'buttom': [ | |||||
| 'Bottom1' | |||||
| ] | |||||
| }, | |||||
| '2': { | |||||
| 'left': [ | |||||
| 'Left12', | |||||
| 'Left22', | |||||
| 'Left32' | |||||
| ], | |||||
| 'right': [ | |||||
| 'Right12', | |||||
| 'Right22', | |||||
| 'Right32' | |||||
| ], | |||||
| 'buttom': [ | |||||
| 'Bottom2' | |||||
| ] | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,103 @@ | |||||
| <div class="map border" id="map2"> | |||||
| <!-- <Legend class="legend_pos">--> | |||||
| <!-- <div class="legend_full">--> | |||||
| <!-- <div v-for="item in LegendData" class="legend_item">--> | |||||
| <!-- <div class="icon" :style="[item.iconStyle]"></div>--> | |||||
| <!-- <p>{{item.name}}</p>--> | |||||
| <!-- </div>--> | |||||
| <!-- </div>--> | |||||
| <!-- </Legend>--> | |||||
| <div v-if="false" class="gl_pop_cash pop_statistical_desc"> | |||||
| <div class="head_main"> | |||||
| <div class="title">{{resourceDetail.name}}详情</div> | |||||
| <div class="close" @click="showResourceDetail = false"></div> | |||||
| <div class="xs_main"> | |||||
| <div class="block"> | |||||
| <div class="point p1"></div> | |||||
| <div class="point p2"></div> | |||||
| <div class="point p3"></div> | |||||
| </div> | |||||
| <div class="xs_x"></div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="echarts_main"> | |||||
| <div> | |||||
| <p>资源编码</p> | |||||
| <p>{{resourceDetail.code}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>资源名称</p> | |||||
| <p>{{resourceDetail.name}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>资源类型</p> | |||||
| <p>{{resourceDetail.resourceSort}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>总面积(亩)</p> | |||||
| <p>{{resourceDetail.totalArea}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>资产状态</p> | |||||
| <p>{{resourceDetail.status}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>使用情况</p> | |||||
| <p>{{resourceDetail.useType}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>坐落位置</p> | |||||
| <p>{{resourceDetail.location}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>东至</p> | |||||
| <p>{{resourceDetail.east}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>西至</p> | |||||
| <p>{{resourceDetail.west}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>南至</p> | |||||
| <p>{{resourceDetail.south}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>北至</p> | |||||
| <p>{{resourceDetail.north}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>备注</p> | |||||
| <p>{{resourceDetail.remark}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>附件</p> | |||||
| <p> | |||||
| <block v-for="(item,index) in resourceDetail.fileList"> | |||||
| <a :href="item.urlApi" v-if="item.type != 'image'"> | |||||
| <img :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt=""> | |||||
| </a> | |||||
| <img v-else :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)"> | |||||
| </block> | |||||
| </p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div> | |||||
| <Popover v-if="showResourceDetail" :data="resourceDetail" @closePopover="closePopover" @openImage="openImage"></Popover> | |||||
| <div class="imgBox" v-if="showImg"> | |||||
| <div class="box_bg" @click="showImg = false"></div> | |||||
| <img :src="fileUrl" alt=""> | |||||
| </div> | |||||
| <!--选择地址--> | |||||
| <div class="select_address"> | |||||
| <div class="dot left"></div> | |||||
| <div class="dot right"></div> | |||||
| <el-cascader :popper-append-to-body="false" :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader"> | |||||
| <template slot-scope="{ node, data }"> | |||||
| <span>{{ data.label }}</span> | |||||
| <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> | |||||
| </template> | |||||
| </el-cascader> | |||||
| </div> | |||||
| </div> | |||||
| @@ -0,0 +1,516 @@ | |||||
| import GisUtils from '@/utils/gis.js'; | |||||
| import { | |||||
| fromLonLat | |||||
| } from 'ol/proj' | |||||
| import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.js"; | |||||
| import { getInfo } from "@/api/login"; | |||||
| import { getResourceListByDeptId, listResource, attachmentQuery } from "@/api/asset/resource.js"; | |||||
| import Legend from '@/components/legend/index.vue'; | |||||
| import { attachmentList } from "@/api/common/uploadAttachment.js"; | |||||
| import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept"; | |||||
| import { getConfigKey } from "@/api/system/config"; | |||||
| import { treeselectByDeptId } from "@/api/system/dept"; | |||||
| import { getThreeList } from "@/api/index"; | |||||
| import Popover from '../popover/index.vue'; | |||||
| let gis = null; | |||||
| export default { | |||||
| components: { | |||||
| Legend, | |||||
| Popover | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| yellowIcon: require('./icon/yellow.png'), | |||||
| //三务公开请求参数 | |||||
| queryParams: { | |||||
| pageNum: 1, | |||||
| pageSize: 10, | |||||
| title: null, | |||||
| openType: '1', | |||||
| detailedCategoriesType: null, | |||||
| villageType: null, | |||||
| openItems: null, | |||||
| meetingOpenType: null, | |||||
| deptId: null, | |||||
| isWechat: null, | |||||
| status: null, | |||||
| translate_dict: 1, | |||||
| }, | |||||
| addrText: [100,], | |||||
| deptTreeProps: { | |||||
| checkStrictly: true, | |||||
| }, | |||||
| addrOptions: [], | |||||
| resourceDetail: {}, | |||||
| //资产信息详情弹窗 | |||||
| showResourceDetail: false, | |||||
| mapGeoServerUrl: "", // geoserver地址 | |||||
| mapBorder: "", // 地图边界 | |||||
| deptLayer: "", // 坐标点图层 | |||||
| countyBorderLayerName: "", // 区县边界图层名称 | |||||
| townBorderLayerName: "", // 乡镇边界图层名称 | |||||
| villageBorderLayerName: "", // 村边界图层名称 | |||||
| groupBorderLayerName: "", // 组边界图层名称 | |||||
| LegendData: [ | |||||
| { | |||||
| iconStyle: { | |||||
| background: 'rgba(38,252,128,0.45)', | |||||
| borderColor: '#26FC80', | |||||
| border: '2px solid #26FC80' | |||||
| }, | |||||
| name: '自用' | |||||
| }, | |||||
| { | |||||
| iconStyle: { | |||||
| background: 'rgba(232,246,0,0.45)', | |||||
| borderColor: '#E8F600', | |||||
| border: '2px solid #E8F600' | |||||
| }, | |||||
| name: '闲置' | |||||
| }, | |||||
| { | |||||
| iconStyle: { | |||||
| background: 'rgba(16,252,252,0.45)', | |||||
| borderColor: '#10FCFC', | |||||
| border: '2px solid #10FCFC' | |||||
| }, | |||||
| name: '出租' | |||||
| }, | |||||
| { | |||||
| iconStyle: { | |||||
| background: 'rgba(198,0,255,0.45)', | |||||
| borderColor: '#C600FF', | |||||
| border: '2px solid #C600FF' | |||||
| }, | |||||
| name: '其他' | |||||
| } | |||||
| ], | |||||
| threeAssetTypeOptions: [], | |||||
| threeJtzyzcTypeOptions: [], | |||||
| threeNysssbTypeOptions: [], | |||||
| threeNhTypeOptions: [], | |||||
| natureOwnershipTypeOptions: [], | |||||
| sysYesNoOptions: [], | |||||
| fileList: [], | |||||
| fileUrl:'', | |||||
| showImg:false, | |||||
| }; | |||||
| }, | |||||
| watch: { | |||||
| 'queryParams.deptId': { | |||||
| handler: function () { | |||||
| this.commitDept(this.queryParams.deptId); | |||||
| }, | |||||
| immediate: true, // 立即执行 | |||||
| }, | |||||
| deptLength: { | |||||
| handler: function () { | |||||
| //console.log(this.deptLength); | |||||
| this.commitDeptLength(this.deptLength); | |||||
| }, | |||||
| immediate: true, // 立即执行 | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| }, | |||||
| created () { | |||||
| this.getDicts("three_asset_type").then((response) => { | |||||
| this.threeAssetTypeOptions = response.data; | |||||
| }); | |||||
| this.getDicts("three_jtzyzc_type").then((response) => { | |||||
| this.threeJtzyzcTypeOptions = response.data; | |||||
| }); | |||||
| this.getDicts("three_nysssb_type").then((response) => { | |||||
| this.threeNysssbTypeOptions = response.data; | |||||
| }); | |||||
| this.getDicts("three_nh_type").then((response) => { | |||||
| this.threeNhTypeOptions = response.data; | |||||
| }); | |||||
| this.getDicts("nature_ownership").then((response) => { | |||||
| this.natureOwnershipTypeOptions = response.data; | |||||
| }); | |||||
| this.getDicts("sys_yes_no").then((response) => { | |||||
| this.sysYesNoOptions = response.data; | |||||
| }); | |||||
| this.getGeoServerUrl(); | |||||
| }, | |||||
| mounted () { | |||||
| getInfo().then(res => { | |||||
| treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => { | |||||
| this.addrOptions = resp.data; | |||||
| this.headerTitle = res.user.deptName + '阳光村务一张图'; | |||||
| //loginDeptId | |||||
| listDeptExcludeChild(res.user.deptId).then((resp) => { | |||||
| //loginDeptId | |||||
| let deptOptions = [res.user.deptId]; | |||||
| resp.data.map(resm => { | |||||
| if (res.user.parentDeptName == resm.deptName) { | |||||
| deptOptions.unshift(resm.deptId) | |||||
| deptOptions.unshift(resm.parentId) | |||||
| } | |||||
| }) | |||||
| this.addrText = deptOptions; | |||||
| }); | |||||
| this.queryParams.deptId = res.user.deptId;//loginDeptId | |||||
| //列表请求 | |||||
| // this.getAllList(res.user.deptId); | |||||
| // 加载地图 | |||||
| this.initMap(res.user.deptId); | |||||
| // 获取村边界的图层名称 | |||||
| this.getVillageBorderLayerName(); | |||||
| }); | |||||
| }) | |||||
| // treeselect().then((resp) => { | |||||
| // this.addrOptions = resp.data | |||||
| // getInfo().then(res => { | |||||
| // this.initMap(res.user.loginDeptId); | |||||
| // // 加载地图 | |||||
| // }) | |||||
| // }); | |||||
| }, | |||||
| methods: { | |||||
| commitDept (deptId) { | |||||
| this.$store.commit('SET_DEPTID', deptId); | |||||
| }, | |||||
| commitDeptLength (length) { | |||||
| this.$store.commit('SET_DEPTIDLENGTH', length); | |||||
| }, | |||||
| commitYear (year) { | |||||
| this.$store.commit('SET_YEAR', year); | |||||
| }, | |||||
| // 获取村边界的图层名称 | |||||
| getVillageBorderLayerName () { | |||||
| getConfigKey("geoserver.layer.villageBorder").then(response => { | |||||
| this.villageBorderLayerName = response.msg; | |||||
| }); | |||||
| }, | |||||
| // 添加区县边界 | |||||
| addCountyBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds) | |||||
| }, | |||||
| // 添加乡镇边界 | |||||
| addTownBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) | |||||
| }, | |||||
| // // 添加村边界 | |||||
| // addVillageBorder (deptIds) { | |||||
| // gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) | |||||
| // }, | |||||
| // // 获取资源列表 | |||||
| // getResourceList (deptId) { | |||||
| // getResourceListByDeptId(deptId).then(response => { | |||||
| // if (response.data && response.data.length > 0) { | |||||
| // this.addResourceLayer(response.data); | |||||
| // } | |||||
| // }); | |||||
| // }, | |||||
| // 获取geoserver的地址 | |||||
| getGeoServerUrl () { | |||||
| // 获取geoserver的地址 | |||||
| getConfigKey("system.geoServer.url").then(response => { | |||||
| this.mapGeoServerUrl = response.msg; | |||||
| }); | |||||
| // 获取区县边界图层名称 | |||||
| getConfigKey("geoserver.layer.countyBorder").then(response => { | |||||
| this.countyBorderLayerName = response.msg; | |||||
| }); | |||||
| // 获取乡镇边界的图层名称 | |||||
| getConfigKey("geoserver.layer.townBorder").then(response => { | |||||
| this.townBorderLayerName = response.msg; | |||||
| }); | |||||
| // 获取村边界的图层名称 | |||||
| getConfigKey("geoserver.layer.villageBorder").then(response => { | |||||
| this.villageBorderLayerName = response.msg; | |||||
| }); | |||||
| // 获取组边界的图层名称 | |||||
| getConfigKey("geoserver.layer.groupBorder").then(response => { | |||||
| this.groupBorderLayerName = response.msg; | |||||
| }); | |||||
| }, | |||||
| selectAddress (value) { | |||||
| const deptId = value[value.length - 1]; | |||||
| this.queryParams.deptId = deptId; | |||||
| this.getAllList(deptId); | |||||
| gis.getMapContainer().removeLayer(this.villageBorder); | |||||
| this.villageBorder = ''; | |||||
| // 添加村边界 | |||||
| this.addVillageBorder(deptId); | |||||
| gis.getMapContainer().removeLayer(this.permanentLayer); | |||||
| this.permanentLayer = ''; | |||||
| // 获取资产列表 | |||||
| this.getPermanentList(deptId); | |||||
| gis.getMapContainer().removeLayer(this.resourceLayer); | |||||
| this.resourceLayer = ''; | |||||
| // 获取资源列表 | |||||
| this.getResourceList(deptId); | |||||
| let node = this.$refs["cascader"].panel.getNodeByValue(value); | |||||
| const dept = node.data; | |||||
| const deptData = { | |||||
| deptId: dept.id, | |||||
| deptName: dept.label, | |||||
| lat: dept.lat, | |||||
| lng: dept.lng, | |||||
| deptLevel: dept.deptLevel, | |||||
| orgCode: dept.orgCode | |||||
| }; | |||||
| let deptList = []; | |||||
| deptList.push(deptData); | |||||
| gis.getMapContainer().removeLayer(this.deptLayer); | |||||
| this.deptLayer = ''; | |||||
| // 添加坐标点图层 | |||||
| this.addDeptLayer(deptList, 'yellow.png'); | |||||
| gis.getMapContainer().getView().animate({ | |||||
| // 只设置需要的属性即可 | |||||
| center: fromLonLat([dept.lng, dept.lat]), // 中心点 | |||||
| duration: 500, // 缩放持续时间,默认不需要设置 | |||||
| }); | |||||
| }, | |||||
| // 添加村边界 | |||||
| addVillageBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) | |||||
| }, | |||||
| // 加载地图 | |||||
| initMap (deptId) { | |||||
| gis = new GisUtils('map2') | |||||
| // // 获取资源列表 | |||||
| this.getResourceList(deptId); | |||||
| gis.addTianDiTuLayer() | |||||
| gis.addAnnotationLayer() | |||||
| let dept2 = this.addrOptions[0]; | |||||
| //console.log(this.addrOptions, 'this.addrOptions'); | |||||
| console.log(dept2.deptLevel) | |||||
| if (dept2.deptLevel === '5') { | |||||
| // 登录身份为市级领导 | |||||
| this.userRole = 'cityLeader'; | |||||
| this.cityId = dept.id; | |||||
| this.currentDeptLevel = '5'; | |||||
| // 添加区县边界 | |||||
| this.addCountyBorder(dept.children.map(item => item.id)); | |||||
| } else if (dept2.deptLevel === '4') { | |||||
| // 登录身份为县级领导 | |||||
| this.userRole = 'countyLeader'; | |||||
| this.countyId = dept2.id; | |||||
| this.currentDeptLevel = '4'; | |||||
| // 添加乡镇边界 | |||||
| this.addTownBorder(dept2.children.map(item => item.id)); | |||||
| gis.getView().setZoom(13); | |||||
| } else if (dept2.deptLevel === '3') { | |||||
| // 登录身份为镇级领导 | |||||
| this.userRole = 'townLeader'; | |||||
| this.townId = dept2.id; | |||||
| this.currentDeptLevel = '3'; | |||||
| // 添加村边界 | |||||
| this.addVillageBorder(dept2.children.map(item => item.id)); | |||||
| gis.getView().setZoom(13); | |||||
| } | |||||
| // 添加坐标点图层 | |||||
| if (dept2.children) { | |||||
| this.addDeptLayer(dept2.children); | |||||
| } | |||||
| // gis.getMapContainer().getView().setCenter(fromLonLat([dept2.lng, dept2.lat])); | |||||
| gis.getMapContainer().on("click", (evt) => { | |||||
| let feature = gis.getMapContainer().forEachFeatureAtPixel( | |||||
| evt.pixel, | |||||
| (feature) => feature | |||||
| ); | |||||
| if (feature) { | |||||
| // 镇级:加载村级坐标点 | |||||
| if (feature.get('deptLevel') === '3') { | |||||
| gis.getMapContainer().getView().animate({ | |||||
| center: fromLonLat([feature.get('lng'), feature.get('lat')]), // 中心点 | |||||
| zoom: 12, // 缩放级别 | |||||
| rotation: undefined, // 缩放完成view视图旋转弧度 | |||||
| duration: 1000, // 缩放持续时间,默认不需要设置 | |||||
| }); | |||||
| } else { | |||||
| feature.values_.detail.threeDetailType = | |||||
| feature.values_.detail.threeAssetType == '1' ? | |||||
| this.selectDictLabel(this.threeJtzyzcTypeOptions, feature.values_.detail.threeDetailType): | |||||
| feature.values_.detail.threeAssetType == '2' ? | |||||
| this.selectDictLabel(this.threeNysssbTypeOptions, feature.values_.detail.threeDetailType): | |||||
| feature.values_.detail.threeAssetType == '3' ? | |||||
| this.selectDictLabel(this.threeNhTypeOptions, feature.values_.detail.threeDetailType):'' | |||||
| ; | |||||
| feature.values_.detail.threeAssetType = this.selectDictLabel(this.threeAssetTypeOptions, feature.values_.detail.threeAssetType); | |||||
| feature.values_.detail.natureOwnership = this.selectDictLabel(this.natureOwnershipTypeOptions, feature.values_.detail.natureOwnership); | |||||
| feature.values_.detail.qssfczzy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.qssfczzy); | |||||
| feature.values_.detail.sfwtdg = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfwtdg); | |||||
| feature.values_.detail.sfnzcsy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfnzcsy); | |||||
| this.listDialogHidden('detail'); | |||||
| this.openResourceDialog(feature.values_.detail); | |||||
| } | |||||
| } | |||||
| }); | |||||
| // 缩小地图,重新加载页面 | |||||
| gis.getMapContainer().on("moveend", (evt) => { | |||||
| const zoom = gis.getMapContainer().getView().getZoom(); | |||||
| if (this.villagePointLayer && zoom < 10.5) { | |||||
| gis.getMapContainer().removeLayer(this.villagePointLayer); | |||||
| this.villagePointLayer = ""; | |||||
| } | |||||
| }); | |||||
| }, | |||||
| listDialogHidden (type) { | |||||
| if (type == 'detail') { | |||||
| //合同信息详情弹窗 | |||||
| this.showInfoDetail = false; | |||||
| //资源信息详情弹窗 | |||||
| this.showResourceDetail = false; | |||||
| //资产信息详情弹窗 | |||||
| this.showPermanentDetail = false; | |||||
| //农业补贴详情弹窗 | |||||
| this.showSubsidyFundsDetail = false; | |||||
| //重大事项详情弹窗 | |||||
| this.showMajorEventDetail = false; | |||||
| //零工公开详情弹窗 | |||||
| this.showTempWorkerDetail = false; | |||||
| //三务公开详情弹窗 | |||||
| this.showAffairsDetail = false; | |||||
| } else { | |||||
| //三务公开列表弹窗 | |||||
| this.showAffairs = false; | |||||
| //零工公开列表弹窗 | |||||
| this.showTempWorker = false; | |||||
| //重大事项列表弹窗 | |||||
| this.showMajorEvent = false; | |||||
| //农业补贴列表弹窗 | |||||
| this.showSubsidyFunds = false; | |||||
| //资产信息列表弹窗 | |||||
| this.showPermanent = false; | |||||
| //资源信息列表弹窗 | |||||
| this.showResource = false; | |||||
| //合同信息列表弹窗 | |||||
| this.showInfo = false; | |||||
| //合同信息详情弹窗 | |||||
| this.showInfoDetail = false; | |||||
| //资源信息详情弹窗 | |||||
| this.showResourceDetail = false; | |||||
| //资产信息详情弹窗 | |||||
| this.showPermanentDetail = false; | |||||
| //农业补贴详情弹窗 | |||||
| this.showSubsidyFundsDetail = false; | |||||
| //重大事项详情弹窗 | |||||
| this.showMajorEventDetail = false; | |||||
| //零工公开详情弹窗 | |||||
| this.showTempWorkerDetail = false; | |||||
| //三务公开详情弹窗 | |||||
| this.showAffairsDetail = false; | |||||
| } | |||||
| }, | |||||
| openResourceDialog (data) { | |||||
| data.fileList = []; | |||||
| console.log(data) | |||||
| let parmasData = { | |||||
| tableId: data.id, | |||||
| tableName: 't_asset_three', | |||||
| bizPath: 'asset', | |||||
| }; | |||||
| attachmentQuery(parmasData).then((res) => { | |||||
| if (res.code == 200) { | |||||
| let UattachmentList = res.rows; | |||||
| for (let i = 0; i < UattachmentList.length; i++) { | |||||
| let fileName = UattachmentList[i].fileName; | |||||
| let subIndex = fileName.lastIndexOf("."); | |||||
| let ext = fileName.substring(subIndex + 1, fileName.length); | |||||
| let urls = ""; | |||||
| let type = ""; | |||||
| if (ext == "xlsx" || ext == "xls") { | |||||
| urls = require("./icon_excel.jpg"); | |||||
| type = 'excel'; | |||||
| } else if (ext == "doc" || ext == "docx") { | |||||
| urls = require("./icon_word.jpg"); | |||||
| type = 'word'; | |||||
| } else if (ext == "pdf") { | |||||
| urls = require("./icon_pdf.jpg"); | |||||
| type = 'pdf'; | |||||
| } else if (ext == "zip") { | |||||
| urls = require("./icon_zip.jpg"); | |||||
| type = 'zip'; | |||||
| } else { | |||||
| urls = '/api' + UattachmentList[i].fileUrl; | |||||
| type = 'image'; | |||||
| } | |||||
| data.fileList.push({ | |||||
| url: urls, | |||||
| urlApi: '/api' + UattachmentList[i].fileUrl, | |||||
| type: type | |||||
| }) | |||||
| } | |||||
| this.showResourceDetail = true; | |||||
| this.resourceDetail = data; | |||||
| } | |||||
| }); | |||||
| }, | |||||
| // 创建矢量数据源 | |||||
| addDeptLayer (nextDeptSet, locationIcon) { | |||||
| //console.log('nextDeptSet', nextDeptSet); | |||||
| let features = []; | |||||
| nextDeptSet.forEach(item => { | |||||
| let fs = gis.getFeature(item, this.yellowIcon) | |||||
| features.push(fs); | |||||
| }); | |||||
| gis.getVectorLayerByFs(features) | |||||
| // gis.mapSetFit(features) | |||||
| }, | |||||
| // 获取资源列表 | |||||
| getResourceList (deptId) { | |||||
| getThreeList({ deptId: deptId }).then(response => { | |||||
| if (response.rows && response.rows.length > 0) { | |||||
| this.addResourceLayer(response.rows); | |||||
| } | |||||
| }); | |||||
| // getResourceListByDeptId(deptId).then(response => { | |||||
| // if (response.data && response.data.length > 0) { | |||||
| // this.addResourceLayer(response.data); | |||||
| // } | |||||
| // }); | |||||
| }, | |||||
| // 添加资源图层 | |||||
| addResourceLayer (resourceList) { | |||||
| let features = []; | |||||
| resourceList.forEach(item => { | |||||
| if (item.theGeom != null && item.theGeom !== '') { | |||||
| const { threeAssetType } = item | |||||
| // console.log(222, threeAssetType, item); | |||||
| let color = this.LegendData[threeAssetType - 1 + ''] | |||||
| let fs = gis.getFeature3(item, color.iconStyle.background, color.iconStyle.borderColor) | |||||
| features.push(fs); | |||||
| } | |||||
| }); | |||||
| gis.getVectorLayerByFs(features) | |||||
| gis.mapSetFit(features) | |||||
| }, | |||||
| // 获取资产列表 | |||||
| getPermanentList (deptId) { | |||||
| getThreeList({ deptId: deptId }).then(response => { | |||||
| if (response.data && response.data.length > 0) { | |||||
| this.addPermanentLayer(response.data); | |||||
| } | |||||
| }); | |||||
| }, | |||||
| getAllList (deptId) { | |||||
| this.$emit('getData',deptId); | |||||
| }, | |||||
| closePopover(){ | |||||
| this.showResourceDetail = false; | |||||
| }, | |||||
| openImage(url){ | |||||
| this.fileUrl = url; | |||||
| this.showImg = true; | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,277 @@ | |||||
| .map { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| right: 0; | |||||
| bottom: 0; | |||||
| .legend_pos { | |||||
| z-index: 21 !important; | |||||
| position: absolute; | |||||
| top: 100px; | |||||
| right: 480px; | |||||
| .legend_full { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| .legend_item { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| // border: 1px solid red; | |||||
| align-items: center; | |||||
| .icon { | |||||
| width: 16px; | |||||
| height: 16px; | |||||
| border-radius: 2px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .mask { | |||||
| z-index: 1; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| box-shadow: inset 450px 0px 350px 10px RGBA(3, 12, 27, 1), inset -450px 0 350px 10px RGBA(3, 12, 27, 1); // 左 | |||||
| /* 四周黑色 */ | |||||
| pointer-events: none; | |||||
| /* 允许地图事件穿透 */ | |||||
| } | |||||
| } | |||||
| //选择地址 | |||||
| .select_address { | |||||
| width: 300px; | |||||
| position: absolute; | |||||
| left: 30px; | |||||
| top: 40px; | |||||
| z-index: 302; | |||||
| box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8); /* 添加内发光效果 */ | |||||
| .dot{ | |||||
| width: 0.46vh; | |||||
| height: 0.46vh; | |||||
| background: #0bf1cc; | |||||
| border-radius: 50%; | |||||
| position: absolute; | |||||
| top: 2vh; | |||||
| &.left{left:1vw} | |||||
| &.right{right: 1vw;} | |||||
| } | |||||
| // <div class="dot left"></div> | |||||
| // <div class="dot right"></div> | |||||
| ::v-deep { | |||||
| .el-input--suffix { | |||||
| // background: url('../../../../assets/images/dataScreen/bigDataMonitoring2/stockCooperative/addText_bg.png') center center no-repeat !important; | |||||
| background-size: 100% 100% !important; | |||||
| width: 280px; | |||||
| .el-input__inner { | |||||
| background: none !important; | |||||
| border: 0 none !important; | |||||
| color: #a7dbff; | |||||
| font-size: 1.66vh; | |||||
| text-align: center; | |||||
| padding: 0; | |||||
| } | |||||
| .el-input__icon { | |||||
| display: none !important; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .gl_pop_cash { | |||||
| background: rgba(10, 25, 47, 0.8); | |||||
| position: absolute; | |||||
| border: 1px solid #063a95; | |||||
| border-left: 0.15vw solid #357dfa; | |||||
| padding: 0 1vw; | |||||
| z-index: 11; | |||||
| .head_main { | |||||
| height: 4.62vh; | |||||
| padding-top: 0.55vh; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| position: relative; | |||||
| justify-content: space-between; | |||||
| .title { | |||||
| color: #ffad00; | |||||
| font-size: 1.66vh; | |||||
| } | |||||
| .close { | |||||
| background: url('./close.png'); | |||||
| // border: 1px solid red; | |||||
| background-size: 100% 100%; | |||||
| width: 1.48vh; | |||||
| height: 1.48vh; | |||||
| cursor: pointer; | |||||
| } | |||||
| .xs_main { | |||||
| height: 0.55vh; | |||||
| position: absolute; | |||||
| width: 100%; | |||||
| bottom: -0.55vh; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| .block { | |||||
| width: 2.34vw; | |||||
| display: flex; | |||||
| .point { | |||||
| width: .55vh; | |||||
| height: .55vh; | |||||
| margin-right: 0.36vw; | |||||
| &.p1 { | |||||
| background: rgba(53, 125, 250, 1) | |||||
| } | |||||
| &.p2 { | |||||
| background: rgba(53, 125, 250, .7) | |||||
| } | |||||
| &.p3 { | |||||
| background: rgba(53, 125, 250, .4) | |||||
| } | |||||
| } | |||||
| } | |||||
| .xs_x { | |||||
| height: 1px; | |||||
| flex: 1; | |||||
| background: #214284; | |||||
| } | |||||
| } | |||||
| } | |||||
| .echarts_main { | |||||
| .headers { | |||||
| height: 3.33vh; | |||||
| font-size: 1.48vh; | |||||
| color: #0befca; | |||||
| text-align: center; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| margin-right: 0.53vw; | |||||
| background: rgba(11, 239, 202, .2); | |||||
| margin-bottom: 0.9vh | |||||
| } | |||||
| .desc_main { | |||||
| overflow-y: scroll; | |||||
| padding-right: 0.33vw; | |||||
| .analysisTable_list { | |||||
| margin: 0; | |||||
| padding: 0; | |||||
| flex: 1; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| .flex_item { | |||||
| cursor: pointer; | |||||
| list-style: none; | |||||
| margin: 0; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| text-align: center; | |||||
| color: #fff; | |||||
| font-size: 1.29vh; | |||||
| position: relative; | |||||
| height: 3.2vh; | |||||
| &:nth-child(2n) { | |||||
| background: rgba(53, 125, 250, .1); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .pop_statistical_desc { | |||||
| width: 20.2vw; | |||||
| margin: 0; | |||||
| right: 23vw; | |||||
| top: 35vh; | |||||
| padding-bottom: 1.04vw !important; | |||||
| .head_main { | |||||
| .title { | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| .echarts_main { | |||||
| margin-top: 1.66vh; | |||||
| div { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| &:nth-child(even) { | |||||
| background: rgba(32, 89, 188, 0.2); | |||||
| } | |||||
| p { | |||||
| &:nth-child(1) { | |||||
| width: 8vw; | |||||
| padding-left: 1vw; | |||||
| flex-shrink: 0; | |||||
| } | |||||
| &:nth-child(2) { | |||||
| color: #ffad00; | |||||
| } | |||||
| margin: 0; | |||||
| color: #ffffff; | |||||
| font-size:1.33vh; | |||||
| line-height: 3.92vh; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .imgBox{ | |||||
| position: absolute; | |||||
| left: 0; | |||||
| top: 0; | |||||
| z-index: 999999; | |||||
| width: 100vw; | |||||
| height: 100%; | |||||
| .box_bg{ | |||||
| background-color: rgba(0,0,0,0.5); | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| img{ | |||||
| height: 60vh; | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| transform: translate(-50%,-50%); | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,30 @@ | |||||
| <style lang="scss"> | |||||
| .el-cascader__dropdown{ | |||||
| background: rgba(1,11,34,.6); | |||||
| border:1px solid #0096ff; | |||||
| li{ | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| .header-cascader-drop{ | |||||
| background: rgba(1,11,34,.6); | |||||
| border:1px solid #0096ff; | |||||
| .el-cascader-panel{ | |||||
| .el-scrollbar { | |||||
| color: #fff; | |||||
| .el-cascader-menu__wrap{ | |||||
| .el-scrollbar__view{ | |||||
| li{ | |||||
| &:hover{ | |||||
| color: #1890ff; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped></style> | |||||
| @@ -0,0 +1,90 @@ | |||||
| <div class="popover_main"> | |||||
| <h1><i></i>{{data.zcmc}}<span @click="closePopover">×</span></h1> | |||||
| <div> | |||||
| <p>资产编码</p> | |||||
| <p>{{data.zcdm}}</p> | |||||
| <p>资产名称</p> | |||||
| <p>{{data.zcmc}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>三清类型</p> | |||||
| <p>{{data.threeAssetType}}</p> | |||||
| <p>资产类型</p> | |||||
| <p>{{data.threeDetailType}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>用地面积(亩)</p> | |||||
| <p>{{data.ydmj}}</p> | |||||
| <p>建筑面积(㎡)</p> | |||||
| <p>{{data.jzmj}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>所在组</p> | |||||
| <p>{{data.szz}}</p> | |||||
| <p>权属性质</p> | |||||
| <p>{{data.natureOwnership}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>权属是否存在争议</p> | |||||
| <p>{{data.qssfczzy}}</p> | |||||
| <p>权属主体</p> | |||||
| <p>{{data.qszt}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>是否委托代管</p> | |||||
| <p>{{data.sfwtdg}}</p> | |||||
| <p>联系电话</p> | |||||
| <p>{{data.lxdh}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>23年盘活方式</p> | |||||
| <p>{{data.phfs23}}</p> | |||||
| <p>23年效益(万元)</p> | |||||
| <p>{{data.xy23}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>24年盘活方式</p> | |||||
| <p>{{data.phfs24}}</p> | |||||
| <p>24年效益(万元)</p> | |||||
| <p>{{data.xy24}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>盘活情况</p> | |||||
| <p>{{data.phqk}}</p> | |||||
| <p>资产闲置原因</p> | |||||
| <p>{{data.xzyy}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>是否能正常使用</p> | |||||
| <p>{{data.sfnzcsy}}</p> | |||||
| <p>完善后使用</p> | |||||
| <p>{{data.wshsy}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>不能使用</p> | |||||
| <p>{{data.bnsy}}</p> | |||||
| <p>盘活措施</p> | |||||
| <p>{{data.phcs}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>盘活时限</p> | |||||
| <p>{{data.phsx}}</p> | |||||
| <p>资产统计年度</p> | |||||
| <p>{{data.zctjnd}}</p> | |||||
| </div> | |||||
| <div> | |||||
| <p>备注</p> | |||||
| <p style="width: 75%;">{{data.bz}}</p> | |||||
| </div> | |||||
| <div style="justify-content: left"> | |||||
| <p>附件</p> | |||||
| <p style="width: 75%;"> | |||||
| <block v-for="(item,index) in data.fileList"> | |||||
| <a :href="item.urlApi" v-if="item.type != 'image'"> | |||||
| <img :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt=""> | |||||
| </a> | |||||
| <img v-else :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)"> | |||||
| </block> | |||||
| </p> | |||||
| </div> | |||||
| </div> | |||||
| @@ -0,0 +1,26 @@ | |||||
| export default { | |||||
| props: { | |||||
| data: { | |||||
| type: Object, | |||||
| default: function () { | |||||
| return {} | |||||
| } | |||||
| } | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| }; | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| }, | |||||
| methods: { | |||||
| closePopover(){ | |||||
| this.$emit('closePopover'); | |||||
| }, | |||||
| openImage(url){ | |||||
| this.$emit('openImage', url); | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,46 @@ | |||||
| .popover_main{ | |||||
| width: 800px; | |||||
| position: absolute; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| transform: translate(-50% , -50%); | |||||
| background-color: rgba(11,36,79,.9); | |||||
| z-index: 99; | |||||
| padding-bottom: 25px; | |||||
| border: 1px solid #0b61b7; | |||||
| h1{ | |||||
| background: url("./tit_bg.png") no-repeat center; | |||||
| background-size: 100% 100%; | |||||
| padding: 10px 25px 10px 10px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| font-size: 18px; | |||||
| font-weight: initial; | |||||
| i{ | |||||
| display: block; | |||||
| width: 25px; | |||||
| height: 25px; | |||||
| background: url("./icon.png") no-repeat center; | |||||
| background-size: 200% 200%; | |||||
| } | |||||
| span{ | |||||
| margin-left: auto; | |||||
| font-size: 24px; | |||||
| cursor: pointer; | |||||
| } | |||||
| } | |||||
| div{ | |||||
| display: flex; | |||||
| //justify-content: space-between; | |||||
| p{ | |||||
| width: 25%; | |||||
| padding: 10px 25px; | |||||
| &:nth-child(odd){ | |||||
| color: #80aacf; | |||||
| }; | |||||
| &:nth-child(even){ | |||||
| color: #01d5f8; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -21,6 +21,11 @@ export default [ | |||||
| icon: require('./4.png'), | icon: require('./4.png'), | ||||
| path: '/sanqing', | path: '/sanqing', | ||||
| name: '三清一张图' | name: '三清一张图' | ||||
| }, | |||||
| { | |||||
| icon: require('./5.png'), | |||||
| path: '/industry', | |||||
| name: '产业一张图' | |||||
| } | } | ||||
| ] | ] | ||||
| ] | ] | ||||
| @@ -226,10 +226,11 @@ export function analysisOfContractTypes (deptId, year) { | |||||
| } | } | ||||
| // 资产一张图-右中-合同数量/金额排名分析 | // 资产一张图-右中-合同数量/金额排名分析 | ||||
| export function analysisOfAmountRanking (deptId, year) { | |||||
| export function analysisOfAmountRanking (deptId, year, num) { | |||||
| let query = { | let query = { | ||||
| deptId, | deptId, | ||||
| year | |||||
| year, | |||||
| num | |||||
| } | } | ||||
| return request({ | return request({ | ||||
| url: 'api/home/xixia/asset/htsljepmfx', | url: 'api/home/xixia/asset/htsljepmfx', | ||||
| @@ -239,10 +240,11 @@ export function analysisOfAmountRanking (deptId, year) { | |||||
| } | } | ||||
| // 资产一张图-右下-合同不规范管理排名分析 | // 资产一张图-右下-合同不规范管理排名分析 | ||||
| export function rankingAnalysisOfNonStandardContractManagement (deptId, year) { | |||||
| export function rankingAnalysisOfNonStandardContractManagement (deptId, year, num) { | |||||
| let query = { | let query = { | ||||
| deptId, | deptId, | ||||
| year | |||||
| year, | |||||
| num | |||||
| } | } | ||||
| return request({ | return request({ | ||||
| url: 'api/home/xixia/asset/htbgfglpmfx', | url: 'api/home/xixia/asset/htbgfglpmfx', | ||||
| @@ -39,7 +39,7 @@ export default { | |||||
| getData () { | getData () { | ||||
| if (this.year, this.deptId) { | if (this.year, this.deptId) { | ||||
| this.isLoad = false; | this.isLoad = false; | ||||
| rankingAnalysisOfNonStandardContractManagement(this.deptId, this.year).then(res => { | |||||
| rankingAnalysisOfNonStandardContractManagement(this.deptId, this.year, 100).then(res => { | |||||
| let data = res.data.map(item => { | let data = res.data.map(item => { | ||||
| return [item.name, item.value, item.index] | return [item.name, item.value, item.index] | ||||
| }) | }) | ||||
| @@ -48,7 +48,7 @@ export default { | |||||
| getData () { | getData () { | ||||
| if (this.year, this.deptId) { | if (this.year, this.deptId) { | ||||
| this.isLoad = false; | this.isLoad = false; | ||||
| analysisOfAmountRanking(this.deptId, this.year).then(res => { | |||||
| analysisOfAmountRanking(this.deptId, this.year, 100).then(res => { | |||||
| if (this.tabIndex == 1) { | if (this.tabIndex == 1) { | ||||
| this.headers = ['部门名称', '数量(个)', '排名']; | this.headers = ['部门名称', '数量(个)', '排名']; | ||||
| let data = res.data.sl.map(item => { | let data = res.data.sl.map(item => { | ||||
| @@ -118,10 +118,11 @@ export function analysisContractTypes (deptId, year) { | |||||
| } | } | ||||
| // 资源一张图-右中-合同数量/金额排名分析 | // 资源一张图-右中-合同数量/金额排名分析 | ||||
| export function rankinganalysisofcontractquantityandamount (deptId, year) { | |||||
| export function rankinganalysisofcontractquantityandamount (deptId, year, num) { | |||||
| let query = { | let query = { | ||||
| deptId, | deptId, | ||||
| year | |||||
| year, | |||||
| num | |||||
| } | } | ||||
| return request({ | return request({ | ||||
| url: 'api/home/xixia/resource/htsljepmfx', | url: 'api/home/xixia/resource/htsljepmfx', | ||||
| @@ -131,10 +132,11 @@ export function rankinganalysisofcontractquantityandamount (deptId, year) { | |||||
| } | } | ||||
| // 资源一张图-右下-合同不规范管理排名分析 | // 资源一张图-右下-合同不规范管理排名分析 | ||||
| export function Rankinganalysisofstandardcontractmanagement (deptId, year) { | |||||
| export function Rankinganalysisofstandardcontractmanagement (deptId, year, num) { | |||||
| let query = { | let query = { | ||||
| deptId, | deptId, | ||||
| year | |||||
| year, | |||||
| num | |||||
| } | } | ||||
| return request({ | return request({ | ||||
| url: 'api/home/xixia/resource/htbgfglpmfx', | url: 'api/home/xixia/resource/htbgfglpmfx', | ||||
| @@ -35,7 +35,7 @@ export default { | |||||
| getData () { | getData () { | ||||
| if (this.year, this.deptId) { | if (this.year, this.deptId) { | ||||
| this.isLoad = false; | this.isLoad = false; | ||||
| Rankinganalysisofstandardcontractmanagement(this.deptId, this.year).then(res => { | |||||
| Rankinganalysisofstandardcontractmanagement(this.deptId, this.year, 100).then(res => { | |||||
| let data = res.data.map(item => { | let data = res.data.map(item => { | ||||
| return [item.name, item.value, item.index] | return [item.name, item.value, item.index] | ||||
| }) | }) | ||||
| @@ -52,7 +52,7 @@ export default { | |||||
| getData () { | getData () { | ||||
| if (this.year, this.deptId) { | if (this.year, this.deptId) { | ||||
| this.isLoad = false; | this.isLoad = false; | ||||
| rankinganalysisofcontractquantityandamount(this.deptId, this.year).then(res => { | |||||
| rankinganalysisofcontractquantityandamount(this.deptId, this.year, 100).then(res => { | |||||
| if (this.id == 1) { | if (this.id == 1) { | ||||
| let data = res.data.sl.map(item => { | let data = res.data.sl.map(item => { | ||||
| return [item.name, item.value, item.index] | return [item.name, item.value, item.index] | ||||