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;
+//}