video_ca/src/views/DeviceList.vue

<script>
import axios from "axios";
import { inject } from "vue";
import { getDeviceListService } from "@/api/device.js";
import { restartDeviceService } from "@/api/device.js";
import router from "@/router/index.js";

export default {
  data() {
    return {
      ip: "",
      tableData: [],
      tokenData: {
        token: localStorage.getItem("token"),
        ip: localStorage.getItem("ip"),
        userId: localStorage.getItem("userId"),
        username: localStorage.getItem("username"),
      },
      searchForm: {
        hour: 0,
        entrydate: [],
      },
    };
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    async getDeviceList() {
      let result = {};
      try {
        result = await getDeviceListService(this.tokenData);
      } catch (e) {
        console.log(e);
      }
      let data = result.data;
      
    //   for(let d in data){
    //     let res = JSON.parse(d);
    //     console.log("res=",res);
    //     this.tableData.push(res);
    //   }
    //   console.log(this.tableData);

      this.tableData=data;
    },
    onSubmit() {
      getDeviceList({ token: token });
    },
    handleSizeChange() {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange() {
      alert("页码发生变化" + val);
    },

    //设置设备重启
    async restartDevice(index) {
      var id = this.tableData[index].ID;
      var restart_data = {
        id: id,
        option: "one",
        ip: this.ip,
        userId: this.tokenData.userId,
        token: this.tokenData.token,
      };
      try {
        var d_re = await restartDeviceService(restart_data);
        if (d_re.code == 0) {
          alert("重启成功");
        } else {
          alert("操作失败");
        }
      } catch (e) {
        console.log(e);
      }
    },
    async restartAllDevice() {
      var restart_data = {
        id: id,
        ip: this.ip,
        option: "all",
        userId: this.tokenData.userId,
        token: this.tokenData.token,
      };
      try {
        var d_re = await restartDeviceService(restart_data);
        if (d_re.code == 0) {
          alert("重启成功");
        } else {
          alert("操作失败");
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getIpClient() {
      try {
        const response = await axios.get("https://ipinfo.io/json");
        this.ip = response.data.ip;
        localStorage.setItem("ip", this.ip);
        //console.log(response);
      } catch (error) {
        console.error(error);
      }
    },
    toVideoList() {
      router.push("/videoList");
    },
    // 修改条纹颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.human === 1) {
        return {
          background: "#488aff",
        };
      } else {
        return "";
      }
    },
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  async mounted() {
    let now = new Date();
    if (localStorage.getItem("token") === null) {
      router.push("/login");
    }
    // console.log("mounted");
    await this.getIpClient();
    this.getDeviceList();
  },
};
</script>

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >监控设备列表</el-header
      >
      <el-container>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
            <el-form-item>
              <el-button class="el-button--danger" type="primary" @click="getDeviceList()">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="logout()">退出登录</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="toVideoList()">返回监控视频</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="restartAllDevice('all')"
                >重启全部设备</el-button
              >
            </el-form-item>
          </el-form>

          <!-- 表格  :row-style="this.tableRowClassName"-->
          <el-table :data="tableData" width="100%" border>
            :row-style="this.tableRowClassName"
            <el-table-column prop="ID" label="id" width="80"></el-table-column>
            <el-table-column
              prop="DeviceName"
              label="设备名称"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="DeviceLocation"
              label="设备位置"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="DeviceIP"
              label="设备ip"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="DeviceStatus"
              label="设备状态"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="DeviceType"
              label="设备类型"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="DeviceInfo"
              label="设备信息"
              width="150"
            ></el-table-column>
            <el-table-column label="操作" width="300">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click.prevent="restartDevice(scope.$index)"
                  >重启</el-button
                >
                <!-- <el-button type="danger" size="mini">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <br />

          <!-- 分页条 -->
          <!-- Pagination 分页 -->
          <!-- <el-pagination
            background
            layout="total,sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000"
          ></el-pagination> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.blueRowbg {
  background: "#488aff";
}
</style>