环境监控可视化大屏

public/webA/index.js

@@ -860,11 +860,11 @@ var createScene = function() {
     new BABYLON.Vector3(0, -1, 0),
     scene
   );
-  camera.setTarget(new BABYLON.Vector3(0, 3, 0));
+  camera.setTarget(new BABYLON.Vector3(0, 2, 0));
   camera.attachControl(canvas, true);
   camera.lowerRadiusLimit = 2.0; // 这里是最大的位置，值越大，物体越小
   camera.upperRadiusLimit = 40;
-  camera.radius = 11.558;
+  camera.radius = 10.48;
   camera.alpha = (Math.PI * -211.4) / 180;
   camera.beta = (Math.PI * 66) / 180;
   camera.inertia = 0.1; // 缩放的快慢

src/router/routers.js

@@ -57,6 +57,11 @@ export const constantRouterMap = [
         meta: { title: '个人中心' }
       }
     ]
+  },
+  {
+    path: '/environmentalScreen',
+    component: (resolve) => require(['@/views/environmentalScreen/index'], resolve),
+    hidden: true
   }
 ]
 

src/views/dashboard/LineChart.vue

@@ -58,13 +58,29 @@ export default {
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$el, 'dark', 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({ expectedData, actualData } = {}) {
+    setOptions({ actualData } = {}) {
       this.chart.setOption({
+        backgroundColor: '#021941',
         xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          type: 'category',
+          axisLine: {
+            // 是否显示以及样式设置
+            show: true,
+            // onZero: true,//表示 X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
+            lineStyle: {
+              width: '1',
+              color: '#113D72',
+              type: 'solid'
+            }
+          },
+          axisLabel: {
+            fontWeight: 'bold',
+            color: '#fff'
+          },
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
           boundaryGap: false,
           axisTick: {
             show: false
@@ -85,49 +101,71 @@ export default {
           padding: [5, 10]
         },
         yAxis: {
+          max: 900,
+          min: 0,
+          interval: 300,
           axisTick: {
             show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+              fontWeight: 'bold'
             }
           },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
+          // 轴线
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#113D72',
+              width: '1',
+              type: 'solid'
+            }
+          },
+          // 分割线
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#113D72',
+              type: 'dashed',
+              // 透明度
+              opacity: 1,
+              width: 1
+            }
+          }
         },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
+        series: [
+          {
+            name: 'actual',
+            smooth: true,
+            type: 'line',
+            itemStyle: {
+              normal: {
                 color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
+                lineStyle: {
+                  color: '#3888fa',
+                  width: 2
+                },
+                areaStyle: {
+                  opacity: 0.6,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: 'rgba(51, 156, 255, 1)'
+
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(51, 156, 255, 0)'
+                    }
+                  ])
+                }
               }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
+            },
+            data: actualData,
+            animationDuration: 2800,
+            animationEasing: 'quadraticOut'
+          }]
       })
     }
   }

