2022/2/7 指挥中心实验室识别界面开发

minggao/src/page/commandCenter/laboratory.vue

@@ -9,7 +9,8 @@
             <!-- 任务处理人 -->
             <el-input
               size="mini"
-              placeholder="请输入角色名称"
+              placeholder="请输入任务处理人"
+              style="width: 15%"
               v-model.trim="input"
               @change="searchData"
               clearable
@@ -17,7 +18,12 @@
             </el-input>
 
             <!-- 任务状态 -->
-            <el-select v-model="value" clearable placeholder="请选择">
+            <el-select
+              v-model="value"
+              clearable
+              placeholder="请选择任务状态"
+              size="mini"
+            >
               <el-option
                 v-for="item in options"
                 :key="item.value"
@@ -28,12 +34,24 @@
             </el-select>
 
             <!-- 时间筛选 -->
+            <el-date-picker
+              size="mini"
+              v-model="value1"
+              @change="searchData"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              align="right"
+            >
+            </el-date-picker>
 
             <div class="btn_box">
               <el-button type="primary" size="mini" @click="searchData"
                 >搜索</el-button
               >
-              <el-button type="primary" size="mini">重置</el-button
+              <el-button type="primary" size="mini" @click="reset"
+                >重置</el-button
               >
             </div>
           </div>
