|
@@ -0,0 +1,643 @@
|
|
|
+<template>
|
|
|
+ <div class="asset-detail" v-if="isFinish >= 2">
|
|
|
+ <van-nav-bar :title="isMaintenanceShow || isRepairShow ? '设备详情' : '设备信息'" @click-left="backPage"
|
|
|
+ @click-right="handleRightClick">
|
|
|
+ <template #left>
|
|
|
+ <van-icon name="arrow-left" size="18" color="#333333" />
|
|
|
+ </template>
|
|
|
+ <template #right v-if="active == 1 || active == 2">
|
|
|
+ <i class="iconfont wanda-scan"></i>
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="asset-information" v-if="!isMaintenanceShow && !isRepairShow">
|
|
|
+ <Information :data="informationData" />
|
|
|
+ </div>
|
|
|
+ <van-tabs v-else v-model="active" class="other-tabs" color="#025BAA" @change="changeTab"
|
|
|
+ title-active-color="#025BAA" :line-width="60">
|
|
|
+ <van-tab title="设备信息">
|
|
|
+ <Information :data="informationData" />
|
|
|
+ </van-tab>
|
|
|
+ <van-tab v-if="isMaintenanceShow" title="重要维保">
|
|
|
+ <RepairMaintenance ref="maintenance" type="maintenance" :list="maintenanceData" @onSearch="getData" />
|
|
|
+ </van-tab>
|
|
|
+ <van-tab v-if="isRepairShow" title="重要维修">
|
|
|
+ <RepairMaintenance ref="repair" type="repair" :list="repairData" @onSearch="getData" />
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+
|
|
|
+ <!-- 点击头部筛选,出现的右侧弹窗 -->
|
|
|
+ <van-popup class="m-popup-container" v-model="showPopup" position="right">
|
|
|
+ <div class="m-popup">
|
|
|
+ <!-- 是否更换配件 -->
|
|
|
+ <div class="system">
|
|
|
+ <h1 class="title">是否更换配件</h1>
|
|
|
+ <div class="system-btn-container">
|
|
|
+ <div class="system-btn" v-for="(item, index) in sfghpjList" :key="index">
|
|
|
+ <van-button class="m-btn" :class="item.active" @click="isChangeParts(item)">{{ item.text }}</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <!-- 填报日期 -->
|
|
|
+ <div class="sbss">
|
|
|
+ <h1 class="title">填报日期</h1>
|
|
|
+ <div class="system-btn-container">
|
|
|
+ <div class="system-btn" v-for="(item, index) in fillinList" :key="index">
|
|
|
+ <van-button class="m-btn" :class="item.active" @click="changeFillinDate(item)">{{ item.text }}
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <!-- 验收日期 -->
|
|
|
+ <div class="sbss">
|
|
|
+ <h1 class="title">验收日期</h1>
|
|
|
+ <div class="system-btn-container">
|
|
|
+ <div class="system-btn" v-for="(item, index) in acceptanceList" :key="index">
|
|
|
+ <van-button class="m-btn" :class="item.active" @click="changeAcceptanceDate(item)">{{ item.text }}
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <van-button size="large" color="#025BAA" plain type="info" @click="reset">重置</van-button>
|
|
|
+ <van-button size="large" color="#025BAA" type="info" @click="confirm">确定</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * 设备详情
|
|
|
+ */
|
|
|
+import Vue from "vue";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import { NavBar, Tab, Tabs, Popup, Button, Toast } from "vant";
|
|
|
+import Information from "@/components/assetDetail/Information.vue";
|
|
|
+import RepairMaintenance from "@/components/assetDetail/RepairMaintenance.vue";
|
|
|
+import { queryEquipmentList } from "@/api/equipmentList.js";
|
|
|
+import { getUpdateDetail1, getUpdateDetail4 } from "@/api/overview";
|
|
|
+import moment from "moment";
|
|
|
+Vue.use(NavBar).use(Tab).use(Tabs).use(Popup).use(Button).use(Toast);
|
|
|
+export default {
|
|
|
+ name: "AssetDetail",
|
|
|
+ props: {},
|
|
|
+ components: { Information, RepairMaintenance },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ "plazaId",
|
|
|
+ "fmapID",
|
|
|
+ "haveFengMap",
|
|
|
+ "bunkObj",
|
|
|
+ "floorsArr",
|
|
|
+ "categoryId",
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ active: 0,
|
|
|
+ showPopup: false,
|
|
|
+ isMaintenanceShow: true,
|
|
|
+ isRepairShow: true,
|
|
|
+ informationData: {},
|
|
|
+ maintenanceData: [],
|
|
|
+ repairData: [],
|
|
|
+ sfghpjList: [
|
|
|
+ { text: "是", value: 1, active: "active" },
|
|
|
+ { text: "否", value: 0, active: "" },
|
|
|
+ ],
|
|
|
+ fillinList: [
|
|
|
+ { text: "全部", value: 0, active: "active" },
|
|
|
+ { text: "7天", value: 1, active: "" },
|
|
|
+ { text: "15天", value: 2, active: "" },
|
|
|
+ { text: "30天", value: 3, active: "" },
|
|
|
+ { text: "6个月", value: 4, active: "" },
|
|
|
+ { text: "1年", value: 5, active: "" },
|
|
|
+ ],
|
|
|
+ acceptanceList: [
|
|
|
+ { text: "全部", value: 0, active: "active" },
|
|
|
+ { text: "7天", value: 1, active: "" },
|
|
|
+ { text: "15天", value: 2, active: "" },
|
|
|
+ { text: "30天", value: 3, active: "" },
|
|
|
+ { text: "6个月", value: 4, active: "" },
|
|
|
+ { text: "1年", value: 5, active: "" },
|
|
|
+ ],
|
|
|
+ isFinish: 0,
|
|
|
+ isParts: 1,
|
|
|
+ fillinDate: 0,
|
|
|
+ acceptanceDate: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ beforeMount() { },
|
|
|
+ mounted() { },
|
|
|
+ methods: {
|
|
|
+ backPage() {
|
|
|
+ if (this.$route.query.first) {
|
|
|
+ this.$router.push({ path: "/" });
|
|
|
+ } else {
|
|
|
+ this.$router.go(-1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击右侧筛选
|
|
|
+ */
|
|
|
+ handleRightClick() {
|
|
|
+ if (this.active == 1 || this.active == 2) {
|
|
|
+ this.showPopup = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeTab(active) {
|
|
|
+ console.log(this.active);
|
|
|
+ },
|
|
|
+ // 查询设备信息/维修/维保数据
|
|
|
+ getData() {
|
|
|
+ if (this.active === 1) {
|
|
|
+ //维保
|
|
|
+ this.getMaintenanceData();
|
|
|
+ } else if (this.active === 2) {
|
|
|
+ //维修
|
|
|
+ this.getRepairData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询设备信息数据
|
|
|
+ getInformationData() {
|
|
|
+ let data = {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ keyword: `${this.$route.query.assetid}:assetid;`,
|
|
|
+ },
|
|
|
+ postParams = {};
|
|
|
+ queryEquipmentList({ data, postParams }).then((res) => {
|
|
|
+ if (res.data.result == "success" && res.data.data && res.data.data[0]) {
|
|
|
+ this.informationData = res.data.data[0];
|
|
|
+ this.getMaintenanceData(true);
|
|
|
+ this.getRepairData(true);
|
|
|
+ } else {
|
|
|
+ Toast({
|
|
|
+ message: "未查询到该设备内容!",
|
|
|
+ type: "fail",
|
|
|
+ duration: 2000,
|
|
|
+ onClose: () => {
|
|
|
+ this.$router.push({ path: "/" });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 查询维保数据
|
|
|
+ getMaintenanceData(first) {
|
|
|
+ if (this.informationData.assetnum) {
|
|
|
+ let getParams = {
|
|
|
+ assetnum: this.informationData.assetnum,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ onlyMainAsset: true, //仅查询重要维修/维保
|
|
|
+ ismodel: this.isParts, //是否更换配件
|
|
|
+ };
|
|
|
+ //查询关键字(重要事项记录)
|
|
|
+ if (this.$refs.maintenance && this.$refs.maintenance.keyword) {
|
|
|
+ getParams.keyword = `${this.$refs.maintenance.keyword}:matters`;
|
|
|
+ }
|
|
|
+ //填报日期
|
|
|
+ switch (this.fillinDate) {
|
|
|
+ // 七天
|
|
|
+ case 1:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(7, "days")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 15天
|
|
|
+ case 2:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(15, "days")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 30天
|
|
|
+ case 3:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(1, "months")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 6个月
|
|
|
+ case 4:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(6, "years")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 一年
|
|
|
+ case 5:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(1, "years")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 默认 全部
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ //验收日期
|
|
|
+ switch (this.acceptanceDate) {
|
|
|
+ // 七天
|
|
|
+ case 1:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(7, "days")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 15天
|
|
|
+ case 2:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(15, "days")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 30天
|
|
|
+ case 3:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(1, "months")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 6个月
|
|
|
+ case 4:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(6, "years")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 一年
|
|
|
+ case 5:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(1, "years")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 默认 全部
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ getUpdateDetail1({ getParams }).then((res) => {
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ this.maintenanceData = res.data;
|
|
|
+ } else {
|
|
|
+ this.maintenanceData = [];
|
|
|
+ }
|
|
|
+ if (first) {
|
|
|
+ this.isFinish++;
|
|
|
+ }
|
|
|
+ if (first && !this.maintenanceData.length) {
|
|
|
+ this.isMaintenanceShow = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.error("缺少设备编号!");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询维修数据
|
|
|
+ getRepairData(first) {
|
|
|
+ if (this.informationData.assetnum) {
|
|
|
+ let getParams = {
|
|
|
+ assetnum: this.informationData.assetnum,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ onlyMainAsset: true, //仅查询重要维修/维保
|
|
|
+ ismodel: this.isParts, //是否更换配件
|
|
|
+ };
|
|
|
+ //查询关键字(重要事项记录)
|
|
|
+ if (this.$refs.repair && this.$refs.repair.keyword) {
|
|
|
+ getParams.keyword = `${this.$refs.repair.keyword}:matters`;
|
|
|
+ }
|
|
|
+ //填报日期
|
|
|
+ switch (this.fillinDate) {
|
|
|
+ // 七天
|
|
|
+ case 1:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(7, "days")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 15天
|
|
|
+ case 2:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(15, "days")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 30天
|
|
|
+ case 3:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(1, "months")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 6个月
|
|
|
+ case 4:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(6, "years")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 一年
|
|
|
+ case 5:
|
|
|
+ getParams.reportdateStartDate = moment()
|
|
|
+ .subtract(1, "years")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 默认 全部
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ //验收日期
|
|
|
+ switch (this.acceptanceDate) {
|
|
|
+ // 七天
|
|
|
+ case 1:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(7, "days")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 15天
|
|
|
+ case 2:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(15, "days")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 30天
|
|
|
+ case 3:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(1, "months")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 6个月
|
|
|
+ case 4:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(6, "years")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 一年
|
|
|
+ case 5:
|
|
|
+ getParams.sjjssjStartDate = moment()
|
|
|
+ .subtract(1, "years")
|
|
|
+ .format("YYYYMMDD000000");
|
|
|
+ getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
|
|
|
+ break;
|
|
|
+ // 默认 全部
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ getUpdateDetail4({ getParams }).then((res) => {
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ this.repairData = res.data;
|
|
|
+ } else {
|
|
|
+ this.repairData = [];
|
|
|
+ }
|
|
|
+ if (first) {
|
|
|
+ this.isFinish++;
|
|
|
+ }
|
|
|
+ if (first && !this.repairData.length) {
|
|
|
+ this.isRepairShow = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.error("缺少设备编号!");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改是否更换配件
|
|
|
+ isChangeParts(data) {
|
|
|
+ console.log(data);
|
|
|
+ this.isParts = data.value;
|
|
|
+ this.sfghpjList.map((item) => {
|
|
|
+ item.active = "";
|
|
|
+ if (item.value === data.value) {
|
|
|
+ item.active = "active";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 修改填报日期
|
|
|
+ changeFillinDate(data) {
|
|
|
+ console.log(data);
|
|
|
+ this.fillinDate = data.value;
|
|
|
+ this.fillinList.map((item) => {
|
|
|
+ item.active = "";
|
|
|
+ if (item.value === data.value) {
|
|
|
+ item.active = "active";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 修改验收日期
|
|
|
+ changeAcceptanceDate(data) {
|
|
|
+ console.log(data);
|
|
|
+ this.acceptanceDate = data.value;
|
|
|
+ this.acceptanceList.map((item) => {
|
|
|
+ item.active = "";
|
|
|
+ if (item.value === data.value) {
|
|
|
+ item.active = "active";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 重置
|
|
|
+ */
|
|
|
+ reset() {
|
|
|
+ this.sfghpjList.map((item, index) => {
|
|
|
+ item.active = "";
|
|
|
+ if (index === 0) {
|
|
|
+ item.active = "active";
|
|
|
+ this.isParts = item.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.fillinList.map((item, index) => {
|
|
|
+ item.active = "";
|
|
|
+ if (index === 0) {
|
|
|
+ item.active = "active";
|
|
|
+ this.fillinDate = item.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.acceptanceList.map((item, index) => {
|
|
|
+ item.active = "";
|
|
|
+ if (index === 0) {
|
|
|
+ item.active = "active";
|
|
|
+ this.acceptanceDate = item.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.getData();
|
|
|
+ this.showPopup = false;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 弹窗确认
|
|
|
+ */
|
|
|
+ confirm() {
|
|
|
+ this.getData();
|
|
|
+ this.showPopup = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "$route.query.assetid": {
|
|
|
+ handler(assetid) {
|
|
|
+ if (assetid) {
|
|
|
+ this.getInformationData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.asset-detail {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .asset-information {
|
|
|
+ height: calc(100% - 46px);
|
|
|
+ background: #f5f6f7;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .other-tabs {
|
|
|
+ height: calc(100% - 46px);
|
|
|
+ /deep/ .van-tab__text {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .van-tabs__wrap {
|
|
|
+ height: 45px;
|
|
|
+ border-bottom: 1px solid #eaeaea;
|
|
|
+ .van-tabs__nav--line {
|
|
|
+ box-sizing: content-box;
|
|
|
+ height: 100%;
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/ .van-tabs__content {
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ .van-tab__pane {
|
|
|
+ background: #f5f6f7;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 筛选弹窗
|
|
|
+ .m-popup-container {
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 55px 20px 10px 20px;
|
|
|
+ .m-popup {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ // 专业
|
|
|
+ .system {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ // 专业系统按钮
|
|
|
+ .system-btn-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-flow: wrap;
|
|
|
+ .system-btn {
|
|
|
+ width: 50% !important;
|
|
|
+ min-width: 50% !important;
|
|
|
+ max-width: 50% !important;
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 10px 10px 0;
|
|
|
+ .m-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 32px !important;
|
|
|
+ text-align: center;
|
|
|
+ background: #eff0f1;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #025baa !important;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 电井类型
|
|
|
+ .sbss {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: auto;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
+ .system-btn-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-flow: wrap;
|
|
|
+ .system-btn {
|
|
|
+ width: 33% !important;
|
|
|
+ min-width: 33% !important;
|
|
|
+ max-width: 33% !important;
|
|
|
+ height: 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px 10px 5px 0;
|
|
|
+ .m-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 32px !important;
|
|
|
+ text-align: center;
|
|
|
+ background: #eff0f1;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #025baa !important;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .load-more {
|
|
|
+ width: 80px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #025baa;
|
|
|
+ background: #e5eef6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .divider {
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .van-button {
|
|
|
+ width: 40%;
|
|
|
+ height: 100%;
|
|
|
+ max-width: 40%;
|
|
|
+ min-width: 40%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|