alarm

src/components/coms/table/table2.vue

@@ -9,7 +9,7 @@
       :sortable="col.sortable"
       :show-overflow-tooltip="!col.slot"
       :fixed="col.fixed"
-      :align="col.align ? col.align : 'center'"
+      :align="'center'"
       :resizable="col.resizable"
       :header-align="'center'"
     >

src/views/NewPages/alarm-center-1.vue

@@ -6,129 +6,97 @@
           <div class="query-item">
             <div class="lable">风场：</div>
             <div class="search-input">
-              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              <el-select
+                v-model="wpvalue"
+                clearable
+                placeholder="请选择"
+                popper-class="select"
+              >
+                <el-option
+                  v-for="item in wpoptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
               </el-select>
             </div>
           </div>
           <div class="query-item">
             <div class="lable">开始日期：</div>
             <div class="search-input">
-              <el-date-picker v-model="value2" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+              <el-date-picker
+                v-model="startdate"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
             </div>
           </div>
           <div class="query-item">
             <div class="lable">结束日期：</div>
             <div class="search-input">
-              <el-date-picker v-model="value3" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+              <el-date-picker
+                v-model="enddate"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
             </div>
           </div>
           <div class="query-item">
             <div class="lable">规则：</div>
-            <div class="search-input">
-              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-              </el-select>
-            </div>
+              <el-cascader
+                style="width: 240px"
+                size="mini"
+                popper-class="search-select"
+                :options="cascaderOptions"
+                :props="cascaderProps"
+                v-model="cascaderSel"
+                collapse-tags
+                :clearable='true'
+              ></el-cascader>
           </div>
         </div>
         <div class="query-actions">
-          <button class="btn green">搜索</button>
-          <button class="btn green">筛选</button>
+          <button class="btn green" @click="searchData">搜索</button>
+          <button class="btn green" @click="searchTree">筛选</button>
           <button class="btn green">导出</button>
         </div>
       </div>
     </div>
     <panel-3 class="table-panel">
       <table-2 :data="tableData" :height="'88vh'">
-        <template v-slot:v1="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v2="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v3="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v4="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v5="scope">
+        <template v-for="(item, i) in column" :key="i" #[item]="scope">
           <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
+            <div
+              class="bar-percent"
+              :style="{
+                width:
+                  (scope.data.count &&
+                    scope.data.count / (scope.data.count + scope.data.time)) *
+                    100 +
+                  'px',
+              }"
+            ></div>
+            <span class="value">{{
+              scope.data.count && scope.data.count
+            }}</span>
           </div>
           <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v6="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v7="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v8="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
-          </div>
-        </template>
-        <template v-slot:v9="scope">
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v1 }}</span>
-          </div>
-          <div class="bar">
-            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
-            <span class="value">{{ scope.data.v2 }}</span>
+            <div
+              class="bar-percent"
+              :style="{
+                width:
+                  (scope.data.count &&
+                    scope.data.time / (scope.data.count + scope.data.time)) *
+                    100 +
+                  'px',
+              }"
+            ></div>
+            <span class="value">{{ scope.data.count && scope.data.time }}</span>
           </div>
         </template>
       </table-2>
