Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/components/Viewer/smViewer.scss

@@ -1,18 +1,21 @@
 #cesiumContainer {
-    // width: 100%;
-    // height: 100%;
-    // margin: 0;
-    // padding: 0;
-    // overflow: hidden;
-
     // 新驾驶舱布局
-
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
     width: 66rem;
     height: 34.5rem;
     position: absolute;
     left: 27rem;
     top: 9%;
 
+    // width: 100%;
+    // height: 100%;
+    // position: absolute;
+    /* left: 27rem; */
+    /* top: 9%; */
+    // z-index: -1;
+
 }
 
 .cesiumbig {

src/router/index.js

@@ -37,11 +37,6 @@ export const constantRoutes = [{
         component: () =>
             import('@/views/view'),
         hidden: true
-    }, {
-        path: '/cockpitNew',
-        component: () =>
-            import('@/views/overview'),
-        hidden: true
     }, {
         path: '/cockpit',
         component: () =>
@@ -52,13 +47,8 @@ export const constantRoutes = [{
         component: () =>
             import('@/views/viewer.vue'),
         hidden: true
-    }
-    , {
-        path: '/overview1',
-        component: () =>
-            import('@/views/viewer1.vue'),
-        hidden: true
-    }, {
+    },
+    {
         path: '/checkmodel',
         component: () =>
             import('@/views/checkmodel'),

src/store/store.js

@@ -44,6 +44,17 @@ var store2 = {
                 x: [],
                 bar: [],
             }
+        },
+        cockpit_tdsc: {
+            flag: true,
+            text: {
+                xzqhdm_number: 0,
+                zhmj: 0,
+            },
+            echart: {
+                x: [],
+                bar: [],
+            }
         }
     },
     setisInitViewer(newValue) {
@@ -157,6 +168,9 @@ var store2 = {
     setCockpitHysyText(newValue) {
         this.state.cockpit_hysy.text = newValue;
     },
+    setCockpitTdsc(newValue) {
+        this.state.cockpit_tdsc.flag = newValue;
+    },
 }
 
 

src/views/cockpitNew/gdbh.vue

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

src/views/cockpitNew/hysy.vue

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

src/views/cockpitNew/jsyd.vue

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

src/views/cockpitNew/stxf.vue

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

src/views/cockpitNew/tdsc.vue

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

src/views/cockpitNew/tdsy.vue

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

src/views/cockpitNew/wpjg.vue

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

src/views/cockpitNew1/hysy.vue

@@ -73,7 +73,7 @@ export default {
     methods: {
         getRenKou() {
             console.log("进来了");
-            
+
             const that = this;
             var dom = document.getElementById('hysyEchart');
 
@@ -445,6 +445,7 @@ export default {
     width: 100%;
     height: 44px;
     position: relative;
+    right: 1rem;
     // background-image: url("/static/images/overview/info_all.png");
     // background-size: 98% 87%;
 

src/views/cockpitNew1/jsyd.vue

@@ -2,7 +2,7 @@
   <div class="jsyd">
     <div class="title">
       <div class="icon"></div>
-      <span>建设用地规划指标</span>
+      <span>管控指标</span>
     </div>
     <div class="content">
       <div class="item">
@@ -12,8 +12,8 @@
           </div>
         </div>
         <div class="text">
-          <p>在线控规</p>
-          <span>64</span>个
+          <p>耕地保护目标</p>
+          <span>64</span>平方干米
 
         </div>
       </div>
@@ -24,8 +24,8 @@
           </div>
         </div>
         <div class="text">
-          <p>已入库控规</p>
-          <span>45</span>个
+          <p>永久基本农田保护</p>
+          <span>45</span>平方干米
 
         </div>
       </div>
@@ -36,8 +36,8 @@
           </div>
         </div>
         <div class="text">
-          <p>建设用地总指标</p>
-          <span>39</span>公顷
+          <p>生态保护红线</p>
+          <span>39</span>平方干米
 
         </div>
       </div>
@@ -48,7 +48,7 @@
           </div>
         </div>
         <div class="text">
-          <p>新增建设用地</p>
+          <p>城市开发边界</p>
           <span>123</span>公顷
 
         </div>
@@ -60,7 +60,7 @@
           </div>
         </div>
         <div class="text">
-          <p>已使用指标</p>
+          <p>陆域生态保护红线</p>
           <span>299</span>公顷
 
         </div>
@@ -72,13 +72,41 @@
           </div>
         </div>
         <div class="text">
-          <p>剩余指标
+          <p>己入库控规范国
+
+          </p>
+          <span>66</span>平方干米
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon_syzb">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>近岸海述海洋生态保护红线
 
           </p>
           <span>66</span>公顷
 
         </div>
       </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon_syzb">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>覆盖城镇开发边界
+
+          </p>
+          <span>66.32</span>%
+
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -114,7 +142,7 @@ export default {
   border-width: 0px;
   position: relative;
   left: 9px;
-  top: 20px;
+  top: 9px;
   width: 416px;
   height: 310px;
   background: inherit;
@@ -158,11 +186,9 @@ export default {
 }
 
 .content {
-  // border: #00FFFF 1px solid;
   position: absolute;
-  left: 5%;
-  width: 400px;
-  height: 190px;
+  left: 1%;
+  width: 500px;
   top: 18%;
 }
 
@@ -191,6 +217,7 @@ export default {
   display: inline-block;
 
 }
+
 .icon_yrkkg {
   background: no-repeat 50%;
   background-image: url("/static/images/overview/icon_yrkkg.png");
@@ -199,7 +226,9 @@ export default {
   height: 45px;
   display: inline-block;
 
-}.icon_jsydzzb {
+}
+
+.icon_jsydzzb {
   background: no-repeat 50%;
   background-image: url("/static/images/overview/icon_jsydzzb.png");
   /* border: #00FFFF 1px solid; */
@@ -207,7 +236,9 @@ export default {
   height: 45px;
   display: inline-block;
 
-}.icon_xzjsyd {
+}
+
+.icon_xzjsyd {
   background: no-repeat 50%;
   background-image: url("/static/images/overview/icon_jsydzzb.png");
   /* border: #00FFFF 1px solid; */
@@ -215,7 +246,9 @@ export default {
   height: 45px;
   display: inline-block;
 
-}.icon_ysyzb {
+}
+
+.icon_ysyzb {
   background: no-repeat 50%;
   background-image: url("/static/images/overview/icon_jsydzzb.png");
   /* border: #00FFFF 1px solid; */
@@ -223,7 +256,9 @@ export default {
   height: 45px;
   display: inline-block;
 
-}.icon_syzb {
+}
+
+.icon_syzb {
   background: no-repeat 50%;
   background-image: url("/static/images/overview/icon_jsydzzb.png");
   /* border: #00FFFF 1px solid; */
@@ -232,10 +267,11 @@ export default {
   display: inline-block;
 
 }
+
 .text {
   display: inline-block;
   // border: #00FFFF 1px solid;
-  width: 100px;
+  width: 170px;
 
   p {
     font-kerning: normal;
@@ -260,5 +296,4 @@ export default {
   // border: #00FFFF 1px solid;
   width: 50px;
 
-}
-</style>
+}</style>

src/views/cockpitNew1/tdsc.vue

@@ -4,8 +4,7 @@
       <div class="icon"></div>
       <span>土地收储</span>
     </div>
-    <!-- <div v-if="is_xzqh"> -->
-    <div v-if="false">
+    <div v-show="store.state.cockpit_tdsc.flag">
 
       <div class="content">
         <div class="icon_info">
@@ -32,7 +31,7 @@
       </div>
     </div>
 
-    <div>
+    <div v-show="!store.state.cockpit_tdsc.flag">
       <div class="content">
         <div class="icon_info">
 
@@ -53,9 +52,12 @@
           <span class="unit">公顷</span>
         </div>
       </div>
+      <!--
       <div id="tdsc_echart_xzqh">
 
-      </div>
+      </div> -->
+      <pie3d id="tdsc_echart" unit="km²" ref="echartRefTdsc"></pie3d>
+
     </div>
 
   </div>
@@ -63,13 +65,14 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import pie3d from "../../components/echartsTemplate/3dPie.vue";
 
 export default {
-  components: {},
+  components: { pie3d },
   data() {
     return {
       is_xzqh: false,
-      
+
     };
   },
   //监听属性 类似于data概念
@@ -567,8 +570,17 @@ export default {
   },
   mounted() {
     this.$nextTick((res) => {
-      // this.initEchart();
-      this.initEchartXzqh();
+      this.initEchart();
+      // this.initEchartXzqh();
+
+      const optionsData = [
+        { name: "水田", value: 50 },
+        { name: "水浇地", value: 20 },
+        { name: "旱地", value: 30 },
+      ];
+      this.$nextTick(() => {
+        this.$refs.echartRefTdsc.setOptions(optionsData);
+      });
     })
 
   },
@@ -633,6 +645,7 @@ export default {
   width: 100%;
   height: 44px;
   position: relative;
+  right: 1rem;
   // background-image: url("/static/images/overview/info_all.png");
   // background-size: 98% 87%;
 

src/views/homepage/dxgl.vue

@@ -1,128 +0,0 @@
-<!-- 总体指标 -->
-<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
-<template>
-    <div class="ztgh">
-        <div class="shang"></div>
-        <div class="xia center">
-            <table>
-                <tr>
-                    <td>
-                        <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ; width: 152px; height: 70px;">
-                            <div style="float: left; width: 45%; margin-top: 10px;"><img style="margin-top: 10px;" src="/static/images/homepage/04-1 底线管控图标1.png"/></div>
-                            <div style="float: left; width: 50%; margin-top: 20px;"><div>耕地保护目标</div><div style="margin-right: 10px; font-weight: bold; color: #1cf2fb "><span>{{mianji}}</span><span style="color: aliceblue">  km²</span></div></div>
-                        </div>
-                    </td>
-                    <td>
-                        <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ; width: 150px; height: 70px;">
-                            <div style="float: left; width: 45%; margin-top: 10px;"><img style="margin-top: 10px;" src="/static/images/homepage/04-1 底线管控图标2.png"/></div>
-                            <div style="float: left; width: 50%; margin-top: 20px;"><div style="margin-right: 0px;">永久基本农田</div><div style="margin-right: 10px; font-weight: bold; color: #1cf2fb "><span>{{renkou}}</span><span style="color: aliceblue">  km²</span></div></div>
-                        </div> 
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ; width: 150px; height: 70px;">
-                            <div style="float: left; width: 45%; margin-top: 10px;"><img style="margin-top: 10px;" src="/static/images/homepage/04-1 底线管控图标3.png"/></div>
-                            <div style="float: left; width: 50%; margin-top: 20px;"><div style="margin-right: 0px;">城市开发边界</div><div style="margin-right: 10px; font-weight: bold; color: #1cf2fb "><span>{{haianxian}}</span><span style="color: aliceblue">  km²</span></div></div>
-                        </div>
-                    </td>
-                    <td>
-                        <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ; width: 150px; height: 70px;">
-                            <div style="float: left; width: 45%; margin-top: 10px;"><img style="margin-top: 10px;" src="/static/images/homepage/04-1 底线管控图标4.png"/></div>
-                            <div style="float: left; width: 50%; margin-top: 20px;"><div style="margin-right: 0px;">生态保护红线</div><div style="margin-right: 30px; font-weight: bold; color: #1cf2fb "><span>{{haidao}}</span><span style="color: aliceblue">  km²</span></div></div>
-                        </div>
-                    </td>
-                </tr>
-            </table>
-            <!-- <div>
-                <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ;">
-                    <div><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></div>
-                    <div><div>全市面积</div><div><span>{{mianji}}</span>km²</div></div>
-                </div>
-            </div> -->
-
-            <!-- <table calss="v_table">
-                <tr calss="v_table_tr">
-                    <div>
-                        <td calss="v_table_td"><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></td>
-                        <td calss="v_table_td"><div>全市面积</div><div><span>{{mianji}}</span>km²</div></td>
-                    </div>
-                    <div>
-                        <td calss="v_table_td"><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></td>
-                        <td calss="v_table_td"><div>常驻人口</div><div><span>{{renkou}}</span>人</div></td>
-                    </div>
-                </tr>
-                <tr>
-                    <td calss="v_table_td" ><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></td>
-                    <td calss="v_table_td" ><div>海岸线</div><div><span>{{haianxian}}</span>km</div></td>
-                    <td calss="v_table_td" ><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></td>
-                    <td calss="v_table_td" ><div>海岛</div><div><span>{{haidao}}</span>个</div></td>
-                </tr>
-            </table> -->
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    name: "overallIndicator",
-    components: {
-    },
-    data() {
-        return {
-            mianji:"",
-            renkou:"",
-            haianxian:"",
-            haidao:103,
-        };
-    },
-    created() {
-        this.getRenKou();
-        this.getRenKou();
-        this.getMianJi();
-        this.getHaiAnXian();
-    },
-    methods: {
-        getMianJi(){
-            this.mianji = "106.6";
-        },
-        getRenKou(){
-            this.renkou = "106.6";
-        },
-        getHaiAnXian(){
-            this.haianxian = "106.6";
-        },
-        getHaiDao(){
-            this.haidao = "106.6";
-        }
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.ztgh {
-    width: 300px;
-    height: 200PX;
-    min-height: 100px;
-    font-size: 12px;
-    // background: red;
-    margin-top: 10px;
-    margin-left: 10px;
-    display: block;
-}
-
-.shang {
-    width: 300px;
-    height:50PX;
-    min-height: 50px;
-    background-image: url("/static/images/homepage/01-4 标题 底线管控.png");
-    background-size: 100% 100%;
-}
-
-.xia {
-    color:aliceblue;
-}
-.center{
-    margin-left: 4%;
-    
-}
-</style>

src/views/homepage/gdbh.vue

@@ -1,181 +0,0 @@
-<!-- 总体指标 -->
-<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
-<template>
-    <div class="gdbh">
-        <div class="shang"></div>
-        <div class="xia center" >
-            <div style=" background-size: 100% 100% ; width: 310px; height: 50px;">
-                <div style="float: left; width: 45%; height: 48px;margin-left: 10px; 
-                    background-image: url('/static/images/homepage/05-1 耕地保护指标.png'); background-size: 100% 100%; ">
-                    <div style="margin-top:0px;margin-left:5px;">耕地保有量</div>
-                    <div style="padding-top:0px; font-size: 16px;">309.8km2</div>
-                </div>
-                <div style="float: left; width: 45%; height: 48px;margin-left: 10px; 
-                    background-image: url('/static/images/homepage/05-1 耕地保护指标.png'); background-size: 100% 100%; ">
-                    <div style="margin-top:0px;margin-left:5px;">高标准农田</div>
-                    <div style="padding-top:0px; font-size: 16px;">309.8km2</div>
-                </div>
-            </div>
-            <div style="width: 160px;  height: 18px; margin-left:75px ;margin-top:3px; background-image: url('/static/images/homepage/05-2 耕地保护二级小标题.png'); background-size: 100% 100%;">耕地质量</div>
-            <div id="gdbh_xia" style="width: 310px; height: 130px; "></div>
-            <div id="gdbh_xia2" style="width: 310px; height: 130px;"></div>
-        </div>
-    </div>
-</template>
-<script>
-import Day from '../../components/Crontab/day.vue';
-export default {
-    name: "overallIndicator",
-    components: {
-        Day
-    },
-    data() {
-        return {
-            mianji:"",
-            renkou:"",
-            haianxian:"",
-            haidao:103,
-        };
-    },
-    created() {
-       
-    },
-    mounted() {
-        this.getRenKou();
-        this.getRenKou2();
-    },
-    methods: {
-        getRenKou(){
-            var dom  = document.getElementById('gdbh_xia');
-            var myChart = window.echarts.init(dom);
-            let option = {
-                color:['#fe792e','#fedb4b', '#00edfe','#2a71ff'],
-                tooltip: {
-                    trigger: 'item'
-                },
-                legend: {
-                    left: '70%',
-                    top: '15%',
-                    textStyle: {
-                        color: '#ffffff' // 设置图例字体颜色为红色
-                    }
-                },
-                series: [
-                    {
-                    name: 'Access From',
-                    type: 'pie',
-                    radius: '80%',
-                    center: ["30%", "50%"],
-                    data: [
-                        { value: 484, name: '优等地' },
-                        { value: 1048, name: '上等地' },
-                        { value: 735, name: '中等地' },
-                        { value: 180, name: '下等地' }
-                    ],
-                    emphasis: {
-                        // itemStyle: {
-                        //     shadowBlur: 10,
-                        //     shadowOffsetX: 0,
-                        //     shadowColor: 'rgb(254, 222, 82, 0)'
-                        // }
-                    },
-                    label: {
-                        show: false
-                    },
-                    labelLine: {
-                        show: false
-                    },
-                    }
-                ]
-            };
-
-            myChart.setOption(option);
-        },
-        getRenKou2(){
-            var chartDom = document.getElementById('gdbh_xia2');
-            var myChart = window.echarts.init(chartDom);
-            var option;
-
-            option = {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
-            },
-            xAxis: {
-                type: 'category',
-                data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
-                axisLabel: {
-                    textStyle: {
-                        color: 'aliceblue' // 设置字体颜色为红色
-                    }
-                },
-                axisTick: {
-                    alignWithLabel: true
-                }
-            },
-            yAxis: {
-                type: 'value',
-                axisLabel: {
-                    textStyle: {
-                        color: 'aliceblue' // 设置字体颜色为红色
-                    }
-                }
-            },
-            series: [
-                {
-                name: "耕地保有量",
-                data: [120, 200, 150, 80, 70, 110, 130],
-                type: 'bar',
-                barWidth: '30%' ,
-                itemStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#83bff6' },
-                    { offset: 0.5, color: '#188df0' },
-                    { offset: 1, color: '#188df0' }
-                    ])
-                },
-            },
-            ],
-            grid:{ // 让图表占满容器
-                top:"8px",
-                left:"30px",
-                right:"5px",
-                bottom:"20px"
-            }
-            };
-            option && myChart.setOption(option);
-        }
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.gdbh {
-    width: 300px;
-    height:396PX;
-    min-height: 100px;
-    font-size: 12px;
-    // background: red;
-    margin-top: 10px;
-    margin-left: 10px;
-    display: block;
-}
-
-.shang {
-    width: 300px;
-    height:50PX;
-    min-height: 50px;
-    background-image: url("/static/images/homepage/01-5 标题 耕地保护.png");
-    background-size: 100% 100%;
-}
-
-.xia {
-    color:aliceblue;
-}
-.center{
-    margin-left: 3%;
-    
-}
-</style>

src/views/homepage/jcjg.vue

@@ -1,120 +0,0 @@
-<!-- 总体指标 -->
-<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
-<template>
-    <div class="jcjg">
-        <div class="shang"></div>
-        <div class="xia"  style="text-align: left; padding-top:5px ; margin-left:10px ;margin-bottom:0px ;width: 312px; height: 30px;">
-            <span style="margin-left:20px ; font-weight: bold; color: #1cf2fb;" @mouseenter="footerEnter($event)" @mouseleave="footerLeave($event)">近一个月</span>
-            <span style="margin-left:20px ; font-weight: bold; color: #1cf2fb;" @mouseenter="footerEnter($event)" @mouseleave="footerLeave($event)">近三个月</span>
-            <span style="margin-left:20px ; font-weight: bold; color: #1cf2fb;" @mouseenter="footerEnter($event)" @mouseleave="footerLeave($event)">近一年</span>
-            <span style="margin-left:20px ; font-weight: bold; color: #1cf2fb;" @mouseenter="footerEnter($event)" @mouseleave="footerLeave($event)">自定义</span>
-        </div>
-        <div class="xia"  style="text-align: left; padding-top:5px ; margin-left:10px ;margin-bottom:2px ;background-image: url('/static/images/homepage/06-1 疑似图斑底1.png'); background-size: 100% 100% ; width: 312px; height: 30px;">
-        <span style="margin-left:20px ;">疑似图斑</span>
-        <span style="font-weight: bold; color: #1cf2fb; margin-left:25px ;">80448</span>
-        <span style="margin-left:5px ;">个</span>
-        <span style="font-weight: bold; color: #1cf2fb; margin-left:50px ;">804.48</span>
-        <span style="margin-left:5px ;">km²</span>
-        </div>
-        <div class="xia">
-            <div style="float: left; width: 40%;">
-                <div style="margin-left:10px ;background-image: url('/static/images/homepage/06-1 疑似图斑底2.png'); background-size: 100% 100% ; width: 152px; height: 62px;">
-                    <div style="padding-top:2px ;">违法违规用地</div>
-                    <div><div style="margin-right: 10px;"><span style=" font-weight: bold; color: #1cf2fb; margin-left: 3px;margin-right: 4px;">804.48</span><span style="color: aliceblue">  km²</span></div></div>
-                    <div><div style="margin-right: 10px;"><span>整改率：</span><span style="font-weight: bold; color: #1cf2fb;margin-left: 3px;margin-right: 4px; ">50.5</span><span>%</span></div></div>
-                </div>
-            </div>
-            <div style="float: left; width: 40%; margin-left: 40px;">
-                <div style="margin-left:10px ;background-image: url('/static/images/homepage/06-1 疑似图斑底2.png'); background-size: 100% 100% ; width: 152px; height: 62px;">
-                    <div style="padding-top:2px ;">违法违规用地</div>
-                    <div><div style="margin-right: 10px;"><span style=" font-weight: bold; color: #1cf2fb; margin-left: 3px;margin-right: 4px;">804.48</span><span style="color: aliceblue">  km²</span></div></div>
-                    <div><div style="margin-right: 10px;"><span>整改率：</span><span style="font-weight: bold; color: #1cf2fb;margin-left: 3px;margin-right: 4px; ">50.5</span><span>%</span></div></div>
-                </div>
-            </div>
-            <div style="float: left; width: 40%;">
-                <div style="margin-left:10px ;background-image: url('/static/images/homepage/06-1 疑似图斑底2.png'); background-size: 100% 100% ; width: 152px; height: 62px;">
-                    <div style="padding-top:2px ;">违法违规用地</div>
-                    <div><div style="margin-right: 10px;"><span style=" font-weight: bold; color: #1cf2fb; ;margin-left: 3px;margin-right: 4px;">804.48</span><span style="color: aliceblue">  km²</span></div></div>
-                    <div><div style="margin-right: 10px;"><span>整改率：</span><span style="font-weight: bold; color: #1cf2fb;margin-left: 3px;margin-right: 4px; ">50.5</span><span>%</span></div></div>
-                </div>
-            </div>
-            <div style="float: left; width: 40%; margin-left: 40px;">
-                <div style="margin-left:10px ;background-image: url('/static/images/homepage/06-1 疑似图斑底2.png'); background-size: 100% 100% ; width: 152px; height: 62px;">
-                    <div style="padding-top:2px ;">违法违规用地</div>
-                    <div><div style="margin-right: 10px;"><span style=" font-weight: bold; color: #1cf2fb; ;margin-left: 3px;margin-right: 4px;">804.48</span><span style="color: aliceblue">  km²</span></div></div>
-                    <div><div style="margin-right: 10px;"><span>整改率：</span><span style="font-weight: bold; color: #1cf2fb;margin-left: 3px;margin-right: 4px; ">50.5</span><span>%</span></div></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import Day from '../../components/Crontab/day.vue';
-export default {
-    name: "overallIndicator",
-    components: {
-        Day
-    },
-    data() {
-        return {
-            mianji:"",
-            renkou:"",
-            haianxian:"",
-            haidao:103,
-        };
-    },
-    created() {
-        this.getRenKou();
-        this.getRenKou();
-        this.getMianJi();
-        this.getHaiAnXian();
-    },
-    methods: {
-        getMianJi(){
-            this.mianji = "106.6";
-        },
-        getRenKou(){
-            this.renkou = "106.6";
-        },
-        getHaiAnXian(){
-            this.haianxian = "106.6";
-        },
-        getHaiDao(){
-            this.haidao = "106.6";
-        },
-        footerEnter(event){
-            event.currentTarget.style.color="yellow";
-        },
-        footerLeave(event){
-            event.currentTarget.style.color="#1cf2fb";
-
-          
-        }
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.jcjg {
-    width: 300px;
-    height: 200PX;
-    min-height: 100px;
-    font-size: 12px;
-    // background: red;
-    margin-top: 10px;
-    margin-left: 10px;
-    display: block;
-}
-
-.shang {
-    width: 300px;
-    height:50PX;
-    min-height: 50px;
-    background-image: url("/static/images/homepage/01-6 标题 监测监管.png");
-    background-size: 100% 100%;
-}
-
-.xia {
-    color:aliceblue;
-}
-</style>

src/views/homepage/kczy.vue

@@ -1,112 +0,0 @@
-<!-- 总体指标 -->
-<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
-<template>
-    <div class="ztgh">
-        <div class="shang"></div>
-        <div class="xia center">
-            <div style="background-image: url('/static/images/homepage/03-1 指标底框 矿产资源.png'); background-size: 100% 100% ; width: 310px; height: 80px;">
-                <div style="float: left; width: 30%; height: 80px; "><img style="margin-left: 8px;" src="/static/images/homepage/03-2 矿产资源图标.png"/></div>
-                <div style="float: left; width: 70%; height: 80px; font-size: 15px;">
-                    <div style="text-align:left; margin-left: 10px; margin-top: 10px;">
-                        <span>探矿权    </span><span style="font-weight: bold; color: #1cf2fb; margin-left: 8px;">26</span><span style="font-size: 10px;margin-left: 6px;">个</span><span style="font-weight: bold; color: #1cf2fb; margin-left: 8px;">191.1</span><span style="font-size: 10px;margin-left: 6px;">km²</span>
-                    </div>
-                    <div style="text-align:left; margin-left: 10px; margin-top: 6px;">
-                        <span>探矿权    </span><span style="font-weight: bold; color: #1cf2fb; margin-left: 8px;">26</span><span style="font-size: 10px;margin-left: 6px;">个</span><span style="font-weight: bold; color: #1cf2fb; margin-left: 8px;">191.1</span><span style="font-size: 10px;margin-left: 6px;">km²</span>
-                    </div>
-                </div>
-            </div>
-            <div id="kczy_xia" style="width: 310px; height: 230px; "></div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    name: "overallIndicator",
-    components: {
-    },
-    data() {
-        return {
-            mianji:"",
-            renkou:"",
-            haianxian:"",
-            haidao:103,
-        };
-    },
-    created() {
-       
-    },
-    mounted() {
-        this.getRenKou();
-    },
-    methods: {
-        getRenKou(){
-            var dom  = document.getElementById('kczy_xia');
-            var myChart = window.echarts.init(dom);
-            let option = {
-                color:['#6255f5','#42ebe9', '#0f9af7','#1c63f7'],
-                tooltip: {
-                    trigger: 'item'
-                },
-                legend: {
-                    top: 'bottom',
-                    textStyle: {
-                        color: '#ffffff' // 设置图例字体颜色为红色
-                    }
-                },
-                series: [
-                    {
-                    name: 'Access From',
-                    type: 'pie',
-                    radius: '50%',
-                    center: ["50%", "40%"],
-                    data: [
-                        { value: 484, name: '大型矿山' },
-                        { value: 1048, name: '中型矿山' },
-                        { value: 735, name: '小型矿山' },
-                        { value: 580, name: '其他' }
-                    ],
-                    emphasis: {
-                        itemStyle: {
-                            shadowBlur: 10,
-                            shadowOffsetX: 0,
-                            shadowColor: 'rgba(0, 0, 0, 1)'
-                        }
-                    }
-                    }
-                ]
-            };
-
-            myChart.setOption(option);
-        }
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.ztgh {
-    width: 300px;
-    height:200PX;
-    min-height: 100px;
-    font-size: 12px;
-    // background: red;
-    margin-top: 10px;
-    margin-left: 10px;
-    display: block;
-}
-
-.shang {
-    width: 300px;
-    height:50PX;
-    min-height: 50px;
-    background-image: url("/static/images/homepage/01-3 标题 矿产资源.png");
-    background-size: 100% 100%;
-}
-
-.xia {
-    color:aliceblue;
-}
-.center{
-    margin-left: 3%;
-    
-}
-</style>

src/views/homepage/qygh.vue

@@ -1,128 +0,0 @@
-<!-- 总体指标 -->
-<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
-<template>
-    <div class="ztgh">
-        <div class="shang"></div>
-        <div class="xia center">
-            <table>
-                <tr>
-                    <td>
-                        <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ; width: 150px; height: 70px;">
-                            <div style="float: left; width: 50%; margin-top: 10px;"><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></div>
-                            <div style="float: left; width: 50%; margin-top: 20px;"><div style="margin-right: 20px;">全市面积</div><div style="margin-right: 10px; font-weight: bold; color: #1cf2fb "><span>{{mianji}}</span><span style="color: aliceblue">  km²</span></div></div>
-                        </div>
-                    </td>
-                    <td>
-                        <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ; width: 150px; height: 70px;">
-                            <div style="float: left; width: 50%; margin-top: 10px;"><img src="/static/images/homepage/02-2 区域概况图标 常驻人口.png"/></div>
-                            <div style="float: left; width: 50%; margin-top: 20px;"><div style="margin-right: 20px;">常驻人口</div><div style="margin-right: 10px; font-weight: bold; color: #1cf2fb "><span>{{renkou}}</span><span style="color: aliceblue">  万人</span></div></div>
-                        </div> 
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ; width: 150px; height: 70px;">
-                            <div style="float: left; width: 50%; margin-top: 10px;"><img src="/static/images/homepage/02-3 区域概况图标 海岸线.png"/></div>
-                            <div style="float: left; width: 50%; margin-top: 20px;"><div style="margin-right: 36px;">海岸线</div><div style="margin-right: 10px; font-weight: bold; color: #1cf2fb "><span>{{haianxian}}</span><span style="color: aliceblue"> 千米</span></div></div>
-                        </div>
-                    </td>
-                    <td>
-                        <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ; width: 150px; height: 70px;">
-                            <div style="float: left; width: 50%; margin-top: 10px;"><img src="/static/images/homepage/02-4 区域概况图标 海岛数量.png"/></div>
-                            <div style="float: left; width: 50%; margin-top: 20px;"><div style="margin-right: 42px;">海岛</div><div style="margin-right: 30px; font-weight: bold; color: #1cf2fb "><span>{{haidao}}</span><span style="color: aliceblue">  个</span></div></div>
-                        </div>
-                    </td>
-                </tr>
-            </table>
-            <!-- <div>
-                <div style="background-image: url('/static/images/homepage/02-0 区域概况指标底框.png'); background-size: 100% 100% ;">
-                    <div><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></div>
-                    <div><div>全市面积</div><div><span>{{mianji}}</span>km²</div></div>
-                </div>
-            </div> -->
-
-            <!-- <table calss="v_table">
-                <tr calss="v_table_tr">
-                    <div>
-                        <td calss="v_table_td"><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></td>
-                        <td calss="v_table_td"><div>全市面积</div><div><span>{{mianji}}</span>km²</div></td>
-                    </div>
-                    <div>
-                        <td calss="v_table_td"><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></td>
-                        <td calss="v_table_td"><div>常驻人口</div><div><span>{{renkou}}</span>人</div></td>
-                    </div>
-                </tr>
-                <tr>
-                    <td calss="v_table_td" ><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></td>
-                    <td calss="v_table_td" ><div>海岸线</div><div><span>{{haianxian}}</span>km</div></td>
-                    <td calss="v_table_td" ><img src="/static/images/homepage/02-1 区域概况图标 区域面积.png"/></td>
-                    <td calss="v_table_td" ><div>海岛</div><div><span>{{haidao}}</span>个</div></td>
-                </tr>
-            </table> -->
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    name: "overallIndicator",
-    components: {
-    },
-    data() {
-        return {
-            mianji:"",
-            renkou:"",
-            haianxian:"",
-            haidao:103,
-        };
-    },
-    created() {
-        this.getRenKou();
-        this.getRenKou();
-        this.getMianJi();
-        this.getHaiAnXian();
-    },
-    methods: {
-        getRenKou(){
-            this.renkou = "106.6";
-        },
-        getMianJi(){
-            this.mianji = "1912.1";
-        },
-        getHaiAnXian(){
-            this.haianxian = "262.4";
-        },
-        getHaiDao(){
-            this.haidao = "40";
-        }
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.ztgh {
-    width: 300px;
-    height:200PX;
-    min-height: 100px;
-    font-size: 12px;
-    // background: red;
-    margin-top: 10px;
-    margin-left: 10px;
-    display: block;
-}
-
-.shang {
-    width: 300px;
-    height:50PX;
-    min-height: 50px;
-    background-image: url("/static/images/homepage/01-1 标题 区域概况.png");
-    background-size: 100% 100%;
-}
-
-.xia {
-    color:aliceblue;
-}
-.center{
-    margin-left: 4%;
-    
-}
-</style>

src/views/homepage/zrzy.vue

@@ -1,106 +0,0 @@
-<!-- 总体指标 -->
-<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
-<template>
-    <div class="ztgh">
-        <div class="shang"></div>
-        <div class="center" id="ztgh_xia" style="width: 280px; height: 230px;"></div>
-    </div>
-</template>
-<script>
-// import { color } from 'echarts/lib/theme/light';
-
-export default {
-    name: "overallIndicator",
-    components: {
-    },
-    data() {
-        return {
-        };
-    },
-    mounted() {
-        this.getRenKou();
-    },
-    methods: {
-        getRenKou(){
-            var dom  = document.getElementById('ztgh_xia');
-            var myChart = window.echarts.init(dom);
-
-            let option = {
-                // color:['#0b45df','#6f53f6', '#42ebe8','#109cf7','#109cf7','#109cf7'],
-                tooltip: {
-                    trigger: 'item'
-                },
-                legend: {
-                    top: 'bottom',
-                    textStyle: {
-                        color: '#ffffff' // 设置图例字体颜色为红色
-                    }
-                },
-                series: [
-                    {
-                    name: 'Access From',
-                    type: 'pie',
-                    radius: '50%',
-                    center: ["50%", "40%"],
-                    data: [
-                        { value: 484, name: '耕地' },
-                        { value: 1048, name: '山地' },
-                        { value: 735, name: '河流' },
-                        { value: 580, name: '林地' },
-                        { value: 300, name: '湖泊' },
-                        { value: 300, name: '草地' }
-                    ],
-                    emphasis: {
-                        itemStyle: {
-                            shadowBlur: 10,
-                            shadowOffsetX: 0,
-                            shadowColor: 'rgba(0, 0, 0, 1)'
-                        }
-                    }
-                    }
-                ]
-            };
-
-            myChart.setOption(option);
-        },
-        getMianJi(){
-            this.mianji = "1912.1";
-        },
-        getHaiAnXian(){
-            this.haianxian = "262.4";
-        },
-        getHaiDao(){
-            this.haidao = "40";
-        }
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.ztgh {
-    width: 300px;
-    height:290PX;
-    min-height: 100px;
-    font-size: 12px;
-    // background: red;
-    margin-top: 10px;
-    margin-left: 10px;
-    display: block;
-}
-
-.shang {
-    width: 300px;
-    height:50PX;
-    min-height: 50px;
-    background-image: url("/static/images/homepage/01-2 标题 自然资源.png");
-    background-size: 100% 100%;
-}
-
-.xia {
-    color:#1cf2fb;
-}
-.center{
-    margin-left: 4%;
-    
-}
-</style>

src/views/overview.vue

@@ -1,274 +0,0 @@
-<template>
-  <div class="overview">
-    <!-- <div class="innerContainer leftPane">驾驶舱</div> -->
-    <div class="innerContainer leftPane"
-      :class="{ 'leftPaneAnimationDown': isleftPaneAnimationDown, 'leftPaneAnimationUp': isleftPaneAnimationUp }">
-      <QYGH />
-      <ZRZY />
-      <KCZY />
-      <div class="leftPanePackUp" @click="switchPack_down" v-if="downOrUp">
-      </div>
-      <div class="leftPanePackDown" @click="switchPack_up" v-else>
-      </div>
-    </div>
-
-    <div class="innerContainer rightPane"
-      :class="{ 'rightPaneAnimationUp': iSRightPaneAnimationUp, 'rightPaneAnimationDown': isRightPaneAnimationDown, }">
-      <DXGL />
-      <GDBH />
-      <JCJG />
-      <div class="rightPanePackUp" @click="switchPack_down" v-if="downOrUp">
-      </div>
-      <div class="rightPanePackDown" @click="switchPack_up" v-else>
-      </div>
-
-    </div>
-
-  </div>
-</template>
-
-<script>
-import QYGH from './homepage/qygh.vue';
-import ZRZY from './homepage/zrzy.vue';
-import KCZY from './homepage/kczy.vue';
-import DXGL from './homepage/dxgl.vue';
-import GDBH from './homepage/gdbh.vue';
-import JCJG from './homepage/jcjg.vue';
-
-export default {
-  name: "overview",
-  components: {
-    QYGH,
-    DXGL,
-    ZRZY,
-    KCZY,
-    GDBH,
-    JCJG
-  },
-  data() {
-    return {
-      iSRightPaneAnimationUp: false,
-      isRightPaneAnimationDown: false,
-      isleftPaneAnimationDown: false,
-      isleftPaneAnimationUp: false,
-      downOrUp: true
-    };
-  },
-  created() { },
-  methods: {
-    switchPack_down() {
-      // 按钮控制
-      setTimeout(() => {
-        this.downOrUp = false;
-      }, 700);
-      // 右侧动画控制
-      this.iSRightPaneAnimationUp = !this.iSRightPaneAnimationUp;
-      this.isRightPaneAnimationDown = false;
-      // 动画完成之后，修改位置
-      setTimeout(() => {
-        let dom = document.getElementsByClassName('rightPane')[0];
-        dom.style.right = '-360px';
-      }, 600);
-
-      // 左侧控制
-      this.isleftPaneAnimationDown = !this.isleftPaneAnimationDown;
-      this.isleftPaneAnimationUp = false;
-
-      setTimeout(() => {
-        let leftPane = document.getElementsByClassName('leftPane')[0];
-        leftPane.style.left = '-360px';
-      }, 600);
-    },
-    switchPack_up() {
-      setTimeout(() => {
-        this.downOrUp = true;
-      }, 700);
-
-      // 右侧动画控制
-      this.isRightPaneAnimationDown = !this.isRightPaneAnimationDown;
-      this.iSRightPaneAnimationUp = false;
-      // 动画完成之后，修改位置
-      setTimeout(() => {
-        let rightPane = document.getElementsByClassName('rightPane')[0];
-        rightPane.style.right = '10px';
-      }, 600);
-
-      // 左侧控制
-      this.isleftPaneAnimationDown = false;
-      this.isleftPaneAnimationUp = !this.isleftPaneAnimationUp;
-      setTimeout(() => {
-        let leftPane = document.getElementsByClassName('leftPane')[0];
-        leftPane.style.left = '10px';
-      }, 600);
-    },
-
-
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.overview {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-
-.innerContainer {
-  width: 350px;
-  height: calc(100% - 20px);
-  position: absolute;
-  background-image: url("/static/images/homepage/00-底框.png");
-  background-size: 100% 100%;
-  z-index: 99;
-  top: 10px;
-  // writing-mode: vertical-lr;
-  text-align: center;
-  // font-size: 73px;
-  // line-height: 350px;
-  color: red;
-}
-
-.leftPane {
-  left: 10px;
-
-
-}
-
-.rightPane {
-  right: 10px;
-}
-
-// 右侧面板收起动画
-@keyframes rightPaneAnimation-packUp {
-
-  from {
-    right: 10px;
-
-  }
-
-  to {
-    right: -360px;
-  }
-}
-
-
-
-.rightPaneAnimationUp {
-  animation: rightPaneAnimation-packUp 0.5s linear 0.5s forwards;
-  animation-iteration-count: 1;
-}
-
-// 右侧面板放开动画
-@keyframes rightPaneAnimation-packDown {
-  from {
-    right: -360px;
-  }
-
-  to {
-    right: 10px;
-
-  }
-
-
-}
-
-
-
-.rightPaneAnimationDown {
-  animation: rightPaneAnimation-packDown 0.5s linear 0.5s forwards;
-  animation-iteration-count: 1;
-}
-
-// 左侧面板收起
-@keyframes leftPaneAnimation-Down {
-  from {
-    left: 10px;
-  }
-
-  to {
-    left: -360px;
-
-  }
-
-
-}
-
-
-
-.leftPaneAnimationDown {
-  animation: leftPaneAnimation-Down 0.5s linear 0.5s forwards;
-  animation-iteration-count: 1;
-}
-
-// 左侧面板打开
-@keyframes leftPaneAnimation-up {
-  from {
-    left: -360px;
-
-  }
-
-  to {
-    left: 10px;
-
-  }
-
-
-}
-
-
-
-.leftPaneAnimationUp {
-  animation: leftPaneAnimation-up 0.5s linear 0.5s forwards;
-  animation-iteration-count: 1;
-}
-
-.leftPanePackUp {
-  width: 25px;
-  height: 25PX;
-  min-height: 50px;
-  background-image: url("/static/images/homepage/packDown.png");
-  background-size: 100% 100%;
-  position: absolute;
-  left: 103%;
-  z-index: 11111;
-  top: 50%;
-}
-
-.leftPanePackDown {
-  width: 25px;
-  height: 25PX;
-  min-height: 50px;
-  background-image: url("/static/images/homepage/packUp.png");
-  background-size: 100% 100%;
-  position: absolute;
-  left: 103%;
-  z-index: 11111;
-  top: 50%;
-}
-
-.rightPanePackUp {
-  width: 25px;
-  height: 25PX;
-  min-height: 50px;
-  background-image: url("/static/images/homepage/packUp.png");
-
-  background-size: 100% 100%;
-  position: absolute;
-  left: -10%;
-  z-index: 11111;
-  top: 50%;
-}
-
-.rightPanePackDown {
-  width: 25px;
-  height: 25PX;
-  min-height: 50px;
-  background-image: url("/static/images/homepage/packDown.png");
-
-  background-size: 100% 100%;
-  position: absolute;
-  left: -10%;
-  z-index: 11111;
-  top: 50%;
-}</style>

src/views/viewer.vue

@@ -1,8 +1,10 @@
 <template>
     <div v-show="flag">
+        <datePicker @deteChange="deteChange"></datePicker>
+        <ser-center></ser-center>
         <JSYD />
         <TDSC />
-        <HYSY />
+        <HYSY ref="hysy_ref" />
         <TDSY />
         <GDBH />
         <STXF />
@@ -12,22 +14,27 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import serCenter from './cockpitNew1/serCenter';
+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 datePicker from './cockpitNew1/datePicker.vue';
+import xzqh from "../../static/data/460200_full.json";
+import SerCenter from './cockpitNew1/serCenter.vue';
 
-// import JSYD from './homepage/jsyd.vue';
-import JSYD from './cockpitNew/jsyd';
-import TDSC from './cockpitNew/tdsc';
-import HYSY from './cockpitNew/hysy';
-import TDSY from './cockpitNew/tdsy';
-import GDBH from './cockpitNew/gdbh';
-import STXF from './cockpitNew/stxf';
-import WPJG from './cockpitNew/wpjg';
 import { cockpitInfo } from '@/api/cockpit'
 
 export default {
-    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG },
+    components: { serCenter, JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, SerCenter },
     data() {
         return {
-            flag: true
+            flag: true,
+            xzqh_color_click: "rgba(46, 177, 251, 0.6)",
+            xzqh_color: "rgba(10, 95, 152, 0.5)",
         };
     },
     //监听属性 类似于data概念
@@ -38,7 +45,209 @@ export default {
     methods: {
         switch() {
             this.flag = !this.flag;
+        },
+        deteChange(date) {
 
+        },
+        async hysyq(address) {
+            // 选中xzqh查询
+            let obj = {
+                beginTime: '20240101',
+                endTime: '20240501',
+                jscType: 'jsc_hysyq_ztsh',
+                id: address
+            };
+            let data = await cockpitInfo(obj);
+
+            let obg_text = {
+                xzqhdm_number: data.data[0].xzqhdm_number,
+                zhmj: data.data[0].zhmj,
+
+            }
+            console.log(obg_text, "obg_echart");
+
+            store.setCockpitHysyText(obg_text);
+
+            // 图表数据
+            let obj_echart = {
+                beginTime: '20240101',
+                endTime: '20240501',
+                jscType: 'jsc_hysyq_yelx',
+                id: address
+            };
+            let data_echart = await cockpitInfo(obj_echart);
+
+            let obg_echart = {
+                x: data_echart.data.map(item => item.yhlx_name),
+                bar: data_echart.data.map(item => item.zhmj)
+
+            }
+
+            store.setCockpitHysyEchart(obg_echart);
+
+
+            this.$refs.hysy_ref["getRenKou"]();
+
+            // getRenKou();
+
+            console.log(address, "address");
+        },
+        hysyq_xzqh() {
+            const that = this;
+            that.$refs.hysy_ref["label_data"]();
+            that.$refs.hysy_ref["echart_data"]();
+        },
+        async pick_xzqh() {
+            const that = this;
+            const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+            handler.setInputAction(async event => {
+                let pickObj = viewer.scene.pick(event.position);
+                var position = viewer.scene.pickPosition(event.position);
+
+                if (!position)//点击到地球之外
+                    return false;
+                var cartographic = Cesium.Cartographic.fromCartesian(position);
+
+
+                let longitude = Cesium.Math.toDegrees(cartographic.longitude);
+                let latitude = Cesium.Math.toDegrees(cartographic.latitude);
+                let height = cartographic.height;
+                let heading = viewer.scene.camera.heading;
+                let pitch = viewer.scene.camera.pitch;
+                // if (!pickObj)//未获取实体
+                //     return false;
+
+
+                if (!position) {
+                    position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
+                }
+
+                if (Cesium.defined(pickObj)) {
+
+
+
+                    if (pickObj.id && pickObj.id instanceof Cesium.Entity) {//点击entity
+
+                        if (pickObj.id.properties.hasProperty('name')) {
+                            const name = pickObj.id.properties.name.getValue();
+                            const address = pickObj.id.properties.adcode.getValue();
+                            const center = pickObj.id.properties.centroid.getValue();
+
+                            // 选中状态
+                            pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click);
+                            pickObj.id.polygon.extrudedHeight = 850;
+
+                            // 恢复其他状态
+                            viewer.entities.values.forEach((res) => {
+
+                                if (res.properties.name._value != name) {
+                                    // console.log(res.properties.name._value, "其他的");
+                                    // console.log(res);
+                                    res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
+                                    res.polygon.extrudedHeight = 450;
+
+                                }
+                            })
+                            // 驾驶舱海域使用权
+                            that.hysyq(address);
+                            // 驾驶舱土地收储
+                            that.tdsc_xzqh(address);
+
+
+                        } else {
+
+                        }
+
+                    }
+
+
+
+
+                } else {
+                    // 暂时点击周围数据显示三亚市
+                    // 清除所有xzqh状态
+                    viewer.entities.values.forEach((res) => {
+
+                        // console.log(res.properties.name._value, "其他的");
+                        // console.log(res);
+                        res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
+                        res.polygon.extrudedHeight = 450;
+
+                    })
+                    // 海域使用
+                    that.hysyq_xzqh();
+                    // 土地收储
+                    that.tdsc();
+
+                }
+
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        },
+        tdsc() {
+            const that = this;
+            that.store.setCockpitTdsc(true);
+
+        },
+        tdsc_xzqh() {
+            const that = this;
+            that.store.setCockpitTdsc(false);
+        },
+        init_xzqh() {
+            const that = this;
+            xzqh.features.forEach((res) => {
+
+                const twoDArray = res.geometry.coordinates[0][0];
+                const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+
+                console.log();
+
+                viewer.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
+                    text: res.properties.name,
+                    label: {
+                        scale: 1.5,
+                        font: "bolder 16px sans-serif",
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                        text: res.properties.name,//图标名称
+                        fillColor: Cesium.Color.fromCssColorString("#ffffff"),
+                        pixelOffset: new Cesium.Cartesian2(5, -15),
+                        zIndex: 3,
+                    },
+                    billboard: {
+                        // 图像地址，URI或Canvas的属性
+                        image: "./static/images/overview/htq-f.png",
+                        height: 60,
+                        // 宽度（以像素为单位）
+                        width: 150,
+                        // 相对于坐标的垂直位置
+                        // verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                        // // 相对于坐标的水平位置
+                        // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                        scale: 1.0,
+                        zIndex: 2,
+
+                        show: true
+                    },
+                    properties: {
+                        'type': "cockpit",
+                        'name': res.properties.name,
+                        'centroid': res.properties.centroid,
+                        'adcode': res.properties.adcode,
+                    },
+                    polygon: {
+                        zIndex: 1,
+                        hierarchy: {
+                            positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
+                        },
+                        outline: false,
+                        material: Cesium.Color.fromCssColorString(that.xzqh_color),
+                        height: 100,
+                        extrudedHeight: 450,
+
+                    }
+                });
+
+            })
         }
     },
     beforeCreate() { }, //生命周期 - 创建之前
@@ -56,6 +265,13 @@ export default {
 
         // console.log(data, "asda");
         // console.log(data1, "asda");
+        // 三亚行政区划加载
+
+
+        this.$nextTick((res) => {
+            this.pick_xzqh();
+            this.init_xzqh()
+        });
 
 
     }, //生命周期 - 挂在完成