驾驶舱页面更新

src/views/homepage/dxgl.vue

@@ -0,0 +1,124 @@
+<!-- 总体指标 -->
+<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
+<template>
+    <div class="ztgh">
+        <div class="shang"></div>
+        <div class="xia">
+            <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;
+}
+</style>

src/views/homepage/gdbh.vue

@@ -0,0 +1,174 @@
+<!-- 总体指标 -->
+<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
+<template>
+    <div class="gdbh">
+        <div class="shang"></div>
+        <div class="xia">
+            <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%'
+                },
+                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;
+}
+</style>

src/views/homepage/jcjg.vue

@@ -0,0 +1,120 @@
+<!-- 总体指标 -->
+<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
+<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

@@ -0,0 +1,105 @@
+<!-- 总体指标 -->
+<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
+<template>
+    <div class="ztgh">
+        <div class="shang"></div>
+        <div class="xia">
+            <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'
+                },
+                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;
+}
+</style>

src/views/homepage/qygh.vue

@@ -0,0 +1,124 @@
+<!-- 总体指标 -->
+<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
+<template>
+    <div class="ztgh">
+        <div class="shang"></div>
+        <div class="xia">
+            <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;
+}
+</style>

src/views/homepage/zrzy.vue

@@ -0,0 +1,99 @@
+<!-- 总体指标 -->
+<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
+<template>
+    <div class="ztgh">
+        <div class="shang"></div>
+        <div 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'
+                },
+                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;
+}
+</style>

src/views/overview.vue

@@ -1,13 +1,37 @@
 <template>
   <div class="overview">
-    <div class="innerContainer leftPane">驾驶舱</div>
-    <div class="innerContainer rightPane">开工啦</div>
+    <!-- <div class="innerContainer leftPane">驾驶舱</div> -->
+    <div class="innerContainer leftPane">
+      <QYGH/>
+      <ZRZY/>
+      <KCZY/>
+    </div>
+    <div class="innerContainer rightPane">
+      <DXGL/>
+      <GDBH/>
+      <JCJG/>
+    </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 {};
   },
@@ -27,13 +51,14 @@ export default {
   width: 350px;
   height: calc(100% - 20px);
   position: absolute;
-  background: #041024;
+  background-image: url("/static/images/homepage/00-底框.png");
+  background-size: 100% 100%;
   z-index: 99;
   top: 10px;
-  writing-mode: vertical-lr;
+  // writing-mode: vertical-lr;
   text-align: center;
-  font-size: 73px;
-  line-height: 350px;
+  // font-size: 73px;
+  // line-height: 350px;
   color: red;
 }