diff --git a/src/components/charts/bar-dimensional/index.js b/src/components/charts/bar-dimensional/index.js index aecf5aa..c348101 100644 --- a/src/components/charts/bar-dimensional/index.js +++ b/src/components/charts/bar-dimensional/index.js @@ -45,7 +45,9 @@ export default { }; }, mounted () { - this.initChart(); + setTimeout(()=>{ + this.initChart(); + },2000) }, computed: { }, @@ -66,10 +68,14 @@ export default { chartSetOption () { let xAxisData = []; let data = []; + let max = []; this.data.forEach(item => { xAxisData.push(item.name) data.push(item.value) }); + data.forEach(item => { + max.push(Math.max(...data)) + }); const CubeLeft = echarts.graphic.extendShape({ shape: { x: 0, @@ -129,12 +135,8 @@ export default { echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeTop", CubeTop); - const MAX = [ - 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, - ]; - const VALUE = [ - 201, 123, 379, 234, 165, 123, 379, 234, 165, 379, 234, 165, - ]; + const MAX = max; + const VALUE = data; const option = { // backgroundColor: "#010d3a", title: { @@ -170,15 +172,7 @@ export default { }, type: "category", gridIndex: 0, - data: [ - "A镇", - "A镇", - "A镇", - "A镇", - "A镇", - "A镇", - "A镇" - ], + data: xAxisData, axisTick: { alignWithLabel: true, }, diff --git a/src/components/charts/bar/index.js b/src/components/charts/bar/index.js index 02b9322..5220e1b 100644 --- a/src/components/charts/bar/index.js +++ b/src/components/charts/bar/index.js @@ -46,7 +46,7 @@ export default { mounted () { setTimeout(()=>{ this.initChart(); - },1000) + },2000) }, computed: { }, diff --git a/src/components/charts/pie/index.js b/src/components/charts/pie/index.js index 8062057..bce4673 100644 --- a/src/components/charts/pie/index.js +++ b/src/components/charts/pie/index.js @@ -14,6 +14,10 @@ export default { type: String, default: "总债务" }, + showTit: { + type: Boolean, + default: true + }, data: { type: Array, default: function () { @@ -48,7 +52,9 @@ export default { }; }, mounted () { - this.initChart(); + setTimeout(()=>{ + this.initChart(); + },2000) }, computed: { }, @@ -71,6 +77,8 @@ export default { var echartData = [ ...this.data ]; + var that = this; + console.log(echartData) var rich = { yellow: { color: "rgba(185, 211, 235, 1)", @@ -102,9 +110,13 @@ export default { }, }; const option = { + tooltip: { + trigger: "item" + }, title: [ { text: this.title, + show: this.showTit, left: "center", top: "40%", padding: [0, 0], @@ -116,6 +128,7 @@ export default { }, { text: this.titleNum, + show: this.showTit, left: "center", top: "50%", padding: [0, 0], @@ -132,7 +145,7 @@ export default { type: "pie", radius: ["48%", "70%"], - color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)"], + color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)","#ffc72b"], label: { normal: { formatter: function (params, ticket, callback) { @@ -143,12 +156,9 @@ export default { }); percent = ((params.value / total) * 100).toFixed(1); return ( - "{white|" + - percent + "%" + - "}\n{blue|" + - params.name + - "}\n{hr|}\n{yellow|" + - params.value + params.data.unit + '}' + "{white|" + percent + "%" + "}\n" + + "{blue|" + params.name + "}\n" + + (that.showTit ? "{hr|}\n{yellow|" + params.value + params.data.unit + '}':'') ); }, rich: rich, diff --git a/src/components/pannelNew/header_bg.png b/src/components/pannelNew/header_bg.png index b145904..965cac1 100644 Binary files a/src/components/pannelNew/header_bg.png and b/src/components/pannelNew/header_bg.png differ diff --git a/src/components/pannelNew/index.html b/src/components/pannelNew/index.html index 4540f2b..ccf926e 100644 --- a/src/components/pannelNew/index.html +++ b/src/components/pannelNew/index.html @@ -1,7 +1,7 @@
-
+

{{title}}

diff --git a/src/components/pannelNew/index.scss b/src/components/pannelNew/index.scss index 588e643..14d4092 100644 --- a/src/components/pannelNew/index.scss +++ b/src/components/pannelNew/index.scss @@ -33,8 +33,9 @@ margin-top: 2px; height: 45px; background: #01142c url("header_bg.png") no-repeat -8px center; - background-size: 102% auto; + background-size: auto auto; justify-content: space-between; + align-items: baseline; .title_bk { // font-style: italic; diff --git a/src/views/nav/4.png b/src/views/nav/4.png new file mode 100644 index 0000000..6088e14 Binary files /dev/null and b/src/views/nav/4.png differ diff --git a/src/views/nav/data.js b/src/views/nav/data.js index 1c81576..1d9944c 100644 --- a/src/views/nav/data.js +++ b/src/views/nav/data.js @@ -18,7 +18,7 @@ export default [ ], [ { - icon: require('./2.png'), + icon: require('./4.png'), path: '/sanqing', name: '三清五治一张图' } diff --git a/src/views/sanqing/comps/buttom/1/index.html b/src/views/sanqing/comps/buttom/1/index.html index c78c677..268e660 100644 --- a/src/views/sanqing/comps/buttom/1/index.html +++ b/src/views/sanqing/comps/buttom/1/index.html @@ -49,16 +49,4 @@
- -
-
-

{{data.xy23}}万元

-

2023年盘活效益

-
- -
-

{{data.xy24}}万元

-

2024年盘活效益

-
-
diff --git a/src/views/sanqing/comps/buttom/1/index.js b/src/views/sanqing/comps/buttom/1/index.js index 66dadbc..9a98dec 100644 --- a/src/views/sanqing/comps/buttom/1/index.js +++ b/src/views/sanqing/comps/buttom/1/index.js @@ -5,9 +5,9 @@ export default { }, props: { data: { - type: Array, + type: Object, default: function () { - return [] + return {} } } }, diff --git a/src/views/sanqing/comps/buttom/1/index.scss b/src/views/sanqing/comps/buttom/1/index.scss index 7239e4b..1071e81 100644 --- a/src/views/sanqing/comps/buttom/1/index.scss +++ b/src/views/sanqing/comps/buttom/1/index.scss @@ -1,7 +1,11 @@ .buttom2 { - width: 960px; + width: 220px; display: flex; justify-content: space-between; + position: absolute; + top: 100px; + left: 460px; + z-index: 2; .flex_main{ background: url("bg.png") no-repeat 10px center; background-size: calc(100% - 10px) 100%; diff --git a/src/views/sanqing/comps/buttom/2/bg.png b/src/views/sanqing/comps/buttom/2/bg.png new file mode 100644 index 0000000..66e819f Binary files /dev/null and b/src/views/sanqing/comps/buttom/2/bg.png differ diff --git a/src/views/sanqing/comps/buttom/2/bg2.png b/src/views/sanqing/comps/buttom/2/bg2.png new file mode 100644 index 0000000..ed83a8a Binary files /dev/null and b/src/views/sanqing/comps/buttom/2/bg2.png differ diff --git a/src/views/sanqing/comps/buttom/2/data.js b/src/views/sanqing/comps/buttom/2/data.js new file mode 100644 index 0000000..68746f0 --- /dev/null +++ b/src/views/sanqing/comps/buttom/2/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/sanqing/comps/buttom/2/index.html b/src/views/sanqing/comps/buttom/2/index.html new file mode 100644 index 0000000..0212616 --- /dev/null +++ b/src/views/sanqing/comps/buttom/2/index.html @@ -0,0 +1,13 @@ +
+
+
+

{{data.xy23}}万元

+

2023年盘活效益

+
+ +
+

{{data.xy24}}万元

+

2024年盘活效益

+
+
+
diff --git a/src/views/sanqing/comps/buttom/2/index.js b/src/views/sanqing/comps/buttom/2/index.js new file mode 100644 index 0000000..9a98dec --- /dev/null +++ b/src/views/sanqing/comps/buttom/2/index.js @@ -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: { + } +}; diff --git a/src/views/sanqing/comps/buttom/2/index.scss b/src/views/sanqing/comps/buttom/2/index.scss new file mode 100644 index 0000000..646ace8 --- /dev/null +++ b/src/views/sanqing/comps/buttom/2/index.scss @@ -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; + } + } + } + +} diff --git a/src/views/sanqing/comps/buttom/2/index.vue b/src/views/sanqing/comps/buttom/2/index.vue new file mode 100644 index 0000000..b0a7bb3 --- /dev/null +++ b/src/views/sanqing/comps/buttom/2/index.vue @@ -0,0 +1,4 @@ +