|
|
@@ -4,40 +4,9 @@
|
|
|
<div class="icon"></div>
|
|
|
<span>海域使用权出让</span>
|
|
|
</div>
|
|
|
+ <DialWatch class="hysy_dial_watch" :dial_watch_info="dial_watch_info" ref="hysy_dial_watch" />
|
|
|
+ <BarGraph3D class="hysy_bar_graph" ref="hysy_bar_graph" />
|
|
|
|
|
|
- <div class="content_hysy">
|
|
|
- <div class="space">
|
|
|
- <div class="lt_box box">
|
|
|
- <div class="text">
|
|
|
- <p>计划出让海域</p>
|
|
|
- <span>{{ store.state.cockpit_hysy.info.jh_mj }}</span>公顷
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="lb_box box">
|
|
|
- <div class="text">
|
|
|
- <p>完成出让海域</p>
|
|
|
- <span>{{ store.state.cockpit_hysy.info.sj_mj }}</span>公顷
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="dial_watch_hysy">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="rt_box box">
|
|
|
- <div class="text">
|
|
|
- <p>计划出让项目</p>
|
|
|
- <span>{{ store.state.cockpit_hysy.info.jh_number }}</span>个
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rb_box box">
|
|
|
- <div class="text">
|
|
|
- <p>完成出让项目</p>
|
|
|
- <span>{{ store.state.cockpit_hysy.info.sj_number }}</span>个
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <BarGraph3D class="hysy_bar_graph" ref="hysy_bar_graph" />
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -45,9 +14,10 @@
|
|
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
import { QueryOne, QueryList } from "../../api/cockpitNew";
|
|
|
import BarGraph3D from './common/BarGraph3D.vue';
|
|
|
+import DialWatch from './common/DialWatch.vue';
|
|
|
|
|
|
export default {
|
|
|
- components: { BarGraph3D },
|
|
|
+ components: { BarGraph3D, DialWatch },
|
|
|
data() {
|
|
|
return {
|
|
|
legendData: ['计划收储', '完成收储'],
|
|
|
@@ -57,9 +27,29 @@ export default {
|
|
|
{ name: '完成收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
|
|
|
],
|
|
|
|
|
|
- // legendData: [],
|
|
|
- // xdata: [],
|
|
|
- // result: []
|
|
|
+ dial_watch_info: {
|
|
|
+ lt: {
|
|
|
+ key: '计划出让海域',
|
|
|
+ value: 0,
|
|
|
+ unit: "公顷",
|
|
|
+
|
|
|
+ }, lb: {
|
|
|
+ key: "完成出让海域",
|
|
|
+ value: 0,
|
|
|
+ unit: "公顷",
|
|
|
+
|
|
|
+ }, rt: {
|
|
|
+ key: "计划出让项目",
|
|
|
+ value: 0,
|
|
|
+ unit: "个",
|
|
|
+
|
|
|
+ }, rb: {
|
|
|
+ key: "完成出让项目",
|
|
|
+ value: 0,
|
|
|
+ unit: "个",
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -240,201 +230,7 @@ export default {
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
},
|
|
|
- init_dial_watch_hysy() {
|
|
|
-
|
|
|
- var dom = document.getElementById("dial_watch_hysy");
|
|
|
- var myChart = window.echarts.init(dom);
|
|
|
- var demoData = {
|
|
|
- name: '城镇化率',
|
|
|
- value: 60,
|
|
|
- };
|
|
|
- let option = {
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- title: {
|
|
|
- text: `{num|${demoData.value}%} ` + '\n' + `{label|完成率}`,
|
|
|
-
|
|
|
- x: '49%',
|
|
|
- y: '70%',
|
|
|
- textAlign: 'center',
|
|
|
- textStyle: {
|
|
|
- rich: {
|
|
|
- num: {
|
|
|
- fontWeight: '600',
|
|
|
- color: 'rgba(249, 180, 71, 1)',
|
|
|
- fontFamily: '微软雅黑',
|
|
|
- fontSize: 14,
|
|
|
- }, label: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- grid: { top: '0%', left: '0%' },
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'gauge',
|
|
|
- radius: '90%', // 1行3个
|
|
|
- center: ['50%', '70%'],
|
|
|
- splitNumber: 10,
|
|
|
- // min: 0,
|
|
|
- max: 100,
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -44,
|
|
|
- z: 99,
|
|
|
- // 线
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- color: [[1, 'rgba(255,255,255,0)']],
|
|
|
- },
|
|
|
- detail: {
|
|
|
- formatter: '{value}',
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 50,
|
|
|
- name: 'SCORE',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- //刻度标签。
|
|
|
- axisTick: {
|
|
|
- show: true,
|
|
|
- splitNumber: 6, //刻度的段落数
|
|
|
- lineStyle: {
|
|
|
- color: '#ccc',
|
|
|
- width: 1, //刻度的宽度
|
|
|
- shadowColor: 'RGBA(60, 139, 232, 0)',
|
|
|
- shadowBlur: 2,
|
|
|
- },
|
|
|
- length: 3, //刻度的长度
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- //文字和刻度的偏移量
|
|
|
- show: true,
|
|
|
- length: 1, //长度
|
|
|
- lineStyle: {
|
|
|
- color: '#ccc',
|
|
|
- width: 1,
|
|
|
- },
|
|
|
- },
|
|
|
- // //刻度线文字
|
|
|
- axisLabel: {
|
|
|
- show: false,
|
|
|
- color: '#ccc',
|
|
|
- fontSize: 1,
|
|
|
- distance: -30,
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: demoData.value,
|
|
|
- name: 'SCORE',
|
|
|
- itemStyle: {
|
|
|
- color: 'rgba(73, 148, 236, 1)',
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- pointer: {
|
|
|
- show: true,
|
|
|
- length: '40%',
|
|
|
- radius: '50%',
|
|
|
- width: 5, //指针粗细
|
|
|
- offsetCenter: [0, -10]
|
|
|
- },
|
|
|
- detail: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- title: {
|
|
|
- // 仪表盘标题。
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: demoData.name,
|
|
|
- type: 'pie',
|
|
|
- radius: ['65%', '50%'],
|
|
|
- center: ['50%', '70%'],
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -10,
|
|
|
- color: [
|
|
|
- {
|
|
|
- type: 'linear',
|
|
|
- x: 1,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 0,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(62, 147, 244, 0.3)', // 0% 处的颜色
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(62, 147, 244, 1)', // 100% 处的颜色
|
|
|
- },
|
|
|
-
|
|
|
- ],
|
|
|
- },
|
|
|
- 'transparent',
|
|
|
- ],
|
|
|
- hoverAnimation: true,
|
|
|
- legendHoverLink: false,
|
|
|
- z: 10,
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 60,
|
|
|
- },
|
|
|
- {
|
|
|
- value: 20,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- hoverAnimation: false,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- center: ['50%', '70%'],
|
|
|
- radius: ['0%', '60%'],
|
|
|
- startAngle: 230,
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 100,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: {
|
|
|
- type: 'radial',
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.5,
|
|
|
- colorStops: [
|
|
|
- { offset: 0, color: 'rgba(0,0,0,0)' },
|
|
|
- { offset: 1, color: 'rgba(0,0,0,0)' },
|
|
|
- ],
|
|
|
- },
|
|
|
- opacity: 0.2,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- value: 100,
|
|
|
- color: 'transparent',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
|
|
|
- },
|
|
|
async init_info(params) {
|
|
|
const that = this;
|
|
|
let obj = {
|
|
|
@@ -444,7 +240,39 @@ export default {
|
|
|
id: params ? params.id : '4602'
|
|
|
};
|
|
|
let data = await QueryList(obj);
|
|
|
- store.state.cockpit_hysy.info = data.data[0]
|
|
|
+ that.dial_watch_info = {
|
|
|
+ lt: {
|
|
|
+ key: '计划出让海域',
|
|
|
+ value: data.data[0].jh_mj,
|
|
|
+ unit: "公顷",
|
|
|
+
|
|
|
+ }, lb: {
|
|
|
+ key: "完成出让海域",
|
|
|
+ value: data.data[0].sj_mj,
|
|
|
+ unit: "公顷",
|
|
|
+
|
|
|
+ }, rt: {
|
|
|
+ key: "计划出让项目",
|
|
|
+ value: data.data[0].jh_number,
|
|
|
+ unit: "个",
|
|
|
+
|
|
|
+ }, rb: {
|
|
|
+ key: "完成出让项目",
|
|
|
+ value: data.data[0].sj_number,
|
|
|
+ unit: "个",
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+ let echart_data = 0;
|
|
|
+ if (data.data[0].sj_mj == 0) {
|
|
|
+ echart_data = 0
|
|
|
+ } else if (data.data[0].jh_mj == 0 && data.data[0].sj_mj > 0) {
|
|
|
+ echart_data = 100
|
|
|
+ } else {
|
|
|
+ echart_data = (data.data[0].sj_mj / data.data[0].jh_mj * 100).toFixed(2)
|
|
|
+ }
|
|
|
+ that.$refs.hysy_dial_watch.init_dial_watch(echart_data);
|
|
|
+ // store.state.cockpit_hysy.info = data.data[0]
|
|
|
},
|
|
|
async init_echart_data(params) {
|
|
|
const that = this;
|
|
|
@@ -485,7 +313,6 @@ export default {
|
|
|
mounted() {
|
|
|
const that = this;
|
|
|
this.$nextTick((res) => {
|
|
|
- that.init_dial_watch_hysy();
|
|
|
this.init_info();
|
|
|
this.init_echart_data();
|
|
|
|
|
|
@@ -509,9 +336,6 @@ export default {
|
|
|
top: 43rem;
|
|
|
width: 559px;
|
|
|
height: 310px;
|
|
|
- display: -webkit-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: flex;
|
|
|
z-index: 100;
|
|
|
border: 1px solid red;
|
|
|
}
|
|
|
@@ -520,100 +344,27 @@ export default {
|
|
|
|
|
|
.title {
|
|
|
|
|
|
- width: 1074rem;
|
|
|
- height: 40px;
|
|
|
+ border-width: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
background: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-image: url("/static/images/overview/titlebox.gif");
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
span {
|
|
|
color: #fff;
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
position: relative;
|
|
|
- top: 0.5rem;
|
|
|
- right: -3rem;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.content_hysy {
|
|
|
- position: fixed;
|
|
|
- // top: 40rem;
|
|
|
-
|
|
|
- #dial_watch_hysy {
|
|
|
- // border: 1px red solid;
|
|
|
- width: 26rem;
|
|
|
- height: 8.5rem;
|
|
|
- position: relative;
|
|
|
- left: 3rem;
|
|
|
- }
|
|
|
-
|
|
|
- #hysyEchart {
|
|
|
- // border: 1px red solid;
|
|
|
- width: 34rem;
|
|
|
- height: 9rem;
|
|
|
- margin-top: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .box {
|
|
|
- width: 10rem;
|
|
|
- height: 5rem;
|
|
|
- position: absolute;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .lt_box {
|
|
|
-
|
|
|
- position: fixed;
|
|
|
- background: no-repeat;
|
|
|
- background-size: 101% 50%;
|
|
|
- background-image: url("/static/images/overview/ltback.png");
|
|
|
- left: 57rem;
|
|
|
- top: 42.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .lb_box {
|
|
|
-
|
|
|
- position: fixed;
|
|
|
- background: no-repeat;
|
|
|
- background-size: 101% 50%;
|
|
|
-
|
|
|
- background-image: url("/static/images/overview/lbback.png");
|
|
|
- left: 57rem;
|
|
|
- top: 45.5rem;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .rt_box {
|
|
|
- position: fixed;
|
|
|
- background: no-repeat;
|
|
|
- background-size: 101% 50%;
|
|
|
-
|
|
|
- background-image: url("/static/images/overview/rtback.png");
|
|
|
- left: 76rem;
|
|
|
- top: 42.5rem;
|
|
|
-
|
|
|
-
|
|
|
- .text {
|
|
|
- margin-left: 4rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .rb_box {
|
|
|
- position: fixed;
|
|
|
- background: no-repeat;
|
|
|
- background-size: 101% 50%;
|
|
|
- background-image: url("/static/images/overview/rbback.png");
|
|
|
- left: 76rem;
|
|
|
- top: 45.5rem;
|
|
|
- z-index: 100;
|
|
|
-
|
|
|
- .text {
|
|
|
- margin-left: 4rem;
|
|
|
- }
|
|
|
+ top: 0.3rem;
|
|
|
+ left: -25.5rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.text {
|
|
|
display: inline-block;
|
|
|
width: 100px;
|
|
|
@@ -642,5 +393,14 @@ export default {
|
|
|
|
|
|
.hysy_bar_graph {
|
|
|
margin-left: 5rem;
|
|
|
+ left: 1rem !important;
|
|
|
+ top: -13rem !important;
|
|
|
+}
|
|
|
+
|
|
|
+.hysy_dial_watch {
|
|
|
+ position: relative;
|
|
|
+ top: -1.8rem;
|
|
|
+ left: 4rem;
|
|
|
+
|
|
|
}
|
|
|
</style>
|
zpf