From 718cbdcf67440cf5190213c9f099be3fd6e9a946 Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Mon, 1 Apr 2024 16:32:15 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B0=94=E8=B1=A1=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JiHeExpressway/components/Card1/index.vue |  56 ++--
 .../components/ModifyDutyInformationTable.vue |  11 +-
 .../event/event/EventDetailDialog/index.vue   |   2 +-
 .../components/railwayDay/assets/charts.js    |   2 +-
 .../TemperatureTrend/assets/charts.js         |   5 +-
 .../components/TemperatureTrend/index.vue     | 157 +++++----
 .../visibilityTrends/assets/charts.js         |   5 +-
 .../components/visibilityTrends/index.vue     | 152 +++++----
 .../components/weaterData/index.vue           | 297 +++++++++---------
 .../components/weatherInfoQuery/index.vue     |  64 +++-
 10 files changed, 419 insertions(+), 332 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue
index d8b9148d..f218b3fc 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue
@@ -1,32 +1,34 @@
 <template>
-  <BorderRadiusImage
-    class="Card"
-    borderRadius="2px"
-    borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))"
-    borderWidth="2px"
-  >
-    <div class="info" :style="{ gap }">
-      <p v-for="(item, index) in keyMap" :key="index">
-        <span>{{ item.label }}: </span>
-        <span>
-          <slot :name="`form-${item.key}`" :data="cardData">
-            {{ getValue(item.key) }}{{ item.suffix }}
-          </slot>
-        </span>
-      </p>
-    </div>
+  <div @click="onClick">
+    <BorderRadiusImage
+      class="Card"
+      borderRadius="2px"
+      borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))"
+      borderWidth="2px"
+    >
+      <div class="info" :style="{ gap }">
+        <p v-for="(item, index) in keyMap" :key="index">
+          <span>{{ item.label }}: </span>
+          <span>
+            <slot :name="`form-${item.key}`" :data="cardData">
+              {{ getValue(item.key) }}{{ item.suffix }}
+            </slot>
+          </span>
+        </p>
+      </div>
 
-    <div class="bottom" v-if="hasBtn">
-      <slot name="button">
-        <Button>
-          {{ buttonText }}
-        </Button>
-      </slot>
-    </div>
-    <!-- <div class="status" :style="{ background: 'linear-gradient(123deg, #00B3CC 0%, rgba(0, 179, 204, 0) 100%)' }">
+      <div class="bottom" v-if="hasBtn">
+        <slot name="button">
+          <Button>
+            {{ buttonText }}
+          </Button>
+        </slot>
+      </div>
+      <!-- <div class="status" :style="{ background: 'linear-gradient(123deg, #00B3CC 0%, rgba(0, 179, 204, 0) 100%)' }">
       <span class="text">正常</span>
     </div> -->
-  </BorderRadiusImage>
+    </BorderRadiusImage>
+  </div>
 </template>
 
 <script>
@@ -107,6 +109,10 @@ export default {
     getValue(key) {
       return pathGet(this.cardData, key) ?? "-";
     },
+
+    onClick() {
+      this.$emit("click", this.data);
+    },
   },
 };
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
index 332f538e..574ba73f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
@@ -32,7 +32,7 @@
               <p
                 v-for="(item, index) in dayShift"
                 :key="`${item.id}_${index}`"
-                @click="removeDutyPerson(item,'dayShift')"
+                @click="removeDutyPerson(item, 'dayShift')"
               >
                 {{ item.name }}
               </p>
@@ -46,7 +46,7 @@
               <p
                 v-for="(item, index) in graveyardShift"
                 :key="`${index}_${item.id}`"
-                @click="removeDutyPerson(item,'graveyardShift')"
+                @click="removeDutyPerson(item, 'graveyardShift')"
               >
                 {{ item.name }}
               </p>
