修改样式

2023-11-27 14:04:45 +08:00 · 2023-11-27 14:04:45 +08:00 · 07aa2cef84
commit 07aa2cef84
parent 87db9114d9
15 changed files with 218 additions and 47 deletions
--- a/bigdata.zip
+++ b/bigdata.zip
--- a/dist.zip
+++ b/dist.zip
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>人口看板</title>
+    <title>人口数据分析看板</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@ -13,6 +13,7 @@
        "echarts-gl": "^2.0.9",
        "stylus": "^0.61.0",
        "vue": "^3.3.8",
+        "vue3-layer": "^1.0.18",
        "vue3-seamless-scroll": "^2.0.1"
      },
      "devDependencies": {
@ -714,6 +715,12 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
    },
+    "node_modules/core-js": {
+      "version": "3.33.3",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.33.3.tgz",
+      "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==",
+      "hasInstallScript": true
+    },
    "node_modules/csstype": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@ -884,6 +891,16 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
+    "node_modules/layer-src": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmmirror.com/layer-src/-/layer-src-3.5.1.tgz",
+      "integrity": "sha512-1vdYT0yPoPJb8ECEeyjnZXgL6WI5qpKISSyNAoXMn6g4lneNtqPJ7h2O6qsuwyNdkk770+vR08JGPtVgH2dN3g=="
+    },
    "node_modules/magic-string": {
      "version": "0.30.5",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
@ -1158,6 +1175,20 @@
        }
      }
    },
+    "node_modules/vue3-layer": {
+      "version": "1.0.18",
+      "resolved": "https://registry.npmmirror.com/vue3-layer/-/vue3-layer-1.0.18.tgz",
+      "integrity": "sha512-pcAvqa/6vYM8zozZXeAKnV4JLtTN/bqePSUCB/pToKjWwET6wDLnMqRlDnFTAOyArpVK/MiXujhNyCGJCJui0w==",
+      "dependencies": {
+        "core-js": "^3.6.5",
+        "jquery": "^3.6.0",
+        "layer-src": "^3.5.1",
+        "nanoid": "^3.1.30"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue3-seamless-scroll": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
@ -1587,6 +1618,11 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
    },
+    "core-js": {
+      "version": "3.33.3",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.33.3.tgz",
+      "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw=="
+    },
    "csstype": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@ -1712,6 +1748,16 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
+    "layer-src": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmmirror.com/layer-src/-/layer-src-3.5.1.tgz",
+      "integrity": "sha512-1vdYT0yPoPJb8ECEeyjnZXgL6WI5qpKISSyNAoXMn6g4lneNtqPJ7h2O6qsuwyNdkk770+vR08JGPtVgH2dN3g=="
+    },
    "magic-string": {
      "version": "0.30.5",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
@ -1866,6 +1912,17 @@
        "@vue/shared": "3.3.8"
      }
    },
+    "vue3-layer": {
+      "version": "1.0.18",
+      "resolved": "https://registry.npmmirror.com/vue3-layer/-/vue3-layer-1.0.18.tgz",
+      "integrity": "sha512-pcAvqa/6vYM8zozZXeAKnV4JLtTN/bqePSUCB/pToKjWwET6wDLnMqRlDnFTAOyArpVK/MiXujhNyCGJCJui0w==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "jquery": "^3.6.0",
+        "layer-src": "^3.5.1",
+        "nanoid": "^3.1.30"
+      }
+    },
    "vue3-seamless-scroll": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
    "echarts-gl": "^2.0.9",
    "stylus": "^0.61.0",
    "vue": "^3.3.8",
+    "vue3-layer": "^1.0.18",
    "vue3-seamless-scroll": "^2.0.1"
  },
  "devDependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@ -1,26 +1,28 @@
 <template>
    <div class="main">
        <div class="main-title">
-            <DateTime/>
-            <div class="title">人口系统数据看板</div>
+            <DateTime />
+            <div class="title">人口数据分析看板</div>
            <div class="weather"></div>
        </div>
        <div class="main-body">
