From 8b1f3d596b18544fe302ef2700975e155feff051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Mon, 16 Dec 2024 09:31:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/board/index3.vue | 475 +++++++++++++++++++++++++++-
 1 file changed, 468 insertions(+), 7 deletions(-)

diff --git a/ruoyi-ui/src/views/board/index3.vue b/ruoyi-ui/src/views/board/index3.vue
index 837a297..adbd49f 100644
--- a/ruoyi-ui/src/views/board/index3.vue
+++ b/ruoyi-ui/src/views/board/index3.vue
@@ -54,7 +54,33 @@
         style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
       </div>
 
+      <Chart class="chart1" ref="chart1"></Chart>
+      <Chart class="chart2" ref="chart2"></Chart>
+      <Chart class="chart3" ref="chart3"></Chart>
+      <Chart class="chart4" ref="chart4"></Chart>
 
+      <div class="table">
+        <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: 100%"
+        >
+          <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+          >
+            <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+              <div class="scrollTableItem" style="color:#65c2f3;">
+                {{ item.value1 }}
+              </div>
+              <div class="scrollTableItem" style="color:#65c2f3;">
+                {{ item.value2 }}
+              </div>
+            </div>
+          </div>
+        </vue-seamless-scroll>
+      </div>
     </div>
   </div>
 </template>
@@ -62,12 +88,7 @@
 <script>
 import Chart from '@/components/Charts/Chart'
 import vueSeamlessScroll from 'vue-seamless-scroll'
