大屏可视化，报警记录更改

src/api/modules/visualized/index.api.js

@@ -20,7 +20,7 @@ export default ({
     })
   },
  
-//历史预警趋势
+//历史预警趋势/温湿度变换
 hisWarning(params) {
   return request({
     url: '/vis/monthAndWeek',
@@ -29,4 +29,14 @@ hisWarning(params) {
   })
 },
 
+
+//预警信息
+warnInfo(params) {
+  return request({
+    url: '/vis/alarmRecord',
+    method: 'post',
+    params
+  })
+},
+
 })

src/router/routes.js

@@ -8,14 +8,14 @@ const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
  * 在主框架内显示
  */
 const frameIn = [
-  {  // 大屏首页
-    path: '/visualized',
-    name: 'visualized',
-    meta: {
-      auth: true
-    },
-    component: _import('system/visualized')
-  },
+  // {  // 大屏首页
+  //   path: '/visualized',
+  //   name: 'visualized',
+  //   meta: {
+  //     auth: true
+  //   },
+  //   component: _import('system/visualized')
+  // },
 
   {
     path: '/',
@@ -316,14 +316,14 @@ const frameIn = [
  * 在主框架之外显示
  */
 const frameOut = [
-  // {  // 大屏首页
-  //   path: '/visualized',
-  //   name: 'visualized',
-  //   // meta: {
-  //   //   auth: true
-  //   // },
-  //   component: _import('system/visualized')
-  // },
+  {  // 大屏首页
+    path: '/visualized',
+    name: 'visualized',
+    // meta: {
+    //   auth: true
+    // },
+    component: _import('system/visualized')
+  },
   // 登录
   {
     path: '/login',

src/views/demo/equipmentManage/compontents/addDialogC.vue

@@ -21,6 +21,18 @@
               placeholder="请输入"
             ></el-input>
           </el-form-item>
+          <el-form-item label="设备标签编码" prop="labelCode" >
+            <!-- <el-select v-model="addForm.name" placeholder="请选择" >
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select> -->
+            <el-input
+            style="width:220px"
+           
+              v-model.trim="addForm.labelCode"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
           <el-form-item label="备注：">
             <el-input
               style="width: 80%"

src/views/demo/equipmentManage/equipmentTag/index.vue

@@ -55,6 +55,8 @@
                   :index="indexMethod"
                   show-overflow-tooltip
                 ></el-table-column>
+                <el-table-column prop="labelCode" label="标签编码" align="center">
+                </el-table-column>
                 <el-table-column prop="labelName" label="标签名称" align="center">
                 </el-table-column>
 

src/views/demo/parameManagement/alarmParame/index.vue

@@ -143,7 +143,12 @@
       >
 
         <el-form-item label="报警类型:" prop="alarmTypeName">
-          <el-select
+          <!-- <el-cascader
+    v-model="addForm.alarmTypeName"
+    :options="bjlxArr"
+    :props="{ expandTrigger: 'hover' }"
+   ></el-cascader> -->
+       <el-select
             size="mini"
             v-model="addForm.alarmTypeName"
             placeholder="请选择"
@@ -451,7 +456,9 @@ export default {
       formInline: {},
       addSbDialog: false,
       tableData: [{}],
-      addForm: {},
+      addForm: {
+    
+      },
       rules: {
         alarmValueMax: [
           { required: true, message: "请输入高限阈值", trigger: "blur" },
@@ -648,7 +655,8 @@ export default {
       }
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          this.addForm.orgCode=this.orgCode;
+          this.addForm.orgCode=localStorage.getItem('orgCode')
+          console.log(this.addForm.orgCode,"this.addForm.orgCode")
           this.addForm.devInfoList = this.yxTableData;
           if (this.title1 == "新建报警配置信息") {
             api.alarmParamsSave(this.addForm).then((res) => {
@@ -677,6 +685,7 @@ export default {
             str += item.validateMessage;
           });
           if (this.yxTableData.length > 0 && str == "请选择设备") {
+            this.addForm.orgCode=localStorage.getItem('orgCode')
             this.addForm.devInfoList = this.yxTableData;
             if (this.title1 == "新建报警配置信息") {
               api.alarmParamsSave(this.addForm).then((res) => {
@@ -719,7 +728,7 @@ export default {
       console.log(data);
       this.$set(this.addForm, "alarmTypeCode", data.enumCode);
       this.$set(this.addForm, "alarmTypeName", data.enumName);
-      this.$set(this.addForm, "label", data.enumName);
+      // this.$set(this.addForm, "label", data.enumName);
       // 使 input 失去焦点，并隐藏下拉框
       this.$refs.selectTree1.blur();
     },
@@ -971,10 +980,12 @@ export default {
     },
     getBjlxArr() {
       var condition = {
-        enumName: "报警类型",
+        enumCode: "110000",
       };
       condition = JSON.stringify(condition);
       var data = {
+        pageIndex:1,
+        pageSize:1,
         condition: condition,
       };
       api

src/views/system/visualized/cnTemp/index.vue

@@ -0,0 +1,407 @@
+<template >
+  <div class="cnTemp">
+            <div class="title">仓内温度云图</div>
+            <div class="cnwdShow">
+              <div class="lsyj-right">
+                <div class="right-bottom" style="height: 100%">
+                  <div id="cnwdCharts" style="height: 100%"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data(){
+        return{
+
+        }
+    },
+    methods:{
+       //仓内温度
+
+    drawCnwd() {
+      var myChart4 = this.$echarts.init(document.getElementById("cnwdCharts"));
+      myChart4.setOption({
+        grid: {
+          // 让图表占满容器
+          top: "20px",
+          left: "30px",
+          right: "20px",
+          bottom: "20px",
+        },
+        xAxis: {
+          scale: true,
+          axisLine: {
+            lineStyle: {
+              color: "#40524f",
+            },
+          },
+          axisLabel: {
+            color: "white",
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#011F13",
+            },
+          },
+        },
+        yAxis: {
+          scale: true,
+          axisLine: {
+            lineStyle: {
+              color: "#40524f",
+            },
+          },
+          axisLabel: {
+            color: "white",
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#011F13",
+            },
+          },
+        },
+        series: [
+          {
+            //涟漪类型
+            type: "effectScatter",
+            symbolSize: 15,
+            rippleEffect: {
+              color: "#4ac4af",
+              scale: 2.5,
+            },
+            itemStyle: {
+              // 137c6b---4ac4af
+              normal: {
+                color: "#4ac4af",
+                lineStyle: {
+                  color: "#137c6b;",
+                },
+              },
+            },
+            data: [
+              [172.7, 105.2],
+              [153.4, 42],
+              [170.0, 59.0],
+              [159.8, 50.0],
+              [176.5, 71.8],
+            ],
+          },
+          {
+            type: "scatter",
+            // prettier-ignore
+            // symbol:"pin",
+            itemStyle: {
+        normal: {
+            color: "#2c695f",
+            lineStyle: {
+                color: "#77f0dc;"
+            }
+        },
+        
+    },
+
+            data: [
+              [161.2, 51.6],
+              [167.5, 59.0],
+              [159.5, 49.2],
+              [157.0, 63.0],
+              [155.8, 53.6],
+              [170.0, 59.0],
+              [166.0, 69.8],
+              [176.2, 66.8],
+              [172.5, 55.2],
+              [170.9, 54.2],
+              [172.9, 62.5],
+              [153.4, 42.0],
+              [147.2, 49.8],
+              [168.2, 49.2],
+              [175.0, 73.2],
+              [157.0, 47.8],
+              [167.6, 68.8],
+              [175.0, 82.5],
+              [166.8, 57.2],
+              [176.5, 87.8],
+              [170.2, 72.8],
+              [174.0, 54.5],
+              [173.0, 59.8],
+              [179.9, 67.3],
+              [170.5, 67.8],
+              [154.4, 46.2],
+              [162.0, 55.0],
+              [176.5, 83.0],
+              [152.0, 45.8],
+              [162.1, 53.6],
+              [170.0, 73.2],
+              [166.4, 56.6],
+              [168.9, 62.3],
+              [163.8, 58.5],
+              [167.6, 54.5],
+              [167.6, 58.3],
+              [165.1, 56.2],
+              [160.0, 50.2],
+              [170.0, 72.9],
+              [167.6, 61.0],
+              [163.2, 55.9],
+              [152.4, 46.5],
+              [168.3, 54.8],
+              [180.3, 60.7],
+              [165.5, 60.0],
+              [165.0, 62.0],
+              [164.5, 60.3],
+              [156.0, 52.7],
+              [160.0, 74.3],
+              [163.0, 62.0],
+              [165.7, 73.1],
+              [166.0, 53.2],
+              [174.0, 75.7],
+              [172.7, 61.1],
+              [167.6, 55.7],
+              [151.1, 48.7],
+              [164.5, 52.3],
+              [163.5, 50.0],
+              [152.0, 59.3],
+              [169.0, 62.5],
+              [164.0, 55.7],
+              [161.2, 54.8],
+              [155.0, 45.9],
+              [170.0, 70.6],
+              [176.2, 67.2],
+              [170.0, 69.4],
+              [162.5, 58.2],
+              [170.3, 64.8],
+              [164.1, 71.6],
+              [169.5, 52.8],
+              [163.2, 59.8],
+              [154.5, 49.0],
+              [159.8, 50.0],
+              [173.2, 69.2],
+              [170.0, 55.9],
+              [161.4, 63.4],
+              [169.0, 58.2],
+              [166.2, 58.6],
+              [159.4, 45.7],
+              [162.5, 52.2],
+              [159.0, 48.6],
+              [162.8, 57.8],
+              [159.0, 55.6],
+              [179.8, 66.8],
+              [162.9, 59.4],
+              [161.0, 53.6],
+              [151.1, 73.2],
+              [168.2, 53.4],
+              [168.9, 69.0],
+              [173.2, 58.4],
+              [171.8, 56.2],
+              [178.0, 70.6],
+              [164.3, 59.8],
+              [163.0, 72.0],
+              [168.5, 65.2],
+              [166.8, 56.6],
+              [172.7, 105.2],
+              [163.5, 51.8],
+              [169.4, 63.4],
+              [167.8, 59.0],
+              [159.5, 47.6],
+              [167.6, 63.0],
+              [161.2, 55.2],
+              [160.0, 45.0],
+              [163.2, 54.0],
+              [162.2, 50.2],
+              [161.3, 60.2],
+              [149.5, 44.8],
+              [157.5, 58.8],
+              [163.2, 56.4],
+              [172.7, 62.0],
+              [155.0, 49.2],
+              [156.5, 67.2],
+              [164.0, 53.8],
+              [160.9, 54.4],
+              [162.8, 58.0],
+              [167.0, 59.8],
+              [160.0, 54.8],
+              [160.0, 43.2],
+              [168.9, 60.5],
+              [158.2, 46.4],
+              [156.0, 64.4],
+              [160.0, 48.8],
+              [167.1, 62.2],
+              [158.0, 55.5],
+              [167.6, 57.8],
+              [156.0, 54.6],
+              [162.1, 59.2],
+              [173.4, 52.7],
+              [159.8, 53.2],
+              [170.5, 64.5],
+              [159.2, 51.8],
+              [157.5, 56.0],
+              [161.3, 63.6],
+              [162.6, 63.2],
+              [160.0, 59.5],
+              [168.9, 56.8],
+              [165.1, 64.1],
+              [162.6, 50.0],
+              [165.1, 72.3],
+              [166.4, 55.0],
+              [160.0, 55.9],
+              [152.4, 60.4],
+              [170.2, 69.1],
+              [162.6, 84.5],
+              [170.2, 55.9],
+              [158.8, 55.5],
+              [172.7, 69.5],
+              [167.6, 76.4],
+              [162.6, 61.4],
+              [167.6, 65.9],
+              [156.2, 58.6],
+              [175.2, 66.8],
+              [172.1, 56.6],
+              [162.6, 58.6],
+              [160.0, 55.9],
+              [165.1, 59.1],
+              [182.9, 81.8],
+              [166.4, 70.7],
+              [165.1, 56.8],
+              [177.8, 60.0],
+              [165.1, 58.2],
+              [175.3, 72.7],
+              [154.9, 54.1],
+              [158.8, 49.1],
+              [172.7, 75.9],
+              [168.9, 55.0],
+              [161.3, 57.3],
+              [167.6, 55.0],
+              [165.1, 65.5],
+              [175.3, 65.5],
+              [157.5, 48.6],
+              [163.8, 58.6],
+              [167.6, 63.6],
+              [165.1, 55.2],
+              [165.1, 62.7],
+              [168.9, 56.6],
+              [162.6, 53.9],
+              [164.5, 63.2],
+              [176.5, 73.6],
+              [168.9, 62.0],
+              [175.3, 63.6],
+              [159.4, 53.2],
+              [160.0, 53.4],
+              [170.2, 55.0],
+              [162.6, 70.5],
+              [167.6, 54.5],
+              [162.6, 54.5],
+              [160.7, 55.9],
+              [160.0, 59.0],
+              [157.5, 63.6],
+              [162.6, 54.5],
+              [152.4, 47.3],
+              [170.2, 67.7],
+              [165.1, 80.9],
+              [172.7, 70.5],
+              [165.1, 60.9],
+              [170.2, 63.6],
+              [170.2, 54.5],
+              [170.2, 59.1],
+              [161.3, 70.5],
+              [167.6, 52.7],
+              [167.6, 62.7],
+              [165.1, 86.3],
+              [162.6, 66.4],
+              [152.4, 67.3],
+              [168.9, 63.0],
+              [170.2, 73.6],
+              [175.2, 62.3],
+              [175.2, 57.7],
+              [160.0, 55.4],
+              [165.1, 104.1],
+              [174.0, 55.5],
+              [170.2, 77.3],
+              [160.0, 80.5],
+              [167.6, 64.5],
+              [167.6, 72.3],
+              [167.6, 61.4],
+              [154.9, 58.2],
+              [162.6, 81.8],
+              [175.3, 63.6],
+              [171.4, 53.4],
+              [157.5, 54.5],
+              [165.1, 53.6],
+              [160.0, 60.0],
+              [174.0, 73.6],
+              [162.6, 61.4],
+              [174.0, 55.5],
+              [162.6, 63.6],
+              [161.3, 60.9],
+              [156.2, 60.0],
+              [149.9, 46.8],
+              [169.5, 57.3],
+              [160.0, 64.1],
+              [175.3, 63.6],
+              [169.5, 67.3],
+              [160.0, 75.5],
+              [172.7, 68.2],
+              [162.6, 61.4],
+              [157.5, 76.8],
+              [176.5, 71.8],
+              [164.4, 55.5],
+              [160.7, 48.6],
+              [174.0, 66.4],
+              [163.8, 67.3],
+
+              //   [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+              //   [159.5, 47.6], [167.6, 63.0],
+              //   [167.6, 57.8],  [159.8, 53.2],
+              //   [170.5, 64.5],  [162.6, 58.6],
+
+              //  [163.8, 67.3]
+            ],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        setTimeout(() => {
+          myChart4.resize();
+        }, 1000);
+      });
+    },
+    },
+    created(){
+        this.$nextTick(() => {
+     this.drawCnwd()
+
+
+    });
+    }
+}
+
+</script>
+<style lang="scss" scoped>
+
+      .cnTemp {
+        height: 100%;
+        width: 21%;
+        background: url("../../../../assets/images/bigScreen/tempBorder.png")
+          no-repeat;
+        background-size: 100% 100%;
+        .title {
+          height: 37px;
+          line-height: 37px;
+          margin-left: 10px;
+          color: #fff;
+          font-weight: 600;
+        }
+      }
+      .cnTemp {
+        width: 25%;
+        .cnwdShow {
+          height: calc(100% - 37px);
+          .lsyj-right {
+            height: 100%;
+          }
+        }
+      }
+   
+    
+</style>

src/views/system/visualized/lsyj/index.vue

@@ -0,0 +1,202 @@
+<template >
+    <div class="lsyj">
+            <div class="title">历史预警趋势</div>
+            <div class="lsyj-right">
+              <div class="right-top">
+                <div style="font-size: 14px">最高温度:{{maxTemp}}</div>
+                <div style="font-size: 14px">最低温度:{{minTemp}}</div>
+              </div>
+              <div class="right-bottom" style="height: calc(100% - 30px)">
+                <div id="lsyjCharts" style="height: 100%"></div>
+              </div>
+            </div>
+          </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import api from "@/api";
+export default {
+    data(){
+        return{
+         lsyjData:[],
+         maxTemp:null,
+         minTemp:null,
+        }
+    },
+    methods:{
+       //历史月趋势
+    getHisWarning() {
+      let params = {
+        labelCode: "307038864601222",
+        orgCode: localStorage.getItem("orgCode"),
+
+        round: 2,
+      };
+      api.hisWarning(params).then((res) => {
+        console.log(res, "月趋势");
+        if(res.code==200){
+          this.lsyjData=res.data.avgTemp
+          this.maxTemp=res.data.maxTemp
+          this.minTemp=res.data.minTemp
+        this.drawLsyj()
+        }
+       
+      });
+    },
+         // 历史预警
+         drawLsyj() {
+      var myChart2 = this.$echarts.init(document.getElementById("lsyjCharts"));
+      myChart2.setOption({
+        title: {
+          text: "",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        // legend: {
+        //   data: ['温度', '湿度'],
+        //   left:'middle',
+        //   top:"6%",
+        //   textStyle:{
+        //     color:'#fff'
+        //   }
+
+        // },
+        toolbox: {
+          // feature: {
+          //   saveAsImage: {}
+          // }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          top: "7%",
+
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            name: "月",
+
+            nameTextStyle: {
+              //关键代码
+              padding: [50, 0, 10, -13],
+            },
+            type: "category",
+            // boundaryGap: false,
+            data: [
+              "1",
+              "2",
+              "3",
+              "4",
+              "5",
+              "6",
+              "7",
+              "8",
+              "9",
+              "10",
+              "11",
+              "12",
+            ],
+            axisLabel: {
+              color: "white",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              color: "white",
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#011F13",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "温度",
+            itemStyle: {
+              normal: {
+                // barBorderRadius: [10, 10, 0, 0],
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: "#00ffa7" },
+                  { offset: 1, color: "#00caae" },
+                ]),
+              },
+            },
+            type: "bar",
+            smooth: true,
+            lineStyle: {
+              color: "#2496ef",
+            },
+            stack: "Total",
+            areaStyle: {
+              opacity: 0.3,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: this.lsyjData,
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        setTimeout(() => {
+          myChart2.resize();
+        }, 1000);
+      });
+    
+        }
+    },
+    created(){
+    
+        this.getHisWarning()
+  
+   
+       
+    }
+}
+
+</script>
+<style lang="scss" scoped>
+ .lsyj{
+        height: 100%;
+        width: 21%;
+        background: url("../../../../assets/images/bigScreen/tempBorder.png")
+          no-repeat;
+        background-size: 100% 100%;
+        .title {
+          height: 37px;
+          line-height: 37px;
+          margin-left: 10px;
+          color: #fff;
+          font-weight: 600;
+        }
+      }
+  
+    
+      .lsyj {
+        .lsyj-right {
+          height: calc(100% - 37px);
+          .right-top {
+            height: 30px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            color: #fff;
+          }
+        }
+      }
+     
+</style>

src/views/system/visualized/wsdbh/index.vue

@@ -0,0 +1,241 @@
+<template >
+      <div class="wsdbh">
+            <div class="title">温湿度变换趋势</div>
+            <div class="wsdbhShow">
+              <div class="wsdbh-left">
+                <div class="left1">
+                  <div
+                    style="margin-left: 27px; margin-top: 10px; color: #01e0c2"
+                  >
+                    {{maxTemp}}°C
+                  </div>
+                  <div
+                    style="
+                      margin-left: 29px;
+                      font-size: 12px;
+                      margin-top: 5px;
+                      color: #fff;
+                    "
+                  >
+                    温度
+                  </div>
+                </div>
+                <div class="left2">
+                  <div
+                    style="margin-left: 27px; margin-top: 10px; color: #01e0c2"
+                  >
+                    {{maxWet}}%
+                  </div>
+                  <div
+                    style="
+                      margin-left: 29px;
+                      font-size: 12px;
+                      margin-top: 5px;
+                      color: #fff;
+                    "
+                  >
+                    湿度
+                  </div>
+                </div>
+              </div>
+              <div class="wsdbh-right">
+                <div id="wsdbhCharts" style="height: 100%"></div>
+              </div>
+            </div>
+          </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import api from "@/api";
+export default {
+    data(){
+        return{
+          avgWet:[],
+          avgTemp:[],
+          maxTemp:null,
+          maxWet:null
+
+        }
+    },
+    methods:{
+         //历史月趋势
+    getHisWarning() {
+      let params = {
+        labelCode: "307038864601222",
+        orgCode: localStorage.getItem("orgCode"),
+
+        round: 7,
+      };
+      api.hisWarning(params).then((res) => {
+        console.log(res, "温湿度变换趋势");
+        if(res.code==200){
+          this.avgTemp=res.data.avgTemp
+          this.avgWet=res.data.avgWet
+          this.maxTemp=res.data.maxTemp
+         this.maxWet=res.data.maxWet
+        this.drawWsdbh()
+        }
+       
+      });
+    },
+      //温湿度
+    drawWsdbh() {
+      var myChart1 = this.$echarts.init(document.getElementById("wsdbhCharts"));
+      myChart1.setOption({
+        title: {
+          text: "",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        legend: {
+          data: ["温度", "湿度"],
+          left: "middle",
+          top: "6%",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        toolbox: {
+          // feature: {
+          //   saveAsImage: {}
+          // }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+            axisLabel: {
+              color: "white",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              color: "white",
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#011F13",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "温度",
+            type: "line",
+            smooth: true,
+            lineStyle: {
+              color: "#2496ef",
+            },
+            stack: "Total",
+            areaStyle: {
+              opacity: 0.3,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: this.avgTemp,
+          },
+          {
+            name: "湿度",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            areaStyle: {
+              opacity: 0.3,
+            },
+            lineStyle: {
+              color: "#ffd726",
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: this.avgWet
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        setTimeout(() => {
+          myChart1.resize();
+        }, 1000);
+      });
+    },
+    },
+    created(){
+        this.$nextTick(() => {
+     this.getHisWarning()
+
+
+    });
+    }
+}
+
+</script>
+<style lang="scss" scoped>
+
+
+      .wsdbh {
+        height: 100%;
+        width: 21%;
+        background: url("../../../../assets/images/bigScreen/tempBorder.png")
+          no-repeat;
+        background-size: 100% 100%;
+        .title {
+          height: 37px;
+          line-height: 37px;
+          margin-left: 10px;
+          color: #fff;
+          font-weight: 600;
+        }
+      }
+    
+      .wsdbh {
+        height: 100%;
+        width: 30%;
+        .wsdbhShow {
+          height: calc(100% - 37px);
+          display: flex;
+          justify-content: space-between;
+          .wsdbh-left {
+            width: 90px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            //  background: url("../../../assets/images/bigScreen/cangfang.png");
+            // background-size: cover;
+            .left1,
+            .left2 {
+              height: 60px;
+              background: url("../../../../assets/images/bigScreen/wsdbh.png");
+              background-size: 100% 100%;
+            }
+          }
+          .wsdbh-right {
+            flex: 1;
+            .wsdbhCharts {
+              height: 100%;
+            }
+          }
+        }
+      }
+     
+      
+</style>

src/views/system/visualized/yjxx/index.vue

@@ -0,0 +1,180 @@
+<template >
+<div class="yjxx">
+            <div class="title">预警信息</div>
+            <div class="dataShow">
+              <ul class="outUl">
+                <li style="color: #26dec5">预警信息</li>
+                <li style="color: #26dec5">预警点</li>
+                <li style="color: #26dec5">监测时间</li>
+              </ul>
+              <vue-seamless-scroll
+                :data="tableData"
+                :class-option="classOption"
+                class="scroll"
+                id="yjxxScroll"
+              >
+                <ul
+                  class="DataList_top inUl"
+                  v-for="(item, index) in tableData"
+                  :key="index"
+                >
+                  <li class="DataList_left">
+                    <span
+                      style="
+                        width: 5px;
+                        height: 5px;
+                        border-radius: 50%;
+                        background: rgb(38, 222, 197);
+                        display: inline-block;
+
+                        margin-right: 5px;
+                      "
+                    ></span
+                    >{{ item.alarmRemark }}
+                  </li>
+                  <li class="DataList_left">
+                    {{ item.deviceName }}
+                  </li>
+                  <li class="DataList_left">
+                    {{ item.alarmTime }}
+                  </li>
+                </ul>
+              </vue-seamless-scroll>
+            
+            </div>
+          </div>
+</template>
+<script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+import * as echarts from "echarts";
+import api from "@/api";
+export default {
+  components: {
+    vueSeamlessScroll,
+   
+  },
+    data(){
+        return{
+          tableData:[
+            {
+              temp:30,
+              shidu:36,
+              jcsj:"2021-10-25"
+
+            }
+          ]
+        }
+    },
+    computed: {
+    classOption() {
+      return {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 5, // 开始无缝滚动的数据量 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, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
+    methods:{
+       //历史月趋势
+    getWarnInfo() {
+      let params = {
+        labelCode: "307038864601222",
+        orgCode: localStorage.getItem("orgCode"),
+
+        pageSize: 5,
+      };
+      api.warnInfo(params).then((res) => {
+        console.log(res, "预警信息");
+        if(res.code==200){
+          this.tableData=res.data
+        }
+       
+      });
+    },
+        
+    },
+    created(){
+    
+        this.getWarnInfo()
+  
+   
+       
+    }
+}
+
+</script>
+<style lang="scss" scoped>
+
+      .yjxx {
+        height: 100%;
+        width: 21%;
+        background: url("../../../../assets/images/bigScreen/tempBorder.png")
+          no-repeat;
+        background-size: 100% 100%;
+        .title {
+          height: 37px;
+          line-height: 37px;
+          margin-left: 10px;
+          color: #fff;
+          font-weight: 600;
+        }
+        .dataShow {
+        padding-top: 10px;
+      }
+      }
+
+      .outUl {
+    display: flex;
+
+    justify-content: space-around;
+    //   padding: 7px 0;
+    color: #ccc;
+    font-weight: bolder;
+
+    li {
+      display: flex;
+
+      justify-content: space-around;
+      text-align: center;
+      width: 27%;
+      font-size: 14px;
+    }
+    li:nth-child(3) {
+      width: 46%;
+    }
+    //   // li:nth-child(1) {
+    //   //   width: 24%;
+    //   // }
+  }
+  .inUl {
+    display: flex;
+
+    justify-content: space-around;
+
+    li {
+      line-height: 29px;
+      text-align: center;
+      width: 27%;
+      font-size: 12px;
+      color: rgb(204, 236, 232);
+      // color:rgb(29, 221, 196);
+    }
+
+    li:nth-child(3) {
+      width: 46%;
+    }
+  }
+  #yjxxScroll {
+  height: 140px;
+  overflow: hidden;
+}
+    
+    
+   
+  
+</style>