real3d-portalsite/src/views/cockpit/hysy.vue

<template>
    <div class="hysy">
        <div class="title">
            <div class="icon"></div>
            <span>重点用地监管</span>
        </div>
        <div class="hysy_box">
            <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>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具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, DialWatch },
    data() {
        return {
            legendData: ['计划收储', '完成收储'],
            xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
            result: [
                { name: '计划收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
                { name: '完成收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
            ],

            dial_watch_info: {
                lt: {
                    key: '计划出让海域',
                    value: 0,
                    unit: "公顷",

                }, lb: {
                    key: "完成出让海域",
                    value: 0,
                    unit: "公顷",

                }, rt: {
                    key: "计划出让项目",
                    value: 0,
                    unit: "个",

                }, rb: {
                    key: "完成出让项目",
                    value: 0,
                    unit: "个",

                },
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    beforeCreate() { }, //生命周期 - 创建之前
    created() {

    }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() { }, //生命周期 - 挂载之前
    methods: {
        init_hysyEchart() {

            var dom = document.getElementById("hysyEchart");
            var myChart = window.echarts.init(dom);
            var myChart = window.echarts.init(dom);
            // Mock数据
            const mockData = {
                xdata: store.state.cockpit_hysy.echart.xdata,
                result: store.state.cockpit_hysy.echart.result
            }

            const color = [
                [{ offset: 0, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(249, 180, 71, 0.8)' }, { offset: 1, color: 'rgba(249, 180, 71, 0.8)' }],

                [{ offset: 0, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(97, 173, 237, 0.8)' }, { offset: 1, color: 'rgba(97, 173, 237, 0.8)' }],

            ]
            const color2 = ['rgba(34, 129, 209, 0.8)', 'rgba(34, 129, 209, 0.8)',]

            // tooltip
            const tooltip = {
                trigger: "axis",
                textStyle: { fontSize: '100%' },
                formatter: params => {
                    let rander = params.map(item => `<div>${item.seriesName}: ${item.value}公顷</div>`).join('')
                    return rander
                }
            }

            const legend = {
                data: ['计划出让', '完成出让'],      //图例名称

                textStyle: { fontSize: 12, color: '#fff' },
                itemWidth: 24,
                itemHeight: 15,
                itemGap: 15,
                top: '-4%',
                right: '2%',
                selectedMode: false
            }
            const grid = { top: '20%', left: '12%', right: '2%', bottom: '25%' }
            // xAxis
            const 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: mockData.xdata,
            }

            // yAxis
            const yAxis = [
                {
                    min: 0,
                    name: '公顷',
                    type: 'value',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#BCD3E5'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "rgba(255,255,255,0.1)"
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        fontSize: 12,

                    },
                    boundaryGap: ['20%', '20%']
                },]
            // const yAxis = [{
            //     axisTick: { show: false },
            //     axisLine: { show: false },
            //     splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
            //     axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
            // }, {
            //     show: false,
            //     splitLine: { show: false },
            //     axisLine: { show: false },
            //     axisTick: { show: false },
            // }]
            // const diamondData = mockData.result.reduce((pre, cur, index) => {
            //     pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
            //     return pre
            // }, [])

            let series = mockData.result.reduce((p, c, i, array) => {
                p.push({
                    z: i + 1,
                    stack: '总量',
                    type: 'bar',
                    name: c.name,
                    barGap: 18,
                    barWidth: 18,
                    data: c.data,
                    itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
                }, {
                    z: i + 10,
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    symbol: 'diamond',
                    symbolOffset: [0, '-50%'],
                    symbolSize: [18, 12],
                    data: mockData.result[i],
                    itemStyle: { color: color2[i] },
                    tooltip: { show: false },
                })

                // 是否最后一个了？
                if (p.length === (array.length) * 2) {
                    p.push({
                        z: array.length * 2,
                        type: "pictorialBar",
                        symbolPosition: "start",
                        data: mockData.result[0].data,
                        symbol: "diamond",
                        symbolOffset: ["0%", "50%"],
                        symbolSize: [18, 10],
                        itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
                        tooltip: { show: false },
                    })
                    return p
                }

                return p
            }, [])

            const dataZoom = [{
                show: false,
                type: 'slider',
                startValue: 0,
                endValue: 7,
                moveOnMouseWheel: true,
                moveOnMouseMove: true,
                zoomOnMouseWheel: false,
            }]

            let option = {

                tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
            }


            myChart.setOption(option);

        },

        async init_info(params) {
            const that = this;
            let obj = {
                jscType: 'jsc_hysyq_ztsh',
                beginTime: params ? params.beginTime : store.state.cockpit_date[0],
                endTime: params ? params.endTime : store.state.cockpit_date[1],
                id: params ? params.id : '4602'
            };
            let data = await QueryList(obj);
            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;
            let obj = {
                jscType: 'jsc_hysyq_yelx',
                beginTime: params ? params.beginTime : store.state.cockpit_date[0],
                endTime: params ? params.endTime : store.state.cockpit_date[1],
                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.yhlx_name);
                result[0].data.push(res.jh_mj);
                result[1].data.push(res.sj_mj);

            })

            that.xdata = xdata;
            that.result = result;
            that.legendData = ['计划出让', '完成出让'];
            this.$refs.hysy_bar_graph.setOptions(this.legendData, this.xdata, this.result);

        }

    },
    mounted() {
        const that = this;
        this.$nextTick((res) => {
            this.init_info();
            this.init_echart_data();

        })
    },
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroy() { },//生命周期 - 销毁完成
    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>



<style lang="scss"  scoped>
.hysy {
    display: none;
    position: relative;
    top: 18rem;
    left: 48rem;
    width: 373px;
    z-index: 100;
}



.title {

    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.3rem;
        left: -18rem;
    }
}

.text {
    display: inline-block;
    width: 100px;
    // margin-top: 10px;
    margin-left: 15px;

    margin-top: 3px;

    p {
        font-kerning: normal;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 500;
        font-style: normal;
        font-size: 12px;
        color: #ffffff;
        // margin-bottom: ;
    }

    span {
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
        font-style: normal;
        color: #68f4fb;
    }
}

.hysy_bar_graph {
    margin-left: 5rem;
    left: -5rem !important;
    top: -12rem !important;
    height: 10rem !important;
}

.hysy_dial_watch {
    position: relative;
    top: -2.5rem;

}
</style>