土地收储表格

src/main.js

@@ -29,6 +29,7 @@ import store2 from "@/store/store.js" // 局部变量状态管理
 window.store = store2;
 
 import store from './store'
+import './utils/rem'
 
 // 工具配置
 import Resource from "./common/js/language" //语言选择

src/router/index.js

@@ -50,7 +50,7 @@ export const constantRoutes = [{
     }, {
         path: '/overview',
         component: () =>
-            import('@/views/viewer.vue'),
+            import('@/views/viewer1.vue'),
         hidden: true
     }, {
         path: '/checkmodel',

src/utils/rem.js

@@ -0,0 +1,17 @@
+// rem等比适配配置文件
+// 基准大小
+const baseSize = 16;
+// 设置 rem 函数
+function setRem() {
+  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
+  const scale = document.documentElement.clientWidth / 1920;
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+  document.documentElement.style.fontSize =
+    baseSize * Math.min(scale, 2) + "px";
+}
+// 初始化
+setRem();
+// 改变浏览器窗口大小时重新设置 rem
+window.onresize = function() {
+  setRem();
+};

src/views/cockpitNew1/gdbh.vue

@@ -0,0 +1,411 @@
+<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/cockpitNew1/hysy.vue

@@ -0,0 +1,463 @@
+<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/cockpitNew1/jsyd.vue

@@ -0,0 +1,202 @@
+<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/cockpitNew1/stxf.vue

@@ -0,0 +1,374 @@
+<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/cockpitNew1/tdsc.vue

@@ -0,0 +1,317 @@
+<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="tdsc_echart">
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() {
+  }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
+  methods: {
+    initEchart() {
+      var dom = document.getElementById('tdsc_echart');
+      var myChart = window.echarts.init(dom);
+
+      // const legendType = 'center'
+      const legendType = 'center'
+
+      let option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        grid: {
+          containLabel: true,
+          bottom: '1%',
+          top: '40%',
+          left: '5%',
+          right: legendType === 'center' ? '5%' : '25%',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          orient: legendType === 'center' ? 'horizontal' : 'vertical',
+          bottom:"80%",
+          right: legendType === 'center' ? 'center' : '2%',
+          // data: ['2023/06/08', '2023/10/07','2023/10/11'],
+          data: ['征收', '回收', '收购'],
+
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 40,
+          icon: "rect",
+          textStyle: {
+            fontSize: 12,
+            color: '#fff',
+            padding: [5, 0, 0, 2],
+            rich: {
+              a: {
+                verticalAlign: 'middle',
+              },
+            },
+          },
+
+        },
+        xAxis: {
+          triggerEvent: true,
+          data: ['崖州区', '崖州区', '崖州区', '崖州区'],
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            color: '#fff',
+            align: 'center',
+            verticalAlign: 'top',
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              show: true,
+              color: '#0B3561',
+              width: 2,
+            },
+          },
+        },
+        yAxis: [
+          {
+            name: "面积/公顷",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: 12,
+              padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              fontSize: 10,
+              color: '#fff',
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#0B3561',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '征收',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: 'rgb(53,120,197)',
+              },
+            },
+            data: [120, 75, 90, 100],
+          },
+          {
+            name: '回收',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: 'rgb(236,159,32)',
+              },
+            },
+            data: [120, 75, 90, 100],
+          },
+          {
+            name: '收购',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: 'rgb(27,117,123)',
+              },
+            },
+            data: [102, 130, 80, 100],
+          },
+        ],
+      }
+
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.initEchart();
+  },
+  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;
+  }
+}
+
+#tdsc_echart {
+  left: 1rem;
+  top: 2rem;
+  width: 32rem;
+  height: 11rem;
+}
+
+.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/cockpitNew1/tdsy.vue

@@ -0,0 +1,932 @@
+<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/cockpitNew1/wpjg.vue

@@ -0,0 +1,341 @@
+<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>

src/views/viewer1.vue

@@ -0,0 +1,70 @@
+<template>
+    <div v-show="flag">
+        <JSYD />
+        <TDSC />
+        <HYSY />
+        <TDSY />
+        <GDBH />
+        <STXF />
+        <WPJG />
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+// import JSYD from './homepage/jsyd.vue';
+import JSYD from './cockpitNew1/jsyd';
+import TDSC from './cockpitNew1/tdsc';
+import HYSY from './cockpitNew1/hysy';
+import TDSY from './cockpitNew1/tdsy';
+import GDBH from './cockpitNew1/gdbh';
+import STXF from './cockpitNew1/stxf';
+import WPJG from './cockpitNew1/wpjg';
+import { cockpitInfo } from '@/api/cockpit'
+
+export default {
+    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG },
+    data() {
+        return {
+            flag: true
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        switch() {
+            this.flag = !this.flag;
+
+        }
+    },
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    async mounted() {
+
+        // let obj = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_yelx', id: '46' };
+        // let data = await cockpitInfo(obj);
+
+
+
+        // let obj1 = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_ztsh', id: '46' }
+        // let data1 = await cockpitInfo(obj1);
+
+        // console.log(data, "asda");
+        // console.log(data1, "asda");
+
+
+    }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped></style>