首页数据value字体

src/components/BarEchart1.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="echart-div">
+    <div class="top-title">
+      <div class="title">{{echartData.title}}</div>
+    </div>
+    <div class="echart" :id="echartData.id">
+    </div>
+  </div>
+</template>
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import moment from "moment";
+import { useStore } from "vuex";
+import * as echarts from "echarts";
+import bus from '../utils/bus.js'
+
+export default {
+  name: "LineEchart",
+  props: {
+    echartData: Object
+  },
+  setup(props) {
+    const store = useStore();
+    let myChart = null;
+    let data = {};
+    const state = reactive({
+    });
+    onMounted(() => {
+      bus.on('foo', e => {
+        console.log(e)
+        getEchart();
+      })
+      getEchart();
+    });
+    const getEchart = () => {
+      if (store.state.selectDate === 1) {
+        data = {
+          legend: props.echartData.legend,
+          color: props.echartData.color,
+          xData: [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15",
+            "16",
+            "17",
+            "18",
+            "19",
+            "20",
+            "21",
+            "22",
+            "23",
+            "24",
+            "25",
+            "26",
+            "27",
+            "28",
+            "29",
+            "30",
+          ],
+          Values: [
+            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
+            2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 8.3, 5, 4, 5, 6, 7,
+          ],
+          type: ["bar"],
+        };
+      } else if (store.state.selectDate === 2) {
+        data = {
+          legend: props.echartData.legend,
+          color: props.echartData.color,
+          xData: [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "10",
+            "11",
+            "12",
+          ],
+          Values: [
+            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7
+          ],
+          type: ["bar"],
+        };
+      } else if (store.state.selectDate === 0) {
+        var data = {
+          legend: props.echartData.legend,
+          color: props.echartData.color,
+          xData: [
+            "00",
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15",
+            "16",
+            "17",
+            "18",
+            "19",
+            "20",
+            "21",
+            "22",
+            "23",
+          ],
+          Values: [
+            2.3, 5.3, 8.3, 5, 2.3, 5.3, 8.3, 5, 4, 5, 6, 7, 2.3, 5.3, 8.3, 5,
+            2.3, 5.3, 8.3, 5, 4, 5, 6, 7,
+          ],
+          type: ["bar"],
+        };
+      }
+      let dom = document.getElementById(props.echartData.id);
+      if (dom) {
+        myChart = echarts.init(dom);
+        loadlineChart(myChart, data);
+      }
+    };
+    const loadlineChart = (myChart, data) => {
+      console.log(data);
+      var option = {
+        grid: {
+          left: "8%", //画布左移位置
+          top: "10",
+          width: "90%", //画布宽度
+          height: "75%", //画布高度
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          axisLabel: {
+            margin: 10, //X轴标签与轴线之间的距离
+            interval: 0, //X轴0强制显示所有标签，1，隔一个显示
+            rotate: -60,
+            textStyle: {
+              color: "#303133", //X轴字体颜色
+              fontSize: "12", //X轴字体大小
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dfe4ed", //X轴线颜色
+            },
+          },
+          axisTick: {
+            show: false, //X轴刻度线隐藏
+          },
+          data: data.xData,
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            interval: 0, //X轴0强制显示所有标签，1，隔一个显示
+            textStyle: {
+              color: "#303133", //X轴字体颜色
+              fontSize: "12", //X轴字体大小
+            },
+          },
+          axisTick: {
+            show: false, //X轴刻度线隐藏
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dfe4ed", //y轴线颜色
+            },
+          },
+          // 网格线
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ["#dfe4ed"],
+              width: 1,
+              type: "dotted",
+            },
+          },
+        },
+        series: [
+          {
+            name: data.legend[0],
+            data: data.Values,
+            type: data.type[0],
+            symbolSize: 8,
+            barWidth: "10",
+            barGap: "20%",
+            itemStyle: {
+              normal: {
+                color: data.color[0],
+                lineStyle: {
+                  color: data.color[0],
+                },
+              },
+            },
+          }
+        ],
+      };
+      myChart.setOption(option);
+    };
+
+    return {
+      ...toRefs(state),
+      getEchart,
+      loadlineChart
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.echart-div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .top-title {
+    height: 10%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      border-left: 3px solid #5dcbed;
+      padding-left: 10px;
+    }
+  }
+
+  .echart {
+    height: 85%;
+    width: 100%;
+
+    #myChart {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/components/Bindex.vue

@@ -8,32 +8,32 @@
             <div class="one-card-content">
               <div>
                 <p>生物滞留区域面积</p>
-                <font class="font30">75</font>
+                <font class="value">75</font>
                 <font>㎡</font>
               </div>
               <div>
                 <p>滞留系统液位</p>
-                <font class="font30">323</font>
+                <font class="value">323</font>
                 <font>mm</font>
               </div>
               <div>
                 <p>渗透量</p>
-                <font class="font30">1356</font>
+                <font class="value">1356</font>
                 <font>m³</font>
               </div>
               <div>
                 <p>COD</p>
-                <font class="font30">19</font>
+                <font class="value">19</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>氨氮</p>
-                <font class="font30">8</font>
+                <font class="value">8</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>SS</p>
-                <font class="font30">9</font>
+                <font class="value">9</font>
                 <font>mg/L</font>
               </div>
             </div>
@@ -110,4 +110,9 @@
         }
       }
     }
