11111

gongchangdaping/package.json

@@ -14,6 +14,7 @@
     "echarts-gl": "^2.0.9",
     "element-ui": "^2.14.1",
     "js-cookie": "2.2.1",
+    "mqtt": "^2.18.8",
     "nprogress": "^0.2.0",
     "qweather-icons": "^1.1.1",
     "vue": "^2.6.11",
@@ -30,8 +31,8 @@
     "babel-plugin-component": "^1.1.1",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
-	"sass": "1.32.13",
-	"sass-loader": "10.1.1",
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
     "vue-template-compiler": "^2.6.11"
   }
 }

gongchangdaping/src/App - 副本.vue

@@ -0,0 +1,45 @@
+<template>
+    <router-view v-if="routerState"/>
+</template>
+
+
+<script>
+export default {
+  data(){
+    return{
+        routerState: true
+    }
+  },
+
+  provide() {
+        return {
+            reload: this.reload
+        }
+  },
+
+  methods: {
+        reload() { //重载组件
+            this.routerState = false;
+            this.$nextTick(() => {
+                this.routerState = true;
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less">
+  *{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  body,HTML{
+    width: 100%;
+    height: 100%;
+  }
+  .flexc{display: flex;align-items: center;}
+  .flexcc{display: flex;align-items: center;justify-content: center;}
+	.flex0{flex: 0 0 auto;}
+	.flex1{flex:1;}
+</style>

gongchangdaping/src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import * as echarts from "echarts";
+// import * as mqtt from "mqtt";
 import { selectDictLabel,parseTime} from "@/utils/ruoyi";
 
 import utils from './utils/index';
@@ -12,10 +13,20 @@ import './router/permission'
 
 import '@/assets/styles/app.less'
 import '@/assets/styles/style.css'
-   
+
+import Index from "@/views/index"
+import Home from "@/views/home"
+import ControlRoom from "@/views/controlRoom"
+import Record from "@/views/record"
+Vue.component('Index', Index)
+Vue.component('Home', Home)
+Vue.component('ControlRoom', ControlRoom)
+Vue.component('Record', Record)
+
 Vue.use(utils)
 
 Vue.prototype.$echarts = echarts
+// Vue.prototype.$mqtt = mqtt
 
 Vue.config.productionTip = false
 Vue.prototype.parseTime = parseTime

gongchangdaping/src/router/index.js

@@ -30,6 +30,16 @@ const routes = [{
 	  // name: 'Record',
 	  component: () => import('../views/controlRoom.vue')
 	},
+	{
+	  path: '/mqtt',
+	  // name: 'Record',
+	  component: () => import('../views/mqtt.vue')
+	},
+	{
+	  path: '/lunbo',
+	  // name: 'Record',
+	  component: () => import('../views/lunbo.vue')
+	},
   ]
 },
 ]

gongchangdaping/src/views/components/table.vue

@@ -65,7 +65,7 @@ export default {
 	scrollTop:{
 		type: Number,
 		default: 36 // 滚动的高度
-	}
+	},
   },
   data() {
     return {

gongchangdaping/src/views/home.vue

@@ -43,7 +43,7 @@
 		<div class="sujufen">
 			<img class="mb12" src="@/assets/images/photo/pic_zljc_bt_jcsjfx.png" alt="" >
 			<!-- 数据分析 -->
-			<box-table :data="dataListc" type="home"  :columns="columnc" tableHeight='356px' :visibleRows='visibleRowsc'></box-table>
+			<box-table :data="dataListc"  type="home"  :columns="columnc" tableHeight='356px' :visibleRows='visibleRowsc'></box-table>
 		</div>
 		<!-- 统计 -->
 		<div class="tongju">
@@ -113,6 +113,7 @@ export default {
   mounted(){
 	  this.refreshTime()
 	  this.timer = setInterval(this.refreshTime, 1000);
+	  this.generateRandomTimes()
   },
   watch:{
 	 
@@ -136,6 +137,46 @@ export default {
 	    // weekday: 'long',
 	  }).replace(/\//g, '-');
 	},
+	generateRandomTimes() {
+	      const now = new Date();
+	      const currentHours = now.getHours();
+	      const currentMinutes = now.getMinutes();
+	      const currentSeconds = now.getSeconds();
+	      
+	      const times = [];
+	      
+	      for (let i = 0; i < 6; i++) {
+	        // 生成随机小时（0到当前小时）
+	        const randomHours = Math.floor(Math.random() * currentHours);
+	        
+	        // 生成随机分钟（如果小时等于当前小时，则限制分钟；否则0-59）
+	        let randomMinutes;
+	        if (randomHours === currentHours) {
+	          randomMinutes = Math.floor(Math.random() * currentMinutes);
+	        } else {
+	          randomMinutes = Math.floor(Math.random() * 60);
+	        }
+	        
+	        // 生成随机秒数（如果小时和分钟都等于当前，则限制秒；否则0-59）
+	        let randomSeconds;
+	        if (randomHours === currentHours && randomMinutes === currentMinutes) {
+	          randomSeconds = Math.floor(Math.random() * currentSeconds);
+	        } else {
+	          randomSeconds = Math.floor(Math.random() * 60);
+	        }
+	        
+	        // 格式化时间为HH:MM:SS
+	        const timeString = `${String(randomHours).padStart(2, '0')}:${String(randomMinutes).padStart(2, '0')}:${String(randomSeconds).padStart(2, '0')}`;
+	        times.push(timeString);
+	      }
+	      
+	      // 按时间排序
+	      var time = times.sort();
+		  time.forEach((ite,idx)=>{
+			  this.dataListc[idx].time=ite
+		  })
+		  console.log(this.randomTimes)
+	    }
   }
 };
 </script>

gongchangdaping/src/views/lunbo.vue

@@ -0,0 +1,57 @@
+<template>
+<div style="height: 100%;">
+	<el-carousel indicator-position="outside" autoplay :interval="15000">
+	    <el-carousel-item >
+			<index/>
+	    </el-carousel-item>
+		<el-carousel-item >
+			<home/>
+		</el-carousel-item>
+		<el-carousel-item >
+			<record/>
+		</el-carousel-item>
+		<el-carousel-item >
+			<controlRoom/>
+		</el-carousel-item>
+	  </el-carousel>
+</div>
+</template>
+
+<script>
+
+  export default {
+	components:{},
+    data() {
+      return {
+		
+      }
+    },
+	
+	beforeDestroy() { // Vue 2
+	    
+	  },
+    async mounted() {
+		
+    },
+	created() {
+		
+	},
+    methods: {
+		
+    },
+  }
+</script>
+
+<style lang="less">
+	.el-carousel--horizontal{
+		height: 100%;
+		overflow-y:hidden;
+	}
+	.el-carousel__container{
+		height: 100%;
+	}
+</style>
+
+<style lang="less" scoped>
+
+</style>

gongchangdaping/src/views/mqtt.vue

@@ -0,0 +1,196 @@
+<template>
+<div class="mqtt-client">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <h2>MQTT Client</h2>
+          <el-tag :type="connectionStatus === 'Connected' ? 'success' : 'danger'">
+            {{ connectionStatus }}
+          </el-tag>
+        </div>
+      </template>
+
+      <!-- 连接配置 -->
+      <div class="connection-settings">
+        <el-form :model="mqttConfig" label-width="120px">
+          <el-form-item label="Broker URL">
+            <el-input v-model="mqttConfig.url" :disabled="isConnected" />
+          </el-form-item>
+          <el-form-item label="Topic">
+            <el-input v-model="mqttConfig.topic" :disabled="isConnected" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toggleConnection" :loading="connecting">
+              {{ isConnected ? 'Disconnect' : 'Connect' }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 消息发送 -->
+      <div class="message-sender" v-if="isConnected">
+        <el-input
+          v-model="messageToSend"
+          placeholder="Enter message to send"
+          :rows="3"
+          type="textarea"
+        />
+        <el-button type="primary" @click="sendMessage" :disabled="!messageToSend" class="send-btn">
+          Send Message
+        </el-button>
+      </div>
+
+      <!-- 消息列表 -->
+      <div class="message-list">
+        <h3>Messages</h3>
+        <el-timeline>
+          <el-timeline-item
+            v-for="(msg, index) in messages"
+            :key="index"
+            :type="msg.type === 'sent' ? 'primary' : 'success'"
+            :timestamp="msg.timestamp"
+          >
+            <el-card class="message-card">
+              <p><strong>{{ msg.type === 'sent' ? 'Sent' : 'Received' }}:</strong></p>
+              <p>{{ msg.content }}</p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import mqtt from 'mqtt';
+import { MqttClient } from 'mqtt'
+// 状态变量
+var client = MqttClient||null
+export default {
+	components: {},
+  data() {
+    return {
+		connectionStatus:'',
+		isConnected:false,
+		connecting:false,
+		messages:[{ type: 'sent' , content: '', timestamp: '' }],
+		messageToSend:'',
+		mqttConfig:{
+			url: 'ws://13.229.167.76:1884/mqtt',
+			topic: 'test/topic'
+		},
+	};
+  },
+ 
+  mounted(){
+	  
+  },
+ destroyed() {
+ 	if (client) {
+ 	  client.end()
+ 	}
+ },
+  methods:{
+		async toggleConnection(){
+		  if (this.isConnected) {
+		    // 断开连接
+		    client.end()
+		    this.isConnected= false
+		    this.connectionStatus = 'Disconnected'
+		    return
+		  }
+		
+		  // 建立连接
+		  this.connecting = true
+		  try {
+		    client= mqtt.connect(this.mqttConfig.url, {
+		      clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
+		      keepalive: 60,
+		      clean: true,
+		      connectTimeout: 4000,
+		      reconnectPeriod: 1000
+		    })
+		
+		    client.on('connect', () => {
+		      this.isConnected = true
+		      this.connectionStatus= 'Connected'
+		      this.connecting = false
+		
+		      // 订阅主题
+		      client.subscribe(this.mqttConfig.topic, (err) => {
+		        if (err) {
+		          console.error('Subscribe error:', err)
+		        }
+		      })
+		    })
+		
+		    client.on('message', (topic, message) => {
+		      this.messages.unshift({
+		        type: 'received',
+		        content: message.toString(),
+		        timestamp: new Date().toLocaleTimeString()
+		      })
+		    })
+		
+		    client.on('error', (err) => {
+		      console.error('MQTT Error:', err)
+		      this.connectionStatus= 'Error'
+		      this.connecting = false
+		    })
+		  } catch (error) {
+		    console.error('Connection error:', error)
+		    this.connectionStatus= 'Error'
+		    this.connecting = false
+		  }
+		},
+		sendMessage(){
+		  if (!client || !this.messageToSend) return
+		
+		  client.publish(this.mqttConfig.topic, this.messageToSend)
+		  this.messages.unshift({
+		    type: 'sent',
+		    content: this.messageToSend,
+		    timestamp: new Date().toLocaleTimeString()
+		  })
+		  this.messageToSend = ''
+		}
+  }
+}
+</script>
+<style lang="less" scoped>
+.mqtt-client {
+  width: 800px;
+  margin: 20px auto;
+  padding: 0 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.connection-settings {
+  margin-bottom: 20px;
+}
+
+.message-sender {
+  margin-bottom: 20px;
+}
+
+.send-btn {
+  margin-top: 10px;
+}
+
+.message-list {
+  margin-top: 20px;
+}
+
+.message-card {
+  margin-bottom: 10px;
+}
+
+.el-timeline-item {
+  margin-bottom: 20px;
+}
+</style>
+

gongchangdaping/src/views/record.vue

@@ -36,7 +36,7 @@
 					<div class="wlbox">
 						<div class="wlbtop">
 							<div><span>收货地址</span>深圳鹏威新材</div>
-							<div><span>物理公司</span>EMS经济快递</div>
+							<div><span>物流公司</span>EMS经济快递</div>
 							<div><span>运单号码</span>5066937639801</div>
 						</div>
 						<img src="@/assets/images/record/line.png" class="line"/>