@@ -41,9 +59,183 @@
       </el-row>
 
       <!-- 列表 -->
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="serial" label="序号" width="100">
+        </el-table-column>
+        <el-table-column prop="trap_number" label="设备编号" width="120">
+        </el-table-column>
+        <el-table-column prop="lng" label="经度" width="150">
+          <template slot-scope="scope">
+            <span>{{ scope.row.lng || "无" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="lat" label="纬度" width="150">
+          <template slot-scope="scope">
+            <span>{{ scope.row.lat || "无" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="id" label="任务编号" width="180">
+        </el-table-column>
+        <el-table-column
+          prop="operator_user_name"
+          label="任务处理人"
+          width="180"
+        >
+        </el-table-column>
+        <el-table-column prop="report_time" label="带回时间" width="280">
+        </el-table-column>
+        <el-table-column prop="discern_status" label="任务状态" width="280">
+          <template slot-scope="scope">
+            <span v-if="scope.row.discern_status == '待接收'">
+              <span
+                style="
+                  width: 6px;
+                  height: 6px;
+                  background: #f93f3d;
+                  border-radius: 50%;
+                  display: inline-block;
+                  margin: 0 0 2px 0;
+                "
+              ></span>
+              <span>待接收样本</span>
+            </span>
+
+            <span v-if="scope.row.discern_status == '已接收'">
+              <span
+                style="
+                  width: 6px;
+                  height: 6px;
+                  background: #f93f3d;
+                  border-radius: 50%;
+                  display: inline-block;
+                  margin: 0 0 2px 0;
+                "
+              ></span>
+              <span>已接收样本</span>
+            </span>
+
+            <span v-if="scope.row.discern_status == '已填报'">
+              <span
+                style="
+                  width: 6px;
+                  height: 6px;
+                  background: #e6a23c;
+                  border-radius: 50%;
+                  display: inline-block;
+                  margin: 0 0 2px 0;
+                "
+              ></span>
+              <span>已填报样本</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <a
+              v-if="scope.row.discern_status == '待接收'"
+              class="reset"
+              href="javascript:;"
+              @click="receive(scope.row)"
+              >确认接收</a
+            >
+
+            <a
+              v-if="scope.row.discern_status == '已接收'"
+              class="reset"
+              @click="filing(scope.row)"
+              href="javascript:;"
+              >填报</a
+            >
+
+            <a
+              v-if="scope.row.discern_status == '已填报'"
+              class="reset"
+              href="javascript:;"
+              @click="examine(scope.row)"
+              >已识别</a
+            >
+          </template>
+        </el-table-column>
+      </el-table>
 
       <!-- 分页 -->
+      <el-pagination
+        style="margin: 60px 0 0 0"
+        :page-size="10"
+        @current-change="newPage"
+        :current-page="page"
+        v-if="tableData.length > 0"
+        background
+        layout="prev, pager, next, jumper"
+        :total="tableSum"
+      >
+      </el-pagination>
     </el-card>
+
+    <!-- 填报弹框 -->
+    <el-dialog
+      title="填报"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <ul class="fill_ul">
+        <li class="fill_list">
+          <div class="fill_tltie">有害生物</div>
+          <div class="fill_div">
+            <el-select
+              v-model="value2"
+              size="mini"
+              clearable
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options1"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <!-- <el-select
+            v-model="value2"
+            size="mini"
+            clearable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in options1"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select> -->
+        </li>
+        <li class="fill_list">
+          <div class="fill_tltie">数量</div>
+          <el-input
+            placeholder="请输入内容"
+            size="mini"
+            v-model="input2"
+            clearable
+          >
+          </el-input>
+        </li>
+
+        <li class="fill_list">
+          <span>删除</span>
+        </li>
+      </ul>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -79,7 +271,42 @@ export default {
           label: "北京烤鸭",
         },
       ],
-      value: "",
+      value: "", // 任务状态
+      value1: "", // 时间筛选
+      startTime: "",
+      endTime: "",
+
+      // 表格
+      tableData: [],
+      page: 1,
+      tableSum: 0, // 总页数
+
+      // 填报弹框
+      dialogVisible: true,
+      options1: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value2: "",
+      input2: "",
     };
   },
   //监听属性 类似于data概念
@@ -114,12 +341,84 @@ export default {
 
     // 筛选
     searchData() {},
+
+    // 重置
+    reset() {},
+
+    // 下页
+    newPage(page) {
+      this.page = page;
+    },
+
+    // 表格数据
+    tableList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.discern_list",
+        data: this.qs.stringify({
+          page: this.page,
+          page_item: 10,
+          operator_user_id: "", // 任务处理人id
+          owner_user_id: "", //任务发布人id
+          start_time: this.startTime, // 开始时间
+          end_time: this.endTime, // 结束时间
+          task_status: this.value, // 任务状态
+        }),
+      })
+        .then((res) => {
+          console.log(res.data.data.page_list);
+          if (res.data.data.total_item !== 0) {
+            this.tableSum = res.data.data.total_item;
+            var data = res.data.data.page_list;
+            var list = [];
+            data.forEach((item, index) => {
+              item.serial = index + 1;
+              list.push(item);
+            });
+            console.log(list);
+            this.tableData = list;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+
+    // 确认接收
+    receive(data) {
+      this.$confirm("此操作将确认接收, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "接收成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消接收",
+          });
+        });
+    },
+
+    // 填报
+    filing(data) {
+      this.dialogVisible = true;
+    },
+
+    // 已识别
+    examine(data) {},
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.get_boderHeight(); // 动态获取浏览器高度
+    this.tableList(); // 表格列表数据
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -131,4 +430,50 @@ export default {
 };
 </script>
 <style lang='less' scoped>
+.laboratory_box {
+  // 搜索
+  .search_box {
+    display: flex;
+    /deep/.el-select {
+      margin: 0 15px 0 0;
+    }
+    /deep/.el-input {
+      // width: 15%;
+      margin: 0 15px 0 0;
+    }
+    .btn_box {
+      margin: 0 0 0 15px;
+    }
+
+    /deep/.el-range-editor--mini.el-input__inner {
+      width: 20%;
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+  .reset {
+    color: #1890ff;
+  }
+
+  // 填报弹框
+  .fill_ul {
+    // border: 1px solid #000;
+    // display: flex;
+    .fill_list {
+      .fill_div {
+        display: flex;
+      }
+      margin: 0 20px 0 0;
+      .fill_tltie {
+        margin: 0 0 10px 0;
+      }
+      span {
+        line-height: 87px;
+        color: #1890ff;
+      }
+    }
+  }
+}
 </style>