|
@@ -1,307 +0,0 @@
|
|
|
-<template>
|
|
|
- <van-nav-bar
|
|
|
- title="设备异常"
|
|
|
- left-arrow
|
|
|
- @click-left="onClickLeft"
|
|
|
- safe-area-inset-top
|
|
|
- />
|
|
|
- <div class="page_check">
|
|
|
- <div class="search_pannel">
|
|
|
- <div class="pannel_left">
|
|
|
- <van-image
|
|
|
- :src="require('@/assets/position.svg')"
|
|
|
- width="16"
|
|
|
- height="16"
|
|
|
- fit="contain"
|
|
|
- />
|
|
|
- <span>{{ name }}</span>
|
|
|
- <van-image
|
|
|
- :src="require('@/assets/arrow-right.svg')"
|
|
|
- width="24"
|
|
|
- height="24"
|
|
|
- fit="contain"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="pannel_right" @click="toPath">
|
|
|
- <van-image
|
|
|
- :src="require('@/assets/search.svg')"
|
|
|
- width="16"
|
|
|
- height="16"
|
|
|
- fit="contain"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="drop_down">
|
|
|
- <van-dropdown-menu active-color="#1989fa">
|
|
|
- <van-dropdown-item
|
|
|
- v-model="checkType"
|
|
|
- @change="handelChange('checkType', checkType)"
|
|
|
- :title="checkTypeTitle"
|
|
|
- :options="checkTypeList"
|
|
|
- />
|
|
|
- <van-dropdown-item
|
|
|
- v-model="checkPerson"
|
|
|
- @change="handelChange('checkPerson', checkPerson)"
|
|
|
- :title="checkPersonTitle"
|
|
|
- :options="checkPersonList"
|
|
|
- />
|
|
|
- </van-dropdown-menu>
|
|
|
- </div>
|
|
|
- <div class="list_total">
|
|
|
- <span>共有</span>
|
|
|
- <v-count-up
|
|
|
- :end-val="total"
|
|
|
- class="count_up"
|
|
|
- options="{ separator: ',' }"
|
|
|
- />
|
|
|
- <span>条记录</span>
|
|
|
- </div>
|
|
|
- <div class="check_info">
|
|
|
- <div class="info_list">
|
|
|
- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
|
- <van-list
|
|
|
- v-model:loading="loading"
|
|
|
- :finished="finished"
|
|
|
- :error="error"
|
|
|
- error-text="请求失败,点击重新加载"
|
|
|
- finished-text="没有更多了"
|
|
|
- @load="onLoad"
|
|
|
- >
|
|
|
- <div v-for="item in list" :key="item.id" class="list_item">
|
|
|
- <span class="header">{{ item.name }}</span>
|
|
|
- <span>空间信息:{{ item.position }}</span>
|
|
|
- <span>设备编号:{{ item.deviceNo }}</span>
|
|
|
- <span style="color: #fa5555">告警原因:{{ item.reason }}</span>
|
|
|
- <span>告警内容:{{ item.content }}</span>
|
|
|
- </div>
|
|
|
- </van-list>
|
|
|
- </van-pull-refresh>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import { isEmpty } from "@/utils/index.js";
|
|
|
-import VCountUp from "./CountUp";
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- "v-count-up": VCountUp,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loading: false,
|
|
|
- name: "电商园四期-B座",
|
|
|
- checkType: "",
|
|
|
- checkPerson: "",
|
|
|
- checkTypeTitle: "巡检类型",
|
|
|
- checkPersonTitle: "巡检人员",
|
|
|
- checkTypeList: [
|
|
|
- { text: "安保", value: 1 },
|
|
|
- { text: "保洁", value: 2 },
|
|
|
- ],
|
|
|
- checkPersonList: [
|
|
|
- { text: "张三", value: 1 },
|
|
|
- { text: "李四", value: 2 },
|
|
|
- ],
|
|
|
- total: 3,
|
|
|
- list: [
|
|
|
- {
|
|
|
- name: "B座13楼女卫生间电表",
|
|
|
- position: "电商园四期-B座-13层",
|
|
|
- deviceNo: "A32445",
|
|
|
- reason: "温度≥ 40℃",
|
|
|
- content: "实时温度 52℃",
|
|
|
- },
|
|
|
- ],
|
|
|
- loading: false,
|
|
|
- refreshing: false,
|
|
|
- finished: false,
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- reduceType_filter(val) {
|
|
|
- if (isEmpty(val)) {
|
|
|
- return {};
|
|
|
- }
|
|
|
- if (val == 1) {
|
|
|
- return { label: "预存", color: "#30D3A2" };
|
|
|
- }
|
|
|
- if (val == 2) {
|
|
|
- return { label: "补助", color: "#09C700" };
|
|
|
- }
|
|
|
- if (val == 3) {
|
|
|
- return { label: "退费", color: "#FA5555" };
|
|
|
- }
|
|
|
- if (val == 4) {
|
|
|
- return { label: "核缴(水)", color: "#FF9C27" };
|
|
|
- }
|
|
|
- if (val == 4) {
|
|
|
- return { label: "核缴(电)", color: "#FF9C27" };
|
|
|
- }
|
|
|
- if (val == 4) {
|
|
|
- return { label: "核缴(物业)", color: "#FF9C27" };
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- setTimeout(() => {
|
|
|
- if (this.refreshing) {
|
|
|
- this.list = [];
|
|
|
- this.refreshing = false;
|
|
|
- }
|
|
|
-
|
|
|
- for (let i = 0; i < 10; i++) {
|
|
|
- this.list.push(this.list.length + 1);
|
|
|
- }
|
|
|
- this.loading = false;
|
|
|
-
|
|
|
- if (this.list.length >= 40) {
|
|
|
- this.finished = true;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
-
|
|
|
- onRefresh() {
|
|
|
- // 清空列表数据
|
|
|
- this.finished = false;
|
|
|
-
|
|
|
- // 重新加载数据
|
|
|
- // 将 loading 设置为 true,表示处于加载状态
|
|
|
- this.loading = true;
|
|
|
- this.onLoad();
|
|
|
- },
|
|
|
- // change事件可以拿到的是value
|
|
|
- handelChange(type, val) {
|
|
|
- console.log(type, val);
|
|
|
- if (type == "checkType") {
|
|
|
- // 这里打印出来的值就是我们想要的text
|
|
|
- this.checkTypeTitle = this.checkTypeList.filter(
|
|
|
- (item) => item.value === val
|
|
|
- )[0].text;
|
|
|
- }
|
|
|
- if (type == "checkPerson") {
|
|
|
- // 这里打印出来的值就是我们想要的text
|
|
|
- this.checkPersonTitle = this.checkPersonList.filter(
|
|
|
- (item) => item.value === val
|
|
|
- )[0].text;
|
|
|
- }
|
|
|
- },
|
|
|
- onClickLeft() {},
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.page_check {
|
|
|
- height: 100%;
|
|
|
- .search_pannel {
|
|
|
- padding: 10px 16px;
|
|
|
- background: #5c8fff;
|
|
|
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .pannel_left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- span {
|
|
|
- height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 24px;
|
|
|
- text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
|
|
|
- text-indent: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- .pannel_left,
|
|
|
- .pannel_right {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .pannel_right {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .drop_down {
|
|
|
- /deep/ {
|
|
|
- --van-gray-4: #999999;
|
|
|
- --van-dropdown-menu-title-text-color: #0c1935;
|
|
|
- }
|
|
|
- }
|
|
|
- .list_total {
|
|
|
- padding: 0 16px;
|
|
|
- margin: 8px 0;
|
|
|
- display: flex;
|
|
|
- text-align: left;
|
|
|
- span {
|
|
|
- height: 16px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- line-height: 16px;
|
|
|
- }
|
|
|
- .count_up {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #fa5555;
|
|
|
- margin: 0 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- .check_info {
|
|
|
- padding: 0 16px;
|
|
|
- height: calc(
|
|
|
- 100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
|
|
|
- );
|
|
|
- .info_list {
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
- .list_item {
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
|
|
|
- border-radius: 4px;
|
|
|
- margin-bottom: 12px;
|
|
|
- padding: 12px 16px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- position: relative;
|
|
|
- &:nth-last-child(1) {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- .header {
|
|
|
- height: 22px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #313836;
|
|
|
- line-height: 22px;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- span {
|
|
|
- height: 18px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- line-height: 18px;
|
|
|
- margin-bottom: 4px;
|
|
|
- &:nth-last-child(1) {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .reduce_type {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 48px;
|
|
|
- height: 24px;
|
|
|
- border-radius: 0px 4px 0px 10px;
|
|
|
- span {
|
|
|
- height: 16px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|