除尘器监控

src/css/elementUiSelf.css

@@ -4,11 +4,11 @@
     --table-item-border-color: #ebeef5;
 }
 .el-input {
-    --el-input-width: 220px !important;
+    /* --el-input-width: 220px !important; */
 }
 
 .el-select {
-    --el-select-width: 220px !important;
+    /* --el-select-width: 220px !important; */
 }
 
 .el-form-item__label {

src/router/index.js

@@ -8,6 +8,7 @@ import User from '../views/user.vue'
 import Layout from '../layout/index.vue'
 import Login from '../views/login/index.vue'
 import equipmentManagement from '../views/equipmentManagement/index.vue'
+import dustMonitoring from '../views/dustMonitoring/index.vue'
 
 const routes = [
     {
@@ -31,7 +32,7 @@ const routes = [
           },
           {
             path: '/monitor',
-            component: AboutView,
+            component: dustMonitoring,
             meta: { title: '除尘器监控' },
           },
           {

src/views/dustMonitoring/index.vue

+<template>
+  <div class="top-box">
+    <el-form
+      :model="form"
+      label-width="auto"
+      :inline="true"
+      class="demo-form-inline"
+    >
+      <el-form-item label="除尘器名称">
+        <el-select
+          v-model="form.dustName"
+          placeholder="请选择除尘器"
+          style="width: 240px"
+        >
+        </el-select>
+      </el-form-item>
+      <el-form-item label="分析时间">
+        <el-date-picker
+          v-model="form.dateValue"
+          type="datetimerange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="YYYY-MM-DD HH:mm:ss"
+          date-format="YYYY/MM/DD ddd"
+          time-format="A hh:mm:ss"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+  <div class="layout1">
+    <div class="left-box">
+      <div class="part1">
+        <div class="chart-box" v-for="(item, index) in chartData" :key="item">
+          <div :id="'chart' + index" class="chart-item"></div>
+        </div>
+      </div>
+      <div class="warn-info"></div>
+    </div>
+    <div class="right-box">
+      <div class="part1"></div>
+      <div class="part2">
+        <div class="dust-title">2号窑尾除尘器</div>
+        <div class="dust-info">
+            <div class="info-item" v-for="item in dustInfo" :key="item.label">
+                <span class="lable">{{ item.label }}</span>
+                <span class="value">{{ item.value }}</span>
+                <span class="unit">{{ item.unit }}</span>
+            </div>
+        </div>
+      </div>
+      <div class="warn-info"></div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import * as echarts from "echarts";
+const form = reactive({
+  dustName: "",
+  dateValue: [],
+});
+const option = {
+  xAxis: {
+    type: "category",
+    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  },
+  yAxis: {
+    type: "value",
+  },
+  series: [
+    {
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      type: "line",
+      smooth: true,
+    },
+  ],
+};
+const chartInstance = reactive([]);
+const chartData = reactive([{}, {}, {}]);
+const initChart = () => {
+  chartData.forEach((item, index) => {
+    if (chartInstance[index] && chartInstance[index].dispose) {
+      chartInstance[index].dispose();
+    }
+    chartInstance[index] = echarts.init(
+      document.getElementById("chart" + index)
+    );
+    console.log(chartInstance[index]);
+    chartInstance[index].setOption(option);
+  });
+};
+const dustInfo = reactive([
+    {label: '压差', value: '0.0', unit: 'KPa'},
+    {label: '粉尘浓度', value: '0.0', unit: 'KPa'},
+])
+onMounted(() => {
+  initChart();
+});
+</script>
+<style lang="scss" scoped>
+.top-box {
+}
+.left-box {
+  width: 45%;
+  .part1 {
+    border-radius: 15px;
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+    height: 70vh;
+    .chart-box {
+      width: 100%;
+      height: 31%;
+      .chart-item {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+.right-box {
+  width: 45%;
+  .part1 {
+    width: 100%;
+    height: 10vh;
+    border-radius: 15px;
+    background-color: #fff;
+  }
+  .part2 {
+    margin-top: 20px;
+    width: 100%;
+    height: calc(60vh - 20px);
+    border-radius: 15px;
+    background-color: #fff;
+    .dust-title {
+        text-align: center;
+        font-size: 20px;
+        font-weight: 600;
+        padding: 10px;
+        border: 1px solid #ebeef5;
+    }
+    .dust-info {
+        padding: 0 20px;
+    }
+    .info-item {
+        padding: 3px 0;
+        span {
+            display: inline-block;
+        }
+        .lable {
+            width: 40%;
+        }
+        .value {
+            width: 50%;
+        }
+        .unit {
+            width: 10%;
+        }
+    }
+  }
+}
+.warn-info {
+  margin-top: 10px;
+  height: 15vh;
+  border-radius: 15px;
+  background-color: #fff;
+}
+.layout1 {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/views/equipmentManagement/index.vue

 <template>
   <div class="equipment-management">
-    <div class="search-box">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="工序：">
-          <el-select
-            v-model="formInline.region"
-            placeholder="请选择工序"
-            clearable
-          >
-            <el-option label="Zone one" value="shanghai" />
-            <el-option label="Zone two" value="beijing" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="除尘器名称：">
-          <el-input
-            v-model="formInline.user"
-            placeholder="请选择除尘器名称"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="设备名称：">
-          <el-input
-            v-model="formInline.user"
-            placeholder="请输入设备名称"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="设备类型：">
-          <el-select
-            v-model="formInline.region"
-            placeholder="请选择设备类型"
-            clearable
-          >
-            <el-option label="Zone one" value="shanghai" />
-            <el-option label="Zone two" value="beijing" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit">搜索</el-button>
-          <el-button type="primary" @click="onSubmit">重置</el-button>
-          <el-button type="primary" @click="onSubmit">导出</el-button>
-          <el-button type="primary" @click="onSubmit">导入</el-button>
-          <el-button type="primary" @click="onSubmit">模板下载</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="table-box">
-      <el-table :data="tableData" style="width: 100%" border >
-        <el-table-column prop="date" label="Date" width="180" align="center"/>
-        <el-table-column prop="name" label="Name" width="180" align="center"/>
-        <el-table-column prop="address" label="Address" align="center"/>
-        <el-table-column label="操作" align="center">
-          <template #default>
-            <el-button link type="primary" size="small" @click="setParams">参数设置</el-button>
+    <div class="content-box">
+      <div class="search">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="工序">
+            <el-select
+              v-model="formInline.region"
+              placeholder="请选择工序"
+              style="width: 120px"
+              clearable
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="除尘器名称">
+            <el-input
+              v-model="formInline.deviceName"
+              placeholder="请输入除尘器名称"
+              style="width: 240px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="设备名称">
+            <el-input
+              v-model="formInline.deviceName"
+              placeholder="请输入除尘器名称"
+              style="width: 240px"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="设备类型">
+            <el-select
+              v-model="formInline.region"
+              placeholder="请选择工序"
+              style="width: 120px"
+              clearable
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="default" class="default-btn" @click="onSubmit"
+              >重置</el-button
+            >
+            <el-button type="primary" class="search-btn" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button type="success" class="add-btn" @click="onSubmit"
+              >导入</el-button
+            >
+            <el-button type="success" class="add-btn" @click="onSubmit"
+              >导出</el-button
+            >
+            <el-button type="success" class="add-btn" @click="onSubmit"
+              >模板下载</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="table-box">
+        <common-table
+          :data="tableData"
+          :columns="tableColumns"
+          :default-page-size="10"
+          @pagination-change="handlePaginationChange"
+          :pagination-texts="{
+            total: '共',
+            sizeChange: '条/页',
+            prev: '前一页',
+            next: '后一页',
+            jumper: '跳至',
+          }"
+        >
+          <template #index="{ $index }">
+            {{ getIndex($index) }}
+          </template>
+
+          <template #operation="{ row }">
+            <el-button type="primary" link @click="setParams(row)">
+              参数设置
+            </el-button>
           </template>
-        </el-table-column>
-      </el-table>
+        </common-table>
+      </div>
     </div>
-    <div class="page-box"></div>
-    <setParamsDialog v-model:dialogVisible="dialogVisible" @close="closeDialog"></setParamsDialog>
+    <setParamsDialog
+      v-model:dialogVisible="dialogVisible"
+      @close="closeDialog"
+    ></setParamsDialog>
   </div>
 </template>
 <script setup>
 import { ref, reactive } from "vue";
 import setParamsDialog from "./components/paramsSetings.vue";
-import '@/css/elementUiSelf.css'
+import CommonTable from "@/components/commonTable/index.vue";
+import "@/css/elementUiSelf.css";
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+const getIndex = (index) => {
+  return (currentPage.value - 1) * pageSize.value + index + 1;
+};
 
 const formInline = reactive({
   user: "",
@@ -97,13 +144,65 @@ const tableData = [
     address: "No. 189, Grove St, Los Angeles",
   },
 ];
+const tableColumns = ref([
+  {
+    prop: "index",
+    label: "序号",
+    width: "5%",
+  },
+  {
+    prop: "deviceName",
+    label: "除尘器名称",
+    width: "15%",
+  },
+  {
+    prop: "deviceName",
+    label: "除尘器编号",
+    width: "15%",
+  },
+  {
+    prop: "process",
+    label: "所属工序",
+    width: "5%",
+  },
+  {
+    prop: "healthScore",
+    label: "设备名称",
+    width: "5%",
+  },
+  {
+    prop: "health2Score",
+    label: "设备类型",
+    width: "5%",
+  },
+  {
+    prop: "status",
+    label: "信号名称",
+    width: "25%",
+  },
+  {
+    prop: "alarmCount",
+    label: "信号编码",
+    width: "5%",
+  },
+  {
+    prop: "lastAlarmTime",
+    label: "安装位置",
+    width: "10%",
+  },
+  {
+    prop: "operation",
+    label: "操作",
+    width: "10%",
+  },
+]);
 const dialogVisible = ref(false);
 const setParams = () => {
   dialogVisible.value = true;
-}
+};
 const closeDialog = (val) => {
   dialogVisible.value = val;
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -111,9 +210,19 @@ const closeDialog = (val) => {
   background: #fff;
   height: 100vh;
   overflow: hidden;
-    padding: 20px;
-
-  .search-box {
+  padding: 20px;
+  .content-box {
+    margin-top: 24px;
+    .search {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+    .table-box {
+      width: 100%;
+      height: calc(100vh - 400px);
+    }
   }
 }
 </style>