告警信息统计 等

src/views/alarm/statistics/index.vue

 <template>
-  <div>告警信息统计</div>
+  <div class="parameter">
+    <div class="parameter-btn">
+      <el-button
+        class="ml10"
+        type="primary"
+        icon="el-icon-refresh-right"
+        @click="getInit"
+        >刷新</el-button
+      >
+      <el-button
+        type="primary"
+        icon="el-icon-search"
+        @click="isQuery = !isQuery"
+        >查询</el-button
+      >
+      <el-button
+        class="ml10"
+        type="primary"
+        icon="el-icon-refresh-right"
+        @click="getInit"
+        >导出</el-button
+      >
+      <el-button
+        class="ml10"
+        type="primary"
+        icon="el-icon-refresh-right"
+        @click="getInit"
+        >打印</el-button
+      >
+    </div>
+    <el-form
+      v-show="isQuery"
+      class="search-form"
+      ref="form"
+      :model="form"
+      :inline="true"
+      size="mini"
+    >
+      <el-form-item label="告警对象">
+        <el-input
+          v-model="form.pointDeviceName"
+          clearable
+          placeholder="请输入告警对象"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="告警类型">
+        <el-input
+          v-model="form.pointDeviceName"
+          clearable
+          placeholder="请输入告警类型"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="告警级别">
+        <el-input
+          v-model="form.pointDeviceName"
+          clearable
+          placeholder="请输入告警级别"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="告警状态">
+        <el-input
+          v-model="form.pointDeviceName"
+          clearable
+          placeholder="请输入告警状态"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="告警产生时间">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="success" @click="toSearch">查询</el-button>
+        <el-button type="primary" @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="both">
+      <div class="card">
+        <div class="nav-title">告警类型分布统计</div>
+      </div>
+      <div class="card">
+        <div class="nav-title">告警级别分布</div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="nav-title">告警数量统计</div>
+    </div>
+    <div>
+      <!-- :cell-class-name="cellClassFn" -->
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
+      >
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column
+          prop="siteName"
+          label="告警对象编号"
+          width="180"
+          align="center"
+        />
+        <el-table-column
+          prop="alarmTarget"
+          label="告警对象名称"
+          width="180"
+          align="center"
+        />
+        <el-table-column
+          prop="siteName"
+          label="告警类型"
+          width="150"
+          align="center"
+        />
+        <el-table-column
+          prop="siteName"
+          label="告警级别"
+          width="150"
+          align="center"
+        />
+        <el-table-column prop="alarmInfo" label="告警状态" align="center">
+          <template slot-scope="scope">
+            <div
+              v-for="(item, index) in scope.row.alarmInfo"
+              :key="index"
+              :class="levelStyle[item.level]"
+            >
+              <span>距离：{{ item.distance }}</span
+              >&nbsp;&nbsp;
+              <span>驻波比：{{ item.value }}</span>
+            </div>
+            <div>漏缆百米损耗： {{ scope.row.lossValue }}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="confirmTime"
+          label="告警产生时间"
+          width="180"
+          align="center"
+        />
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" @click="confirmAlarm(scope.row)"
+              >详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      form: {},
+      dateRange: [],
+      value: "",
+      options: [],
+      tableData: [],
+      isQuery: false,
+    };
+  },
+  methods: {
+    getInit() {},
+    reset() {},
+    toSearch() {},
+  },
+};
 </script>
-<style scoped lang="scss">
+
+<style lang="scss" scoped>
+.nav-title {
+  color: #02a7f0;
+  font-size: 20px;
+  position: relative;
+  padding-left: 16px;
+  font-weight: bold;
+  line-height: 28px;
+}
+.nav-title::before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 1px;
+  width: 5px;
+  height: 100%;
+  background-color: #02a7f0;
+  border-radius: 4px;
+}
+.parameter {
+  .parameter-btn {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 16px;
+  }
+  .search-form {
+    padding: 10px;
+    background-color: #eaf1fe;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    .el-form-item--mini.el-form-item,
+    .el-form-item--small.el-form-item {
+      margin-bottom: 0;
+    }
+  }
+  .both {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    .card {
+      flex: 1;
+    }
+  }
+  .card {
+    margin-bottom: 16px;
+    padding: 16px;
+    border-radius: 8px;
+    border: 1px solid #d7d7d7;
+  }
+}
 </style>
\ No newline at end of file

