无用代码

src/views/cockpitNew/gdbh.vue

@@ -1,411 +0,0 @@
-<template>
-    <div class="gdbh">
-        <div class="box_gdbh">
-            <div class="title">耕地保护</div>
-            <div class="centent">
-                <div class="item">
-                    <p class="text">
-                        <span>·</span>
-                        地保有量
-                        <span>354.56</span>
-                        KM2
-                    </p>
-                    <p>
-                        <span>·</span>
-                        永久基本农田
-                        <span>354.56</span>
-                        KM2
-                    </p>
-                </div>
-                <div class="item">
-                    <p class="text">
-                        <span>·</span>
-                        地保有量
-                        <span>354.56</span>
-                        KM2
-                    </p>
-                    <p>
-                        <span>·</span>
-                        永久基本农田
-                        <span>354.56</span>
-                        KM2
-                    </p>
-                </div>
-            </div>
-            <div id="gdbh_echart">
-
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
-export default {
-    components: {},
-    data() {
-        return {};
-    },
-    //监听属性 类似于data概念
-    computed: {},
-    //监控data中的数据变化
-    watch: {},
-    //方法集合
-
-    beforeCreate() { }, //生命周期 - 创建之前
-    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
-    beforeMount() { }, //生命周期 - 挂载之前
-    methods: {
-        getRenKou() {
-            var dom = document.getElementById('gdbh_echart');
-            var myChart = window.echarts.init(dom);
-
-            let data = [
-                { name: '水田', value: 30 },
-                { name: '水浇地', value: 40 },
-                { name: '旱地', value: 50 },
-                // { name: '住宿', value: 24 },
-            ]
-            for (var i = 0; i < data.length; i++) {
-                for (var j = i + 1; j < data.length; j++) {
-                    //如果第一个比第二个大，就交换他们两个位置
-                    if (data[i].value < data[j].value) {
-                        var temp = data[i];
-                        data[i] = data[j];
-                        data[j] = temp;
-                    }
-                }
-            }
-            let pm = []
-            for (var i = 0; i < data.length; i++) {
-                let k = i + 1
-                pm.push('NO.' + k)
-            }
-            data.forEach(function (value, index, obj) {
-                value.pm = pm[index]
-            })
-            // console.log('ssss', data)
-            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
-            const chartData = data.map((item, index) => ({
-                value: item.value,
-                name: item.name,
-                pm: item.pm,
-                itemStyle: {
-                    shadowBlur: 20,
-                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
-                    shadowOffsetx: 25,
-                    shadowOffsety: 20,
-                    color: colors[index % colors.length],
-                },
-            }))
-            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
-            const gap = (1 * sum) / 100
-            const pieData1 = []
-            const gapData = {
-                name: '',
-                value: gap,
-                itemStyle: {
-                    color: 'transparent',
-                },
-            }
-            let totalRatio = []
-            // let totalPercent = 0
-            for (let i = 0; i < chartData.length; i++) {
-                // 计算占比
-                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
-                // 累加占比到总占比中
-                // totalRatio.push(ratio*100)
-                let ratio = (chartData[i].value / sum) * 100
-                let percent = Math.round(ratio)
-                totalRatio.push(percent)
-                // totalPercent += percent
-                // 第一圈数据
-                pieData1.push({
-                    ...chartData[i],
-                })
-                pieData1.push(gapData)
-            }
-            // 补充最后一项占比百分比保证之和为100%
-            // totalRatio[0].value += 100 - totalPercent
-            let option = {
-                backgroundColor: 'rgba(1,1,1,0)',
-
-                title: {
-                    show: true,
-                    // text: sum
-                    text: '耕地来源',
-                    x: '49%',
-                    y: '32%',
-                    itemGap: 6,
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 11,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    subtextStyle: {
-                        color: '#fff',
-                        fontSize: 8,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    textAlign: 'center',
-                },
-
-                // 图例
-                legend: {
-                    show: true,
-                    orient: 'horizontal',
-                    icon: 'rect',
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 10,
-                    },
-                    top: '70%',
-                    // left: '20%',
-                    itemGap: 14,
-                    itemHeight: 14,
-                    itemWidth: 14,
-                    data: chartData,
-                    formatter: function (name) {
-                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
-                        // if (selectedItem) {
-                        //     const { value } = selectedItem;
-                        //     const { pm } = selectedItem;
-                        //     console.log('dddd', selectedItem)
-                        //     const p = ((value / sum) * 100).toFixed(2);
-                        //     const area = `${value}m²`;
-                        //     // console.log(`{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `);
-
-                        //     return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
-                        // } else {
-                        //     console.log(name);
-
-                        //     return name;
-                        // }
-
-                        if (selectedItem) {
-                            return name;
-
-                        }
-                    },
-                },
-                series: [
-                    // 中间圆环
-                    {
-                        name: '',
-                        type: 'pie',
-                        roundCap: true,
-                        radius: ['36%', '52%'],
-                        center: ['50%', '35%'],
-                        data: pieData1,
-                        labelLine: {
-                            length: 8,
-                            length2: 16,
-                            lineStyle: {
-                                width: 1,
-                            },
-                        },
-                        label: {
-                            show: false,
-                            fontFamily: 'ysbth',
-                            position: 'outside',
-                            padding: [0, -4, 0, -4],
-                            formatter(params) {
-                                if (params.name === '') {
-                                    return ''
-                                }
-                                return `${params.percent.toFixed(0)}% `
-                            },
-                            color: '#fff',
-                            fontSize: '14px',
-                            lineHeight: 10,
-                        },
-                        emphasis: {
-                            // 鼠标移入时显示
-                            label: {
-                                show: true,
-                            },
-                        },
-                    },
-                    // 最里面圆环
-                    {
-                        type: 'pie',
-                        radius: ['28%', '30%'],
-                        center: ['50%', '35%'],
-                        animation: false,
-                        hoverAnimation: false,
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                        label: {
-                            show: false,
-                        },
-                        itemStyle: {
-                            color: '#3BC5EF',
-                        },
-                    },
-                    // 最里面圆环内的背景圆
-                    {
-                        name: '',
-                        type: 'pie',
-                        startAngle: 90,
-                        radius: '28%',
-                        animation: false,
-                        hoverAnimation: false,
-                        center: ['50%', '35%'],
-                        itemStyle: {
-                            labelLine: {
-                                show: false,
-                            },
-                            color: {
-                                type: 'radial',
-                                x: 0.5,
-                                y: 0.5,
-                                r: 1,
-                                colorStops: [
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(50,171,241, 0)',
-                                    },
-                                    {
-                                        offset: 0.5,
-                                        color: 'rgba(50,171,241, .4)',
-                                    },
-                                    {
-                                        offset: 0,
-                                        color: 'rgba(55,70,130, 0)',
-                                    },
-                                ],
-                                global: false, // 缺省为 false
-                            },
-                            shadowBlur: 60,
-                        },
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                    },
-                    // 最外面的圆环
-                    {
-                        type: 'pie',
-                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
-                        radius: ['53%', '54%'],
-                        center: ['50%', '35%'],
-                        label: {
-                            show: false,
-                        },
-                        select: {
-                            display: false,
-                        },
-                        tooltip: {
-                            show: false,
-                        },
-                        data: totalRatio,
-                    },
-                ],
-            }
-
-            myChart.setOption(option);
-        },
-    },
-    mounted() {
-        this.getRenKou();
-    },
-    beforeUpdate() { }, //生命周期 - 更新之前
-    updated() { }, //生命周期 - 更新之后
-    beforeDestroy() { }, //生命周期 - 销毁之前
-    destroy() { },//生命周期 - 销毁完成
-    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
-};
-</script>
-<style lang="scss" scoped>
-.gdbh {
-    border-width: 0px;
-    position: absolute;
-    left: 1366px;
-    top: 20px;
-    display: -ms-flexbox;
-    display: flex;
-
-    .box_gdbh {
-        font-family: 'Arial Normal', 'Arial';
-        font-weight: 400;
-        font-style: normal;
-        font-size: 13px;
-        letter-spacing: normal;
-        color: #333333;
-        text-align: center;
-        line-height: normal;
-        text-transform: none;
-        border-width: 0px;
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 535px;
-        height: 260px;
-        background: inherit;
-        background-color: rgba(3, 25, 67, 0.698039215686274);
-        border: none;
-        border-radius: 0px;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-
-        .title {
-            border-width: 0px;
-            width: 100%;
-            height: 40px;
-            font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-            font-weight: 700;
-            font-style: normal;
-            color: #00FFFF;
-            padding: 2%;
-            text-align: justify;
-        }
-
-        #gdbh_echart {
-            width: 280px;
-            height: 230px;
-
-            position: relative;
-            left: 54%;
-            top: -75%;
-        }
-
-        .centent {
-            // border: #00FFFF 1px solid;
-            width: 280px;
-            height: 185px;
-            position: relative;
-            left: 6%;
-
-            .item {
-                // border: #00FFFF 1px solid;
-                height: 40%;
-                margin-bottom: 10%;
-                background-color: #283f6d;
-                text-align: left;
-                padding-left: 7%;
-                padding-top: 4%;
-
-                p {
-                    font-size: 14px;
-                    color: #fff;
-                    margin-bottom: 4%;
-                }
-
-                span {
-                    color: #00FFFF;
-                    font-weight: 1000;
-
-                }
-            }
-        }
-    }
-}
-</style>