-import {
-  baseMonitorInfoList,
-  countCabinet,
-  boardTempList,
-  selectLastTWTempertureData, recordBusbarAlarmCount
-} from "@/api/board/index2";
+import * as echarts from 'echarts'
 
 export default {
   data() {
@@ -86,7 +107,7 @@ export default {
         {
           name: '颗粒物柱状图',
           top: 69.6,
-          left: 30.8
+          left: 3
         },
         {
           name: '1#变压器测温',
@@ -114,6 +135,22 @@ export default {
           left: 68
         },
       ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+      },
+      scrollTableData: Array(5).fill('').map(function (i, k) {
+        return {
+          value1: 'ASDFGHJKL_1',
+          value2: '2222-22-22 22:22:22',
+        }
+      }),
     }
   },
   components: {
@@ -125,6 +162,387 @@ export default {
   },
   methods: {
     getData() {
+      this.$refs.chart1.setData({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            textStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "10%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: true,
+            },
+            splitArea: {
+              // show: true,
+              color: "#f00",
+              lineStyle: {
+                color: "#f00",
+              },
+            },
+            axisLabel: {
+              color: "#fff",
+            },
+            splitLine: {
+              show: false,
+            },
+            boundaryGap: false,
+            data: ["A", "B", "C", "D", "E", "F"],
+          },
+        ],
+
+        yAxis: [
+          {
+            type: "value",
+            min: 0,
+            // max: 140,
+            splitNumber: 4,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "rgba(255,255,255,0.1)",
+              },
+            },
+            axisLine: {
+              // show: false,
+            },
+            axisLabel: {
+              // show: false,
+              margin: 20,
+              textStyle: {
+                color: "#d1e6eb",
+              },
+            },
+            axisTick: {
+              // show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "注册总量",
+            type: "line",
+            showAllSymbol: true,
+            symbol: "circle",
+            symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: "#00ca95",
+                shadowColor: "rgba(0, 0, 0, .3)",
+                shadowBlur: 0,
+                shadowOffsetY: 5,
+                shadowOffsetX: 5,
+              },
+            },
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "#00ca95",
+              },
+            },
+
+            itemStyle: {
+              color: "#00ca95",
+              borderColor: "#fff",
+              borderWidth: 3,
+              shadowColor: "rgba(0, 0, 0, .3)",
+              shadowBlur: 0,
+              shadowOffsetY: 2,
+              shadowOffsetX: 2,
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,202,149,0.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,202,149,0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,202,149, 0.9)",
+                shadowBlur: 20,
+              },
+            },
+            data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
+          },
+        ],
+      })
+      this.$refs.chart2.setData({
+        series: [
+          {
+            title: {
+              show: false,
+            },
+            name: "",
+            type: "gauge",
+            min: 0,
+            max: 100,
+            splitNumber: 10,
+            startAngle: 180,
+            endAngle: 0,
+            center: ["50%", '95%'],
+            radius: '180%',
+            axisLabel: {
+              distance: 0,
+              fontFamily: "Microsoft YaHei UI",
+              fontSize: 16,
+              fontWeight: "normal",
+              fontStyle: "normal",
+              color: "#FFFFFF",
+            },
+            axisLine: {
+              lineStyle: {
+                width: 2,
+                color: '#2776e3',
+              },
+            },
+            pointer: {
+              length:'50%',
+              show: true,
+            },
+            itemStyle: {
+              normal: {
+                color: '#2776e3',
+              },
+            },
+            axisTick: {
+              length: 16,
+              lineStyle: {
+                width: 4,
+                color: '#2776e3',
+              },
+            },
+            splitLine: {
+              length: 32,
+              lineStyle: {
+                width: 4,
+                color: '#2776e3',
+              },
+            },
+            detail: {
+              show: false,
+            },
+            data: [
+              {
+                value: 66,
+                name: "半圆仪表_0",
+              },
+            ],
+          },
+        ],
+      })
+      this.$refs.chart3.setData({
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "none",
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            position: "bottom",
+            data: ["1#", "2#", "3#"],
+            boundaryGap: true,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            axisLabel: {
+              color: "#fff",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            show: true,
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              color: "#fff",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "数量",
+            type: "pictorialBar",
+            barCategoryGap: "50%",
+            symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
+            data: [
+              {
+                name: "1#",
+                value: 10,
+              },
+              {
+                name: "2#",
+                value: 6,
+              },
+              {
+                name: "3#",
+                value: 5,
+              },
+            ],
+          },
+        ],
+      })
+      this.$refs.chart4.setData({
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "2%",
+          top: "2%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "none",
+          },
+          formatter: function (params) {
+            return params[0].name + " : " + params[0].value;
+          },
+        },
+        xAxis: {
+          show: true,
+          type: "value",
+          axisLine:{
+            show: true,
+          },
+          axisTick:{
+            show: false,
+          },
+          axisLabel:{
+            show: true,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine:{
+            show: false,
+          }
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: [1,2,3,4,5],
+          },
+          {
+            type: "category",
+            inverse: true,
+            axisTick: "none",
+            axisLine: "none",
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: "#ffffff",
+                fontSize: "12",
+              },
+            },
+            data: [1,2,3,4,5],
+          },
+        ],
+        series: [
+          {
+            name: "值",
+            type: "bar",
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 0,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "rgb(57,89,255,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgb(46,200,207,1)",
+                  },
+                ]),
+              },
+            },
+            barWidth: 20,
+            data: [1,2,3,4,5],
+          },
+          {
+            name: "背景",
+            type: "bar",
+            barWidth: 20,
+            barGap: "-100%",
+            data: [5,5,5,5,5],
+            itemStyle: {
+              normal: {
+                color: "rgba(24,31,68,1)",
+                barBorderRadius: 0,
+              },
+            },
+          },
+        ],
+      })
     }
   }
 }
@@ -185,4 +603,47 @@ export default {
   font-size: 0.9vw;
   letter-spacing: 1px;
 }
+.chart1{
+  position: absolute;
+  top: 15.4%;
+  left: 2.2%;
+  width: 30.8%;
+  height: 20.2%;
+}
+.chart2{
+  position: absolute;
+  top: 44.6%;
+  left: 2.2%;
+  width: 30.8%;
+  height: 20.2%;
+}
+.chart3{
+  position: absolute;
+  top: 74%;
+  left: 2.2%;
+  width: 30.8%;
+  height: 20.2%;
+}
+.chart4{
+  position: absolute;
+  top: 15.4%;
+  left: 67.1%;
+  width: 30.8%;
+  height: 34.8%;
+}
+.table {
+  position: absolute;
+  top: 59.4%;
+  left: 67.1%;
+  width: 30.8%;
+  height: 34.8%;
+  overflow: hidden;
+}
+.scrollTableItem {
+  display: inline-block;
+  width: 50%;
+  text-align: center;
+  padding: 14px 0;
+  color: #4e99c5
+}
 </style>