删除旧驾驶舱

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: () =>

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>