src/views/cockpitNew/hysy.vue

@@ -1,463 +0,0 @@
-<template>
-    <div class="hysy">
-        <div class="box">
-            <div class="title"> 海域使用权出让</div>
-            <div class="content">
-                <div class="item">
-                    <div class="icon">
-                        <div class="icon2">
-
-                        </div>
-                    </div>
-                    <div class="text">
-                        <p>在变控规</p>
-                        <span>66</span>个
-
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="icon">
-                        <div class="icon2">
-
-                        </div>
-                    </div>
-                    <div class="text">
-                        <p>已入库控规 </p>
-                        <span>66</span>个
-
-                    </div>
-                </div>
-
-            </div>
-            <div id="hysyEchart">
-
-            </div>
-            <div class="legend">
-
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
-export default {
-    components: {},
-    data() {
-        return {};
-    },
-    //监听属性 类似于data概念
-    computed: {},
-    //监控data中的数据变化
-    watch: {},
-    //方法集合
-    beforeCreate() { }, //生命周期 - 创建之前
-    created() {
-    }, //生命周期 - 创建完成（可以访问当前this实例）
-    beforeMount() { }, //生命周期 - 挂载之前
-    methods: {
-        getRenKou() {
-            var dom = document.getElementById('hysyEchart');
-
-            var myChart = window.echarts.init(dom);
-
-            let data = [
-                { name: '商业', value: 30 },
-                { name: '租赁', value: 40 },
-                { name: '自用', value: 50 },
-                { name: '住宿', value: 24 },
-            ]
-            for (var i = 0; i < data.length; i++) {
-                for (var j = i + 1; j < data.length; j++) {
-                    //如果第一个比第二个大，就交换他们两个位置
-                    if (data[i].value < data[j].value) {
-                        var temp = data[i];
-                        data[i] = data[j];
-                        data[j] = temp;
-                    }
-                }
-            }
-            let pm = []
-            for (var i = 0; i < data.length; i++) {
-                let k = i + 1
-                pm.push('NO.' + k)
-            }
-            data.forEach(function (value, index, obj) {
-                value.pm = pm[index]
-            })
-            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
-            const chartData = data.map((item, index) => ({
-                value: item.value,
-                name: item.name,
-                pm: item.pm,
-                itemStyle: {
-                    shadowBlur: 20,
-                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
-                    shadowOffsetx: 25,
-                    shadowOffsety: 20,
-                    color: colors[index % colors.length],
-                },
-            }))
-            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
-            const gap = (1 * sum) / 100
-            const pieData1 = []
-            const gapData = {
-                name: '',
-                value: gap,
-                itemStyle: {
-                    color: 'transparent',
-                },
-            }
-            let totalRatio = []
-            // let totalPercent = 0
-            for (let i = 0; i < chartData.length; i++) {
-                // 计算占比
-                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
-                // 累加占比到总占比中
-                // totalRatio.push(ratio*100)
-                let ratio = (chartData[i].value / sum) * 100
-                let percent = Math.round(ratio)
-                totalRatio.push(percent)
-                // totalPercent += percent
-                // 第一圈数据
-                pieData1.push({
-                    ...chartData[i],
-                })
-                pieData1.push(gapData)
-            }
-            // 补充最后一项占比百分比保证之和为100%
-            // totalRatio[0].value += 100 - totalPercent
-            let option = {
-                backgroundColor: 'rgba(1,1,1,0)',
-                title: {
-                    show: true,
-                    // text: sum
-                    text: '用海类型',
-                    // subtext: '收储来源',
-                    x: '49%',
-                    y: '32%',
-                    itemGap: 6,
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 11,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    subtextStyle: {
-                        color: '#fff',
-                        fontSize: 8,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    textAlign: 'center',
-                },
-
-                // 图例
-                legend: {
-                    show: false,
-                    orient: 'horizontal',
-                    icon: 'rect',
-                    textStyle: {
-                        color: '#f2f2f2',
-                        fontSize: '12px',
-                    },
-                    top: '10%',
-                    left: '80%',
-                    itemGap: 14,
-                    itemHeight: 14,
-                    itemWidth: 14,
-                    data: chartData,
-                    formatter: function (name) {
-                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
-                        if (selectedItem) {
-                            const { value } = selectedItem;
-                            const { pm } = selectedItem;
-                            const p = ((value / sum) * 100).toFixed(2);
-                            const area = `${value}m²`;
-                            // console.log(`{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `);
-
-                            return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
-                        } else {
-
-                            return name;
-                        }
-                    },
-                    textStyle: {
-                        rich: {
-                            icon: {
-                                color: colors
-                            },
-                            name: {
-                                color: '#f2f2f2'
-                            },
-                            percent: {
-                                color: '#f2f2f2'
-                            },
-                            area: {
-                                color: '#f2f2f2'
-                            }
-                        }
-                    }
-                },
-                series: [
-                    // 中间圆环
-                    {
-                        name: '',
-                        type: 'pie',
-                        roundCap: true,
-                        radius: ['36%', '52%'],
-                        center: ['50%', '35%'],
-                        data: pieData1,
-                        labelLine: {
-                            length: 8,
-                            length2: 16,
-                            lineStyle: {
-                                width: 1,
-                            },
-                        },
-                        label: {
-                            show: false,
-                            fontFamily: 'ysbth',
-                            position: 'outside',
-                            padding: [0, -4, 0, -4],
-                            formatter(params) {
-                                if (params.name === '') {
-                                    return ''
-                                }
-                                return `${params.percent.toFixed(0)}% `
-                            },
-                            color: '#fff',
-                            fontSize: '14px',
-                            lineHeight: 10,
-                        },
-                        emphasis: {
-                            // 鼠标移入时显示
-                            label: {
-                                show: true,
-                            },
-                        },
-                    },
-                    // 最里面圆环
-                    {
-                        type: 'pie',
-                        radius: ['28%', '30%'],
-                        center: ['50%', '35%'],
-                        animation: false,
-                        hoverAnimation: false,
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                        label: {
-                            show: false,
-                        },
-                        itemStyle: {
-                            color: '#3BC5EF',
-                        },
-                    },
-                    // 最里面圆环内的背景圆
-                    {
-                        name: '',
-                        type: 'pie',
-                        startAngle: 90,
-                        radius: '28%',
-                        animation: false,
-                        hoverAnimation: false,
-                        center: ['50%', '35%'],
-                        itemStyle: {
-                            labelLine: {
-                                show: false,
-                            },
-                            color: {
-                                type: 'radial',
-                                x: 0.5,
-                                y: 0.5,
-                                r: 1,
-                                colorStops: [
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(50,171,241, 0)',
-                                    },
-                                    {
-                                        offset: 0.5,
-                                        color: 'rgba(50,171,241, .4)',
-                                    },
-                                    {
-                                        offset: 0,
-                                        color: 'rgba(55,70,130, 0)',
-                                    },
-                                ],
-                                global: false, // 缺省为 false
-                            },
-                            shadowBlur: 60,
-                        },
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                    },
-                    // 最外面的圆环
-                    {
-                        type: 'pie',
-                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
-                        radius: ['53%', '54%'],
-                        center: ['50%', '35%'],
-                        label: {
-                            show: false,
-                        },
-                        select: {
-                            display: false,
-                        },
-                        tooltip: {
-                            show: false,
-                        },
-                        data: totalRatio,
-                    },
-                ],
-            }
-
-            myChart.setOption(option);
-        },
-    },
-    mounted() {
-        this.getRenKou();
-    },
-    beforeUpdate() { }, //生命周期 - 更新之前
-    updated() { }, //生命周期 - 更新之后
-    beforeDestroy() { }, //生命周期 - 销毁之前
-    destroy() { },//生命周期 - 销毁完成
-    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
-};
-</script>
-
-
-
-<style lang="scss"  scoped>
-.hysy {
-    border-width: 0px;
-    position: absolute;
-    left: 9px;
-    top: 68%;
-    /* width: 534px;
-    height: 316px; */
-    display: flex;
-}
-
-.box {
-    border-width: 0px;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 534px;
-    height: 260px;
-    background: inherit;
-    background-color: rgba(3, 25, 67, 0.698039215686274);
-    border: none;
-    border-radius: 0px;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-
-.title {
-    border-width: 0px;
-    width: 100%;
-    height: 40px;
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    font-weight: 700;
-    font-style: normal;
-    color: #00FFFF;
-    padding: 2%;
-}
-
-.content {
-    // border: #00FFFF 1px solid;
-    position: absolute;
-    left: 5%;
-    width: 400px;
-    height: 190px;
-    top: 18%;
-}
-
-.item {
-    width: 45%;
-    height: 30%;
-    display: inline-block;
-    // border: #00FFFF 1px solid;
-
-}
-
-.icon {
-    width: 50px;
-    padding: 1.5%;
-    border-radius: 8px;
-    background-color: rgba(104, 244, 251, 0.215686);
-    display: inline-block;
-    height: 50px
-}
-
-.icon2 {
-    background: no-repeat 50%;
-    background-image: url("/static/images/cockpitNew/u296.svg");
-    /* border: #00FFFF 1px solid; */
-    width: 45px;
-    height: 45px;
-    display: inline-block;
-
-}
-
-.text {
-    display: inline-block;
-    // border: #00FFFF 1px solid;
-    width: 100px;
-
-    p {
-        font-kerning: normal;
-        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-        font-weight: 700;
-        font-style: normal;
-        font-size: 14px;
-        color: #FFFFFF;
-    }
-
-    span {
-        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-        font-weight: 700;
-        font-style: normal;
-        color: #68F4FB;
-    }
-}
-
-#hysyEchart {
-    width: 280px;
-    height: 230px;
-    width: 280px;
-    height: 230px;
-    position: relative;
-    left: -35px;
-    top: 59px;
-}
-
-.legend {
-
-
-
-
-    background: no-repeat -10% 69%;
-    background-size: 65%;
-    // background-image: url(/static/images/cockpitNew/legend.png);
-    background-image: url("/static/images/cockpitNew/legend.png");
-
-    position: absolute;
-    top: 46%;
-    left: 31%;
-    width: 520px;
-    height: 132px;
-
-}
-</style>

