update

2024-11-12 17:01:40 +08:00 · 2024-11-12 17:01:40 +08:00 · 5a45cbf558
commit 5a45cbf558
parent e03f9e5178
5 changed files with 167 additions and 144 deletions
--- a/package.json
+++ b/package.json
@ -19,9 +19,9 @@
    "@vueup/vue-quill": "1.1.0",
    "@vueuse/core": "9.5.0",
    "axios": "0.27.2",
-    "echarts": "5.4.0",
+    "echarts": "^5.5.1",
    "element-plus": "2.2.27",
-    "file-saver": "2.0.5",
+    "file-saver": "^2.0.5",
    "fuse.js": "6.6.2",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.3.1",
@ -30,6 +30,7 @@
    "three": "^0.169.0",
    "vue": "3.2.45",
    "vue-cropper": "1.0.3",
+    "vue-echarts": "^7.0.3",
    "vue-router": "4.1.4"
  },
  "devDependencies": {
--- a/src/main.js
+++ b/src/main.js
@ -20,14 +20,15 @@ import {
  CanvasRenderer
 } from 'echarts/renderers'
 import {
-  PieChart,LineChart,BarChart,CustomChart,GaugeChart
+  PieChart,LineChart,BarChart,CustomChart,GaugeChart,PictorialBarChart
 } from 'echarts/charts'
 import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
-  ToolboxComponent 
+  ToolboxComponent,
+  MarkLineComponent
 } from 'echarts/components'
 echarts.use([
  CanvasRenderer,
@ -36,11 +37,13 @@ echarts.use([
  LegendComponent,
  GridComponent,
  ToolboxComponent,
+  MarkLineComponent,
  PieChart,
  LineChart,
  BarChart,
  CustomChart,
-  GaugeChart
+  GaugeChart,
+  PictorialBarChart
 ]);


--- a/src/views/screen/R_D_Environment/component/lineChart.vue
+++ b/src/views/screen/R_D_Environment/component/lineChart.vue
@ -1,60 +1,61 @@
 <template>
-    <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
+  <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
 </template>

 <script setup>
 import { computed } from 'vue';
 const prop = defineProps({
-    data: {
-        type: Object,
-        default: () => {
-            return {};
-        }
+  data: {
+    type: Object,
+    default: () => {
+      return {};
    }
+  }
 });

 const options = computed(() => {
-    return {
-  tooltip: {
-    trigger: "axis",
-    formatter: function (params) {
-      let tooltipText = '';
-      let xAxisValue = params[0].name; // 获取 x 轴的值
-      params.forEach((item) => {
-        tooltipText += `${item.marker}${item.seriesName}: ${item.value} kWh<br>`;
-      });
-      return `${xAxisValue}<br>${tooltipText}`;
-    }
-  },
-  xAxis: {
-    type: 'category',
-    data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
-  },
-  yAxis: {
-    type: 'value',
-  },
-  series: [
-    {
-      name: "耗电量",
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: 'line',
-      smooth: true,
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: 'rgba(0, 198, 255, 0.5)' },
-            { offset: 1, color: 'rgba(0, 114, 255, 0.01)' }
-          ]
-        }
-      },
-    }
-  ]
-};
+  return {
+    tooltip: {
+      trigger: "axis",
+      formatter: function (params) {
+        let tooltipText = '';
+        let xAxisValue = params[0].name; // 获取 x 轴的值
+        params.forEach((item) => {
+          tooltipText += `${item.marker}${item.seriesName}: ${item.value} kWh<br>`;
+        });
+        return `${xAxisValue}<br>${tooltipText}`;
+      }
+    },
+    backgroundColor: 'transparent',
+    xAxis: {
+      type: 'category',
+      data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        name: "耗电量",
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        smooth: true,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(0, 198, 255, 0.5)' },
+              { offset: 1, color: 'rgba(0, 114, 255, 0.01)' }
+            ]
+          }
+        },
+      }
+    ]
+  };
 });
 </script>

--- a/src/views/screen/R_D_Environment/component/proge.vue
+++ b/src/views/screen/R_D_Environment/component/proge.vue
@ -1,101 +1,113 @@
 <template>
-  <div class=""></div>
+  <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
 </template>

 <script setup>
+import { computed } from 'vue';
+
+const prop = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        xData: ['办公室1', '办公室2', '办公室3', '办公室4', '办公室5', '办公室6'],
+        seriesData: [80, 60, 60, 60, 60, 60]
+      };
+    }
+  }
+});

 const bodyMax = 150;
