总览页面调整

package.json

@@ -12,7 +12,7 @@
     "@types/echarts": "^4.4.3",
     "axios": "^1.4.0",
     "core-js": "^3.6.4",
-    "echarts": "^4.6.0",
+    "echarts": "^5.4.2",
     "less": "3.9.0",
     "less-loader": "4.1.0",
     "vue": "^2.6.11",

src/App.vue

@@ -52,6 +52,10 @@ body {
   padding: 0;
   background: #070a24;
 }
+#app{
+  min-height: 100vh;
+  overflow-y: auto;
+}
 // 基类
 .btgym {
   width: 100vw;
@@ -64,7 +68,7 @@ body {
   // 顶部信息
   .topnav {
     width: 100%;
-    height: 20%;
+    height: 16%;
     background-image: url("assets/index/topnav.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
@@ -93,8 +97,7 @@ body {
       width: 24%;
       height: 36%;
       // border: 1px solid red;
-      margin: 0 auto;
+      margin: 1.4% auto;
-      margin-top: 2.4%;
       display: flex;
       justify-content: space-between;
       font-weight: bold;

src/views/index.vue

@@ -1,79 +1,385 @@
 <template>
-    <div id="index">
+  <div id="index">
-        <!-- 左边 -->
+    <!-- 左边 -->
-        <div class="leftbox">
+    <div class="leftbox">
-            <!-- 客流 -->
+      <!-- 客流 -->
-            <div class="keliu">
+      <div class="keliu">
-                <span class="kliu_title">客流趋势</span>
+        <span class="kliu_title">客流趋势</span>
-                <div class="kliu_st">
+        <div class="kliu_st">
-                    <span class="">年</span>
+          <span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')"  >年</span>
-                    <span class="">月</span>
+          <span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')" >月</span>
-                    <span class="">日</span>
+          <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')" >日</span>
-                </div>
+        </div>
-                <!-- 柱状图 -->
+        <!-- 柱状图 -->
-                <div class="tongjitu" id="homebar" style="height: 230px; width: 100%"></div>
+        <div class="tongjitu" id="homebar" style="height: 200px; width: 100%">
-
+          <!-- 柱图，注意样式 -->
+        </div>
+        <!-- 几大场馆预警图 -->
+        <div class="cgflow">
+          <!-- 左边的流量预警  -->
+          <div class="cgflow_leftbox">
+            <!-- 体育场的流量预警 -->
+            <div class="cgfitem">
+              <span class="cgtitle">体育场</span>
+              <span class="cgval">20%</span>
+              <span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
             </div>
-
+            <!-- 体育馆 -->
+            <div class="cgfitem">
+              <span class="cgtitle">体育馆</span>
+              <span class="cgval">20%</span>
+              <span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
+            </div>
+            <!-- 游泳馆 -->
+            <div class="cgfitem">
+              <span class="cgtitle">游泳场</span>
+              <span class="cgval">20%</span>
+              <span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
+            </div>
+          </div>
+          <!-- 右边流量预警 -->
+          <div class="cgflow_rightbox">
+            <!-- 图书馆 -->
+            <div class="cgfitem">
+              <span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
+              <span class="cgval">20%</span>
+              <span class="cgtitle">图书馆</span>
+            </div>
+            <!-- 文化馆 -->
+            <div class="cgfitem">
+              <span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
+              <span class="cgval">20%</span>
+              <span class="cgtitle">文化馆</span>
+            </div>
+            <!-- 博物馆 -->
+            <div class="cgfitem">
+              <span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
+              <span class="cgval">20%</span>
+              <span class="cgtitle">博物馆</span>
+            </div>
+          </div>
         </div>
-        <!-- 中间 -->
-        <!-- 右边 -->
 
+        
+
+      </div>
     </div>
+    <!-- 中间 -->
+    <div class="centerbox"></div>
+    <!-- 右边 -->
+    <div class="rightbox"></div>
+  </div>
 </template>
 <script>
+// 引入echarts
+import * as echarts from "echarts";
 
 export default {
+  data() {
+    return {
+      // 年月日选中的样式,默认日
+      klselt: "d",
+    };
+  },
+  //创建的时候修改背景图片
+  created() {
+    let cc = window.document.getElementById("dv-full-screen-container");
+    // 清除其他多余的classname
+    let len = cc.classList.length;
 
-    data() {
+    if (len > 1) {
-        return {
+      cc.className = "btgym page_bg";
-            //
-        }
-    },
-    mounted() {
-        let cc = window.document.getElementById("dv-full-screen-container")
-        // 清除其他多余的classname
-        let len = cc.classList.length
-
-        if (len > 1) {
-            cc.className = "btgym page_bg"
-        }
-        console.log("index vue:" + len)
-        console.log(cc.classList)
     }
-}
+  },
+  mounted() {
+    // 首页线图
+    this.home_bar();
+    // 折线图
+    // this.line_zone();
+  },
+  methods: {
+    //选择年月日中的某个
+    selitem(type) {
+      this.klselt = type;
+    },
+    // 透明背景柱状统计图
+    home_bar() {
+      var chartDom = document.getElementById("homebar");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      //
+      let that = this;
+
+      option = {
+        xAxis: {
+          type: "category",
+          data: that.bar_tdata,
+        },
+        yAxis: {
+          type: "value",
+          //网格线
+          splitLine: {
+            lineStyle: {
+              type: "soild",
+              color: "#2F00FF",
+            },
+          },
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460],
+            //data: that.bar_data,
+            type: "bar",
+            showBackground: true,
+            // 设置顶部圆形
+            symbolSize: function (d) {
+              console.log(d);
+              return d > 0 ? [10, 20] : [0, 0];
+            },
+            symbolPosition: "end",
+
+            // symbolPosition:'end',
+            // 背景颜色
+            backgroundStyle: {
+              symbolPosition: "end",
+              symbolSize: [20, 20],
+              symbolOffset: [0, "-20%"],
+              opacity: 0.75,
+              //color: 'rgba(180, 180, 180, 0.2)'
+              color: {
+                type: "linear",
+                x: 0,
+                y: 1,
+                x2: 1,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#2F00FF", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.2,
+                    color: "#000", // 50% 处的颜色
+                  },
+                  {
+                    offset: 0.8,
+                    color: "#000", // 50% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#2F00FF", // 0% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+
+            // 条柱颜色
+            color: {
+              type: "linear",
+              x: 0,
+              y: 1,
+              x2: 1,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#00B4FF", // 0% 处的颜色
+                },
+                {
+                  offset: 0.6,
+                  color: "#2f00ff",
+                },
+                {
+                  offset: 0.8,
+                  color: "#2f00ff",
+                },
+                {
+                  offset: 1,
+                  color: "#00B4FF", // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+
+    // 大面积折线图
+    line_zone() {
+      var chartDom = document.getElementById("kl-line");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      let base = +new Date(2022, 9, 3);
+      let oneDay = 24 * 3600 * 1000;
+      let date = [];
+      let data = [Math.random() * 300];
+      for (let i = 1; i < 20000; i++) {
+        var now = new Date((base += oneDay));
+        date.push(
+          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
+        );
+        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+      }
+      option = {
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: date,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, "100%"],
+          //网格线
+          splitLine: {
+            lineStyle: {
+              type: "soild",
+              color: "#2F00FF",
+            },
+          },
+        },
+
+        series: [
+          {
+            name: "Fake Data",
+            type: "line",
+            symbol: "none",
+            sampling: "lttb",
+            itemStyle: {
+              color: "rgb(255, 170, 131)",
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(255, 158, 68,0.6)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(255, 70, 131,0.6)",
+                },
+              ]),
+            },
+            data: data,
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
+};
 </script>
 <style>
 .leftbox {
-    width: 33.33%;
+  width: 33.33%;
-    float: left;
+  float: left;
-    height: 100vh;
+  height: 100vh;
 }
 
-.leftbox .keliu{
+.leftbox .keliu {
-    background-image: url('../assets/index/left_t1_bg.png');
+  background-image: url("../assets/index/left_t1_bg.png");
-    background-size: 100%;
+  background-size: 100%;
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-position: 0 0;
+  background-position: 0 0;
-    height: 1.2rem;
+  height: 1.2rem;
-    color: #b5b7c5;
+  color: #b5b7c5;
 }
-.leftbox .keliu .kliu_title{
+/* 客流趋势 */
-    line-height: 0.88rem;
+.leftbox .keliu .kliu_title {
-    font-size: 0.48rem;
+  line-height: 0.88rem;
-    padding-left: 2.4rem;
+  font-size: 0.38rem;
-    display: block;
+  padding-left: 2.4rem;
-    width: 40%;
+  display: block;
-    float: left;
+  /* width: 40%; */
+  float: left;
 }
 
-.leftbox .keliu .kliu_st{
+.leftbox .keliu .kliu_st {
-    width: 30%;
+  /* width: 30%; */
+  float: right;
+  line-height: 0.88rem;
+  font-size: 0.26rem;
+  padding-top: 0.4rem;
+}
+
+.leftbox .keliu .kliu_st span {
+  display: block;
+  background: url("../assets/index/sel_zone_bg.png") no-repeat 0 0;
+  background-position: 0 0;
+  background-size: 100%;
+  text-align: center;
+  width: 0.48rem;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  float: left;
+  margin-left: 0.08rem;
+  cursor: pointer;
+}
+.leftbox .keliu .kliu_st .spactive {
+  background-image: url("../assets/index/sel_zone_active_bg.png");
+}
+/* 统计图 */
+.leftbox .keliu .tongjitu {
+  padding-top: 0.56rem;
+  width: 100%;
+}
+/* 场馆流量预警 */
+.leftbox .cgflow {
+  margin-top: 0.26rem;
+  background-image: url("../assets/index/left_t3_bg.png");
+  background-size: 100%;
+  background-position: 0 0;
+  height: 3.2rem;
+}
+/* 场馆左侧 */
+.leftbox .cgflow_leftbox {
+    padding:106px 0 0 6%;
+  float: left;
+  width: 40%;
+  height: 100%;
+}
+
+.cgflow .cgfitem{
+    width: 100%;
+    height: 0.46rem;
+}
+.cgflow .cgfitem span{
+    display: block;
+    margin-left: 12px;
     float: left;
-    line-height: 0.88rem;
+    display: block;
+}
+.cgflow .cgfitem .cgtitle{
+    color: #0096ff;
+    font-size:14px;
+}
+.cgflow .cgfitem .cgval{
+    font-weight: 600;
+    font-size: 18px;
+}
+.cgflow .cgfitem .cgimg img{
+    width: 26px;
+    height: 26px;
+    overflow: hidden;
+    text-align: center;
+}
+/* 场馆左侧 */
+.leftbox .cgflow_rightbox {
+  padding:106px 0 0 12%;
+  float: right;
+  width: 30%;
+  height: 100%;
+  margin-left: 4%;
 }
+/* 页面背景 */
 .page_bg {
-    clear: both;
+  clear: both;
-    background-image: url('../assets/index/bg.jpg') !important;
+  background-image: url("../assets/index/bg.jpg") !important;
 }
 </style>

yarn.lock

@@ -3329,12 +3329,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-echarts@^4.6.0:
+echarts@^5.4.2:
-  version "4.9.0"
+  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz#9f38781c9c6ae323e896956178f6956952c77a48"
-  integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==
+  integrity sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==
   dependencies:
-    zrender "4.3.2"
+    tslib "2.3.0"
+    zrender "5.4.3"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -7987,6 +7988,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
@@ -8690,7 +8696,9 @@ yorkie@^2.0.0:
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
 
-zrender@4.3.2:
+zrender@5.4.3:
-  version "4.3.2"
+  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz#41ffaf835f3a3210224abd9d6964b48ff01e79f5"
-  integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==
+  integrity sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==
+  dependencies:
+    tslib "2.3.0"