src/views/cockpitNew/jsyd.vue

@@ -1,202 +0,0 @@
-<template>
-  <div class="jsyd">
-    <div class="title">建设用地规划指标</div>
-    <div class="content">
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>在变控规</p>
-          <span>64</span>个
-
-        </div>
-      </div>
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>已入库控规</p>
-          <span>45</span>个
-
-        </div>
-      </div>
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>建设用地总指标</p>
-          <span>39</span>公顷
-
-        </div>
-      </div>
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>新增建设用地</p>
-          <span>123</span>公顷
-
-        </div>
-      </div>
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>已使用指标</p>
-          <span>299</span>公顷
-
-        </div>
-      </div>
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>剩余指标
-
-          </p>
-          <span>66</span>公顷
-
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
-export default {
-  components: {},
-  data() {
-    return {};
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {},
-  beforeCreate() { }, //生命周期 - 创建之前
-  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
-  beforeMount() { }, //生命周期 - 挂载之前
-  mounted() { }, //生命周期 - 挂在完成
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroy() { },//生命周期 - 销毁完成
-  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
-};
-</script>
-<style  lang="scss"  scoped>
-.jsyd {
-  border-width: 0px;
-  position: relative;
-  left: 9px;
-  top: 20px;
-  width: 535px;
-  height: 260px;
-  background: inherit;
-  background-color: rgba(3, 25, 67, 0.698039215686274);
-  border: none;
-  border-radius: 0px;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-
-.title {
-  border-width: 0px;
-  width: 100%;
-  height: 40px;
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-  font-weight: 700;
-  font-style: normal;
-  color: #00FFFF;
-  padding: 2%;
-}
-
-.content {
-  // border: #00FFFF 1px solid;
-  position: absolute;
-  left: 5%;
-  width: 400px;
-  height: 190px;
-  top: 18%;
-}
-
-.item {
-  width: 45%;
-  height: 30%;
-  display: inline-block;
-  // border: #00FFFF 1px solid;
-
-}
-
-.icon {
-  width: 50px;
-  padding: 1.5%;
-  border-radius: 8px;
-  background-color: rgba(104, 244, 251, 0.215686);
-  display: inline-block;
-  height: 50px
-}
-
-.icon2 {
-  background: no-repeat 50%;
-  background-image: url("/static/images/cockpitNew/u296.svg");
-  /* border: #00FFFF 1px solid; */
-  width: 45px;
-  height: 45px;
-  display: inline-block;
-
-}
-
-.text {
-  display: inline-block;
-  // border: #00FFFF 1px solid;
-  width: 100px;
-
-  p {
-    font-kerning: normal;
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    font-weight: 700;
-    font-style: normal;
-    font-size: 14px;
-    color: #FFFFFF;
-  }
-
-  span {
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    font-weight: 700;
-    font-style: normal;
-    color: #68F4FB;
-  }
-}
-
-.value {
-  display: inline-block;
-
-  // border: #00FFFF 1px solid;
-  width: 50px;
-
-}
-</style>

src/views/cockpitNew/stxf.vue

@@ -1,374 +0,0 @@
-<template>
-    <div class="stxf">
-        <div class="box">
-            <div class="title">生态修复</div>
-            <div class="item">
-                <p class="text">
-                    <span>·</span>
-
-                    综合整治项目
-                    <span>66</span>
-                    个
-                </p>
-                <p class="text">
-                    <span>·</span>
-                    土地整治面积
-                    <span>354.56</span>
-                    KM2
-                </p>
-            </div>
-            <div id="stxf_echart">
-
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
-export default {
-    components: {},
-    data() {
-        return {};
-    },
-    //监听属性 类似于data概念
-    computed: {},
-    //监控data中的数据变化
-    watch: {},
-    methods: {
-        getRenKou() {
-            var dom = document.getElementById('stxf_echart');
-            var myChart = window.echarts.init(dom);
-
-            let data = [
-                { name: '农用地整理项目', value: 30 },
-                { name: '建设用地整理项目', value: 40 },
-                { name: '生态修复项目', value: 50 },
-                // { name: '住宿', value: 24 },
-            ]
-            for (var i = 0; i < data.length; i++) {
-                for (var j = i + 1; j < data.length; j++) {
-                    //如果第一个比第二个大，就交换他们两个位置
-                    if (data[i].value < data[j].value) {
-                        var temp = data[i];
-                        data[i] = data[j];
-                        data[j] = temp;
-                    }
-                }
-            }
-            let pm = []
-            for (var i = 0; i < data.length; i++) {
-                let k = i + 1
-                pm.push('NO.' + k)
-            }
-            data.forEach(function (value, index, obj) {
-                value.pm = pm[index]
-            })
-            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
-            const chartData = data.map((item, index) => ({
-                value: item.value,
-                name: item.name,
-                pm: item.pm,
-                itemStyle: {
-                    shadowBlur: 20,
-                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
-                    shadowOffsetx: 25,
-                    shadowOffsety: 20,
-                    color: colors[index % colors.length],
-                },
-            }))
-            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
-            const gap = (1 * sum) / 100
-            const pieData1 = []
-            const gapData = {
-                name: '',
-                value: gap,
-                itemStyle: {
-                    color: 'transparent',
-                },
-            }
-            let totalRatio = []
-            // let totalPercent = 0
-            for (let i = 0; i < chartData.length; i++) {
-                // 计算占比
-                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
-                // 累加占比到总占比中
-                // totalRatio.push(ratio*100)
-                let ratio = (chartData[i].value / sum) * 100
-                let percent = Math.round(ratio)
-                totalRatio.push(percent)
-                // totalPercent += percent
-                // 第一圈数据
-                pieData1.push({
-                    ...chartData[i],
-                })
-                pieData1.push(gapData)
-            }
-            // 补充最后一项占比百分比保证之和为100%
-            // totalRatio[0].value += 100 - totalPercent
-            let option = {
-                backgroundColor: 'rgba(1,1,1,0)',
-                title: {
-                    show: true,
-                    // text: sum
-                    text: '项目类型',
-                    x: '49%',
-                    y: '32%',
-                    itemGap: 6,
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 11,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    subtextStyle: {
-                        color: '#fff',
-                        fontSize: 8,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    textAlign: 'center',
-                },
-
-                // 图例
-                legend: {
-                    show: true,
-                    orient: 'vertical',
-                    icon: 'rect',
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 10,
-                    },
-                    top: '15%',
-                    left: '63%',
-                    itemGap: 14,
-                    itemHeight: 14,
-                    itemWidth: 14,
-                    data: chartData,
-                    formatter: function (name) {
-                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
-                        // if (selectedItem) {
-                        //     const { value } = selectedItem;
-                        //     const { pm } = selectedItem;
-                        //     const p = ((value / sum) * 100).toFixed(2);
-                        //     const area = `${value}m²`;
-                        //     // console.log(`{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `);
-
-                        //     return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
-                        // } else {
-
-                        //     return name;
-                        // }
-
-                        if (selectedItem) {
-                            return name + selectedItem.value + "个";
-
-                        }
-                    },
-                },
-                series: [
-                    // 中间圆环
-                    {
-                        name: '',
-                        type: 'pie',
-                        roundCap: true,
-                        radius: ['36%', '52%'],
-                        center: ['50%', '35%'],
-                        data: pieData1,
-                        labelLine: {
-                            length: 8,
-                            length2: 16,
-                            lineStyle: {
-                                width: 1,
-                            },
-                        },
-                        label: {
-                            show: false,
-                            fontFamily: 'ysbth',
-                            position: 'outside',
-                            padding: [0, -4, 0, -4],
-                            formatter(params) {
-                                if (params.name === '') {
-                                    return ''
-                                }
-                                return `${params.percent.toFixed(0)}% `
-                            },
-                            color: '#fff',
-                            fontSize: '14px',
-                            lineHeight: 10,
-                        },
-                        emphasis: {
-                            // 鼠标移入时显示
-                            label: {
-                                show: true,
-                            },
-                        },
-                    },
-                    // 最里面圆环
-                    {
-                        type: 'pie',
-                        radius: ['28%', '30%'],
-                        center: ['50%', '35%'],
-                        animation: false,
-                        hoverAnimation: false,
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                        label: {
-                            show: false,
-                        },
-                        itemStyle: {
-                            color: '#3BC5EF',
-                        },
-                    },
-                    // 最里面圆环内的背景圆
-                    {
-                        name: '',
-                        type: 'pie',
-                        startAngle: 90,
-                        radius: '28%',
-                        animation: false,
-                        hoverAnimation: false,
-                        center: ['50%', '35%'],
-                        itemStyle: {
-                            labelLine: {
-                                show: false,
-                            },
-                            color: {
-                                type: 'radial',
-                                x: 0.5,
-                                y: 0.5,
-                                r: 1,
-                                colorStops: [
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(50,171,241, 0)',
-                                    },
-                                    {
-                                        offset: 0.5,
-                                        color: 'rgba(50,171,241, .4)',
-                                    },
-                                    {
-                                        offset: 0,
-                                        color: 'rgba(55,70,130, 0)',
-                                    },
-                                ],
-                                global: false, // 缺省为 false
-                            },
-                            shadowBlur: 60,
-                        },
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                    },
-                    // 最外面的圆环
-                    {
-                        type: 'pie',
-                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
-                        radius: ['53%', '54%'],
-                        center: ['50%', '35%'],
-                        label: {
-                            show: false,
-                        },
-                        select: {
-                            display: false,
-                        },
-                        tooltip: {
-                            show: false,
-                        },
-                        data: totalRatio,
-                    },
-                ],
-            }
-
-            myChart.setOption(option);
-        },
-    },
-    mounted() {
-        this.getRenKou();
-    },
-    beforeCreate() { }, //生命周期 - 创建之前
-    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
-    beforeMount() { }, //生命周期 - 挂载之前
-    beforeUpdate() { }, //生命周期 - 更新之前
-    updated() { }, //生命周期 - 更新之后
-    beforeDestroy() { }, //生命周期 - 销毁之前
-    destroy() { },//生命周期 - 销毁完成
-    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 D移除时调用。
-};
-</script>
-<style lang="scss" scoped>
-.stxf {
-    border-width: 0px;
-    position: absolute;
-    left: 1366px;
-    top: 35%;
-    display: flex;
-}
-
-.title {
-    border-width: 0px;
-    width: 100%;
-    height: 40px;
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    font-weight: 700;
-    font-style: normal;
-    color: #00FFFF;
-    padding: 2%;
-    text-align: justify;
-}
-
-.box {
-    font-family: 'Arial Normal', 'Arial';
-    font-weight: 400;
-    font-style: normal;
-    font-size: 13px;
-    letter-spacing: normal;
-    color: #333333;
-    text-align: center;
-    line-height: normal;
-    text-transform: none;
-    border-width: 0px;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 535px;
-    height: 260px;
-    background: inherit;
-    background-color: rgba(3, 25, 67, 0.698039215686274);
-    border: none;
-    border-radius: 0px;
-    box-shadow: none;
-}
-
-#stxf_echart {
-    width: 580px;
-    height: 230px;
-    position: relative;
-    left: -28%;
-    top: 7%;
-}
-
-.item {
-
-    p {
-        font-size: 14px;
-        color: #fff;
-        display: inline-block;
-        margin-top: 3%;
-        margin-right: 3%;
-    }
-
-    span {
-        color: #00FFFF;
-        font-weight: 1000;
-
-    }
-}
-</style>

