统一页面切换

src/views/population/population.vue

@@ -469,7 +469,7 @@ export default {
             name: "年出生人口",
             type: "line",
             stack: "总量",
-            data: [1999999,1999999],
+            data: this.demographicNum.bornList,
           },
           {
             name: "年死亡人口",

src/views/unified/entrance.vue

+<template>
+  <div class="page">
+    <el-row>
+      <el-col :span="8">
+        <div class="horizontal"></div>
+      </el-col>
+
+      <el-col :span="8">
+        <div class="topTitle">广西民政人口专题分析</div>
+      </el-col>
+
+      <el-col :span="8">
+        <div class="horizontal"></div>
+      </el-col>
+    </el-row>
+
+    <br />
+    <el-row :gutter="18">
+      <el-col :span="24" :offset="0">
+        <!-- <el-menu
+      :default-active="activeIndex2"
+      class="el-menu-demo"
+      mode="horizontal"
+      @select="handleSelect"
+      background-color="#0b0f4e"
+      text-color="#fff"
+      active-text-color="#4888AE"
+    >
+      <el-menu-item index="1">
+        
+      </el-menu-item>
+      <el-menu-item index="2">处理中心</el-menu-item>
+      <el-menu-item index="1">处理中心</el-menu-item>
+      <el-menu-item index="1">处理中心</el-menu-item>
+      <el-menu-item index="1">处理中心</el-menu-item>
+      <el-menu-item index="1">处理中心</el-menu-item>
+    </el-menu> -->
+
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="总体分析" name="overall">
+            <nanning></nanning>
+          </el-tab-pane>
+          <el-tab-pane label="婚姻" name="marriage">
+            <marriage></marriage>
+          </el-tab-pane>
+          <el-tab-pane label="社会救助" name="socialAssistance">
+            <socialAssistance></socialAssistance>
+          </el-tab-pane>
+          <el-tab-pane label="儿童福利" name="child">
+            <childWelfare></childWelfare>
+          </el-tab-pane>
+          <el-tab-pane label="养老" name="provide">
+            <provide></provide>
+          </el-tab-pane>
+          <el-tab-pane label="社会组织" name="socialOrganization">
+            <socialOrganization></socialOrganization>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import nanning from "./tapSwitch/nanning.vue";
+import marriage from "./tapSwitch/marriage.vue";
+import socialAssistance from "./tapSwitch/socialAssistance.vue";
+import childWelfare from "./tapSwitch/childWelfare.vue";
+import provide from "./tapSwitch/provide.vue";
+import socialOrganization from "./tapSwitch/socialOrganization.vue";
+export default {
+  components: {
+    nanning,
+    marriage,
+    socialAssistance,
+    childWelfare,
+    provide,
+    socialOrganization,
+  },
+  data() {
+    return {
+      activeName: "overall",
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+  width: 100%;
+  height: 1120px;
+  background-color: #0b0f4e;
+}
+
+.top {
+  display: flex;
+}
+
+.horizontal {
+  width: 100%;
+  height: 25px;
+  border-bottom: 1px solid #3974c7;
+}
+
+.vertical {
+  height: 32px;
+  border-left: 1px solid #3974c7;
+  margin-top: 8px;
+}
+
+.topTitle {
+  text-align: center;
+  padding: 0 10px;
+  font-size: 40px;
+  color: #62b2d2;
+  //   margin: 0 6px;
+  border-right: 2px solid #2f3a7a;
+  border-left: 2px solid #2f3a7a;
+}
+
+.wian {
+  width: 100%;
+  height: 300px;
+  background-color: brown;
+}
+
+.wianws {
+  width: 100%;
+  height: 600px;
+  background-color: brown;
+}
+</style>
\ No newline at end of file

src/views/unified/tapSwitch/nanning.vue

+<template>
+  <div>
+    <el-row :gutter="18">
+      <el-col :span="6">
+        <el-row :gutter="18">
+          <el-col :span="24"> </el-col>
+          <el-col :span="24">
+            <div class="wian">
+              <div class="title">婚姻统计</div>
+              <div class="flex">
+                <div class="text">共</div>
+                <div class="yellow">12345</div>
+                <div class="text">对</div>
+              </div>
+              <div class="marriage" id="marriage"></div>
+            </div>
+          </el-col>
+          <el-col :span="24">
+            <br />
+            <div class="wian">
+              <div class="title">养老机构统计</div>
+              <div class="flex">
+                <div class="text">共</div>
+                <div class="yellow">12345</div>
+                <div class="text">对</div>
+              </div>
+              <div class="provide" id="provide"></div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+
+      <el-col :span="12">
+        <div class="wianws"></div>
+      </el-col>
+
+      <el-col :span="6">
+        <el-row :gutter="18">
+          <el-col :span="24">
+            <div class="wian"></div>
+          </el-col>
+
+          <el-col :span="24">
+            <br />
+            <div class="wian"></div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    marriage() {
+      var chartDom = document.getElementById("marriage");
+      var myChart = echarts.init(chartDom, "dark");
+      var option;
+
+      option = {
+        backgroundColor: "#082C61",
+        title: {
+          top: "3%",
+          left: "3%",
+          text: "5年婚姻统计",
+        },
+        xAxis: {
+          type: "category",
+          data: ["2016", "2017", "2018", "2019", "2020", "2021"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: "line",
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+
+    // 养老
+    provide() {
+      var chartDom = document.getElementById("provide");
+      var myChart = echarts.init(chartDom, "dark");
+      var option;
+
+      option = {
+        backgroundColor: "#082C61",
+        title: {
+          text: "",
+          subtext: "",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          data: ["2011年"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: "category",
+          data: ["2016", "2017", "2018", "2019", "2020", "2021"],
+        },
+        series: [
+          {
+            name: "2011年",
+            type: "bar",
+            data: [18203, 23489, 29034, 104970, 131744, 630230],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.marriage();
+      this.provide()
+    }, 500);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.marriage {
+  width: 100%;
+  height: 288px;
+}
+
+.provide {
+  width: 100%;
+  height: 288px;
+}
+
+.title {
+  height: 30px;
+  font-size: 16px;
+  line-height: 30px;
+  color: #2177b9;
+  text-align: center;
+  background-color: #051d3f;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.text {
+  margin: 0 20px;
+  color: #2177b9;
+}
+
+.yellow {
+  font-size: 32px;
+  color: #ffff20;
+}
+
+.wian {
+  width: 100%;
+  height: 360px;
+  background-color: #082c61;
+}
+
+.wianws {
+  width: 100%;
+  height: 600px;
+  background-color: brown;
+}
+</style>
\ No newline at end of file