diff --git a/src/api/index.js b/src/api/index.js index 1d992f7..4a96e6e 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -15,3 +15,12 @@ export function getThreeList (query) { params: query }) } + + +export function getIndustry (query) { + return request({ + url: '/api/asset/industry/dataScreen', + method: 'get', + params: query + }) +} diff --git a/src/components/charts/bar-stack/index.js b/src/components/charts/bar-stack/index.js index 9d062d5..40313b5 100644 --- a/src/components/charts/bar-stack/index.js +++ b/src/components/charts/bar-stack/index.js @@ -12,11 +12,13 @@ export default { return [ { name: '1月', - value: '10' + value: '10', + data: [] }, { name: '2月', - value: '19' + value: '19', + data: [] } ]; } @@ -29,10 +31,6 @@ export default { type: Number, default: null }, - rotate: { - type: Number, - default: 0 - }, serverName: { type: String, default: '面积' @@ -52,7 +50,8 @@ export default { }, data () { return { - chart: null + chart: null, + rotate: 0 }; }, watch: { @@ -108,15 +107,30 @@ export default { chartSetOption () { let xAxisData = []; let data = []; - let bgData = []; + this.data[0]?.data.forEach(child =>{ + data.push({ + name: child.dataNum1, + barWidth: 20, + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series' + }, + data: [] + }) + }) this.data.forEach(item => { - xAxisData.push(item.name) - data.push(item.value) - bgData.push(100) + xAxisData.push(item.deptName); + item.data.forEach(child =>{ + data.forEach(son =>{ + if (child.dataNum1 == son.name ){ + son.data.push(child.dataNum2) + } + }) + }) }); - const option = { - color: ["#2195fe","#04e26f","#f7cc3a","#f77e3f"], + color: ["#2195fe","#04e26f","#f7cc3a","#e23ff7","#f77e3f"], tooltip: { trigger: "axis", axisPointer: { @@ -127,16 +141,15 @@ export default { } }, legend: { - data: ["村集体", "农民", "公司", "其它"], - top: '3%', - right: '5%', + top: '0%', + right: '2%', textStyle: { color: 'rgba(210, 238, 255, 1)', }, }, grid: { left: "5%", - right: "5%", + right: "2%", bottom: "5%", top: "15%", containLabel: true, @@ -159,7 +172,7 @@ export default { }, type: "category", gridIndex: 0, - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//xAxisData + data: xAxisData,//xAxisData axisTick: { alignWithLabel: true, }, @@ -222,45 +235,7 @@ export default { } }, ], - 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] - }, - ] + series: data }; this.chart.setOption(option); this.initResizeCallBack(); diff --git a/src/components/charts/lines/index.js b/src/components/charts/lines/index.js index 525c506..70ed686 100644 --- a/src/components/charts/lines/index.js +++ b/src/components/charts/lines/index.js @@ -12,11 +12,13 @@ export default { return [ { name: '1月', - value: '10' + value1: '10', + value2: '20', }, { name: '2月', - value: '19' + value1: '19', + value2: '20', } ]; } @@ -36,11 +38,27 @@ export default { }, data () { return { - chart: null + chart: null, + rotate: 0 }; }, + watch: { + data: { + handler: function (val) { + this.$nextTick(function () { + setTimeout(() => { + this.initChart(); + }, 2000) + }); + }, + immediate: true, + deep: true + } + }, mounted () { - this.initChart(); + // setTimeout(()=>{ + // this.initChart(); + // },2000) }, computed: { }, @@ -50,7 +68,20 @@ export default { 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 + }, + } + }); }); }); }, @@ -60,16 +91,19 @@ export default { }, chartSetOption () { - // let xAxisData = []; - // let data = []; - // this.data.forEach(item => { - // xAxisData.push(item.name) - // data.push(item.value) - // }); + let xAxisData = []; + let data1 = []; + let data2 = []; + let legend = this.data[0]?.legend; + this.data.forEach(item => { + xAxisData.push(item.name) + data1.push(item.value1) + data2.push(item.value2) + }); const option = { grid: { left: "5%", - right: "10%", + right: "2%", top: "15%", bottom: "10%", containLabel: true, @@ -109,7 +143,7 @@ export default { splitLine: { show: false }, - data: ['鸭池镇','梨树镇','岔河镇','田坝镇','长春镇堡','八寨镇','林口镇'] //xAxisData + data: xAxisData }, ], yAxis: [ @@ -143,7 +177,7 @@ export default { ], series: [ { - name: 'Email', + name: legend[0], type: 'line', stack: 'Total', smooth: true, @@ -168,10 +202,10 @@ export default { }, }, }, - data: [120, 132, 101, 134, 90, 230, 210] + data: data1 }, { - name: 'Union Ads', + name: legend[1], type: 'line', stack: 'Total', smooth: true, @@ -196,7 +230,7 @@ export default { }, }, }, - data: [220, 182, 191, 234, 290, 330, 310] + data: data2 }, // { // name: "", diff --git a/src/views/industry/comps/buttom/1/bg1.png b/src/views/industry/comps/buttom/1/bg1.png new file mode 100644 index 0000000..fb61b36 Binary files /dev/null and b/src/views/industry/comps/buttom/1/bg1.png differ diff --git a/src/views/industry/comps/buttom/1/bg2.png b/src/views/industry/comps/buttom/1/bg2.png index ed83a8a..a8cc9dc 100644 Binary files a/src/views/industry/comps/buttom/1/bg2.png and b/src/views/industry/comps/buttom/1/bg2.png differ diff --git a/src/views/industry/comps/buttom/1/index.html b/src/views/industry/comps/buttom/1/index.html index e5da59c..63e0d0e 100644 --- a/src/views/industry/comps/buttom/1/index.html +++ b/src/views/industry/comps/buttom/1/index.html @@ -1,52 +1,51 @@
-
-
- -

集体资源资产统计

-
-

数量

-

{{data.jtzyzc.num}}个

-
-
-

用地面积

-

{{data.jtzyzc.ydmj}}亩

-
-
-

建筑面积

-

{{data.jtzyzc.jzmj}}㎡

-
+ + + + + + + + +
+
+ +
+
{{data.dataNum1}}
+
产业总数(个)
+
-
- -

农业设施设备统计

-
-

数量

-

{{data.nysssb.num}}个

-
-
-

用地面积

-

{{data.nysssb.ydmj}}亩

-
-
-

建筑面积

-

{{data.nysssb.jzmj}}㎡

-
+
+
+ +
+
{{data.dataNum2}}
+
产业占地面积(亩)
+
-
- -

农户资产统计

-
-

数量

-

{{data.nhzc.num}}个

-
-
-

用地面积

-

{{data.nhzc.ydmj}}亩

-
-
-

建筑面积

-

{{data.nhzc.jzmj}}㎡

-
+
+
+ +
+
{{data.dataNum3}}
+
产业投资额(万)
+
- +
+
+ +
+
{{data.dataNum4}}
+
产业估值(万)
+
+
+
+
+ +
+
{{data.dataNum5}}
+
年利润(万)
+
+
+
diff --git a/src/views/industry/comps/buttom/1/index.js b/src/views/industry/comps/buttom/1/index.js index 9a98dec..dcf6abd 100644 --- a/src/views/industry/comps/buttom/1/index.js +++ b/src/views/industry/comps/buttom/1/index.js @@ -1,8 +1,5 @@ -import BlockValue from '@/components/value/index.vue'; +import { mapGetters } from 'vuex' export default { - components: { - BlockValue - }, props: { data: { type: Object, @@ -11,6 +8,26 @@ export default { } } }, + components: { + }, + computed: { + ...mapGetters(['year', 'deptId']) + }, + + watch: { + // year: { + // handler () { + // this.getData(); + // }, + // immediate: true, // 立即执行 + // }, + // deptId: { + // handler () { + // this.getData(); + // }, + // immediate: true, // 立即执行 + // } + }, data () { return { }; @@ -20,5 +37,21 @@ export default { mounted () { }, methods: { + getData () { + if (this.year, this.deptId) { + this.isLoad = false; + // Resources(this.deptId, this.year).then(res => { + // this.data[0][0].value = res.data.nyd + // this.data[0][1].value = res.data.jsyd + // this.data[0][2].value = res.data.wlydjlm + // this.data[0][3].value = res.data.numNyd + // this.data[0][4].value = res.data.numJsyd + // this.data[0][5].value = res.data.numWlydjlm + // + // this.data = data + // this.isLoad = true; + // }) + } + }, } }; diff --git a/src/views/industry/comps/buttom/1/index.scss b/src/views/industry/comps/buttom/1/index.scss index 621f0ff..0944bda 100644 --- a/src/views/industry/comps/buttom/1/index.scss +++ b/src/views/industry/comps/buttom/1/index.scss @@ -1,94 +1,70 @@ .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; - } + width: 960px; + + table { + width: 100%; + + tr { + width: 100%; + + td { + + width: 16.6%; } } } - - .flex_main_right{ - background: url("bg2.png") no-repeat center; - background-size: 100% 100%; - width: 220px; - height: 100px; - margin-bottom: 15px; +} +.block_value { + background: url('./bg1.png'); + background-size: 100% 100%; + width: 130px; + height: 130px; + position: relative; + img{ + height: 90px; + width: 100%; + position: absolute; + z-index: -1; + animation: 2s timeAmXsf1 0.1s infinite; + } + .value_pos { display: flex; flex-direction: column; align-items: center; - justify-content: space-evenly; - p:nth-child(1){ - color: #01d5f8; - font-size: 26px; + height: 70px; + .value { + font-family: Arial; font-weight: bold; - span{ - font-size: 14px; - } + font-size: 24px; + color: #FFFFFF; + line-height: 30px; + text-shadow: 0px 3px 2px #05357D; + } + + .name { + font-weight: 500; + font-size: 14px; + color: #B9D3EB; + text-shadow: 0px 3px 3px rgba(30, 63, 112, 0.6); + background: linear-gradient(180deg, #FEFFFF 17.4072265625%, #e0e9f9 99.6337890625%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } } } + + +@keyframes timeAmXsf1 { + 0% { + opacity: 0; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/src/views/industry/comps/left/top/1/index.html b/src/views/industry/comps/left/top/1/index.html index 6e7ef25..c381870 100644 --- a/src/views/industry/comps/left/top/1/index.html +++ b/src/views/industry/comps/left/top/1/index.html @@ -5,7 +5,7 @@ :color="['#f7cc3a', '#f7803f']" :barBorderRadius="[15, 15, 15, 15]" :data="data" - unit="单位:亩" + unit="单位:个" >
diff --git a/src/views/industry/comps/right/top/1/index.html b/src/views/industry/comps/right/top/1/index.html index d72b72f..443d059 100644 --- a/src/views/industry/comps/right/top/1/index.html +++ b/src/views/industry/comps/right/top/1/index.html @@ -4,7 +4,7 @@ diff --git a/src/views/industry/index.html b/src/views/industry/index.html index f0e97c4..3524d0b 100644 --- a/src/views/industry/index.html +++ b/src/views/industry/index.html @@ -2,7 +2,7 @@
-
+
diff --git a/src/views/industry/index.js b/src/views/industry/index.js index 3f91917..a877716 100644 --- a/src/views/industry/index.js +++ b/src/views/industry/index.js @@ -18,7 +18,7 @@ import MainGis from './main-gis/index.vue'; import { comps } from './data.js' -import { getStatistic } from "@/api/index"; +import { getIndustry } from "@/api/index"; import { getInfo } from "@/api/login"; import {mapGetters} from "vuex"; @@ -86,56 +86,75 @@ export default { 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({ + getIndustry({deptId: deptId}).then((response) => { + + // let XArr = response.data.industryRightsDistributionData.map(item => item.deptName).filter((name, index, self) => self.indexOf(name) === index && name !== null); + let json = JSON.parse(response.data.industryRightsDistributionData); + this.currentComp.left[0].data = json; + + let json2 = JSON.parse(response.data.industryTypeDistributionData); + this.currentComp.right[0].data = json2; + // console.log(this.currentComp.left[0].data) + + response.data.industryScaleData.map(rr => { + this.currentComp.left[1].data.push({ name: rr.deptName, - value: rr.ydmj + legend: ['投资金额','产业估值'], + value1:rr.dataNum1, + value2:rr.dataNum2, }) }) - response.data.nysssbDeptList.map(rr => { + + response.data.industryOperateData.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 + legend: ['年销售额','年利润'], + value1:rr.dataNum1, + value2:rr.dataNum2, }) }) - 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.industryTypeData.map(rr => { + this.currentComp.left[2].data.push({ + name: rr.dataNum1, + value: rr.dataNum2, + unit: '万元' }) }) - response.data.nhzcTypeList.map(rr => { - this.currentComp.left[2].data.push({ - name: rr.threeDetailType, - value: rr.ydmj, + + response.data.industryRightsData.map(rr => { + this.currentComp.right[2].data.push({ + name: rr.dataNum1, + value: rr.dataNum2, unit: '万元' }) }) - this.currentComp.buttom[0].data = { - jtzyzc: response.data.jtzyzc,//集体资源资产 - nysssb: response.data.nysssb,//农业设施设备 - nhzc: response.data.nhzc, - } + // 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 + // }) + // }) - this.currentComp.buttom[1].data = { - xy23: response.data.xy23, - xy24: response.data.xy24 - } + this.currentComp.buttom[0].data = response.data.bottomStatistics[0] + // + // this.currentComp.buttom[1].data = { + // xy23: response.data.xy23, + // xy24: response.data.xy24 + // } console.log(this.currentComp) this.allData = response.data; diff --git a/src/views/industry/index.scss b/src/views/industry/index.scss index 12bb638..8bb69cf 100644 --- a/src/views/industry/index.scss +++ b/src/views/industry/index.scss @@ -5,8 +5,8 @@ right: 0; bottom: 0; } -.buttom_side { - top: 100px; - bottom: auto; - left: 685px; -} +//.buttom_side { +// top: 100px; +// bottom: auto; +// left: 685px; +//}