添加看板

ruoyi-ui/package.json

@@ -61,7 +61,8 @@
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "vue-seamless-scroll": "^1.1.23"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

ruoyi-ui/src/layout/index2.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'BoardIndex',
+  data() {
+    return {
+    }
+  },
+}
+</script>
+<style scoped>
+
+</style>

ruoyi-ui/src/router/index.js

@@ -6,6 +6,7 @@ Vue.use(Router)
 
 /* Layout */
 import Layout from '@/layout'
+import BoardLayout from '@/layout/index2'
 /*import VideoPlayer from "@/views/record/recordInspectionCabinet/OldVideoPlayer.vue";*/
 import VideoPlayer from "@/views/record/recordInspectionCabinet/VideoPlayer.vue";
 /**
@@ -68,6 +69,24 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
+  {
+    path: '/board',
+    component: BoardLayout,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/board/index'),
+        name: 'Board',
+        meta: { title: '看板1', icon: 'dashboard', affix: true }
+      },
+      {
+        path: 'index1',
+        component: () => import('@/views/board/index1'),
+        name: 'Board1',
+        meta: { title: '看板2', icon: 'dashboard', affix: true }
+      },
+    ]
+  },
   {
     path: '',
     component: Layout,

ruoyi-ui/src/views/board/index.vue

@@ -0,0 +1,685 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="title">赛轮智慧热电无人巡检系统</div>
+      <div class="subTitle" v-for="i in subTitleList" :style="`top:${i.top}%;left:${i.left}%`">{{ i.name }}</div>
+
+      <div class="span1" style="top: 17.3%;left: 24%;">设备状态：</div>
+      <div class="span1" style="top: 23.5%;left: 24%;">运行速度：</div>
+      <div class="span1" style="top: 29.8%;left: 24%;">升降状态：</div>
+      <div class="span1" style="top: 36.2%;left: 24%;">实时位置：</div>
+      <div class="info1" style="top: 17.3%;right: 64.5%;color:#a80d1b">停止</div>
+      <div class="info1" style="top: 23.5%;right: 64.5%;">0m/s</div>
+      <div class="info1" style="top: 29.8%;right: 64.5%;">停止</div>
+      <div class="info1" style="top: 36.2%;right: 64.5%;">位置1#</div>
+
+
+      <div class="span2" style="top: 49.6%;left: 6%;">平均温度</div>
+      <div class="span2" style="top: 49.6%;left: 24.3%;">最高温度</div>
+      <div class="span2" style="top: 57.6%;left: 6%;">最低温度</div>
+      <div class="span2" style="top: 57.6%;left: 24.3%;">温差</div>
+      <div class="info2" style="top: 49.6%;left: 13%;"><span style="font-size: 2vw;color: #38d6d9">19 </span> ℃</div>
+      <div class="info2" style="top: 49.6%;left: 30.5%;"><span style="font-size: 2vw;color: #fe792a">39 </span> ℃</div>
+      <div class="info2" style="top: 57.6%;left: 13%;"><span style="font-size: 2vw;color: #3fb0f2">19 </span> ℃</div>
+      <div class="info2" style="top: 57.6%;left: 30.5%;"><span style="font-size: 2vw;color: #f5f5f5">0 </span> ℃</div>
+
+      <div class="span3">当前状态：<span style="color：#eee">巡检中</span></div>
+      <Chart class="chart1" ref="chart1"/>
+      <Chart class="chart2" ref="chart2"/>
+
+      <el-button type="primary" class="analyse" size="mini">告警分析</el-button>
+      <div class="table">
+        <div style="background-color: #1077bc19">
+          <div class="scrollTableItem" style="width:20%;color:#65c2f3;font-weight: bold;">
+            报警开始时间
+          </div>
+          <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">
+            报警类型
+          </div>
+          <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">
+            报警来源
+          </div>
+          <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">
+            告警等级
+          </div>
+          <div class="scrollTableItem" style="width:13%;color:#65c2f3;font-weight: bold;">
+            报警对象
+          </div>
+          <div class="scrollTableItem" style="width:18%;color:#65c2f3;font-weight: bold;">
+            报警内容
+          </div>
+          <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">
+            采集资源
+          </div>
+          <div class="scrollTableItem" style="width:15%;color:#65c2f3;font-weight: bold;">
+            操作
+          </div>
+        </div>
+        <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: calc(100% - 30px);overflow: hidden;"
+        >
+          <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+          >
+            <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+              <div class="scrollTableItem" style="width:20%;color:#65c2f3;">
+                {{ item.value1 }}
+              </div>
+              <div class="scrollTableItem" style="width:8%;color:#65c2f3;">
+                {{ item.value2 }}
+              </div>
+              <div class="scrollTableItem" style="width:8%;color:#65c2f3;">
+                {{ item.value3 }}
+              </div>
+              <div class="scrollTableItem" style="width:8%;color:#65c2f3;">
+                {{ item.value4 }}
+              </div>
+              <div class="scrollTableItem" style="width:13%;color:#65c2f3;">
+                {{ item.value5 }}
+              </div>
+              <div class="scrollTableItem" style="width:18%;color:#65c2f3;">
+                {{ item.value6 }}
+              </div>
+              <div class="scrollTableItem" style="width:8%;color:#65c2f3;">
+                {{ item.value7 }}
+              </div>
+              <div class="scrollTableItem" style="width:15%;color:#65c2f3;">
+                操作
+              </div>
+            </div>
+          </div>
+        </vue-seamless-scroll>
+      </div>
+
+      <div class="prodLine"></div>
+      <div class="station" v-for="(i,k) in stationList"
+           :style="`top: ${i.top}%;left: ${i.left}%;background-color: ${k === 4 ?'#2979e8':'#234271'}`"></div>
+
+      <div class="video1"></div>
+      <div class="video2"></div>
+
+      <div class="safe">已安全运行 <span style="color: #4667d0;font-size: 1.2vw;padding: 0 0.3vw"> 382 </span> 天</div>
+      <div class="time">{{parseTime(new Date(),'{y}.{m}.{d} {h}:{i}:{s} 周{a}')}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from '@/components/Charts/Chart'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+
+export default {
+  data() {
+    return {
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 22, // 开始无缝滚动的数据量 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(100).fill('').map(function (i, k) {
+        return {
+          value1: '2222-22-22 22:22:22',
+          value2: '出库出库',
+          value3: '1#机器人',
+          value4: '一般警告',
+          value5: '巡检对象名称1',
+          value6: '【一般警告】噪音>60db',
+          value7: '无',
+        }
+      }),
+      subTitleList: [
+        {
+          name: '设备状态',
+          top: 11.2,
+          left: 3
+        },
+        {
+          name: '温度参数',
+          top: 42.2,
+          left: 3
+        },
+        {
+          name: '任务信息',
+          top: 66.1,
+          left: 3
+        },
+        {
+          name: '视频监控',
+          top: 11.2,
+          left: 42.8
+        },
+        {
+          name: '巡检状态',
+          top: 42.2,
+          left: 42.8
+        },
+        {
+          name: '告警信息',
+          top: 66.1,
+          left: 42.8
+        },
+      ],
+      stationList: [
+        {
+          top: 49,
+          left: 47.3
+        },
+        {
+          top: 49,
+          left: 52.9
+        },
+        {
+          top: 49,
+          left: 58.6
+        },
+        {
+          top: 49,
+          left: 64.1
+        },
+        {
+          top: 49,
+          left: 69.8
+        },
+        {
+          top: 49,
+          left: 75.4
+        },
+        {
+          top: 49,
+          left: 81
+        },
+        {
+          top: 49,
+          left: 86.6
+        },
+        {
+          top: 49,
+          left: 92.2
+        },
+        {
+          top: 58.4,
+          left: 47.3
+        },
+        {
+          top: 58.4,
+          left: 52.9
+        },
+        {
+          top: 58.4,
+          left: 58.6
+        },
+        {
+          top: 58.4,
+          left: 64.1
+        },
+        {
+          top: 58.4,
+          left: 69.8
+        },
+        {
+          top: 58.4,
+          left: 75.4
+        },
+        {
+          top: 58.4,
+          left: 81
+        },
+        {
+          top: 58.4,
+          left: 86.6
+        },
+        {
+          top: 58.4,
+          left: 92.2
+        },
+      ]
+    }
+  },
+  components: {
+    vueSeamlessScroll,
+    Chart
+  },
+  mounted() {
+    this.$refs.chart1.setData({
+      "color": [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#ffe000",
+        "#ffa800",
+        "#ff5b00",
+        "#ff3000"
+      ],
+      "tooltip": {
+        "show": false
+      },
+      "legend": {
+        "icon": "circle",
+        "orient": "horizontal",
+        "right": 0,
+        "y": 'center',
+        "align": "right",
+        "textStyle": {
+          "color": "#fff"
+        },
+        "itemGap": 20
+      },
+      "toolbox": {
+        "show": false
+      },
+      "series": [
+        {
+          "name": "",
+          "type": "pie",
+          "clockWise": false,
+          "radius": [
+            '50%',
+            '60%'
+          ],
+          center: ['30%', '50%'],
+          "hoverAnimation": false,
+          "itemStyle": {
+            "normal": {
+              "label": {
+                "show": false,
+                "position": "outside",
+                "color": "#ddd"
+              },
+            }
+          },
+          "data": [
+            {
+              "value": 20,
+              "name": "已巡检",
+              "itemStyle": {
+                "normal": {
+                  "borderWidth": 5,
+                  "shadowBlur": 5,
+                  "borderColor": "#00ffff",
+                  "shadowColor": "#00ffff"
+                }
+              }
+            },
+            {
+              "value": 2,
+              "name": "",
+              "itemStyle": {
+                "normal": {
+                  "label": {
+                    "show": false
+                  },
+                  "labelLine": {
+                    "show": false
+                  },
+                  "color": "rgba(0, 0, 0, 0)",
+                  "borderColor": "rgba(0, 0, 0, 0)",
+                  "borderWidth": 0
+                }
+              }
+            },
+            {
+              "value": 10,
+              "name": "待巡检",
+              "itemStyle": {
+                "normal": {
+                  "borderWidth": 5,
+                  "shadowBlur": 5,
+                  "borderColor": "#00cfff",
+                  "shadowColor": "#00cfff"
+                }
+              }
+            },
+            {
+              "value": 2,
+              "name": "",
+              "itemStyle": {
+                "normal": {
+                  "label": {
+                    "show": false
+                  },
+                  "labelLine": {
+                    "show": false
+                  },
+                  "color": "rgba(0, 0, 0, 0)",
+                  "borderColor": "rgba(0, 0, 0, 0)",
+                  "borderWidth": 0
+                }
+              }
+            },
+          ]
+        }
+      ]
+    })
+    this.$refs.chart2.setData({
+      "color": [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#ffe000",
+        "#ffa800",
+        "#ff5b00",
+        "#ff3000"
+      ],
+      "tooltip": {
+        "show": false
+      },
+      "legend": {
+        "icon": "circle",
+        "orient": "horizontal",
+        "right": 0,
+        "y": 'center',
+        "align": "right",
+        "textStyle": {
+          "color": "#fff"
+        },
+        "itemGap": 20
+      },
+      "toolbox": {
+        "show": false
+      },
+      "series": [
+        {
+          "name": "",
+          "type": "pie",
+          "clockWise": false,
+          "radius": [
+            '50%',
+            '60%'
+          ],
+          center: ['40%', '50%'],
+          "hoverAnimation": false,
+          "itemStyle": {
+            "normal": {
+              "label": {
+                "show": true,
+                "position": "outside",
+                "color": "#ddd"
+              },
+              "labelLine": {
+                "length": 10,
+                "length2": 50,
+                "show": true,
+                "color": "#00ffff"
+              }
+            }
+          },
+          "data": [
+            {
+              "value": 20,
+              "name": "正常",
+              "itemStyle": {
+                "normal": {
+                  "borderWidth": 5,
+                  "shadowBlur": 20,
+                  "borderColor": "#00ffff",
+                  "shadowColor": "#00ffff"
+                }
+              }
+            },
+            {
+              "value": 2,
+              "name": "",
+              "itemStyle": {
+                "normal": {
+                  "label": {
+                    "show": false
+                  },
+                  "labelLine": {
+                    "show": false
+                  },
+                  "color": "rgba(0, 0, 0, 0)",
+                  "borderColor": "rgba(0, 0, 0, 0)",
+                  "borderWidth": 0
+                }
+              }
+            },
+            {
+              "value": 10,
+              "name": "异常",
+              "itemStyle": {
+                "normal": {
+                  "borderWidth": 5,
+                  "shadowBlur": 20,
+                  "borderColor": "#00cfff",
+                  "shadowColor": "#00cfff"
+                }
+              }
+            },
+            {
+              "value": 2,
+              "name": "",
+              "itemStyle": {
+                "normal": {
+                  "label": {
+                    "show": false
+                  },
+                  "labelLine": {
+                    "show": false
+                  },
+                  "color": "rgba(0, 0, 0, 0)",
+                  "borderColor": "rgba(0, 0, 0, 0)",
+                  "borderWidth": 0
+                }
+              }
+            },
+            {
+              "value": 30,
+              "name": "待巡检",
+              "itemStyle": {
+                "normal": {
+                  "borderWidth": 5,
+                  "shadowBlur": 20,
+                  "borderColor": "#006ced",
+                  "shadowColor": "#006ced"
+                }
+              }
+            },
+            {
+              "value": 2,
+              "name": "",
+              "itemStyle": {
+                "normal": {
+                  "label": {
+                    "show": false
+                  },
+                  "labelLine": {
+                    "show": false
+                  },
+                  "color": "rgba(0, 0, 0, 0)",
+                  "borderColor": "rgba(0, 0, 0, 0)",
+                  "borderWidth": 0
+                }
+              }
+            },
+          ]
+        }
+      ]
+    })
+  },
+  methods: {}
+}
+</script>
+<style>
+.content {
+  background-image: url("~@/assets/board/bg.jpg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  position: absolute;
+  top: 2.8%;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5vw;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 10px;
+  transform: translateY(-50%);
+}
+
+.subTitle {
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: 0.9vw;
+  color: #fff;
+  letter-spacing: 2px;
+}
+
+.span1 {
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: 0.9vw;
+  color: #7da6e4;
+  letter-spacing: 1px;
+  font-weight: 500;
+}
+
+.span2 {
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: 1vw;
+  color: #7da6e4;
+  letter-spacing: 2px;
+}
+
+.info1 {
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: 1vw;
+  color: #eee;
+  letter-spacing: 2px;
+}
+
+.info2 {
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: 1vw;
+  color: #7da6e4;
+  letter-spacing: 2px;
+}
+
+.span3 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #7da6e4;
+  letter-spacing: 2px;
+  top: 72.7%;
+  left: 19.7%
+}
+
+.chart1 {
+  position: absolute;
+  top: 77.4%;
+  left: 2.2%;
+  width: 13.8%;
+  height: 16.7%;
+}
+
+.chart2 {
+  position: absolute;
+  top: 77.4%;
+  left: 17%;
+  width: 20%;
+  height: 16.7%;
+}
+
+.table {
+  position: absolute;
+  top: 69%;
+  left: 42%;
+  width: 56%;
+  height: 24.7%;
+}
+
+.analyse {
+  position: absolute;
+  top: 66.3%;
+  right: 2%;
+  transform: translateY(-50%);
+}
+
+.scrollTableItem {
+  display: inline-block;
+  text-align: center;
+  padding: 14px 0;
+  color: #4e99c5
+}
+
+.prodLine {
+  position: absolute;
+  top: 53.7%;
+  left: 70%;
+  transform: translate(-50%, -50%);
+  border: 2px solid #3e78ca;
+  width: 53%;
+  height: 4.8%;
+  border-radius: 2.4vh;
+}
+
+.station {
+  position: absolute;
+  width: 3.7%;
+  height: 1.9%;
+  background-color: #234271;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+}
+
+.video1 {
+  position: absolute;
+  width: 27.3%;
+  height: 23.5%;
+  top: 15.2%;
+  left: 42%;
+  background-image: url("~@/assets/board/bg.jpg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.video2 {
+  position: absolute;
+  width: 27.3%;
+  height: 23.5%;
+  top: 15.2%;
+  left: 70.7%;
+  background-image: url("~@/assets/board/bg.jpg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.safe {
+  position: absolute;
+  top: 2.4%;
+  right: 2%;
+  transform: translateY(-50%);
+  color: #fff;
+  font-size: 0.7vw;
+}
+
+.time{
+  position: absolute;
+  top: 2.4%;
+  left: 2%;
+  transform: translateY(-50%);
+  color: #fff;
+  font-size: 0.7vw;
+  letter-spacing: 1px;
+}
+</style>

ruoyi-ui/src/views/board/index1.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="title">赛轮智慧热电无人巡检系统</div>
+      <div class="safe">已安全运行 <span style="color: #4667d0;font-size: 1.2vw;padding: 0 0.3vw"> 382 </span> 天</div>
+      <div class="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>
+
+      <div class="list" v-for="(i,k) in list" :style="`left:${i.left}%`">
+        <div class="itemTitle">{{ k + 1 }}#抽屉柜</div>
+        <div class="items">
+          <div class="item" v-for="(ii,kk) in 100">
+            <div class="name">{{k+1}}#-{{kk+1}}</div>
+            <div class="tem">温度：22℃</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      list: [
+        {
+          left: 7.7
+        },
+        {
+          left: 19.8
+        },
+        {
+          left: 31.9
+        },
+        {
+          left: 44.0
+        },
+        {
+          left: 56.1
+        },
+        {
+          left: 68.2
+        },
+        {
+          left: 80.3
+        },
+        {
+          left: 92.4
+        },
+      ]
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+.content {
+  background-image: url("~@/assets/board/bg1.jpg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  position: absolute;
+  top: 2.8%;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5vw;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 10px;
+  transform: translateY(-50%);
+}
+
+.safe {
+  position: absolute;
+  top: 2.4%;
+  right: 2%;
+  transform: translateY(-50%);
+  color: #fff;
+  font-size: 0.7vw;
+}
+
+.time {
+  position: absolute;
+  top: 2.4%;
+  left: 2%;
+  transform: translateY(-50%);
+  color: #fff;
+  font-size: 0.7vw;
+  letter-spacing: 1px;
+}
+
+.list {
+  position: absolute;
+  width: 11%;
+  height: 85%;
+  top: 9.3%;
+  transform: translateX(-50%);
+  background-image: url("~@/assets/board/item.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.itemTitle {
+  position: absolute;
+  top: 4.3%;
+  left: 15%;
+  font-size: 0.8vw;
+  color: #fefefe;
+  transform: translateY(-50%);
+}
+
+.items {
+  position: absolute;
+  top: 8.4%;
+  left: 0;
+  width: 100%;
+  height: 91.4%;
+  overflow: auto;
+}
+
+.items::-webkit-scrollbar {
+  display: none;
+}
+
+.item {
+  position: relative;
+  width: 100%;
+  height: 16.7%;
+  background-image: url("~@/assets/board/icon.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.name{
+  position: absolute;
+  top: 37.6%;
+  left: 51%;
+  transform: translateY(-50%);
+  font-size: 0.95vw;
+  color: #fefefe;
+  letter-spacing: 2px;
+}
+.tem{
+  position: absolute;
+  top: 62.7%;
+  left: 51%;
+  transform: translateY(-50%);
+  font-size: 0.7vw;
+  color: #598fce;
+  letter-spacing: 1px;
+  white-space: nowrap;
+}
+</style>