diff --git a/src/components/charts/bar-stack/index.html b/src/components/charts/bar-stack/index.html new file mode 100644 index 0000000..d60fced --- /dev/null +++ b/src/components/charts/bar-stack/index.html @@ -0,0 +1 @@ +
diff --git a/src/components/charts/bar-stack/index.js b/src/components/charts/bar-stack/index.js new file mode 100644 index 0000000..9d062d5 --- /dev/null +++ b/src/components/charts/bar-stack/index.js @@ -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(); + } + } +}; diff --git a/src/components/charts/bar-stack/index.scss b/src/components/charts/bar-stack/index.scss new file mode 100644 index 0000000..b89d9dc --- /dev/null +++ b/src/components/charts/bar-stack/index.scss @@ -0,0 +1,6 @@ +.chart { + overflow: visible; + width: 100%; + height: 100%; + z-index: 2; +} \ No newline at end of file diff --git a/src/components/charts/bar-stack/index.vue b/src/components/charts/bar-stack/index.vue new file mode 100644 index 0000000..5ca257a --- /dev/null +++ b/src/components/charts/bar-stack/index.vue @@ -0,0 +1,3 @@ + + + diff --git a/src/components/charts/lines/index.js b/src/components/charts/lines/index.js index 4a3fa82..525c506 100644 --- a/src/components/charts/lines/index.js +++ b/src/components/charts/lines/index.js @@ -4,7 +4,7 @@ export default { props: { id: { type: String, - default: 'lines' + default: 'line' }, data: { type: Array, @@ -60,12 +60,12 @@ export default { }, 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 = { grid: { left: "5%", @@ -90,11 +90,7 @@ export default { { offset: 0.5, color: this.color[1], - }, - { - offset: 0, - color: this.color[2], - }, + } ]), }, xAxis: [ @@ -113,7 +109,7 @@ export default { splitLine: { show: false }, - data: xAxisData + data: ['鸭池镇','梨树镇','岔河镇','田坝镇','长春镇堡','八寨镇','林口镇'] //xAxisData }, ], yAxis: [ @@ -147,10 +143,10 @@ export default { ], series: [ { - name: "", - type: "line", + name: 'Email', + type: 'line', + stack: 'Total', smooth: true, - symbolSize: 12, itemStyle: { normal: { color: this.color[0], @@ -162,31 +158,87 @@ export default { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 1, - color: this.areaStyle[0], - }, - { - offset: 0.5, - color: this.areaStyle[1], + color: this.color[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.initResizeCallBack(); diff --git a/src/router/index.js b/src/router/index.js index f43ff87..c173243 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -42,6 +42,12 @@ const routes = [ path: '/sanqing', name: 'sanqing', component: () => import('@/views/sanqing/index.vue') + }, + // // 三清五治 + { + path: '/industry', + name: 'industry', + component: () => import('@/views/industry/index.vue') } ]; diff --git a/src/views/capital/api/index.js b/src/views/capital/api/index.js index 01411e8..59f1982 100644 --- a/src/views/capital/api/index.js +++ b/src/views/capital/api/index.js @@ -78,10 +78,11 @@ export function assetLiabilityAnalysis (deptId, year) { } // 资金一张图-右中-资金收入排名 -export function rankingOfFundIncome (deptId, year) { +export function rankingOfFundIncome (deptId, year, num) { let query = { deptId, - year + year, + num } return request({ 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 = { deptId, - year + year, + num } return request({ url: 'api/home/xixia/finance/zjzhcpm', diff --git a/src/views/capital/comps/right/bottom/1/index.js b/src/views/capital/comps/right/bottom/1/index.js index e78ee02..403c301 100644 --- a/src/views/capital/comps/right/bottom/1/index.js +++ b/src/views/capital/comps/right/bottom/1/index.js @@ -33,7 +33,7 @@ export default { getData () { if (this.year, this.deptId) { this.isLoad = false; - rankingOfCapitalExpenditure(this.deptId, this.year).then(res => { + rankingOfCapitalExpenditure(this.deptId, this.year, 100).then(res => { let data = res.data.map(item => { return [item.name, item.value, item.index] }) diff --git a/src/views/capital/comps/right/middle/1/index.js b/src/views/capital/comps/right/middle/1/index.js index 6c662e6..b09aca5 100644 --- a/src/views/capital/comps/right/middle/1/index.js +++ b/src/views/capital/comps/right/middle/1/index.js @@ -38,7 +38,7 @@ export default { getData () { if (this.year, this.deptId) { this.isLoad = false; - rankingOfFundIncome(this.deptId, this.year).then(res => { + rankingOfFundIncome(this.deptId, this.year, 100).then(res => { let data = res.data.map(item => { return [item.name, item.value, item.index] }) diff --git a/src/views/industry/comps/buttom/1/bg.png b/src/views/industry/comps/buttom/1/bg.png new file mode 100644 index 0000000..4501704 Binary files /dev/null and b/src/views/industry/comps/buttom/1/bg.png differ diff --git a/src/views/industry/comps/buttom/1/bg2.png b/src/views/industry/comps/buttom/1/bg2.png new file mode 100644 index 0000000..ed83a8a Binary files /dev/null and b/src/views/industry/comps/buttom/1/bg2.png differ diff --git a/src/views/industry/comps/buttom/1/data.js b/src/views/industry/comps/buttom/1/data.js new file mode 100644 index 0000000..68746f0 --- /dev/null +++ b/src/views/industry/comps/buttom/1/data.js @@ -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' + } + ] +] \ No newline at end of file diff --git a/src/views/industry/comps/buttom/1/index.html b/src/views/industry/comps/buttom/1/index.html new file mode 100644 index 0000000..e5da59c --- /dev/null +++ b/src/views/industry/comps/buttom/1/index.html @@ -0,0 +1,52 @@ +集体资源资产统计
+数量
+{{data.jtzyzc.num}}个
+用地面积
+{{data.jtzyzc.ydmj}}亩
+建筑面积
+{{data.jtzyzc.jzmj}}㎡
+农业设施设备统计
+数量
+{{data.nysssb.num}}个
+用地面积
+{{data.nysssb.ydmj}}亩
+建筑面积
+{{data.nysssb.jzmj}}㎡
+农户资产统计
+数量
+{{data.nhzc.num}}个
+用地面积
+{{data.nhzc.ydmj}}亩
+建筑面积
+{{data.nhzc.jzmj}}㎡
+{{data.xy23}}万元
+2023年盘活效益
+{{data.xy24}}万元
+2024年盘活效益
+资源编码
+{{resourceDetail.code}}
+资源名称
+{{resourceDetail.name}}
+资源类型
+{{resourceDetail.resourceSort}}
+总面积(亩)
+{{resourceDetail.totalArea}}
+资产状态
+{{resourceDetail.status}}
+使用情况
+{{resourceDetail.useType}}
+坐落位置
+{{resourceDetail.location}}
+东至
+{{resourceDetail.east}}
+西至
+{{resourceDetail.west}}
+南至
+{{resourceDetail.south}}
+北至
+{{resourceDetail.north}}
+备注
+{{resourceDetail.remark}}
+附件
+
+
+
+
+
资产编码
+{{data.zcdm}}
+资产名称
+{{data.zcmc}}
+三清类型
+{{data.threeAssetType}}
+资产类型
+{{data.threeDetailType}}
+用地面积(亩)
+{{data.ydmj}}
+建筑面积(㎡)
+{{data.jzmj}}
+所在组
+{{data.szz}}
+权属性质
+{{data.natureOwnership}}
+权属是否存在争议
+{{data.qssfczzy}}
+权属主体
+{{data.qszt}}
+是否委托代管
+{{data.sfwtdg}}
+联系电话
+{{data.lxdh}}
+23年盘活方式
+{{data.phfs23}}
+23年效益(万元)
+{{data.xy23}}
+24年盘活方式
+{{data.phfs24}}
+24年效益(万元)
+{{data.xy24}}
+盘活情况
+{{data.phqk}}
+资产闲置原因
+{{data.xzyy}}
+是否能正常使用
+{{data.sfnzcsy}}
+完善后使用
+{{data.wshsy}}
+不能使用
+{{data.bnsy}}
+盘活措施
+{{data.phcs}}
+盘活时限
+{{data.phsx}}
+资产统计年度
+{{data.zctjnd}}
+备注
+{{data.bz}}
+附件
+
+
+
+
+