@@ -139,7 +139,7 @@ export default {
       },
       set(bool) {
         //关闭弹窗组件,清空数据
-        if(!bool) {
+        if (!bool) {
           this.dayShift = [];
           this.graveyardShift = [];
           this.peopleList = [];
@@ -184,7 +184,7 @@ export default {
       this[this.active].push(item);
     },
     removeDutyPerson(item, activeCheck) {
-      if(activeCheck != this.active) return;
+      if (activeCheck != this.active) return;
 
       const index = this[this.active].findIndex(
         (_item) => _item.id === item.id
@@ -393,7 +393,8 @@ export default {
 <style lang="scss" scoped>
 .ModifyDutyInformationTable {
   width: 947px;
-  height: 658px;
+  // height: 658px;
+  height: 570px;
   color: #fff;
   display: flex;
   flex-direction: column;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
index bf7c63bf..0fa76476 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="事件详情" width="880px" top="15%">
+  <Dialog v-model="modelVisible" title="事件详情" width="890px" top="15%">
     <div
       class="EventDetail"
       :style="{
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
index ce5a0d1c..f53f1dee 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
@@ -58,7 +58,7 @@ var options = {
   grid: {
     top: "15%", //上边距
     right: "0", //右边距
-    left: "15px", //左边距
+    left: "30px", //左边距
     bottom: "0%", //下边距
     containLabel: true,
   },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
index 16c8f473..116b6d41 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
@@ -108,10 +108,7 @@ var options = {
       showSymbol: false,
       smooth: true, // 是否曲线
       name: "实时数据", // 图例对应类别
-      data: [
-        12, 12, 23, 23, 30, 12, 26, 28, 31, 23, 25, 12, 18, 18, 18, 18, 23, 21,
-        20, 20, 20, 20, 20, 22, 22, 12, 12, 12,
-      ], // 纵坐标数据
+      data: [], // 纵坐标数据
       lineStyle: {
         color: "#FFD15C",
       },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
index 3da60804..f3c1a32b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
@@ -1,75 +1,98 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'气温变化趋势'"></WgtTitle>
-      <div class="board">
-        <div class="charts" id="temperatureTrend"></div>
-       </div>
+  <div class="congestion">
+    <WgtTitle :title="'气温变化趋势'"></WgtTitle>
+    <div class="board">
+      <div class="charts" id="temperatureTrend"></div>
     </div>
-  </template>
-  
-  <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
-  import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  export default {
-    name: 'temperatureTrend',
-    components: {
-      WgtTitle
+  </div>
+</template>
+
+<script>
+import WgtTitle from "../../../../../widgets/title";
+import * as echarts from "echarts";
+import temperatureCharts from "./assets/charts";
+import {
+  getListLatest,
+  getDeviceNameListLatest,
+  getIdDevices,
+} from "@/api/perception/meteorologyCheck";
+export default {
+  name: "temperatureTrend",
+  components: {
+    WgtTitle,
+  },
+  props: {
+    data: {
+      type: Array,
     },
-    data() {
-      return {
-        myChart:null,
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-      reiszeChart(){
-        this.$nextTick(() => {
-          if ( this.myChart ) {
-            this.myChart.resize();
-          }
+  },
+  watch: {
+    data: {
+      handler(data) {
+        let newData = [];
+        data.forEach((item) => {
+          newData.push(item.avgVisibility);
         });
-      }
-    },
-    update(){
-     
+        temperatureCharts.series[0].data = newData;
+        this.myChart.setOption(temperatureCharts);
+      },
+      deep: true,
     },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('temperatureTrend'));
-          this.myChart.setOption(chartsStatistics);
-        });
+  },
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+
+  created() {},
+  methods: {
+    reiszeChart() {
+      this.$nextTick(() => {
+        if (this.myChart) {
+          this.myChart.resize();
+        }
       });
     },
+  },
+  update() {},
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        this.myChart = echarts.init(
+          document.getElementById("temperatureTrend")
+        );
+        this.myChart.setOption(temperatureCharts);
+      });
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.congestion {
+  display: flex;
+  flex-direction: column;
+  .board {
+    flex: 1;
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 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;
   }
-  </script>
-  
-  <style lang='scss' scoped>
-  .congestion {
-    display: flex; flex-direction: column;
-    .board{
-      flex: 1;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 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;
-     
-    }
-  }
-      .charts {
-        height:200px;
-        width: 100%;
-      }
-  
-  </style>
-  
\ No newline at end of file
+}
+.charts {
+  height: 200px;
+  width: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
index f44f97da..2e6bf6dd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
@@ -107,10 +107,7 @@ var options = {
       showSymbol: false,
       smooth: true, // 是否曲线
       name: "实时数据", // 图例对应类别
-      data: [
-        12, 12, 23, 23, 30, 12, 26, 28, 31, 23, 25, 12, 18, 18, 18, 18, 23, 21,
-        20, 20, 20, 20, 20, 22, 22, 12, 12, 12,
-      ], // 纵坐标数据
+      data: [], // 纵坐标数据
       lineStyle: {
         color: "#0783FA",
       },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
index c7c0cd00..15769caa 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
@@ -1,74 +1,94 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'能见度变化趋势'"></WgtTitle>
-      <div class="board">
-        <div class="charts" id="VisibilityTrends"></div>
-       </div>
+  <div class="congestion">
+    <WgtTitle :title="'能见度变化趋势'"></WgtTitle>
+    <div class="board">
+      <div class="charts" id="VisibilityTrends"></div>
     </div>
-  </template>
-  
-  <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
-  import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  export default {
-    name: 'VisibilityTrends',
-    components: {
-      WgtTitle
+  </div>
+</template>
+
+<script>
+import WgtTitle from "../../../../../widgets/title";
+import * as echarts from "echarts";
+import visibilityCharts from "./assets/charts";
+export default {
+  name: "VisibilityTrends",
+  components: {
+    WgtTitle,
+  },
+  props: {
+    data: {
+      type: Array,
     },
-    data() {
-      return {
-        myChart:null,
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-      reiszeChart(){
-    
-        this.$nextTick(() => {
-          if ( this.myChart ) {
-            this.myChart.resize();
-          }
+  },
+  watch: {
+    data: {
+      handler(data) {
+        let newData = [];
+        data.forEach((item) => {
+          newData.push(item.avgTemperature);
         });
-      }
-    },
-    update(){
-      
+        visibilityCharts.series[0].data = newData;
+        this.myChart.setOption(visibilityCharts);
+      },
+      deep: true,
     },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('VisibilityTrends'));
-          this.myChart.setOption(chartsStatistics);
-        });
+  },
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+
+  created() {},
+  methods: {
+    reiszeChart() {
+      this.$nextTick(() => {
+        if (this.myChart) {
+          this.myChart.resize();
+        }
       });
     },
+  },
+  update() {},
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        this.myChart = echarts.init(
+          document.getElementById("VisibilityTrends")
+        );
+        this.myChart.setOption(visibilityCharts);
+      });
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.congestion {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  .board {
+    flex: 1;
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 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;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
   }
-  </script>
-  
-  <style lang='scss' scoped>
-  .congestion {
-  display: flex; flex-direction: column; align-items: stretch;
-    .board{
-      flex: 1;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 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; flex-direction: column;
-      justify-content: center;
-      align-items: stretch; 
-    }
-  }
-      .charts {
-        height:200px;
-      }
-  
-  </style>
-  
\ No newline at end of file
+}
+.charts {
+  height: 200px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
index 872f3130..4a61f985 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
@@ -1,156 +1,167 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'气象监测数据'"></WgtTitle>
-      <div class="board">
-        <div class="showRoad">
-            <div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" >
-                <span class="label" >{{ it.text }}</span>
-                <span class="text" >{{ it.value }}</span>
-            </div>
+  <div class="congestion">
+    <WgtTitle :title="'气象监测数据'"></WgtTitle>
+    <div class="board">
+      <div class="showRoad">
+        <div class="item">
+          <span class="label">温度：</span>
+          <span class="text">{{
+            data.temperature ? data.temperature + "℃" : "-"
+          }}</span>
         </div>
-       </div>
+        <div class="item">
+          <span class="label">湿度：</span>
+          <span class="text">{{
+            data.humidity ? data.humidity + "mm" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">风向：</span>
+          <span class="text">{{
+            data.windDirection ? data.windDirection + "°" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">风速：</span>
+          <span class="text">{{
+            data.windSpeed ? data.windSpeed + "级" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">能见度：</span>
+          <span class="text">{{
+            data.visibilityType ? data.visibilityType + "级" : "-"
+          }}</span>
+        </div>
+        <!-- <div class="item">
+          <span class="label">能见度类型：</span>
+          <span class="text">{{ data.visibilityType }}</span>
+        </div> -->
+        <!-- <div class="item">
+          <span class="label">降雨类型：</span>
+          <span class="text">{{
+            data.recipitationType ? data.recipitationType : "-"
+          }}</span>
+        </div> -->
+        <div class="item">
+          <span class="label">降雨量：</span>
+          <span class="text">{{
+            data.rainfall ? data.rainfall + "mm" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">路面温度：</span>
+          <span class="text">{{
+            data.remoteRoadSurfaceTemperature
+              ? data.remoteRoadSurfaceTemperature + "℃"
+              : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label"> 气压：</span>
+          <span class="text">{{
+            data.atmosphericPressure ? data.atmosphericPressure + "Pa" : "-"
+          }}</span>
+        </div>
+      </div>
     </div>
-  </template>
-  
-  <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
- 
-  export default {
-    name: 'MonthStatistics',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-        myChart:null,
-        dataList:[
-            {
-                text:"天气状态：",
-                value:"无降水",
-                class:"km"
-            },
-            {
-                text:"风速：",
-                value:"55m/s",
-                class:"km"
-            },
-            {
-                text:"天气温度：",
-                value:"23°C",
-                class:"km"
-            },
-            {
-                text:"风向：",
-                value:"东南风",
-                class:"km"
-            },
-            {
-                text:"路面温度：",
-                value:"23°C",
-                class:"km"
-            }, {
-                text:"风级：",
-                value:"2级",
-                class:"km"
-            }, {
-                text:"空气湿度：",
-                value:"79.40%",
-                class:"km"
-            }, {
-                text:"道路危险等级：",
-                value:"0级",
-                class:"km"
-            }, {
-                text:"能见度：",
-                value:"2610.00m",
-                class:"km"
-            }, {
-                text:"能见度：",
-                value:"0.00m",
-                class:"km"
-            }, {
-                text:"能见度：",
-                value:"0.00m",
-                class:"km"
-            }, {
-                text:"能见度：",
-                value:"0.00m",
-                class:"km"
-            }
-        ]
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-     
+  </div>
+</template>
+
+<script>
+import WgtTitle from "../../../../../widgets/title";
+
+export default {
+  name: "MonthStatistics",
+  components: {
+    WgtTitle,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
     },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-         
-        });
-      });
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        console.log(newVal);
+      },
+      deep: true,
     },
-  }
-  </script>
-  
-  <style lang='scss' scoped>
-  .congestion {
-    width: 100%; display: flex;
-    .board{
-      flex: 1;
-      width: 100%;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 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: row;
-      overflow: auto;
+  },
+  data() {
+    return {
+      myChart: null,
+      dataList: [],
+    };
+  },
+  created() {},
+  methods: {},
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {});
+    });
+  },
+};
+</script>
 
-      .showRoad {
-        display: flex;
-        flex-wrap: wrap;
+<style lang="scss" scoped>
+.congestion {
+  width: 100%;
+  display: flex;
+  .board {
+    flex: 1;
+    width: 100%;
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 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: row;
+    overflow: auto;
 
-        > .item {
-            display: inline-flex;
-            width:50%;
-            height:23px;
-            margin-top:12px;
-            flex-direction: row;
+    .showRoad {
+      display: flex;
+      flex-wrap: wrap;
 
-            > span.label {
-               width:50%;
-               height:25px;
-               font-size: 12px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 400;
-                color: #00B3CC;
-            }
+      > .item {
+        display: inline-flex;
+        width: 50%;
+        height: 23px;
+        margin-top: 12px;
+        flex-direction: row;
 
-            >span.text {
-                font-size: 14px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF; 
-            }
+        > span.label {
+          width: 50%;
+          height: 25px;
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #00b3cc;
         }
-      }
 
+        > span.text {
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
     }
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
-  
\ No newline at end of file
+}
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue
index 469ff15c..a0c27b3c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue
@@ -2,24 +2,40 @@
   <div class="congestion">
     <div class="queryList">
       <Card
-        v-for="(item, index) in data"
+        v-for="(item, index) in dataList"
         :cardData="item"
         :keyMap="keyMap"
         :hasBtn="false"
         :gap="'10px'"
         :key="index"
+        @click="handleClick(item)"
       >
-        <!-- <template #form-start="{ data }">
+        <template #form-direction="{ data }">
           <div class="endSpecial">
-            {{ data.start }} <img src="./assets/weater.png" />
+            {{
+              data.direction == 1
+                ? "菏泽方向"
+                : data.direction == 2
+                ? "双向"
+                : "济南方向"
+            }}
           </div>
-        </template> -->
+        </template>
+        <template #form-deviceState="{ data }">
+          <div class="endSpecial">
+            {{ data.deviceState == 1 ? "在线" : "离线" }}
+          </div>
+        </template>
       </Card>
     </div>
     <div class="queryCharts">
-      <WeateData class="charts-l" />
-      <TemperatureTrend ref="temper" class="charts-ms" />
-      <VisibilityTrends ref="visibility" class="charts-ms" />
+      <WeateData class="charts-l" :data="dataItem" />
+      <TemperatureTrend ref="temper" class="charts-ms" :data="weatherData" />
+      <VisibilityTrends
+        ref="visibility"
+        class="charts-ms"
+        :data="weatherData"
+      />
     </div>
   </div>
 </template>
@@ -48,27 +64,30 @@ export default {
       keyMap: [
         {
           label: "设备名称",
-          key: "name",
+          key: "deviceName",
         },
         {
           label: "设备位置",
-          key: "name",
+          key: "stakeMark",
         },
         {
           label: "所属方向",
-          key: "rote",
+          key: "direction",
         },
         {
           label: "采集时间",
-          key: "time",
+          key: "createTime",
         },
         {
-          label: "气象状态",
-          key: "start",
+          label: "设备状态",
+          key: "deviceState",
         },
       ],
+      deviceName: "",
       selectIndex: 0,
       dataList: [],
+      dataItem: {},
+      weatherData: [],
       data: Array.from({ length: 10 }).map(() => ({
         name: "气象监测器1",
         rote: "济南方向",
@@ -85,15 +104,27 @@ export default {
       this.selectIndex = index;
     },
     resizeChart() {
-      //  console.log(this.$refs.temper);
       this.$refs.temper.reiszeChart();
       this.$refs.visibility.reiszeChart();
     },
     getList() {
       getListLatest().then((res) => {
-        console.log("_____________", res);
+        this.dataList = res.rows;
+        this.dataItem = res.rows[0];
+        this.deviceName = res.rows[0].deviceName;
+        this.getWeather();
       });
     },
+    getWeather() {
+      getDeviceNameListLatest(this.deviceName).then((res) => {
+        this.weatherData = res.rows;
+      });
+    },
+    handleClick(item) {
+      this.dataItem = item;
+      this.deviceName = item.deviceName;
+      this.getWeather();
+    },
   },
   mounted() {
     this.getList();
@@ -104,7 +135,7 @@ export default {
 <style lang="scss" scoped>
 .endSpecial {
   position: relative;
-  top: -10px;
+  // top: -10px;
 
   > img {
     display: inline-flex;
@@ -147,6 +178,7 @@ export default {
       height: 203px;
       margin-top: 10px;
       margin-left: 20px;
+      cursor: pointer;
     }
 
     > div:nth-child(5n + 1) {

From 22b2af35411d506c9b56961ca5507a556854de9b Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Mon, 1 Apr 2024 17:50:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/styles/JiHeExpressway.scss     |   2 +-
 ruoyi-ui/src/common/menuData.js               |   6 +
 .../components/BroadcastReleases.vue          |   2 +-
 .../Camera/components/CameraControlDialog.vue |   2 +-
 .../Dialogs/CongestedRoadSections/index.vue   |   2 +-
 .../components/DeviceControlDialog.vue        |   2 +-
 .../Dialogs/GuardrailCollision/index.vue      |   2 +-
 .../Dialogs/HighwayDetails/index.vue          |   2 +-
 .../Dialogs/Intermodulation/index.vue         |   2 +-
 .../components/DeviceControlDialog.vue        |   2 +-
 .../components/Dialogs/SmartDevice/index.vue  |   2 +-
 .../Dialogs/WakeUpLightCurtainInfo/index.vue  |   2 +-
 .../Dialogs/WeatherForecast/index.vue         |   2 +-
 .../statisticalAnalysis/index.vue             |  14 +-
 .../pages/service/board/index.vue             |  52 +++--
 .../service/boardRecord/images/refresh.svg    |  22 +++
 .../pages/service/boardRecord/index.vue       | 186 ++++++++++++++++++
 17 files changed, 272 insertions(+), 32 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/images/refresh.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/index.vue

diff --git a/ruoyi-ui/src/assets/styles/JiHeExpressway.scss b/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
index 0395d767..7db6541e 100644
--- a/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
+++ b/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
@@ -278,7 +278,7 @@
     }
 
     .el-picker-panel{
-      .today div a,.today div span{
+      .today div a,.today div span, .today a{
         color: #ff0 !important;
         font-weight: bold !important;
       }
diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js
index f58ac82d..70e7f16d 100644
--- a/ruoyi-ui/src/common/menuData.js
+++ b/ruoyi-ui/src/common/menuData.js
@@ -177,6 +177,12 @@ export default [
         path: "/service/board",
         component: "service/board/index.vue",
       },
+      // {
+      //   title: "情报板记录",
+      //   name: "boardRecord",
+      //   path: "/service/boardRecord",
+      //   component: "service/boardRecord/index.vue",
+      // },
       {
         title: "情报板敏感词",
         name: "sensitive",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
index 3f9c9790..019b76c1 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="广播发布" width="550px">
+  <Dialog v-model="modelVisible" title="广播发布" width="850px">
     <div class="BroadcastReleases">
       <div class="body">
         <div class="left">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue
index 63d1140b..80c0ae0d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="相机控制" noneMask width="550px">
+  <Dialog v-model="modelVisible" title="相机控制" noneMask width="600px">
     <div class="CameraControlDialog">
       <div class="direction">
         <div class="control-container top" @click="controlClick(21)">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/CongestedRoadSections/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/CongestedRoadSections/index.vue
index 0f2ee0fa..84b84ab2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/CongestedRoadSections/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/CongestedRoadSections/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog class="CongestedRoadSections" width="550px">
+  <Dialog class="CongestedRoadSections" width="600px">
     <div class="video-presentations">
       <div class="video-item"></div>
       <div class="video-item"></div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
index 5ebcd419..a34a4490 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="550px">
+  <Dialog v-model="modelVisible" title="设备操作" width="600px">
     <div class="DeviceControlDialog">
       <Form
         v-model="formData"
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/index.vue
index f04836cb..ef3fe2e2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="obverseVisible" title="护栏碰撞弹窗" width="550px">
+  <Dialog v-model="obverseVisible" title="护栏碰撞弹窗" width="600px">
     <Video class="video-stream" :pileNum="dialogData.stakeMark" />
 
     <div class="GuardrailCollision">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/HighwayDetails/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/HighwayDetails/index.vue
index d674a6f7..89c57cf9 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/HighwayDetails/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/HighwayDetails/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog class="HighwayDetails" width="550px">
+  <Dialog class="HighwayDetails" width="600px">
     <div class="video-presentations">
       <div class="video-item"></div>
       <div class="video-item"></div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue
index 27e0f656..042cfe2e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="obverseVisible" title="一类交调站弹窗" width="550px">
+  <Dialog v-model="obverseVisible" title="一类交调站弹窗" width="600px">
     <Video class="video-stream" :pileNum="dialogData.stakeMark" />
 
     <div class="Intermodulation">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceControlDialog.vue
index dd73bbda..200357eb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="550px">
+  <Dialog v-model="modelVisible" title="设备操作" width="600px">
     <div class="DeviceControlDialog">
       <DeviceParams :dialogData="dialogData" />
     </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
index 88c498fc..29feb81b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="obverseVisible" title="智能设备箱" width="550px">
+  <Dialog v-model="obverseVisible" title="智能设备箱" width="600px">
     <Video class="video-stream" :pileNum="dialogData.stakeMark" />
 
     <div class="SmartDevice">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/WakeUpLightCurtainInfo/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/WakeUpLightCurtainInfo/index.vue
index 82924b52..78d0f6c2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/WakeUpLightCurtainInfo/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/WakeUpLightCurtainInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog class="WakeUpLightCurtainInfo" width="550px">
+  <Dialog class="WakeUpLightCurtainInfo" width="600px">
     <div class="operation-btn">
       <div class="photo-btn">图像</div>
       <div class="video-btn">视频</div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/WeatherForecast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/WeatherForecast/index.vue
index 07492e62..01d99b8c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/WeatherForecast/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/WeatherForecast/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog class="WeatherForecast" width="550px"> s </Dialog>
+  <Dialog class="WeatherForecast" width="600px"> s </Dialog>
 </template>
 
 <script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
index 5b557a6d..3c30c3c0 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
@@ -104,6 +104,7 @@
               :current-page.sync="pageIndex"
               layout="total, sizes, prev, pager, next"
               :total="pageTotal"
+              @size-change="handleSizeChange"
             >
             </Pagination>
           </div>
@@ -153,7 +154,7 @@ export default {
       typeQuery: "", //高清网络枪型固定摄像机
       pageTotal: 0,
       pageIndex: 1,
-      pageSize: 10,
+      pageSize: 30,
       searchFormList,
       equipSeries: [
         "高清网络球形摄像机",
@@ -183,6 +184,10 @@ export default {
     clearInterval(this.interval);
   },
   methods: {
+    handleSizeChange(size){
+      this.pageSize = size;
+      this.initData();
+    },
     initData() {
       this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss");
       this.time = moment().format("YYYY-MM-DD HH:mm:ss");
@@ -379,24 +384,23 @@ export default {
       });
     },
     //查询列表
-    initQueryTable(pageIndex, pageSize = 30) {
+    initQueryTable(pageIndex) {
       this.setStatus("02", "doing");
       getSystemStatusTabList({
         startTime: this.startTime,
         time: this.time,
         type: this.typeQuery,
         pageNum: pageIndex,
-        pageSize: pageSize,
+        pageSize: this.pageSize,
       }).then((res) => {
         if (res.code == 200) {
           // if (res.rows && res.rows.length > 0) {
           this.setStatus("02", "finish");
           this.pageIndex = pageIndex;
-          this.pageSize = pageSize;
           this.pageTotal = res.total;
           this.tableData = res.rows;
           this.tableData.forEach((it, index) => {
-            it.order = (pageIndex - 1) * pageSize + index + 1;
+            it.order = (pageIndex - 1) * this.pageSize + index + 1;
           });
           // } else {
           //   this.setStatus("02", "empty");
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
index 47fbe238..0bd82fde 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
@@ -123,22 +123,23 @@
           </div>
         </div> -->
         <div class="partCon">
-          <!-- {{ selectedBdMsg }} -->
           <vuescroll :ops="scrollOptions" class="templateBox" v-if="selectedBdMsg.length > 0"
             :class="{ hide: isHideCtt }">
-            <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
-              <!-- 模板内容 -->
-              <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
-              <!-- 操作按钮 -->
-              <div class="infoBtnBox">
-                <el-tooltip content="编辑" placement="top">
-                  <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
-                </el-tooltip>
-                <el-tooltip content="删除" placement="top">
-                  <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
-                </el-tooltip>
+            <draggable tag="div" :list="selectedBdMsg" @end="____onDragend" ghostClass="ghost_class" dragClass="drag_class" chosenClass="chosen_class">
+              <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
+                <!-- 模板内容 -->
+                <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
+                <!-- 操作按钮 -->
+                <div class="infoBtnBox">
+                  <el-tooltip content="编辑" placement="top">
+                    <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
+                  </el-tooltip>
+                  <el-tooltip content="删除" placement="top">
+                    <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
+                  </el-tooltip>
+                </div>
               </div>
-            </div>
+            </draggable>
           </vuescroll>
           <Empty v-else text="请从设备回读或从模板添加信息..." style="padding-top: 100px"></Empty>
         </div>
@@ -216,6 +217,7 @@
   </div>
 </template>
 <script>
+import draggable from "vuedraggable";
 import Sortable from "sortablejs";
 import editInfo from "./editInfo";
 import {
@@ -247,6 +249,7 @@ export default {
   name: "Device",
   mixins: [InfoBoard],
   components: {
+    draggable,
     WgtTitle,
     BoardInfoEditor,
     editInfo,
@@ -545,6 +548,9 @@ export default {
         tpl,
       };
     },
+    ____onDragend(evt){
+      // console.log(evt, this.selectedBdMsg , "拖拽结束+++=======")
+    },
     ____onEditBoardItem(tpl, index) {
       // type : board template
       // mode : edit add toDevice toTemplate
@@ -1043,7 +1049,7 @@ export default {
           padding-bottom: 10px;
 
           .boardPreview {
-            border: 2px solid #004c64;
+            border: 2px solid #004c64; background-color: #133242;
             // width: 560px;
             // height:80px;
             flex: 1;
@@ -1055,7 +1061,7 @@ export default {
             display: flex;
             margin-left: 10px;
             /* // border: solid 1px #05afe3; */
-            border: 2px solid #004c64;
+            border: 2px solid #004c64; background-color: #133242;
             display: flex;
             justify-content: space-around;
             align-items: center;
@@ -1100,6 +1106,22 @@ export default {
           }
         }
 
+        .tplItem.ghost_class {
+          .boardPreview, .infoBtnBox{
+            border-color:#F00;
+          }
+        }
+        .tplItem.chosen_class {
+          .boardPreview, .infoBtnBox{
+            border-color:#0A0;
+          }
+        }
+        .tplItem.drag_class {
+          .boardPreview, .infoBtnBox{
+            border-color:#FF0;
+          }
+        }
+
         .el-collapse {
           max-height: 100% !important;
           overflow: auto;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/images/refresh.svg b/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/images/refresh.svg
new file mode 100644
index 00000000..e31a5500
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/images/refresh.svg
@@ -0,0 +1,22 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814398">
+<g id="Group 1142814396">
+<path id="Rectangle 1304" d="M1.0437 2.41495L4.5636 2.01738L4.91112 6.00562" stroke="white" stroke-linecap="round"/>
+<g id="Ellipse 835">
+<mask id="path-2-inside-1_290_77" fill="white">
+<path d="M4.29579 2.52494C4.09359 2.27296 3.71712 2.25216 3.51748 2.50144C2.86315 3.31847 2.39514 4.30903 2.15904 5.38649C1.87758 6.67096 1.93836 8.02122 2.3337 9.26652C2.72904 10.5118 3.44118 11.5962 4.38007 12.3826C5.16561 13.0406 6.08036 13.4652 7.0411 13.6229C7.35243 13.674 7.61901 13.4293 7.63212 13.1145C7.64523 12.7997 7.39954 12.5346 7.08935 12.4765C6.32757 12.3339 5.60349 11.9884 4.97813 11.4646C4.19938 10.8124 3.6087 9.91289 3.28078 8.87998C2.95287 7.84706 2.90245 6.72709 3.13591 5.66169C3.33404 4.75752 3.72906 3.92712 4.28182 3.24492C4.4503 3.03698 4.46523 2.7361 4.29579 2.52494Z"/>
+</mask>
+<path d="M4.29579 2.52494C4.09359 2.27296 3.71712 2.25216 3.51748 2.50144C2.86315 3.31847 2.39514 4.30903 2.15904 5.38649C1.87758 6.67096 1.93836 8.02122 2.3337 9.26652C2.72904 10.5118 3.44118 11.5962 4.38007 12.3826C5.16561 13.0406 6.08036 13.4652 7.0411 13.6229C7.35243 13.674 7.61901 13.4293 7.63212 13.1145C7.64523 12.7997 7.39954 12.5346 7.08935 12.4765C6.32757 12.3339 5.60349 11.9884 4.97813 11.4646C4.19938 10.8124 3.6087 9.91289 3.28078 8.87998C2.95287 7.84706 2.90245 6.72709 3.13591 5.66169C3.33404 4.75752 3.72906 3.92712 4.28182 3.24492C4.4503 3.03698 4.46523 2.7361 4.29579 2.52494Z" stroke="white" stroke-width="2" mask="url(#path-2-inside-1_290_77)"/>
+</g>
+</g>
+<g id="Group 1142814397">
+<path id="Rectangle 1304_2" d="M15.0437 11.585L11.5238 11.9826L11.1763 7.99438" stroke="white" stroke-linecap="round"/>
+<g id="Ellipse 835_2">
+<mask id="path-4-inside-2_290_77" fill="white">
+<path d="M11.7916 11.4751C11.9938 11.727 12.3703 11.7478 12.5699 11.4986C13.2242 10.6815 13.6923 9.69097 13.9284 8.61351C14.2098 7.32904 14.149 5.97878 13.7537 4.73348C13.3584 3.48817 12.6462 2.40376 11.7073 1.61737C10.9218 0.95942 10.007 0.534814 9.0463 0.377109C8.73497 0.326006 8.46839 0.570722 8.45528 0.885536C8.44218 1.20035 8.68786 1.46544 8.99805 1.5235C9.75983 1.6661 10.4839 2.01159 11.1093 2.53538C11.888 3.18765 12.4787 4.08711 12.8066 5.12002C13.1345 6.15294 13.1849 7.27291 12.9515 8.33831C12.7534 9.24248 12.3583 10.0729 11.8056 10.7551C11.6371 10.963 11.6222 11.2639 11.7916 11.4751Z"/>
+</mask>
+<path d="M11.7916 11.4751C11.9938 11.727 12.3703 11.7478 12.5699 11.4986C13.2242 10.6815 13.6923 9.69097 13.9284 8.61351C14.2098 7.32904 14.149 5.97878 13.7537 4.73348C13.3584 3.48817 12.6462 2.40376 11.7073 1.61737C10.9218 0.95942 10.007 0.534814 9.0463 0.377109C8.73497 0.326006 8.46839 0.570722 8.45528 0.885536C8.44218 1.20035 8.68786 1.46544 8.99805 1.5235C9.75983 1.6661 10.4839 2.01159 11.1093 2.53538C11.888 3.18765 12.4787 4.08711 12.8066 5.12002C13.1345 6.15294 13.1849 7.27291 12.9515 8.33831C12.7534 9.24248 12.3583 10.0729 11.8056 10.7551C11.6371 10.963 11.6222 11.2639 11.7916 11.4751Z" stroke="white" stroke-width="2" mask="url(#path-4-inside-2_290_77)"/>
+</g>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/index.vue
new file mode 100644
index 00000000..a6218c69
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/boardRecord/index.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class='board_record'>
+
+    <!-- 搜索栏 -->
+    <div class="filter">
+      <div>
+        <ButtonGradient @click="onRefresh" class="refresh-btn">
+          <template #prefix>
+            <img src="./images/refresh.svg" />
+          </template>
+          刷新
+        </ButtonGradient>
+        <!-- <ButtonGradient>
+          <template #prefix>
+            <img src="@screen/images/insert.svg" />
+          </template>
+          新增
+        </ButtonGradient> -->
+
+      </div>
+    </div>
+
+    <!-- 内容 -->
+    <div class="body">
+      <Table :data="tableData">
+        <ElTableColumn label="序号" width="60" />
+        <ElTableColumn label="发布设备" width="60" />
+        <ElTableColumn label="屏幕尺寸" width="60" />
+        <ElTableColumn label="设备方向" width="60" />
+        <ElTableColumn label="设备桩号" width="60" />
+        <ElTableColumn prop="eventName" label="发布内容" width="240" />
+        <ElTableColumn prop="eventName" label="发布事件" width="240" />
+        <ElTableColumn prop="eventName" label="发布状态" width="240" />
+        <ElTableColumn prop="eventName" label="发布用户" width="240" />
+        <ElTableColumn label="操作" width="210">
+          <template slot-scope="scope">
+            <ElButton type="text" style="color: #00D1FF;" @click="showDisposal(scope.row.eventType)">流程配置</ElButton>
+            <ElButton type="text" style="color: #00EBC1;" @click="showPhrases(scope.row)">常用语</ElButton>
+          </template>
+        </ElTableColumn>
+      </Table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="footer">
+      <Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next"
+        :total="total">
+      </Pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import Pagination from '@screen/components/Pagination.vue';
+import Table from '@screen/components/Table.vue';
+import request from "@/utils/request";
+
+export default {
+  name: 'boardRecord',
+  components: {
+    ButtonGradient,
+    Pagination,
+    Table
+  },
+  data() {
+    return {
+      tableData: [],
+      isShowPhrases: false,
+      isShowDisposal: false,
+      total: 20,
+      eventType: 1,
+      searchData: {
+        pageSize: 20,
+        pageNum: 1,
+      },
+      phrasesData: [],
+      process: []
+    }
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      request({
+        url: `/business/dcEventType/list`,
+        method: "get",
+        params: this.searchData,
+      }).then((result) => {
+        if (result.code != 200) return Message.error(result?.msg);
+        this.tableData = result.rows;
+        this.total = result.total;
+      });
+    },
+    onRefresh() {
+      this.tableData = [];
+      setTimeout(() => {
+        this.initData();
+      }, 100);
+    },
+    onSizeChange(pageSize) {
+      this.searchData.pageSize = pageSize;
+      this.getData();
+    },
+    showPhrases(data) {
+      if (data?.processConfigList.length <= 0) {
+        Message.warning('请先配置流程！');
+        return;
+      }
+      let process = []
+      data.processConfigList.forEach(it => {
+        process.push({
+          id: it.id,
+          commonPhrases: it.commonPhrases,
+          label: it.processNode,
+          isActive: false,
+        })
+      })
+      this.process = process;
+      this.isShowPhrases = true;
+      this.eventType = data.eventType;
+    },
+    showDisposal(eventType) {
+      this.isShowDisposal = true;
+      this.eventType = eventType;
+    },
+    onClosePhrases() {
+      this.isShowPhrases = false
+    },
+    onCloseDisposal() {
+      this.isShowDisposal = false;
+    },
+    onUpdatePhrasesData(phrasesData) {
+      this.phrasesData = phrasesData;
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.board_record {
+  padding: 21px;
+
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  z-index: 6;
+  width: 100%;
+  height: 100%;
+
+  .filter {
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    >div {
+      display: flex;
+      gap: 6px;
+    }
+  }
+
+  .body {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+
+    .content {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+
+  .footer {
+    margin-top: 15px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>