+    .value {
+      font-size: 38px;
+      color: #1baeae;
+      font-weight: bold;
+    }
   </style>

src/components/Cindex.vue

@@ -8,42 +8,42 @@
             <div class="one-card-content">
               <div>
                 <p>地块面积</p>
-                <font class="font30">730</font>
+                <font class="value">730</font>
                 <font>㎡</font>
               </div>
               <div>
                 <p>地块调蓄容积</p>
-                <font class="font30">500</font>
+                <font class="value">500</font>
                 <font>m³</font>
               </div>
               <div>
                 <p>调蓄池液位</p>
-                <font class="font30">3.6</font>
+                <font class="value">3.6</font>
                 <font>m</font>
               </div>
               <div>
                 <p>溢流量</p>
-                <font class="font30"> 1.25</font>
+                <font class="value"> 1.25</font>
                 <font>L/s</font>
               </div>
               <div>
                 <p>COD</p>
-                <font class="font30">8</font>
+                <font class="value">8</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>氨氮</p>
-                <font class="font30">12.5</font>
+                <font class="value">12.5</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>SS</p>
-                <font class="font30">20.7</font>
+                <font class="value">20.7</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>地块剩余调蓄容积</p>
-                <font class="font30">316</font>
+                <font class="value">316</font>
                 <font>m³</font>
               </div>
             </div>
@@ -122,4 +122,9 @@
         }
       }
     }
+    .value {
+      font-size: 38px;
+      color: #1baeae;
+      font-weight: bold;
+    }
   </style>

src/components/Gindex.vue

@@ -8,42 +8,42 @@
             <div class="one-card-content">
               <div>
                 <p>径流系数</p>
-                <font class="font30">0.6</font>
+                <font class="value">0.6</font>
                 <font>-</font>
               </div>
               <div>
                 <p>蒸腾量</p>
-                <font class="font30">32</font>
+                <font class="value">32</font>
                 <font>%</font>
               </div>
               <div>
                 <p>COD</p>
-                <font class="font30">27</font>
+                <font class="value">27</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>氨氮</p>
-                <font class="font30">11</font>
+                <font class="value">11</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>Ss</p>
-                <font class="font30">6</font>
+                <font class="value">6</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>屋面温度 无绿化</p>
-                <font class="font30">23</font>
+                <font class="value">23</font>
                 <font>℃</font>
               </div>
               <div>
                 <p>屋面温度 有绿化</p>
-                <font class="font30">19</font>
+                <font class="value">19</font>
                 <font>℃</font>
               </div>
               <div>
                 <p>热岛减率</p>
-                <font class="font30">21</font>
+                <font class="value">21</font>
                 <font>%</font>
               </div>
             </div>
@@ -122,4 +122,9 @@
         }
       }
     }
+    .value {
+      font-size: 38px;
+      color: #1baeae;
+      font-weight: bold;
+    }
   </style>

src/components/Hindex.vue

@@ -171,4 +171,9 @@
         }
       }
     }
+    .value {
+      font-size: 38px;
+      color: #1baeae;
+      font-weight: bold;
+    }
   </style>

src/components/History1.vue

@@ -78,6 +78,12 @@ export default {
           legend: ["降水量"],
           color: ["#6fdbce"],
         },