@@ -143,6 +111,59 @@ export default {
   components: { Panel3, Table2 },
   data() {
     return {
+      wpvalue: "",
+      wpoptions: "",
+      options: [],
+      cascaderOptions: [],
+      cascaderSel: [],
+      cascaderProps: { multiple: true },
+      column: [
+        "风机偏航过程震动",
+        "齿轮箱轴承温升超过40度",
+        "三相电流不平衡",
+        "断轴或联轴器打滑",
+        "风速突变",
+      ],
+      columnObj: [
+        {
+          name: "风机编号",
+          field: "name",
+        },
+        {
+          name: "风机偏航过程震动",
+          field: "风机偏航过程震动",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "齿轮箱轴承温升超过40度",
+          field: "齿轮箱轴承温升超过40度",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "三相电流不平衡",
+          field: "三相电流不平衡",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "断轴或联轴器打滑",
+          field: "断轴或联轴器打滑",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "风速突变",
+          align: "left",
+          field: "风速突变",
+          slot: true,
+        },
+      ],
+      startdate: new Date(
+        new Date(new Date().setDate(new Date().getDate() - 1))
+      ).formatDate("yyyy-MM-dd"),
+      enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
       tableData: {
         column: [
           {
@@ -161,100 +182,157 @@ export default {
             align: "left",
             slot: true,
           },
-          {
-            name: "齿轮箱温控阀故障或换热器效率低",
-            field: "v3",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "齿轮箱轴承温升速度超过1.5",
-            field: "v4",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "齿轮箱轴承温升超过40度",
-            field: "v5",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "滤网压差",
-            field: "v6",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "解缆动作",
-            field: "v7",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "液压泵运行",
-            field: "v8",
-            align: "left",
-            slot: true,
-          },
-          {
-            name: "偏航",
-            field: "v9",
-            align: "left",
-            slot: true,
-          },
         ],
         data: [
           {
             name: "MG01_01",
             v1: {
-              v1: 12,
-              v2: 0,
-            },
-            v2: {
-              v1: 0,
-              v2: 0,
-            },
-            v3: {
-              v1: 0,
-              v2: 0,
-            },
-            v4: {
-              v1: 87,
-              v2: 123,
-            },
-            v5: {
-              v1: 0,
-              v2: 0,
-            },
-            v6: {
-              v1: 7,
-              v2: 343,
-            },
-            v7: {
-              v1: 0,
-              v2: 0,
-            },
-            v8: {
-              v1: 0,
-              v2: 0,
-            },
-            v9: {
-              v1: 0,
-              v2: 0,
+              count: 12,
+              time: 0,
             },
           },
         ],
       },
     };
   },
+  created() {
+    this.search();
+  },
   methods: {
     tabSelect(tab) {},
-  },
-  created() {
-    for (let i = 1; i < 40; i++) {
-      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
-    }
+    async search() {
+      const { data } = await this.API.requestData({
+        subUrl: "powercompare/windfarmAjax",
+      });
+      console.warn(data);
+      this.wpoptions = data.data;
+      this.wpvalue = data.data[0].id;
+      this.searchData();
+    },
+    async searchTree() {
+      console.warn(this.cascaderSel);
+      let arr = [];
+      let columnObj = [
+        {
+          name: "风机编号",
+          field: "name",
+        },
+      ];
+      this.cascaderSel.forEach((e) => {
+        let obj = {
+          name: e[1],
+          field: e[1],
+          align: "left",
+          slot: true,
+        };
+        columnObj.push(obj);
+
+        arr.push(e[1]);
+      });
+      this.columnObj = columnObj;
+      this.column = arr;
+      this.searchData()
+      console.warn(arr);
+    },
+    async searchData() {
+      const { data } = await this.API.requestData({
+        baseURL: "http://192.168.10.18:8075/",
+        subUrl: "alarm/count/query/new",
+        data: {
+          stationid: this.wpvalue,
+          startdate: new Date(this.startdate).formatDate("yyyy-MM-dd"),
+          enddate: new Date(this.enddate).formatDate("yyyy-MM-dd"),
+        },
+      });
+      console.warn(data);
+      ////////
+      const resData = data.data;
+      // const resData =this.resdata;
+      const column = this.columnObj;
+      let dataAll = []; // 总数据集合
+      resData.forEach((e) => {
+        let obj = {
+          name: Object.keys(e)[0],
+        };
+        let wpid = Object.keys(e)[0];
+        e[wpid].forEach((k) => {
+          column.forEach((c) => {
+            if (k.alertText == c.name) {
+              let obj1 = {
+                count: k.count,
+                time: k.time,
+              };
+              obj[k.alertText] = obj1;
+            }
+          });
+        });
+        dataAll.push(obj);
+      });
+      console.info(dataAll);
+      this.tableData.column = column;
+      this.tableData.data = dataAll;
+      ///////////////////// 获取规则list
+      const map = {};
+      var windNum = [];
+      for (let i in resData) {
+        for (let k in resData[i]) {
+          map[k] = resData[i][k];
+        }
+      }
+      // nmap为新的map 整理数据结构
+      const nmap = {};
+      for (let kv in map) {
+        var nchildMap = {};
+        var childrenMap = map[kv];
+        for (var ckv in childrenMap) {
+          var cckey = childrenMap[ckv].alertText;
+          var ccvalue = childrenMap[ckv];
+          nchildMap[cckey] = ccvalue;
+        }
+        nmap[kv] = nchildMap;
+      }
+      windNum = Object.keys(nmap);
+      var cascaderOptions = [];
+      var root = {}; // 原始根节点
+      var clumnsOnes = nmap[windNum[0]];
+      console.warn(clumnsOnes);
+      for (let k in clumnsOnes) {
+        let f = clumnsOnes[k].relatePartsText
+          ? clumnsOnes[k].relatePartsText
+          : "其他";
+        let fvalue = clumnsOnes[k].relateParts ? clumnsOnes[k].relateParts : "";
+
+        if (root[f]) {
+          // 已经存在此子节点
+          if (!root[f].children[k]) {
+            // 不存在子节点
+            root[f].children[k] = {};
+            root[f].children[k].value = root[f].children[k].label = k;
+            root[f].fobj.children.push(root[f].children[k]);
+          }
+        } // 不存在子节点
+        else {
+          root[f] = {};
+          // root[f].value = fvalue;
+          // root[f].label = f;
+          root[f].children = {};
+          root[f].children[k] = {};
+          root[f].children[k].value = root[f].children[k].label = k;
+
+          // 将对象放入 cascaderOptions
+          let childrenArray = [];
+          childrenArray.push(root[f].children[k]);
+          let fobj = {};
+          fobj.value = fvalue;
+          fobj.label = f;
+          fobj.children = childrenArray;
+          cascaderOptions.push(fobj);
+          root[f].fobj = fobj;
+        }
+      }
+      this.cascaderOptions = cascaderOptions;
+      console.warn(cascaderOptions);
+    },
   },
 };
 </script>

src/views/NewPages/alarm-center-2.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="alarm-center-1">
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">风场：</div>
+            <div class="search-input">
+              <el-select
+                v-model="wpvalue"
+                clearable
+                placeholder="请选择"
+                popper-class="select"
+              >
+                <el-option
+                  v-for="item in wpoptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">开始日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="startdate"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">结束日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="enddate"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+        
+        </div>
+        <div class="query-actions">
+          <button class="btn green" @click="searchData">搜索</button>
+          <button class="btn green">导出</button>
+        </div>
+      </div>
+    </div>
+    <panel-3 class="table-panel">
+      <table-2 :data="tableData" :height="'88vh'">
+        <template v-for="(item, i) in column" :key="i" #[item]="scope">
+          <div class="bar">
+            <div
+              class="bar-percent"
+              :style="{
+                width:
+                  (scope.data.count &&
+                    scope.data.count / (scope.data.count + scope.data.time)) *
+                    100 +
+                  'px',
+              }"
+            ></div>
+            <span class="value">{{
+              scope.data.count && scope.data.count
+            }}</span>
+          </div>
+          <div class="bar">
+            <div
+              class="bar-percent"
+              :style="{
+                width:
+                  (scope.data.count &&
+                    scope.data.time / (scope.data.count + scope.data.time)) *
+                    100 +
+                  'px',
+              }"
+            ></div>
+            <span class="value">{{ scope.data.count && scope.data.time }}</span>
+          </div>
+        </template>
+      </table-2>
+    </panel-3>
+  </div>
+</template>
+
+<script>
+import Panel3 from "../../components/coms/panel/panel3.vue";
+import Table2 from "../../components/coms/table/table2.vue";
+export default {
+  components: { Panel3, Table2 },
+  data() {
+    return {
+      wpvalue: "",
+      wpoptions: "",
+      options: [],
+      cascaderOptions: [],
+      cascaderSel: [],
+      column: [
+        "风机偏航过程震动",
+        "齿轮箱轴承温升超过40度",
+        "三相电流不平衡",
+        "断轴或联轴器打滑",
+        "风速突变",
+      ],
+      columnObj: [
+        {
+          name: "风机编号",
+          field: "name",
+        },
+        {
+          name: "风机偏航过程震动",
+          field: "风机偏航过程震动",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "齿轮箱轴承温升超过40度",
+          field: "齿轮箱轴承温升超过40度",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "三相电流不平衡",
+          field: "三相电流不平衡",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "断轴或联轴器打滑",
+          field: "断轴或联轴器打滑",
+          align: "left",
+          slot: true,
+        },
+        {
+          name: "风速突变",
+          align: "left",
+          field: "风速突变",
+          slot: true,
+        },
+      ],
+      startdate: new Date(
+        new Date(new Date().setDate(new Date().getDate() - 1))
+      ).formatDate("yyyy-MM-dd"),
+      enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
+      tableData: {
+        column: [
+          {
+            name: "风机编号",
+            field: "name",
+          },
+          {
+            name: "主轴温度温差大于8度",
+            field: "v1",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "浆叶角过小",
+            field: "v2",
+            align: "left",
+            slot: true,
+          },
+        ],
+        data: [
+          {
+            name: "MG01_01",
+            v1: {
+              count: 12,
+              time: 0,
+            },
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.search();
+    this.searchTree();
+  },
+  methods: {
+    tabSelect(tab) {},
+    async search() {
+      const { data } = await this.API.requestData({
+        subUrl: "powercompare/windfarmAjax",
+      });
+      console.warn(data);
+      this.wpoptions = data.data;
+      this.wpvalue = data.data[0].id;
+      this.searchData();
+    },
+    async searchTree() {
+      const { data } = await this.API.requestData({
+        baseURL: "http://192.168.10.18:8075/",
+        subUrl: "Stoptype/treeType",
+      });
+      console.warn(data);
+      this.cascaderOptions = data.data;
+      let arr = [];
+      let columnObj = [
+        {
+          name: "风机编号",
+          field: "name",
+        },
+      ];
+      data.data.forEach((e) => {
+        let obj = {
+          name: e.name,
+          field: e.name,
+          align: "left",
+          slot: true,
+        };
+        columnObj.push(obj);
+        arr.push(e.name);
+      });
+      this.column = arr;
+      this.columnObj = columnObj;
+    },
+    async searchData() {
+      const { data } = await this.API.requestData({
+        baseURL: "http://192.168.10.18:8075/",
+        subUrl: "shutdown/list",
+        data: {
+          stId: this.wpvalue,
+          endDate: new Date(this.startdate).formatDate("yyyy-MM-dd"),
+          startDate: new Date(this.enddate).formatDate("yyyy-MM-dd"),
+        },
+      });
+      console.warn(data);
+      ////////
+      const resData = data.data;
+      // const resData =this.resdata;
+      const column = this.columnObj;
+      let dataAll = []; // 总数据集合
+      resData.forEach((e) => {
+        let obj = {
+          name: Object.keys(e)[0],
+        };
+        let wpid = Object.keys(e)[0];
+        e[wpid].forEach((k) => {
+          column.forEach((c) => {
+            if (k.type == c.name) {
+              let obj1 = {
+                count: k.count,
+                time: k.time,
+              };
+              obj[k.type] = obj1;
+            }
+          });
+        });
+        dataAll.push(obj);
+      });
+      console.info(dataAll);
+      this.tableData.column = column;
+      this.tableData.data = dataAll;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.alarm-center-1 {
+  .action-bar {
+    display: flex;
+
+    .query {
+      justify-content: flex-start;
+    }
+  }
+
+  .table-panel {
+    width: 100%;
+    background: transparent;
+    padding: 0;
+
+    .bar {
+      display: flex;
+      align-items: center;
+      height: 16px;
+      margin: 8px 0;
+
+      .bar-percent {
+        height: 100%;
+        background: @green;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>