-const labelSetting = {
-  show: true,
-  position: 'top',
-  offset: [0, -20],
-  formatter: function (param) {
-    return ((param.value / bodyMax) * 100).toFixed(0) + '%';
-  },
-  fontSize: 18,
-  fontFamily: 'Arial'
-};
-const markLineSetting = {
-  symbol: 'none',
-  lineStyle: {
-    opacity: 0.3
-  },
-  data: [
-    {
-      type: 'max',
-      label: {
-        formatter: 'max: {c}'
-      }
-    },
-    {
-      type: 'min',
-      label: {
-        formatter: 'min: {c}'
-      }
-    }
-  ]
-};
-option = {
-  tooltip: {
-  },
-  xAxis: {
-    data: ['a', 'b'],
-    axisTick: { show: false },
-    axisLine: { show: false },
-    axisLabel: { show: false }
-  },
-  yAxis: {
-    max: bodyMax,
-    offset: 20,
-    splitLine: { show: false },
-  },
-  grid: {
-    top: 'center',
-    height: 230
-  },
-  markLine: {
-    z: -100
-  },
-  series: [
-    {
-      name: 'typeA',
-      type: 'pictorialBar',
-      symbolClip: true,
-      symbolBoundingData: bodyMax,
-      symbolRepeat: true, //图形是否重复
-      symbolSize: [25, 6], //图形元素的尺寸
-      data: [
-        {
-          value: 80,
-        },
-        {
-          value: 60,
-        }
-      ],
-      z: 10
-    },
-    {
-      name: 'full',
-      type: 'pictorialBar',
-      symbolBoundingData: bodyMax,
-      label: labelSetting,
-      animationDuration: 0,
-      symbolRepeat: true, //图形是否重复
-      symbolSize: [25, 6], //图形元素的尺寸
-      itemStyle: {
-        color: '#ccc'
-      },
-      data: [
-        {
-          value: 100,
-        }, {
-          value: 100,
-        }

-      ]
-    }
-  ]
-};
+
+
+const options = computed(() => {
+
+  const labelSetting = {
+    show: true,
+    position: 'top',
+    offset: [0, -20],
+    formatter: function (param) {
+      console.log(param.data, 'param', param.dataIndex);
+
+      return prop.data.xData[param.dataIndex] + '\r\n' + prop.data.seriesData[param.dataIndex] + 'dB';
+    },
+    fontSize: 14,
+    fontFamily: 'Arial',
+    color: '#33FFFF'
+  };
+  return {
+    tooltip: {
+    },
+    backgroundColor: 'transparent',
+    xAxis: {
+      data: prop.data.xData,
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { show: false }
+    },
+    yAxis: {
+      show: false,
+      max: bodyMax,
+      offset: 20,
+      splitLine: { show: false },
+    },
+    grid: {
+      top: 'center',
+      height: 230
+    },
+    markLine: {
+      z: -100
+    },
+    series: [
+      {
+        name: 'typeA',
+        type: 'pictorialBar',
+        symbolClip: true,
+        symbolBoundingData: bodyMax,
+        symbolRepeat: true, //图形是否重复
+        symbolSize: [25, 6], //图形元素的尺寸
+        itemStyle: {
+          color: '#33FFFF'
+        },
+        data: prop.data.seriesData.map((item) => {
+          return {
+            value: item
+          };
+        }),
+        z: 10
+      },
+      {
+        name: 'full',
+        type: 'pictorialBar',
+        symbolBoundingData: bodyMax,
+        label: labelSetting,
+        animationDuration: 0,
+        symbolRepeat: true, //图形是否重复
+        symbolSize: [25, 6], //图形元素的尺寸
+        itemStyle: {
+          color: '#ccc'
+        },
+        data: [
+          {
+            value: 100,
+          }, {
+            value: 100,
+          }, {
+            value: 100,
+          }, {
+            value: 100,
+          }, {
+            value: 100,
+          }, {
+            value: 100,
+          }
+
+        ]
+      }
+    ]
+  }
+})
 </script>

 <style lang="scss" scoped></style>
--- a/src/views/screen/R_D_Environment/index.vue
+++ b/src/views/screen/R_D_Environment/index.vue
@ -23,6 +23,8 @@
        <div class="sensor-item" v-for="item in sensor_list">
          <!-- <svg-icon ref="fenchen" icon-class="fenchen" :color="'#469DE9'" class="sensor-icon" /> -->
          <component  style="width: 75px;height: 75px;margin-top: 10px;" color="#469DE9" :is="item.component" :value="item.value" :unit="item.unit" />
+          <div style="margin: 10px 0;color: #A8EFC0;">{{ item.value + item.unit }}</div>
+          <div>{{ item.name }}</div>
        </div>
      </div>

@ -47,6 +49,7 @@
      </div>
      <div class="rbox-item">
        <ItemVue title="温湿度" pos="right">
+          <ProgeChart />
        </ItemVue>
      </div>
      <div class="rbox-item">
@ -55,7 +58,7 @@
      </div>
    </div>
    
-    <ThreeBG />
+    <!-- <ThreeBG /> -->
  </div>
 </template>

@ -66,6 +69,7 @@ import ItemVue from './component/item.vue';
 import Humiture from './component/humiture_line.vue';
 import PmVue from './component/pm.vue';
 import LineChart from './component/lineChart.vue';
+import ProgeChart from './component/proge.vue';
 import SvgFenchen from './component/svgFenchen.vue';
 import SvgJiaquan from './component/svgJiaquan.vue';
 import SvgZaosheng from './component/svgZaosheng.vue';
@ -189,6 +193,8 @@ onMounted(() => {
        display: flex;
        flex-direction: column;
        align-items: center;
+        font-size: 14px;
+        color: #fff;
        .sensor-icon {
          width: 75px;
          height: 75px;