src/views/setting/parameter/index.vue

@@ -4,40 +4,209 @@
       <el-button
         class="ml10"
         type="primary"
-        size="mini"
         icon="el-icon-refresh-right"
         @click="getInit"
         >刷新</el-button
       >
-      <el-button
-        class="ml10"
-        type="primary"
+      <el-button type="primary" icon="el-icon-search" @click="isQuery = !isQuery">查询</el-button>
+    </div>
+    <el-form
+     v-show="isQuery"
+      class="search-form"
+      ref="form"
+      :model="form"
+      label-width="110px"
+      :inline="true"
       size="mini"
-        icon="el-icon-search"
-        @click="getInit"
-        >查询</el-button
     >
-    </div>
+      <el-form-item label="漏缆链路编号">
+        <el-input
+          v-model="form.pointDeviceName"
+          clearable
+          placeholder="请输入漏缆链路编号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="天馈接口编号">
+        <el-input
+          v-model="form.pointDeviceName"
+          clearable
+          placeholder="请输入天馈接口编号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="检测点位置名称">
+        <el-input
+          v-model="form.pointDeviceName"
+          clearable
+          placeholder="请输入检测点位置名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="采集时间">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="success" @click="toSearch">查询</el-button>
+        <el-button type="primary" @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
     <div class="card">
-        
+      <div class="nav-title">漏缆链路及天馈接口驻波比数据趋势分析</div>
+    </div>
+    <div>
+      <!-- :cell-class-name="cellClassFn" -->
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
+      >
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column
+          prop="siteName"
+          label="监测点位置名称"
+          width="180"
+          align="center"
+        />
+        <el-table-column
+          prop="alarmTarget"
+          label="漏缆链路编号"
+          width="180"
+          align="center"
+        />
+        <el-table-column
+          prop="siteName"
+          label="驻波比（VSWR）"
+          width="150"
+          align="center"
+        />
+        <el-table-column
+          prop="回波损耗"
+          label="告警级别"
+          width="150"
+          align="center"
+        />
+        <el-table-column prop="alarmInfo" label="超出阈值的次数" align="center">
+          <template slot-scope="scope">
+            <div
+              v-for="(item, index) in scope.row.alarmInfo"
+              :key="index"
+              :class="levelStyle[item.level]"
+            >
+              <span>距离：{{ item.distance }}</span
+              >&nbsp;&nbsp;
+              <span>驻波比：{{ item.value }}</span>
+            </div>
+            <div>漏缆百米损耗： {{ scope.row.lossValue }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="siteName"
+          label="天馈接口编号"
+          width="150"
+          align="center"
+        />
+        <el-table-column
+          prop="siteName"
+          label="天馈驻波比（VSWR）"
+          align="center"
+          width="200"
+        />
+        <el-table-column
+          prop="statusTimeChange"
+          label="回波损耗"
+          align="center"
+          width="200"
+        />
+        <el-table-column
+          prop="confirmPerson"
+          label="超出阈值的次数"
+          width="100"
+          align="center"
+        />
+        <el-table-column
+          prop="confirmTime"
+          label="采集时间"
+          width="180"
+          align="center"
+        />
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" @click="confirmAlarm(scope.row)"
+              >详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      form: {},
+      dateRange: [],
+      value: "",
+      options: [],
+      tableData: [],
+      isQuery:false,
+    };
+  },
+  methods: {
+    getInit() {},
+    reset() {},
+    toSearch() {},
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.nav-title {
+  color: #02a7f0;
+  font-size: 20px;
+  position: relative;
+  padding-left: 16px;
+  font-weight: bold;
+  line-height: 28px;
+}
+.nav-title::before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 1px;
+  width: 5px;
+  height: 100%;
+  background-color: #02a7f0;
+  border-radius: 4px;
+}
 .parameter {
   .parameter-btn {
     display: flex;
     justify-content: flex-end;
+    margin-bottom: 16px;
+  }
+  .search-form {
+    padding: 10px;
+    background-color: #eaf1fe;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    .el-form-item--mini.el-form-item,
+    .el-form-item--small.el-form-item {
+      margin-bottom: 0;
+    }
   }
-  .card{
+  .card {
+    margin-bottom: 16px;
     padding: 16px;
     border-radius: 8px;
-    border: 1px solid #D7D7D7;
+    border: 1px solid #d7d7d7;
   }
 }
 </style>
\ No newline at end of file