src/views/cockpitNew/tdsc.vue

@@ -1,449 +0,0 @@
-<template>
-  <div class="tdsc">
-    <div class="title">土地收储</div>
-    <div class="content">
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>在变控规</p>
-          <span>66</span>个
-
-        </div>
-      </div>
-      <div class="item">
-        <div class="icon">
-          <div class="icon2">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>已入库控规 </p>
-          <span>66</span>个
-
-        </div>
-      </div>
-
-    </div>
-    <div id="echart">
-
-    </div>
-    <div class="legend">
-
-    </div>
-  </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
-export default {
-  components: {},
-  data() {
-    return {};
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  beforeCreate() { }, //生命周期 - 创建之前
-  created() {
-  }, //生命周期 - 创建完成（可以访问当前this实例）
-  beforeMount() { }, //生命周期 - 挂载之前
-  methods: {
-    getRenKou() {
-      var dom = document.getElementById('echart');
-      var myChart = window.echarts.init(dom);
-
-      let data = [
-        { name: '商业', value: 30 },
-        { name: '租赁', value: 40 },
-        { name: '自用', value: 50 },
-        { name: '住宿', value: 24 },
-      ]
-      for (var i = 0; i < data.length; i++) {
-        for (var j = i + 1; j < data.length; j++) {
-          //如果第一个比第二个大，就交换他们两个位置
-          if (data[i].value < data[j].value) {
-            var temp = data[i];
-            data[i] = data[j];
-            data[j] = temp;
-          }
-        }
-      }
-      let pm = []
-      for (var i = 0; i < data.length; i++) {
-        let k = i + 1
-        pm.push('NO.' + k)
-      }
-      data.forEach(function (value, index, obj) {
-        value.pm = pm[index]
-      })
-      const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
-      const chartData = data.map((item, index) => ({
-        value: item.value,
-        name: item.name,
-        pm: item.pm,
-        itemStyle: {
-          shadowBlur: 20,
-          shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
-          shadowOffsetx: 25,
-          shadowOffsety: 20,
-          color: colors[index % colors.length],
-        },
-      }))
-      const sum = chartData.reduce((per, cur) => per + cur.value, 0)
-      const gap = (1 * sum) / 100
-      const pieData1 = []
-      const gapData = {
-        name: '',
-        value: gap,
-        itemStyle: {
-          color: 'transparent',
-        },
-      }
-      let totalRatio = []
-      // let totalPercent = 0
-      for (let i = 0; i < chartData.length; i++) {
-        // 计算占比
-        // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
-        // 累加占比到总占比中
-        // totalRatio.push(ratio*100)
-        let ratio = (chartData[i].value / sum) * 100
-        let percent = Math.round(ratio)
-        totalRatio.push(percent)
-        // totalPercent += percent
-        // 第一圈数据
-        pieData1.push({
-          ...chartData[i],
-        })
-        pieData1.push(gapData)
-      }
-      // 补充最后一项占比百分比保证之和为100%
-      // totalRatio[0].value += 100 - totalPercent
-      let option = {
-        backgroundColor: 'rgba(1,1,1,0)',
-        title: {
-          show: true,
-          // text: sum
-          text: '收储来源',
-          // subtext: '收储来源',
-          x: '49%',
-          y: '32%',
-          itemGap: 6,
-          textStyle: {
-            color: '#fff',
-            fontSize: 11,
-            fontWeight: '400',
-            lineHeight: 8,
-          },
-          subtextStyle: {
-            color: '#fff',
-            fontSize: 8,
-            fontWeight: '400',
-            lineHeight: 8,
-          },
-          textAlign: 'center',
-        },
-
-        // 图例
-        legend: {
-          show: false,
-          orient: 'horizontal',
-          icon: 'rect',
-          textStyle: {
-            color: '#f2f2f2',
-            fontSize: '12px',
-          },
-          top: '10%',
-          left: '80%',
-          itemGap: 14,
-          itemHeight: 14,
-          itemWidth: 14,
-          data: chartData,
-          formatter: function (name) {
-            const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
-            if (selectedItem) {
-              const { value } = selectedItem;
-              const { pm } = selectedItem;
-              console.log('dddd', selectedItem)
-              const p = ((value / sum) * 100).toFixed(2);
-              const area = `${value}m²`;
-
-              return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
-            } else {
-              console.log(name);
-
-              return name;
-            }
-          },
-          textStyle: {
-            rich: {
-              icon: {
-                color: colors
-              },
-              name: {
-                color: '#f2f2f2'
-              },
-              percent: {
-                color: '#f2f2f2'
-              },
-              area: {
-                color: '#f2f2f2'
-              }
-            }
-          }
-        },
-        series: [
-          // 中间圆环
-          {
-            name: '',
-            type: 'pie',
-            roundCap: true,
-            radius: ['36%', '52%'],
-            center: ['50%', '35%'],
-            data: pieData1,
-            labelLine: {
-              length: 8,
-              length2: 16,
-              lineStyle: {
-                width: 1,
-              },
-            },
-            label: {
-              show: false,
-              fontFamily: 'ysbth',
-              position: 'outside',
-              padding: [0, -4, 0, -4],
-              formatter(params) {
-                if (params.name === '') {
-                  return ''
-                }
-                return `${params.percent.toFixed(0)}% `
-              },
-              color: '#fff',
-              fontSize: '14px',
-              lineHeight: 10,
-            },
-            emphasis: {
-              // 鼠标移入时显示
-              label: {
-                show: true,
-              },
-            },
-          },
-          // 最里面圆环
-          {
-            type: 'pie',
-            radius: ['28%', '30%'],
-            center: ['50%', '35%'],
-            animation: false,
-            hoverAnimation: false,
-            data: [
-              {
-                value: 100,
-              },
-            ],
-            label: {
-              show: false,
-            },
-            itemStyle: {
-              color: '#3BC5EF',
-            },
-          },
-          // 最里面圆环内的背景圆
-          {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: '28%',
-            animation: false,
-            hoverAnimation: false,
-            center: ['50%', '35%'],
-            itemStyle: {
-              labelLine: {
-                show: false,
-              },
-              color: {
-                type: 'radial',
-                x: 0.5,
-                y: 0.5,
-                r: 1,
-                colorStops: [
-                  {
-                    offset: 1,
-                    color: 'rgba(50,171,241, 0)',
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(50,171,241, .4)',
-                  },
-                  {
-                    offset: 0,
-                    color: 'rgba(55,70,130, 0)',
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-              shadowBlur: 60,
-            },
-            data: [
-              {
-                value: 100,
-              },
-            ],
-          },
-          // 最外面的圆环
-          {
-            type: 'pie',
-            color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
-            radius: ['53%', '54%'],
-            center: ['50%', '35%'],
-            label: {
-              show: false,
-            },
-            select: {
-              display: false,
-            },
-            tooltip: {
-              show: false,
-            },
-            data: totalRatio,
-          },
-        ],
-      }
-
-      myChart.setOption(option);
-    },
-  },
-  mounted() {
-    this.getRenKou();
-  },
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroy() { },//生命周期 - 销毁完成
-  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
-};
-</script>
-<style  lang="scss"  scoped>
-.tdsc {
-  border-width: 0px;
-  position: absolute;
-  left: 9px;
-  top: 35%;
-  width: 534px;
-  height: 260px;
-  border-width: 0px;
-  background: inherit;
-  background-color: rgba(3, 25, 67, 0.698039215686274);
-  border: none;
-  border-radius: 0px;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-
-
-.title {
-  border-width: 0px;
-  width: 100%;
-  height: 40px;
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-  font-weight: 700;
-  font-style: normal;
-  color: #00FFFF;
-  padding: 2%;
-}
-
-.content {
-  // border: #00FFFF 1px solid;
-  position: absolute;
-  left: 5%;
-  width: 400px;
-  height: 190px;
-  top: 18%;
-}
-
-.item {
-  width: 45%;
-  height: 30%;
-  display: inline-block;
-  // border: #00FFFF 1px solid;
-
-}
-
-.icon {
-  width: 50px;
-  padding: 1.5%;
-  border-radius: 8px;
-  background-color: rgba(104, 244, 251, 0.215686);
-  display: inline-block;
-  height: 50px
-}
-
-.icon2 {
-  background: no-repeat 50%;
-  background-image: url("/static/images/cockpitNew/u296.svg");
-  /* border: #00FFFF 1px solid; */
-  width: 45px;
-  height: 45px;
-  display: inline-block;
-
-}
-
-.text {
-  display: inline-block;
-  // border: #00FFFF 1px solid;
-  width: 100px;
-
-  p {
-    font-kerning: normal;
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    font-weight: 700;
-    font-style: normal;
-    font-size: 14px;
-    color: #FFFFFF;
-  }
-
-  span {
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    font-weight: 700;
-    font-style: normal;
-    color: #68F4FB;
-  }
-}
-
-#echart {
-  width: 280px;
-  height: 230px;
-  width: 280px;
-  height: 230px;
-  position: relative;
-  left: -35px;
-  top: 59px;
-}
-
-.legend {
-
- 
-
-
-  background: no-repeat -10% 69%;
-    background-size: 65%;
-    // background-image: url(/static/images/cockpitNew/legend.png);
-  background-image: url("/static/images/cockpitNew/legend.png");
-
-    position: absolute;
-    top: 46%;
-    left: 31%;
-    width: 520px;
-    height: 132px;
-
-}
-</style>

src/views/cockpitNew/tdsy.vue

@@ -1,932 +0,0 @@
-<template>
-    <div class="tdsy">
-        <div class="box1">
-            <div class="title">
-                土地供应
-                <div class="buttons">
-                    <!-- <div class="stateOwnedButton tdgyButton" @click="switchStateOwnedButton">
-                        国有建设用地
-                    </div>
-                    <div class="stateOwnedButton tdgyButton" @click="switchStateOwnedButton">
-                        集体经营性土地
-                    </div> -->
-                    <div class="stateOwnedButton tdgyButton">
-                        国有建设用地
-                    </div>
-                    <div class="stateOwnedButton tdgyButton">
-                        集体经营性土地
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="stateOwnedOrcollective" v-show="stateOwnedOrcollective">
-            <div class="content">
-                <div class="item">
-                    <div class="icon">
-                        <div class="icon2">
-
-                        </div>
-                    </div>
-                    <div class="text">
-                        <p>在变控规</p>
-                        <span>66</span>个
-
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="icon">
-                        <div class="icon2">
-
-                        </div>
-                    </div>
-                    <div class="text">
-                        <p>已入库控规 </p>
-                        <span>66</span>个
-
-                    </div>
-                </div>
-
-            </div>
-            <div id="tdsyEchart">
-
-            </div>
-            <div class="legend">
-
-            </div>
-            <div class="list">
-                <div class="list_item">
-                    <div class="item_label">
-                        <div class="icon"> </div>
-                        <span class="groupName">吉阳区大茅村太葵组</span>
-                    </div>
-
-                    <div class="buttons">
-                        <div class="lableValue">出让</div>
-                        <div class="lableValue">商服用地</div>
-                        <div class="lableValue">0.99公顷</div>
-
-                    </div>
-                    <div class="state">
-                        已上市
-                    </div>
-                </div>
-                <div class="list_item">
-                    <div class="item_label">
-                        <div class="icon"> </div>
-                        <span class="groupName">吉阳区大茅村太葵组</span>
-                    </div>
-
-                    <div class="buttons">
-                        <div class="lableValue">出让</div>
-                        <div class="lableValue">商服用地</div>
-                        <div class="lableValue">0.99公顷</div>
-
-                    </div>
-                    <div class="state">
-                        已上市
-                    </div>
-                </div>
-                <div class="list_item">
-                    <div class="item_label">
-                        <div class="icon"> </div>
-                        <span class="groupName">吉阳区大茅村太葵组</span>
-                    </div>
-
-                    <div class="buttons">
-                        <div class="lableValue">出让</div>
-                        <div class="lableValue">商服用地</div>
-                        <div class="lableValue">0.99公顷</div>
-
-                    </div>
-                    <div class="state">
-                        已上市
-                    </div>
-                </div>
-
-            </div>
-        </div>
-
-
-        <div v-show="!stateOwnedOrcollective">
-            <div id="acrossEchart">
-
-            </div>
-            <!-- <div class="echartInfo">
-                <p>计划供应项目 <span>123</span>个</p>
-            </div> -->
-            <div id="verticalEchart">
-
-            </div>
-        </div>
-
-    </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
-export default {
-    components: {},
-    data() {
-        return {
-            stateOwnedOrcollective: true
-        };
-    },
-    //监听属性 类似于data概念
-    computed: {},
-    //监控data中的数据变化
-    watch: {},
-    //方法集合
-    beforeCreate() { }, //生命周期 - 创建之前
-    created() {
-    }, //生命周期 - 创建完成（可以访问当前this实例）
-    beforeMount() { }, //生命周期 - 挂载之前
-    methods: {
-        getRenKou() {
-            var dom = document.getElementById('tdsyEchart');
-            var myChart = window.echarts.init(dom);
-
-            let data = [
-                { name: '商业', value: 30 },
-                { name: '租赁', value: 40 },
-                { name: '自用', value: 50 },
-                { name: '住宿', value: 24 },
-            ]
-            for (var i = 0; i < data.length; i++) {
-                for (var j = i + 1; j < data.length; j++) {
-                    //如果第一个比第二个大，就交换他们两个位置
-                    if (data[i].value < data[j].value) {
-                        var temp = data[i];
-                        data[i] = data[j];
-                        data[j] = temp;
-                    }
-                }
-            }
-            let pm = []
-            for (var i = 0; i < data.length; i++) {
-                let k = i + 1
-                pm.push('NO.' + k)
-            }
-            data.forEach(function (value, index, obj) {
-                value.pm = pm[index]
-            })
-            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
-            const chartData = data.map((item, index) => ({
-                value: item.value,
-                name: item.name,
-                pm: item.pm,
-                itemStyle: {
-                    shadowBlur: 20,
-                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
-                    shadowOffsetx: 25,
-                    shadowOffsety: 20,
-                    color: colors[index % colors.length],
-                },
-            }))
-            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
-            const gap = (1 * sum) / 100
-            const pieData1 = []
-            const gapData = {
-                name: '',
-                value: gap,
-                itemStyle: {
-                    color: 'transparent',
-                },
-            }
-            let totalRatio = []
-            // let totalPercent = 0
-            for (let i = 0; i < chartData.length; i++) {
-                // 计算占比
-                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
-                // 累加占比到总占比中
-                // totalRatio.push(ratio*100)
-                let ratio = (chartData[i].value / sum) * 100
-                let percent = Math.round(ratio)
-                totalRatio.push(percent)
-                // totalPercent += percent
-                // 第一圈数据
-                pieData1.push({
-                    ...chartData[i],
-                })
-                pieData1.push(gapData)
-            }
-            // 补充最后一项占比百分比保证之和为100%
-            // totalRatio[0].value += 100 - totalPercent
-            let option = {
-                backgroundColor: 'rgba(1,1,1,0)',
-                title: {
-                    show: true,
-                    // text: sum
-                    text: '收储来源',
-                    // subtext: '收储来源',
-                    x: '49%',
-                    y: '32%',
-                    itemGap: 6,
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 11,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    subtextStyle: {
-                        color: '#fff',
-                        fontSize: 8,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    textAlign: 'center',
-                },
-
-                // 图例
-                legend: {
-                    show: false,
-                    orient: 'horizontal',
-                    icon: 'rect',
-                    textStyle: {
-                        color: '#f2f2f2',
-                        fontSize: '12px',
-                    },
-                    top: '10%',
-                    left: '80%',
-                    itemGap: 14,
-                    itemHeight: 14,
-                    itemWidth: 14,
-                    data: chartData,
-                    formatter: function (name) {
-                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
-                        if (selectedItem) {
-                            const { value } = selectedItem;
-                            const { pm } = selectedItem;
-                            console.log('dddd', selectedItem)
-                            const p = ((value / sum) * 100).toFixed(2);
-                            const area = `${value}m²`;
-
-                            return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
-                        } else {
-                            return name;
-                        }
-                    },
-                    textStyle: {
-                        rich: {
-                            icon: {
-                                color: colors
-                            },
-                            name: {
-                                color: '#f2f2f2'
-                            },
-                            percent: {
-                                color: '#f2f2f2'
-                            },
-                            area: {
-                                color: '#f2f2f2'
-                            }
-                        }
-                    }
-                },
-                series: [
-                    // 中间圆环
-                    {
-                        name: '',
-                        type: 'pie',
-                        roundCap: true,
-                        radius: ['36%', '52%'],
-                        center: ['50%', '35%'],
-                        data: pieData1,
-                        labelLine: {
-                            length: 8,
-                            length2: 16,
-                            lineStyle: {
-                                width: 1,
-                            },
-                        },
-                        label: {
-                            show: false,
-                            fontFamily: 'ysbth',
-                            position: 'outside',
-                            padding: [0, -4, 0, -4],
-                            formatter(params) {
-                                if (params.name === '') {
-                                    return ''
-                                }
-                                return `${params.percent.toFixed(0)}% `
-                            },
-                            color: '#fff',
-                            fontSize: '14px',
-                            lineHeight: 10,
-                        },
-                        emphasis: {
-                            // 鼠标移入时显示
-                            label: {
-                                show: true,
-                            },
-                        },
-                    },
-                    // 最里面圆环
-                    {
-                        type: 'pie',
-                        radius: ['28%', '30%'],
-                        center: ['50%', '35%'],
-                        animation: false,
-                        hoverAnimation: false,
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                        label: {
-                            show: false,
-                        },
-                        itemStyle: {
-                            color: '#3BC5EF',
-                        },
-                    },
-                    // 最里面圆环内的背景圆
-                    {
-                        name: '',
-                        type: 'pie',
-                        startAngle: 90,
-                        radius: '28%',
-                        animation: false,
-                        hoverAnimation: false,
-                        center: ['50%', '35%'],
-                        itemStyle: {
-                            labelLine: {
-                                show: false,
-                            },
-                            color: {
-                                type: 'radial',
-                                x: 0.5,
-                                y: 0.5,
-                                r: 1,
-                                colorStops: [
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(50,171,241, 0)',
-                                    },
-                                    {
-                                        offset: 0.5,
-                                        color: 'rgba(50,171,241, .4)',
-                                    },
-                                    {
-                                        offset: 0,
-                                        color: 'rgba(55,70,130, 0)',
-                                    },
-                                ],
-                                global: false, // 缺省为 false
-                            },
-                            shadowBlur: 60,
-                        },
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                    },
-                    // 最外面的圆环
-                    {
-                        type: 'pie',
-                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
-                        radius: ['53%', '54%'],
-                        center: ['50%', '35%'],
-                        label: {
-                            show: false,
-                        },
-                        select: {
-                            display: false,
-                        },
-                        tooltip: {
-                            show: false,
-                        },
-                        data: totalRatio,
-                    },
-                ],
-            }
-
-            myChart.setOption(option);
-        },
-        switchStateOwnedButton() {
-            this.stateOwnedOrcollective = !this.stateOwnedOrcollective
-        },
-        buildverticalEchart() {
-            var dom = document.getElementById('verticalEchart');
-            var myChart = window.echarts.init(dom);
-
-
-            let option = {
-                backgroundColor: 'rgba(0,0,0,0)',
-                tooltip: {
-                    trigger: 'axis',
-                },
-                grid: {
-                    left: '5%',
-                    right: '6%',
-                    bottom: '15%',
-                    top: '10%',
-                    containLabel: true
-                },
-                legend: {
-                    icon: 'circle',
-                    right: "center",
-                    top: 230,
-                    itemWidth: 12,
-                    itemHeight: 12,
-                    textStyle: {
-                        color: '#FFF'
-                    },
-                },
-                xAxis: {
-                    show: true,
-                    type: 'category',
-                    data: ['共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', '公共服务', "公共服务", "公共服务"],
-                    max: 9,
-                    interval: 1,
-
-
-                    axisLabel: {
-                        //坐标轴字体颜色
-                        textStyle: {
-                            color: '#fff'
-                        }
-                    },
-                    axisLine: {
-                        show: false,
-                        lineStyle: {
-                            color: "#e5e5e5"
-                        }
-                    },
-                    axisTick: {       //y轴刻度线
-                        show: false
-                    },
-                    splitLine: {    //网格
-                        show: false,
-
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: ['0%', '20%'],
-
-                    axisLabel: {
-                        show: false, //不显示坐标轴上的文字
-                    },
-                    axisLine: {
-                        show: false,
-                    },
-                    axisTick: {       //y轴刻度线
-                        show: false
-                    },
-                    splitLine: {    //网格
-                        show: false,
-                        lineStyle: {
-                            color: '#dadde4',
-                            type: "dashed"
-                        }
-                    }
-                },
-                series: [{
-                    name: '在线',
-                    type: 'bar',
-                    stack: '策略变更',
-                    barMaxWidth: '20%',  //柱子宽度
-                    itemStyle: {  //柱子颜色
-                        color: 'rgb(18,236,183)',
-                    },
-                    data: [232, 193, 240, 214, 239, 223, 202, 100, 300, 400],
-                    barCategoryGap: '20%',
-                }, {
-                    name: '离线',
-                    type: 'bar',
-                    stack: '策略变更',
-                    barMaxWidth: '30%',  //柱子宽度
-                    itemStyle: {  //柱子颜色
-                        barBorderRadius: [8, 8, 0, 0],
-                        color: 'rgb(252,206,22)',
-                    },
-                    data: [320, 332, 301, 334, 390, 330, 320, 100, 300, 400],
-                    barCategoryGap: '20%',
-
-                }]
-            };
-            myChart.setOption(option);
-
-        },
-
-        buildAcrossEchart() {
-            var dom = document.getElementById('acrossEchart');
-            var myChart = window.echarts.init(dom);
-
-            var spNum = 5, _max = 100;
-            var y_data = ['初设批复', '施工期', '完建期', '已竣工'];
-            var _datamax = [100, 100, 100, 100],
-                _data1 = [
-                    { value: 20, data: 10 },
-                    { value: 10, data: 10 },
-                    { value: 60, data: 10 },
-                    { value: 20, data: 10 }
-                ],
-                _data2 = [
-                    { value: 50, data: 30 },
-                    { value: 30, data: 30 },
-                    { value: 78, data: 30 },
-                    { value: 30, data: 30 }
-                ];
-            var fomatter_fn = function (v) {
-                return v.value + '%'
-            }
-            var _label = {
-                normal: {
-                    show: false,
-                    position: 'inside',
-                    formatter: fomatter_fn,
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 16
-                    }
-                }
-            };
-            let option = {
-                backgroundColor: "rgba(0,0,0,0)",
-                grid: {
-                    containLabel: true,
-                    top: '16%',
-                    left: 0,
-                    right: 6,
-                    bottom: '10%'
-                },
-                legend: {
-                    data: [
-                        { name: "出让", icon: "circle" },
-                        { name: "划拨", icon: "circle" },
-                    ],
-                    // 大小 和位置 文字样式
-                    itemGap: 12,
-                    top: 200,
-                    right: 40,
-                    textStyle: {
-                        fontSize: 11,
-                        color: "#ffffff",
-                        fontFamily: "SourceHanSansCN-Regular"
-                    }
-                },
-                tooltip: {
-                    show: true,
-                    backgroundColor: '#fff',
-                    borderColor: '#ddd',
-                    borderWidth: 1,
-                    textStyle: {
-                        color: '#3c3c3c',
-                        fontSize: 16
-                    },
-                    formatter: function (p) {
-                        return '名称：' + p.seriesName + '<br>' + '数量：' + p.data.data + '<br>' + '占比：' + p.value + '%';
-                    },
-                    extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
-                },
-                xAxis: {
-                    splitNumber: '',
-                    interval: 50,
-                    max: 50,
-                    axisLabel: {
-                        rotate: 10,
-                        show: false,
-                        formatter: function (v) {
-                            var _v = Number((v / _max * 100).toFixed(0));
-                            return _v == 0 ? _v : _v + '%';
-                        }
-                    },
-                    axisLine: {
-                        show: false
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    splitLine: {
-                        show: false
-                    }
-                },
-                yAxis: [{
-                    show: false,
-                    data: y_data,
-                    axisLabel: {
-                        fontSize: 16,
-                        color: '#fff'
-                    },
-                    axisLine: {
-                        show: false
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    splitLine: {
-                        show: false
-                    }
-                }, {
-                    show: false,
-                    data: y_data,
-                    axisLine: {
-                        show: false
-                    }
-                }],
-                series: [{
-                    type: 'bar',
-                    silent: true,
-                    yAxisIndex: 1,
-                    itemStyle: {
-                        color: 'RGBA(41, 82, 180, 0)',
-                        emphasis: {
-                            color: 'rgba(255,255,255,0)'
-                        }
-                    },
-                    data: _datamax
-                }, {
-                    type: 'bar',
-                    name: '出让',
-                    stack: '2',
-                    label: _label,
-                    legendHoverLink: false,
-                    barWidth: '20%',
-                    itemStyle: {
-                        color: '#01AEFC',
-                        emphasis: {
-                            color: '#00BCD4'
-                        }
-                    },
-                    data: _data1
-                }, {
-                    type: 'bar',
-                    name: '划拨',
-                    stack: '2',
-                    legendHoverLink: false,
-                    label: _label,
-                    itemStyle: {
-                        color: '#FFD200',
-                        emphasis: {
-                            color: '#FF9800'
-                        }
-                    },
-                    data: _data2
-                },
-                ]
-            };
-            myChart.setOption(option);
-
-        }
-
-    },
-    mounted() {
-        this.getRenKou();
-        this.buildverticalEchart();
-        this.buildAcrossEchart();
-
-    },
-    beforeUpdate() { }, //生命周期 - 更新之前
-    updated() { }, //生命周期 - 更新之后
-    beforeDestroy() { }, //生命周期 - 销毁之前
-    destroy() { },//生命周期 - 销毁完成
-    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
-};
-</script>
-
-
-
-
-<style lang="scss"  scoped>
-.tdsy {
-    border-width: 0px;
-    position: absolute;
-    left: 555px;
-    top: 68%;
-    display: flex;
-
-    .box1 {
-        border-width: 0px;
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 800px;
-        height: 260px;
-        background: inherit;
-        background-color: rgba(3, 25, 67, 0.698039215686274);
-        border: none;
-        border-radius: 0px;
-        -moz-box-shadow: none;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-
-
-
-        .title {
-            border-width: 0px;
-            width: 100%;
-            height: 40px;
-            font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-            font-weight: 700;
-            font-style: normal;
-            color: #00FFFF;
-            padding: 2%;
-        }
-    }
-}
-
-
-
-.content {
-    // border: #00FFFF 1px solid;
-    position: absolute;
-    left: 5%;
-    width: 400px;
-    height: 190px;
-    top: 18%;
-}
-
-.item {
-    width: 45%;
-    height: 30%;
-    display: inline-block;
-    // border: #00FFFF 1px solid;
-
-}
-
-.icon {
-    width: 50px;
-    padding: 1.5%;
-    border-radius: 8px;
-    background-color: rgba(104, 244, 251, 0.215686);
-    display: inline-block;
-    height: 50px
-}
-
-.icon2 {
-    background: no-repeat 50%;
-    background-image: url("/static/images/cockpitNew/u296.svg");
-    /* border: #00FFFF 1px solid; */
-    width: 45px;
-    height: 45px;
-    display: inline-block;
-
-}
-
-.text {
-    display: inline-block;
-    // border: #00FFFF 1px solid;
-    width: 100px;
-
-    p {
-        font-kerning: normal;
-        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-        font-weight: 700;
-        font-style: normal;
-        font-size: 14px;
-        color: #FFFFFF;
-    }
-
-    span {
-        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-        font-weight: 700;
-        font-style: normal;
-        color: #68F4FB;
-    }
-}
-
-#tdsyEchart {
-
-    width: 280px;
-    height: 230px;
-    position: relative;
-    left: -35px;
-    top: 95px;
-}
-
-.legend {
-
-    background: no-repeat;
-    background-size: 27%;
-    background-image: url("/static/images/cockpitNew/tdsyLegend.png");
-
-    position: absolute;
-    top: 42%;
-    left: 69%;
-    width: 520px;
-    height: 132px;
-
-}
-
-.buttons {
-    display: inline-block;
-    position: absolute;
-    right: 30px;
-}
-
-.tdgyButton {
-    display: inline-block;
-    color: #AAAAAA;
-    font-size: 12px;
-    font-weight: 400;
-    border: 1px solid #AAAAAA;
-    border-radius: 4px;
-    padding: 2px;
-}
-
-.list {
-    position: absolute;
-    left: 137%;
-    top: 25%;
-}
-
-.list_item {
-    position: relative;
-    left: 0px;
-    top: 0px;
-    width: 384px;
-    height: 55px;
-    background: inherit;
-    background-color: #283f6d;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #80ffff;
-    border-left: 0px;
-    border-top: 0px;
-    border-right: 0px;
-    border-bottom: 0px;
-    border-radius: 5px;
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    font-size: 13px;
-    color: #FFFFFF;
-    margin-bottom: 10px;
-
-    .item_label {
-        border: #00FFFF;
-        position: relative;
-        left: 3%;
-        top: 10%;
-        height: 20px;
-        line-height: 12px;
-    }
-
-    .groupName {
-        position: relative;
-        top: -5px;
-        left: 1%;
-    }
-
-    .icon {
-        background-image: url("/static/images/cockpitNew/u371.svg");
-        width: 19px;
-        height: 19px;
-    }
-
-    .buttons {
-        display: inline-block;
-        position: absolute;
-        left: 35px;
-        top: 29px;
-    }
-
-    .lableValue {
-
-        display: inline-block;
-        border: 1px solid #80FFFF;
-        color: #80FFFF;
-        width: 20%;
-        text-align: center;
-    }
-
-    .state {
-        height: 40px;
-        width: 45px;
-        position: relative;
-        left: 87%;
-        background-color: rgba(112, 182, 3, 1);
-        top: -22%;
-        text-align: center;
-        line-height: 40px;
-    }
-}
-
-#acrossEchart {
-
-    width: 280px;
-    height: 230px;
-    position: relative;
-    left: -2%;
-    top: 2px;
-    display: inline-block
-}
-
-#verticalEchart {
-    display: inline-block;
-    width: 280px;
-    height: 260px;
-    position: relative;
-    left: 24%;
-    top: 2px;
-}
-</style>

src/views/cockpitNew/wpjg.vue

@@ -1,341 +0,0 @@
-<template>
-    <div class="wpjg">
-        <div class="box">
-            <div id="wpjp_echart">
-
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
-export default {
-    components: {},
-    data() {
-        return {};
-    },
-    //监听属性 类似于data概念
-    computed: {},
-    //监控data中的数据变化
-    watch: {},
-
-    beforeCreate() { }, //生命周期 - 创建之前
-    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
-    beforeMount() { }, //生命周期 - 挂载之前
-    methods: {
-        getRenKou() {
-            var dom = document.getElementById('wpjp_echart');
-            var myChart = window.echarts.init(dom);
-
-            let data = [
-                { name: '疑似新增建设', value: 30 },
-                { name: '耕地变化', value: 40 },
-                { name: '建设和设施农用地变化', value: 50 },
-                { name: '非耕农用地变化', value: 24 },
-                { name: '耕地变化', value: 24 },
-                { name: '新增围填海', value: 24 },
-            ]
-            for (var i = 0; i < data.length; i++) {
-                for (var j = i + 1; j < data.length; j++) {
-                    //如果第一个比第二个大，就交换他们两个位置
-                    if (data[i].value < data[j].value) {
-                        var temp = data[i];
-                        data[i] = data[j];
-                        data[j] = temp;
-                    }
-                }
-            }
-            let pm = []
-            for (var i = 0; i < data.length; i++) {
-                let k = i + 1
-                pm.push('NO.' + k)
-            }
-            data.forEach(function (value, index, obj) {
-                value.pm = pm[index]
-            })
-            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
-            const chartData = data.map((item, index) => ({
-                value: item.value,
-                name: item.name,
-                pm: item.pm,
-                itemStyle: {
-                    shadowBlur: 20,
-                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
-                    shadowOffsetx: 25,
-                    shadowOffsety: 20,
-                    color: colors[index % colors.length],
-                },
-            }))
-            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
-            const gap = (1 * sum) / 100
-            const pieData1 = []
-            const gapData = {
-                name: '',
-                value: gap,
-                itemStyle: {
-                    color: 'transparent',
-                },
-            }
-            let totalRatio = []
-            // let totalPercent = 0
-            for (let i = 0; i < chartData.length; i++) {
-                // 计算占比
-                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
-                // 累加占比到总占比中
-                // totalRatio.push(ratio*100)
-                let ratio = (chartData[i].value / sum) * 100
-                let percent = Math.round(ratio)
-                totalRatio.push(percent)
-                // totalPercent += percent
-                // 第一圈数据
-                pieData1.push({
-                    ...chartData[i],
-                })
-                pieData1.push(gapData)
-            }
-            // 补充最后一项占比百分比保证之和为100%
-            // totalRatio[0].value += 100 - totalPercent
-            let option = {
-                backgroundColor: 'rgba(1,1,1,0)',
-                title: {
-                    show: true,
-                    // text: sum
-                    text: '变化类型',
-                    x: '49%',
-                    y: '32%',
-                    itemGap: 6,
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 11,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    subtextStyle: {
-                        color: '#fff',
-                        fontSize: 8,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    textAlign: 'center',
-                },
-
-                // 图例
-                legend: {
-                    show: true,
-                    orient: 'vertical',
-                    icon: 'rect',
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 10,
-                    },
-                    top: '5%',
-                    left: '70%',
-                    itemGap: 14,
-                    itemHeight: 14,
-                    itemWidth: 14,
-                    data: chartData,
-                    formatter: function (name) {
-                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
-                        // if (selectedItem) {
-                        //     const { value } = selectedItem;
-                        //     const { pm } = selectedItem;
-                        //     const p = ((value / sum) * 100).toFixed(2);
-                        //     const area = `${value}m²`;
-
-                        //     return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
-                        // } else {
-                        //     console.log(name);
-
-                        //     return name;
-                        // }
-
-                        if (selectedItem) {
-
-                            return name + selectedItem.value + "个";
-
-                        }
-                    },
-                },
-                series: [
-                    // 中间圆环
-                    {
-                        name: '',
-                        type: 'pie',
-                        roundCap: true,
-                        radius: ['36%', '52%'],
-                        center: ['50%', '35%'],
-                        data: pieData1,
-                        labelLine: {
-                            length: 8,
-                            length2: 16,
-                            lineStyle: {
-                                width: 1,
-                            },
-                        },
-                        label: {
-                            show: false,
-                            fontFamily: 'ysbth',
-                            position: 'outside',
-                            padding: [0, -4, 0, -4],
-                            formatter(params) {
-                                if (params.name === '') {
-                                    return ''
-                                }
-                                return `${params.percent.toFixed(0)}% `
-                            },
-                            color: '#fff',
-                            fontSize: '14px',
-                            lineHeight: 10,
-                        },
-                        emphasis: {
-                            // 鼠标移入时显示
-                            label: {
-                                show: true,
-                            },
-                        },
-                    },
-                    // 最里面圆环
-                    {
-                        type: 'pie',
-                        radius: ['28%', '30%'],
-                        center: ['50%', '35%'],
-                        animation: false,
-                        hoverAnimation: false,
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                        label: {
-                            show: false,
-                        },
-                        itemStyle: {
-                            color: '#3BC5EF',
-                        },
-                    },
-                    // 最里面圆环内的背景圆
-                    {
-                        name: '',
-                        type: 'pie',
-                        startAngle: 90,
-                        radius: '28%',
-                        animation: false,
-                        hoverAnimation: false,
-                        center: ['50%', '35%'],
-                        itemStyle: {
-                            labelLine: {
-                                show: false,
-                            },
-                            color: {
-                                type: 'radial',
-                                x: 0.5,
-                                y: 0.5,
-                                r: 1,
-                                colorStops: [
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(50,171,241, 0)',
-                                    },
-                                    {
-                                        offset: 0.5,
-                                        color: 'rgba(50,171,241, .4)',
-                                    },
-                                    {
-                                        offset: 0,
-                                        color: 'rgba(55,70,130, 0)',
-                                    },
-                                ],
-                                global: false, // 缺省为 false
-                            },
-                            shadowBlur: 60,
-                        },
-                        data: [
-                            {
-                                value: 100,
-                            },
-                        ],
-                    },
-                    // 最外面的圆环
-                    {
-                        type: 'pie',
-                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
-                        radius: ['53%', '54%'],
-                        center: ['50%', '35%'],
-                        label: {
-                            show: false,
-                        },
-                        select: {
-                            display: false,
-                        },
-                        tooltip: {
-                            show: false,
-                        },
-                        data: totalRatio,
-                    },
-                ],
-            }
-
-            myChart.setOption(option);
-        },
-    },
-    mounted() {
-        this.getRenKou();
-    },
-    beforeUpdate() { }, //生命周期 - 更新之前
-    updated() { }, //生命周期 - 更新之后
-    beforeDestroy() { }, //生命周期 - 销毁之前
-    destroy() { },//生命周期 - 销毁完成
-    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
-};
-</script>
-<style lang="scss" scoped>
-.wpjg {
-
-    border-width: 0px;
-    position: absolute;
-    left: 1366px;
-    top: 68%;
-    display: -ms-flexbox;
-    display: flex;
-
-    .box {
-        font-family: 'Arial Normal', 'Arial';
-        font-weight: 400;
-        font-style: normal;
-        font-size: 13px;
-        letter-spacing: normal;
-        color: #333333;
-        text-align: center;
-        line-height: normal;
-        text-transform: none;
-        border-width: 0px;
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 535px;
-        height: 260px;
-        background: inherit;
-        background-color: rgba(3, 25, 67, 0.698039215686274);
-        border: none;
-        border-radius: 0px;
-        box-shadow: none;
-        background-repeat: no-repeat;
-        background-size: 100% 47%;
-        background-image: url("/static/images/cockpitNew/wpjg.png");
-
-
-        #wpjp_echart {
-            width: 580px;
-            height: 230px;
-            position: relative;
-            left: -28%;
-            top: 40%;
-        }
-
-
-    }
-}
-</style>