|
|
@@ -10,10 +10,12 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div v-show="tab == options[1].value">
|
|
|
- <BarGraph3D ref="tdsc_bar_graph" />
|
|
|
+ <!-- <BarGraph3D ref="tdsc_bar_graph" /> -->
|
|
|
+ <div id="tdsc_jg_echart"></div>
|
|
|
+
|
|
|
</div>
|
|
|
<div v-show="tab == options[0].value">
|
|
|
- <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" class="tdsc_scjd" @draw_vector="dra"/>
|
|
|
+ <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" class="tdsc_scjd" @draw_vector="dra" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -57,6 +59,7 @@ export default {
|
|
|
key: "计划收储项目",
|
|
|
value: 0,
|
|
|
unit: "个",
|
|
|
+ viewer: true,
|
|
|
|
|
|
}, rb: {
|
|
|
key: "完成收储项目",
|
|
|
@@ -76,9 +79,231 @@ export default {
|
|
|
}, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
beforeMount() { }, //生命周期 - 挂载之前
|
|
|
methods: {
|
|
|
- dra(){
|
|
|
- console.log(123123);
|
|
|
-
|
|
|
+ init_tu_gy_echart(xdata, result) {
|
|
|
+ var dom = document.getElementById("tdsc_jg_echart");
|
|
|
+ var myChart = window.echarts.init(dom);
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: 'RGBA(20, 106, 178, 0.4)',
|
|
|
+ trigger: "axis",
|
|
|
+ textStyle: { fontSize: '100%' },
|
|
|
+ formatter: params => {
|
|
|
+ let rander = params.map(item =>
|
|
|
+ `
|
|
|
+
|
|
|
+ <div style='
|
|
|
+ border:none;
|
|
|
+ border-radius:3px;
|
|
|
+ color:#FFF;
|
|
|
+ font-size:12px
|
|
|
+ '>
|
|
|
+ ${item.seriesName}: ${item.value}
|
|
|
+ </div>`).join('')
|
|
|
+ return rander
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '2%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '15%',
|
|
|
+ top: '20%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['收储面积', '收储个数'],
|
|
|
+ left: '7%',
|
|
|
+ top: '5%',
|
|
|
+ textStyle: {
|
|
|
+ color: "#666666"
|
|
|
+ },
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
+ itemGap: 25
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLine: { lineStyle: { color: "#BCD3E5" } },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: { fontSize: 12, color: "#BCD3E5" },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (value) {
|
|
|
+ // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
+ if (value.length > 4) {
|
|
|
+ return `${value.slice(0, 4)}...`;
|
|
|
+ } else {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: xdata,
|
|
|
+ },
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(163, 163, 163, 0.5)',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#A0A4AA'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(65, 97, 128, 0.5)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#666666"
|
|
|
+ },
|
|
|
+ position: "right",
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#cdd5e2'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ formatter: "{value} %", //右侧Y轴文字显示
|
|
|
+ textStyle: {
|
|
|
+ color: "#666666"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: [{
|
|
|
+ "show": true,
|
|
|
+ "height": 12,
|
|
|
+ "xAxisIndex": [
|
|
|
+ 0
|
|
|
+ ],
|
|
|
+ top: '88%',
|
|
|
+ "start": 0,
|
|
|
+ "end": 40,
|
|
|
+ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
|
+ handleSize: '110%',
|
|
|
+ handleStyle: {
|
|
|
+ color: "#d3dee5",
|
|
|
+
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ },
|
|
|
+ borderColor: "#90979c"
|
|
|
+ }, {
|
|
|
+ "type": "inside",
|
|
|
+ "show": true,
|
|
|
+ "height": 15,
|
|
|
+ "start": 1,
|
|
|
+ "end": 35
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '收储面积',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '12px',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#12BDDF'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(24, 253, 255, 0)'
|
|
|
+ }]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: result[0].data
|
|
|
+ }
|
|
|
+ , {
|
|
|
+ name: "收储个数",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
+ smooth: true, //平滑曲线显示
|
|
|
+
|
|
|
+ symbol: "circle", //标记的图形为实心圆
|
|
|
+ symbolSize: 0, //标记的大小
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#0AF37A',
|
|
|
+ borderColor: '#0AF37A', //圆点透明 边框
|
|
|
+ borderWidth: 0,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#0AF37A"
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#46C118'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(12, 162, 13, 0)'
|
|
|
+ }])
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: result[1].data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ async init_tdsc_jg(params) {
|
|
|
+ const that = this;
|
|
|
+ let obj = {
|
|
|
+ jscType: "jsc_tdsc_ywfl",
|
|
|
+ id: params ? params.id : "4602",
|
|
|
+ };
|
|
|
+ let data = await QueryList(obj);
|
|
|
+ let xdata = [];
|
|
|
+ let result = [
|
|
|
+ {
|
|
|
+ name: "计划收储",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "完成收储",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data.data.forEach((res) => {
|
|
|
+ xdata.push(res.tdyt);
|
|
|
+ result[0].data.push(res.xzqdm_number);
|
|
|
+ result[1].data.push(res.kgmj);
|
|
|
+ });
|
|
|
+
|
|
|
+ that.init_tu_gy_echart(xdata, result);
|
|
|
+ },
|
|
|
+ dra() {
|
|
|
+ store.setViewerFlagb(false);
|
|
|
+ store.setToolBarShow(false);
|
|
|
+ store.setXzqh_flag(false);
|
|
|
+ store.setCockpit_vector({
|
|
|
+ title: "土地收储计划项目",
|
|
|
+ tableData: [],
|
|
|
+ tablejscType: 'jsc_tdsc_zbmx',
|
|
|
+ columns: [
|
|
|
+ "序号",
|
|
|
+ "所属区",
|
|
|
+ "收储方式",
|
|
|
+ "收储项目名称",
|
|
|
+ "收储面积（亩）",
|
|
|
+ "预计收储成本(万元)",
|
|
|
+ "说明",
|
|
|
+ ],
|
|
|
+ });
|
|
|
},
|
|
|
change_model(e) {
|
|
|
this.$forceUpdate();
|
|
|
@@ -107,6 +332,7 @@ export default {
|
|
|
key: "计划收储项目",
|
|
|
value: data.data.jh_xzqdm_number,
|
|
|
unit: "个",
|
|
|
+ viewer: true,
|
|
|
|
|
|
}, rb: {
|
|
|
key: "完成收储项目",
|
|
|
@@ -116,8 +342,8 @@ export default {
|
|
|
}
|
|
|
that.dial_watch_info = proData;
|
|
|
let echart_data = 0;
|
|
|
- if (data.data.sj_mj == 0) {
|
|
|
- echart_data = 0
|
|
|
+ if (data.data.sj_mj == '暂无') {
|
|
|
+ echart_data = '暂无'
|
|
|
} else if (data.data.jh_mj == 0 && data.data.sj_mj > 0) {
|
|
|
echart_data = 100
|
|
|
} else {
|
|
|
@@ -132,9 +358,9 @@ export default {
|
|
|
const that = this;
|
|
|
this.$nextTick((res) => {
|
|
|
this.init_scjd();
|
|
|
+ // this.init_tdsc_jg();
|
|
|
|
|
|
-
|
|
|
- this.$refs.tdsc_bar_graph.setOptions(this.legendData, this.xdata, this.result);
|
|
|
+ // this.$refs.tdsc_bar_graph.setOptions(this.legendData, this.xdata, this.result);
|
|
|
|
|
|
})
|
|
|
},
|
|
|
@@ -264,7 +490,15 @@ export default {
|
|
|
width: 26rem;
|
|
|
height: 10rem;
|
|
|
}
|
|
|
-.tdsc_scjd{
|
|
|
+
|
|
|
+.tdsc_scjd {
|
|
|
color: #163253;
|
|
|
}
|
|
|
+
|
|
|
+#tdsc_jg_echart {
|
|
|
+ left: 0rem;
|
|
|
+ top: 0.1rem;
|
|
|
+ width: 26rem;
|
|
|
+ height: 10rem;
|
|
|
+}
|
|
|
</style>
|