+        {
+          id: "echart1",
+          title: "降水量-柱状图",
+          legend: ["降水量"],
+          color: ["#6fdbce"],
+        }
       ],
       fxOptions: [
         {

src/components/Sindex.vue

@@ -8,22 +8,22 @@
           <div class="one-card-content">
               <div>
                 <p>透水铺砖储水量</p>
-                <font class="font30">200</font>
+                <font class="value">200</font>
                 <font>m³</font>
               </div>
               <div>
                 <p>透水铺砖表面温度</p>
-                <font class="font30">16.5</font>
+                <font class="value">16.5</font>
                 <font>℃</font>
               </div>
               <div>
                 <p>热岛消减率</p>
-                <font class="font30">19.6</font>
+                <font class="value">19.6</font>
                 <font>%</font>
               </div>
               <div>
                 <p>孔隙率</p>
-                <font class="font30">10</font>
+                <font class="value">10</font>
                 <font>%</font>
               </div>
             </div>
@@ -34,32 +34,32 @@
             <div class="one-card-content">
               <div>
                 <p>透水铺装面积</p>
-                <font class="font30">500</font>
+                <font class="value">500</font>
                 <font>㎡</font>
               </div>
               <div>
                 <p>入渗系统面积</p>
-                <font class="font30">437</font>
+                <font class="value">437</font>
                 <font>㎡</font>
               </div>
               <div>
                 <p>透水系数</p>
-                <font class="font30">10</font>
+                <font class="value">10</font>
                 <font>mm/min</font>
               </div>
               <div>
                 <p>入渗系数</p>
-                <font class="font30">1.3</font>
+                <font class="value">1.3</font>
                 <font>mm/min</font>
               </div>
               <div>
                 <p>透水层厚度</p>
-                <font class="font30">300</font>
+                <font class="value">300</font>
                 <font>mm</font>
               </div>
               <div>
                 <p>渗透量</p>
-                <font class="font30">362</font>
+                <font class="value">362</font>
                 <font>m³</font>
               </div>
             </div>
@@ -172,4 +172,9 @@
         }
       }
     }
+    .value {
+      font-size: 38px;
+      color: #1baeae;
+      font-weight: bold;
+    }
   </style>

src/components/Windex.vue

@@ -8,32 +8,32 @@
             <div class="one-card-content">
               <div>
                 <p>降雨量</p>
-                <font class="font30">12</font>
+                <font class="value">12</font>
                 <font>mm/s</font>
               </div>
               <div>
                 <p>温度</p>
-                <font class="font30">23</font>
+                <font class="value">23</font>
                 <font>℃</font>
               </div>
               <div>
                 <p>空气湿度</p>
-                <font class="font30">22</font>
+                <font class="value">22</font>
                 <font>%</font>
               </div>
               <div>
                 <p>蒸发量</p>
-                <font class="font30">9</font>
+                <font class="value">9</font>
                 <font>mm</font>
               </div>
               <div>
                 <p>土壤湿度</p>
-                <font class="font30">56</font>
+                <font class="value">56</font>
                 <font>%</font>
               </div>
               <div>
                 <p>风速</p>
-                <font class="font30">3</font>
+                <font class="value">3</font>
                 <font>m/s</font>
               </div>
             </div>
@@ -110,4 +110,9 @@
         }
       }
     }
+    .value {
+      font-size: 38px;
+      color: #1baeae;
+      font-weight: bold;
+    }
   </style>

src/views/Biology.vue

@@ -17,7 +17,7 @@ import Menus from "@/components/Menus.vue";
 import Bindex from "@/components/Bindex.vue";
 import Zhibiao from "@/components/Zhibiao2.vue";
 import Analyse from "@/components/Ganalyse2.vue";
-import History from "@/components/History.vue";
+import History from "@/components/History2.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
   name: 'weather',

src/views/Chuxu.vue

@@ -15,9 +15,9 @@
 <script>
 import Menus from "@/components/Menus.vue";
 import Cindex from "@/components/Cindex.vue";
-import Zhibiao from "@/components/Zhibiao.vue";
+import Zhibiao from "@/components/Zhibiao4.vue";
 import Ganalyse from "@/components/Ganalyse4.vue";
-import History from "@/components/History.vue";
+import History from "@/components/History4.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
   name: 'weather',

src/views/Green.vue

@@ -17,7 +17,7 @@ import Menus from "@/components/Menus.vue";
 import Gindex from "@/components/Gindex.vue";
 import Zhibiao from "@/components/Zhibiao1.vue";
 import Ganalyse from "@/components/Ganalyse1.vue";
-import History from "@/components/History.vue";
+import History from "@/components/History1.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
   name: 'weather',

src/views/Shentou.vue

@@ -15,9 +15,9 @@
 <script>
 import Menus from "@/components/Menus.vue";
 import Sindex from "@/components/Sindex.vue";
-import Zhibiao from "@/components/Zhibiao.vue";
+import Zhibiao from "@/components/Zhibiao3.vue";
 import Analyse from "@/components/Ganalyse3.vue";
-import History from "@/components/History.vue";
+import History from "@/components/History3.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
   name: 'weather',

src/views/Weather.vue

@@ -17,7 +17,7 @@ import Menus from "@/components/Menus.vue";
 import Windex from "@/components/Windex.vue";
 import Report from "@/components/Report.vue";
 import Analyse from "@/components/Ganalyse5.vue";
-import History from "@/components/History.vue";
+import History from "@/components/History5.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
   name: 'weather',