src/views/environmentalScreen/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="env-container">
+    <div class="env-top-title" />
+    <div class="env-main">
+      <div class="env-main-left">
+        <div class="env-item container-wrap">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <h3><i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据</h3>
+        </div>
+        <div class="env-item container-wrap">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <h3><i class="iconfont icon-loushuijiance" />漏水检测</h3>
+        </div>
+        <div class="env-item container-wrap">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <h3><i class="iconfont icon-menjinjilu" />门禁记录</h3>
+          <el-table
+            ref="table"
+            style="min-width: 100%;"
+            height="100%"
+            :data="tableData"
+            class="warehose-el-table"
+            :row-class-name="rowBgColor"
+          >
+            <el-table-column prop="time" label="时间" align="center" min-width="60" />
+            <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
+            <el-table-column prop="name" label="档案名称" align="center" :show-overflow-tooltip="true" min-width="85" />
+          </el-table>
+        </div>
+      </div>
+      <div class="env-main-middle">
+        <div class="env-3d">
+          <iframe
+            id="myIframe"
+            ref="myIframe"
+            name="iframeMap"
+            class="iframe_box"
+            src="/webA/index.html"
+            frameborder="0"
+            scrolling="no"
+          />
+        </div>
+        <div class="env-item container-wrap">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <h3><i class="iconfont icon-shebeizhuangtai" />设备状态</h3>
+        </div>
+      </div>
+      <div class="env-main-right">
+        <div class="env-item container-wrap">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <h3><i class="iconfont icon-zhenglishi" />阅览室</h3>
+          <LineChart />
+        </div>
+        <div class="env-item container-wrap">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <h3><i class="iconfont icon-zhenglishi" />整理室</h3>
+        </div>
+        <div class="env-item container-wrap">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <h3><i class="iconfont icon-baojingjilu" />报警记录</h3>
+          <el-table
+            ref="table"
+            style="min-width: 100%;"
+            height="100%"
+            :data="tableData"
+            class="warehose-el-table"
+            :row-class-name="rowBgColor"
+          >
+            <el-table-column prop="time" label="时间" align="center" min-width="60" />
+            <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
+            <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LineChart from './module/lineChart'
+export default {
+  name: 'Dashboard',
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  methods: {
+    // 表格隔行变色
+    rowBgColor({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'light-blue'
+      } else {
+        return ''
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+.env-container{
+  width: 100%;
+  height: calc(100vh);
+  background-color: #031435;
+  .env-top-title{
+    width: calc(100vw);
+    height: 130px;
+    background: url('~@/assets/images/largeScreen/top-title.png') no-repeat 0 -14px;
+    background-size: contain;
+  }
+  .env-main{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 25px;
+    .env-main-left,
+    .env-main-right{
+      width: 458px;
+      height: calc(100vh - 150px);
+      overflow: hidden;
+    }
+    .env-main-middle{
+      flex: 1;
+      margin: 0 20px;
+    }
+    .container-wrap{
+      height: calc(100%/3 - 14px);
+      min-height: auto;
+    }
+    .env-item {
+      margin-bottom: 20px;
+      text-align: center;
+      h3{
+        position: relative;
+        display: inline-block;
+        padding: 10px 70px;
+        font-size: 16px;
+        color: #fff;
+        .iconfont{
+          margin-right: 10px;
+          font-size: 14px;
+          color: #F65163;
+        }
+        &::before{
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 36px;
+          height: 12px;
+          margin-top: -6px;
+          background: url('~@/assets/images/largeScreen/item-left.png') no-repeat;
+          background-size: cover;
+        }
+        &::after{
+          content: "";
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 36px;
+          height: 12px;
+          margin-top: -6px;
+          background: url('~@/assets/images/largeScreen/item-right.png') no-repeat;
+          background-size: cover;
+        }
+      }
+    }
+    .env-3d{
+      height: calc(100vh - (100%/2) - 28px);
+      margin-bottom: 20px;
+      overflow: hidden;
+      .iframe_box{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/environmentalScreen/module/lineChart.vue

@@ -0,0 +1,217 @@
+<template>
+  <div style="height:84%">
+    <div id="container" style="height:100%" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  data() {
+    return {
+      chart: null,
+      temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
+      humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      const dom = document.getElementById('container')
+      this.chart = echarts.init(dom, 'dark', {
+        renderer: 'canvas',
+        useDirtyRect: false
+      })
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        backgroundColor: '#021941',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          textStyle: {
+            fontSize: '16px',
+            color: '#339CFF'
+          },
+          data: ['温度（℃）', '湿度（%）']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          // 坐标轴轴线相关设置
+          axisLine: {
+            // 是否显示以及样式设置
+            show: true,
+            // onZero: true,//表示 X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
+            lineStyle: {
+              width: '1',
+              color: '#113D72',
+              type: 'solid'
+            }
+          },
+          axisLabel: {
+            fontWeight: 'bold',
+            color: '#fff'
+          },
+          data: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
+        }],
+        yAxis: [
+          {
+            type: 'value',
+            // 坐标轴最大值、最小值、强制设置数据的步长间隔
+            max: 24,
+            min: 10,
+            interval: 2,
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
+                fontWeight: 'bold'
+              },
+              // y轴上带的单位
+              formatter: '{value} ℃'
+            },
+            // 轴线
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#113D72',
+                width: '1',
+                type: 'solid'
+              }
+            },
+            // 坐标轴刻度相关设置。
+            axisTick: {
+              show: false
+            },
+            // 分割线
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#113D72',
+                type: 'dashed',
+                // 透明度
+                opacity: 1,
+                width: 1
+              }
+            }
+          },
+          {
+            type: 'value',
+            max: 80,
+            min: 10,
+            interval: 10,
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
+                fontWeight: 'bold'
+              },
+              formatter: '{value} %'
+            },
+            // 轴线
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#113D72',
+                width: '1',
+                type: 'solid'
+              }
+            },
+            // 坐标轴刻度相关设置。
+            axisTick: {
+              show: false
+            },
+            // 分割线
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: '温度（℃）',
+            type: 'line',
+            smooth: 0.6,
+            gridIndex: 0,
+            lineStyle: {
+              width: 1,
+              color: '#18B08F'
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.6,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+
+                {
+                  offset: 0,
+                  color: 'rgba(24, 176, 143, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(23, 175, 142, 1)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.temperatureData
+          },
+          {
+            name: '湿度（%）',
+            type: 'line',
+            smooth: 0.4,
+            yAxisIndex: 1,
+            lineStyle: {
+              width: 1,
+              color: '#FE8042'
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.6,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(254, 128, 66, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(254, 128, 66, 1)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.humidnessData
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/system/messageCenter/index.vue

@@ -1,15 +1,48 @@
 <template>
   <div>
-    消息中心页面
+    <div class="head-container">
+      <el-button icon="el-icon-delete" size="mini">删除</el-button>
+      <el-button icon="el-icon-delete" size="mini">标记已读</el-button>
+      <el-button icon="el-icon-delete" size="mini">全部标记已读</el-button>
+      <date-range-picker v-model="query.createTime" class="date-item" />
+    </div>
+    <div class="app-container container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <!--表格渲染-->
+      <!-- :cell-class-name="cell"
+        @selection-change="selectionChangeHandler"
+         -->
+      <el-table
+        ref="table"
+        :data="tableData"
+        style="width: 100%;"
+        height="calc(100vh - 245px)"
+        @row-click="clickRowHandler"
+        @selection-change="selectionChangeHandler"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column prop="notification" :show-overflow-tooltip="true" label="通知内容" min-width="500" align="center" />
+        <el-table-column prop="msgType" label="消息类型" align="center" min-width="150" />
+        <el-table-column prop="sendRole" label="推送人" align="center" min-width="150" />
+        <el-table-column prop="sendTime" label="推送时间" align="center" min-width="180" />
+      </el-table>
+    </div>
   </div>
 </template>
 
 <script>
+import DateRangePicker from '@/components/DateRangePicker'
 export default {
   name: 'MessageCenter',
+  components: { DateRangePicker },
   data() {
     return {
-
+      query: {
+        createTime: null
+      },
+      tableData: []
     }
   },
   created() {
@@ -22,4 +55,12 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/assets/styles/lend-manage.scss';
+.head-container .date-item{
+  margin: -1px 20px 0 12px;
+}
+.container-wrap{
+  margin-top: 0;
+  min-height: 0;
+  height: calc(100vh - 240px);
+}
 </style>