设备在线率柱状图

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/onLineBarCharts/assets/barCharts.js

@@ -0,0 +1,162 @@
+/* 数据 */
+let nameList = [
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月",
+]; // 类别
+let valueList = [
+  800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903,
+]; // 人数
+// var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
+/* 数据整合 */
+let dataList = [];
+nameList.map((item, index) => {
+  if (index === 4) {
+    dataList.push({
+      name: item,
+      value: valueList[index],
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB904", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#FF6969", // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+        borderRadius: 6,
+      },
+      label: { show: false },
+    });
+  } else {
+    dataList.push({
+      name: item,
+      value: valueList[index],
+      itemStyle: {
+        borderRadius: 6,
+      },
+    });
+  }
+});
+
+var options = {
+  grid: {
+    top: "15%", //上边距
+    right: "5px", //右边距
+    left: "30px", //左边距
+    bottom: "2%", //下边距
+    containLabel: true,
+  },
+  tooltip: {
+    valueFormatter: function (value) {
+      return value + " %";
+    },
+  },
+  xAxis: {
+    type: "category",
+    data: nameList,
+    axisTick: {
+      show: false, //隐藏X轴刻度
+    },
+    axisLine: {
+      lineStyle: {
+        color: "rgba(49, 217, 255, 0.8)",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#fff",
+      fontSize: "10px",
+      fontFamily: "Source Han Sans CN-Regular",
+      interval: 0,
+      rotate: 20,
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "（%）",
+      splitNumber: 5,
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+        // fontFamily: "Source Han Sans CN-Regular",
+        // align: "left",
+        // verticalAlign: "center",
+      },
+      axisLabel: {
+        fontSize: "10px",
+        color: "#fff",
+        fontFamily: "HarmonyOS Sans-Regular",
+        // formatter:function(value,index){
+        //    return yList[index]
+        // }
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          color: "rgba(49, 217, 255, 0.5)",
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      type: "bar",
+      data: [10, 20, 10, 30, 25, 11, 20],
+      z: 4,
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#06D7B1", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#80F1BB", // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+        borderRadius: [4, 4, 0, 0],
+      },
+      barWidth: 10,
+      label: {
+        show: false,
+      },
+    },
+  ],
+};
+
+export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/onLineBarCharts/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="congestion">
+    <WgtTitle title="设备在线率柱状图"></WgtTitle>
+    <div class="board" ref="box">
+      <Empty v-if="isEmpty" text="暂无数据..."></Empty>
+      <div ref="barCharts" v-else style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WgtTitle from "../../../../perception/widgets/title";
+import * as echarts from "echarts";
+import chartOptions from "./assets/barCharts";
+
+export default {
+  name: "OnLineBarCharts",
+  components: {
+    WgtTitle,
+  },
+  data() {
+    return {
+      isEmpty: true,
+    };
+  },
+  props: {
+    dataList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  created() {},
+  methods: {},
+  watch: {
+    dataList: {
+      handler(newD, oldD) {
+        if (!newD || newD.length <= 0) {
+          this.isEmpty = true;
+          return;
+        }
+        let xData = [];
+        let valueData = [];
+        console.log("newD", newD);
+        newD.forEach((element) => {
+          xData.push(element.title);
+          valueData.push(+element.pctOnl.replace("%", ""));
+        });
+        // newD.forEach((element) => {
+        //   value.push(+element.pctOnl.replace("%", ""));
+        //   indicator.push({ name: element.title, max: 100 });
+        //   toolTip += `<div style="display:flex; justify-content:space-between; line-height:2;">
+        //                 <p>${element.title}</p>
+        //                 <p style="font-weight:bold; margin-left:30px">${element.pctOnl}</p>
+        //               </div>`;
+        // });
+        // chartsStatistics.radar.indicator = indicator;
+        // chartsStatistics.series[0].data = [
+        //   {
+        //     value: value,
+        //     name: "设备在线率",
+        //   },
+        // ];
+        // chartsStatistics.tooltip.formatter = (params) => {
+        //   return toolTip;
+        // };
+        this.isEmpty = false;
+        chartOptions.xAxis.data = xData;
+        chartOptions.series[0].data = valueData;
+        this.$nextTick(() => {
+          var myChart = echarts.init(this.$refs["barCharts"]);
+          myChart.setOption(chartOptions);
+          chartOptions.counterReset();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.congestion {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .board {
+    position: relative;
+    height: 510px;
+    width: 100%;
+    padding: 0px 20px;
+    background: linear-gradient(
+      180deg,
+      rgba(6, 66, 88, 0) 0%,
+      rgba(6, 66, 88, 0.4) 100%
+    );
+    // border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    // border: 1px solid;
+    // border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+
+    .ball {
+      position: absolute;
+    }
+
+    .ballAnimation {
+      transform: translate(0px, -10px);
+      animation: mymove 2s infinite ease-in-out alternate;
+
+      &.level_0 {
+        animation-delay: 0s;
+      }
+
+      &.level_1 {
+        animation-delay: 0.6s;
+      }
+
+      &.level_2 {
+        animation-delay: 1.4s;
+      }
+
+      &.level_3 {
+        animation-delay: 1.8s;
+      }
+    }
+  }
+}
+
+@keyframes mymove {
+  0% {
+    transform: translate(0px, -10px);
+  }
+
+  100% {
+    transform: translate(0px, 10px);
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

@@ -8,7 +8,8 @@
         ></DeviceSummary>
         <div class="bottomTabs">
           <DeviceUptime :dataList="equipments" class="tabs-lo" />
-          <MonthlyEquipment class="tabs-mo" :dataList="equipments" />
+          <OnLineBarCharts :dataList="equipments" class="tabs-mo" />
+          <!-- <MonthlyEquipment class="tabs-mo" :dataList="equipments" /> -->
         </div>
       </el-tab-pane>
       <el-tab-pane label="设备查询" name="second" class="tab_con">
@@ -117,7 +118,9 @@
 <script>
 import * as echarts from "echarts";
 import onlineCharts from "./assets/charts";
+// import barCharts from "./assets/barCharts";
 import DeviceUptime from "./components/deviceUptime";
+import OnLineBarCharts from "./components/onLineBarCharts";
 import MonthlyEquipment from "./components/monthlyEquipment";
 import DeviceSummary from "./components/deviceSummary";
 import {
@@ -141,6 +144,7 @@ export default {
     Pagination,
     InputSearch,
     DeviceSummary,
+    OnLineBarCharts,
   },
   data() {
     return {