-            <ModuleLeft1 class="left1"/>
-            <ModuleLeft2 class="left2"/>
-            <ModuleLeft3 class="left3"/>
-            
-            <ModuleRight1 class="right1"/>
-            <ModuleRight2 class="right2"/>
-            <ModuleRight3 class="right3"/>
+            <ModuleLeft1 class="left1" @click="onModuleClick" />
+            <ModuleLeft2 class="left2" @click="onModuleClick" />
+            <ModuleLeft3 class="left3" @click="onModuleClick" />

-            <ModuleCenter class="center"/>
-            <ModuleBottom class="bottom"/>
+            <ModuleRight1 class="right1" @click="onModuleClick" />
+            <ModuleRight2 class="right2" @click="onModuleClick" />
+            <ModuleRight3 class="right3" @click="onModuleClick" />
+
+            <ModuleCenter class="center" @click="onModuleClick" />
+            <ModuleBottom class="bottom" @click="onModuleClick"/>
        </div>
    </div>
+    <s3-layer v-model="layer.isShow" :type="2" :area="['80%', '80%']" :title="layer.title" :content="layer.content"></s3-layer>
 </template>

 <script setup>
+import { ref, reactive, inject } from 'vue';
 import DateTime from './components/datetime/DateTime.vue';
 import ModuleLeft1 from './module/ModuleLeft1.vue';
 import ModuleLeft2 from './module/ModuleLeft2.vue';
@ -33,6 +35,19 @@ import ModuleRight3 from './module/ModuleRight3.vue';
 import ModuleCenter from './module/ModuleCenter.vue';
 import ModuleBottom from './module/ModuleBottom.vue';

+const common = inject('common');
+const layer = reactive({
+    isShow: false,
+    title: '',
+    content: ''
+})
+const onModuleClick = (params) => {
+    console.log(params);
+    layer.title = params.name;
+    layer.content = `${common.getPageBaseUrl()}route/populationinfo-data/${params.type}?name=${params.name}`;
+    layer.isShow = true;
+}
+
 </script>

 <style lang="stylus" scoped>
--- a/src/main.js
+++ b/src/main.js
@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import './style.css'
 import * as echarts from 'echarts';
 import axios from 'axios';
+import { s3Layer } from 'vue3-layer';
+import 'vue3-layer/dist/s3Layer.css';
 import App from './App.vue'

 const createEcharts = {
@ -18,8 +20,19 @@ const createAxios = {
        app.provide('axios', axios);
    }
 }
+const createCommon = {
+    install(app, options) {
+        app.provide('common', {
+            getPageBaseUrl() {
+                return '/population/'
+            }
+        })
+    }
+}

 const app = createApp(App);
 app.use(createEcharts);
 app.use(createAxios);
+app.use(createCommon)
+app.component('s3-layer', s3Layer);
 app.mount('#app');
--- a/src/module/ModuleBottom.vue
+++ b/src/module/ModuleBottom.vue
@ -20,12 +20,14 @@
 </template>

 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineEmits } from 'vue';
 import { nextTick, onMounted } from 'vue';
 import ModuleCard3 from './card/ModuleCard3.vue';
 import Process from '../components/process/Process.vue';
 import CircleWave from '../components/circle/CircleWave.vue';

+const emits = defineEmits(['click']);
+
 const personData = reactive({
    lnr: {
        value: 0,
@ -60,19 +62,31 @@ const personData = reactive({
 const axios = inject('axios');

 const onLnrClick = () => {
-    console.log('lnr')
+    emits('click', {
+        type: 'baozhang',
+        name: '老年人'
+    });
 }

 const onCjrClick = () => {
-    console.log('cjr')
+    emits('click', {
+        type: 'baozhang',
+        name: '残疾人'
+    });
 }

 const onTyfyClick = () => {
-    console.log('tyfy')
+    emits('click', {
+        type: 'baozhang',
+        name: '退役/服役'
+    });
 }

 const onShjzClick = () => {
-    console.log('shjz')
+    emits('click', {
+        type: 'baozhang',
+        name: '社会救助信息'
+    });
 }

 onMounted(() => {
--- a/src/module/ModuleCenter.vue
+++ b/src/module/ModuleCenter.vue
@ -1,13 +1,17 @@
 <template>
    <div class="module-center">
        <div class="map"></div>
-        <CardCount1 id="xtlCount" class="item" :type="1" title="稀土路街道" unit="人" :value="xtlCount" :key="keyCount.xtl" @click="onXtlCLick"/>
-        <CardCount1 id="mxlCount" class="item" :type="1" title="民馨路街道" unit="人" :value="mxlCount" :key="keyCount.mxl" @click="onMxlCLick"/>
-        <CardCount1 id="wsqCount" class="item" :type="1" title="万水泉镇" unit="人" :value="wsqCount" :key="keyCount.wsq" @click="onWsqCLick"/>
-        <CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人" :value="totalCount" :key="keyCount.total" @click="onTotalCLick"/>
-        <PersonPercent id="manPercent" class="item" :value="manCount" @click="onManClick"/>
-        <PersonPercent id="womenPercent" class="item" type="women" :value="womenCount" @click="onWomenClick"/>
-        <CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" @click="onTwoCardCLick"/>
+        <CardCount1 id="xtlCount" class="item" :type="1" title="稀土路街道" unit="人" :value="xtlCount" :key="keyCount.xtl"
+            @click="onXtlCLick" />
+        <CardCount1 id="mxlCount" class="item" :type="1" title="民馨路街道" unit="人" :value="mxlCount" :key="keyCount.mxl"
+            @click="onMxlCLick" />
+        <CardCount1 id="wsqCount" class="item" :type="1" title="万水泉镇" unit="人" :value="wsqCount" :key="keyCount.wsq"
+            @click="onWsqCLick" />
+        <CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人" :value="totalCount" :key="keyCount.total"
+            @click="onTotalCLick" />
+        <PersonPercent id="manPercent" class="item" :value="manCount" @click="onManClick" />
+        <PersonPercent id="womenPercent" class="item" type="women" :value="womenCount" @click="onWomenClick" />
+        <CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" @click="onTwoCardCLick" />
        <img id="xtlIcon" class="stree-icon" :src="icons.xtl">
        <img id="mxlIcon" class="stree-icon" :src="icons.mxl">
        <img id="wsqIcon" class="stree-icon" :src="icons.wsq">
@ -15,11 +19,13 @@
 </template>

 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineEmits } from 'vue';
 import PersonPercent from '../components/card/PersonPercent.vue';
 import CardCount1 from '../components/card/CardCount1.vue';
 import CardTwoCount from '../components/card/CardTwoCount.vue';

+const emits = defineEmits(['click']);
+
 const icons = reactive({
    xtl: 'assets/imgs/icon/xtl.png',
    mxl: 'assets/imgs/icon/mxl.png',
@ -41,31 +47,61 @@ const wsqCount = ref(0);
 const totalCount = ref(0);

 const onXtlCLick = () => {
-    console.log('xtl')
+    emits('click', {
+        type: 'jiedao',
+        name: '稀土路街道'
+    });
 }

 const onMxlCLick = () => {
-    console.log('mxl')
+    emits('click', {
+        type: 'jiedao',
+        name: '民馨路街道'
+    });
 }

 const onWsqCLick = () => {
-    console.log('wsq')
+    emits('click', {
+        type: 'jiedao',
+        name: '万水泉镇'
+    });
 }

 const onTotalCLick = () => {
-    console.log('total')
+    emits('click', {
+        type: 'total',
+        name: '总人口数'
+    });
 }

 const onManClick = () => {
-    console.log('man')
+    emits('click', {
+        type: 'sex',
+        name: '男性'
+    });
 }

 const onWomenClick = () => {
-    console.log('women')
+    emits('click', {
+        type: 'sex',
+        name: '女性'
+    });
 }

 const onTwoCardCLick = (type) => {
-    console.log('twoCard', type)
+    if (type === 'cz') {
+        emits('click', {
+            type: 'changzhu',
+            name: '常住人口'
+        });
+    }
+    if(type === 'ld') {
+        emits('click', {
+            type: 'liudong',
+            name: '常住人口'
+        });
+    }
+
 }

 // 人口
--- a/src/module/ModuleLeft1.vue
+++ b/src/module/ModuleLeft1.vue
@ -1,18 +1,25 @@
 <template>
    <div class="module">
        <ModuleCard1 title="民族分布统计">
-            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount" @click="onClick"/>
+            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"
+                @click="onClick" />
        </ModuleCard1>
    </div>
+    
 </template>

 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import BarSpike from '../components/echarts/BarSpike.vue';

-const onClick = (prams) => {
-    console.log(prams);
+const emits = defineEmits(['click']);
+
+const onClick = (params) => {
+    emits('click', {
+        type: 'nation',
+        name: params.name
+    });
 }

 const axios = inject('axios');
--- a/src/module/ModuleLeft2.vue
+++ b/src/module/ModuleLeft2.vue
@ -7,14 +7,19 @@
 </template>

 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import PolarHalf from '../components/echarts/PolarHalf.vue';

+const emits = defineEmits(['click']);
+
 const axios = inject('axios');

 const onClick = (params) => {
-    console.log(params);
+    emits('click', {
+        type: 'xinfang',
+        name: params.name
+    });
 }

 const keyCount = ref(0);
--- a/src/module/ModuleLeft3.vue
+++ b/src/module/ModuleLeft3.vue
@ -7,14 +7,19 @@
 </template>

 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import ScrollPanel from '../components/scroll/ScrollPanel.vue';

+const emits = defineEmits(['click']);
+
 const axios = inject('axios');

 const onClick = (params) => {
-    console.log(params)
+    emits('click', {
+        type: 'religion',
+        name: params.name
+    })
 }

 const keyCount = ref(0)
--- a/src/module/ModuleRight1.vue
+++ b/src/module/ModuleRight1.vue
@ -7,10 +7,12 @@
 </template>

 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
 import Bar3d from '../components/echarts/Bar3d.vue';

+const emits = defineEmits(['click']);
+
 const axios = inject('axios');
 const keyCount = ref(0);

@ -20,7 +22,10 @@ const barChart = reactive({
 })

 const onClick = (params) => {
-    console.log(params);
+    emits('click', {
+        type: 'age',
+        name: params.name
+    });
 }

 axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => {
--- a/src/module/ModuleRight2.vue
+++ b/src/module/ModuleRight2.vue
@ -15,11 +15,13 @@
 </template>

 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
 import PersonCount1 from '../components/card/PersonCount1.vue';
 import PersonCount2 from '../components/card/PersonCount2.vue';

+const emits = defineEmits(['click']);
+
 const axios = inject('axios');
 const keyCount = ref(0);

@ -37,11 +39,17 @@ axios.get(`app/query/sqlrelease/qab48a3b`).then(res => {
 })

 const onCount1Click = (count) => {
-    console.log(count)
+    emits('click', {
+        type: 'teshu',
+        name: '社区矫正'
+    });
 }

 const onCount2Click = (count) => {
-    console.log(count)
+    emits('click', {
+        type: 'teshu',
+        name: '刑满释放'
+    }); 
 }

 </script>
--- a/src/module/ModuleRight3.vue
+++ b/src/module/ModuleRight3.vue
@ -7,16 +7,21 @@
 </template>

 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
 import Pie3d from '../components/echarts/Pie3d.vue';

+const emits = defineEmits(['click']);
+
 const axios = inject('axios');
 const keyCount = ref(0);
 const pie3dData = reactive([]);

 const onClick = (params) => {
-    console.log(params)
+    emits('click', {
+        type: 'organization',
+        name: params.name
+    });
 }

 axios.get(`app/query/sqlrelease/qe41cc66`, {}).then(res => {