[Feat 0000]瓦斯日报入口更换 页面样式优化

pages/device/index.vue

@@ -5,7 +5,7 @@
       :bgStatusImage="backPic0"
       :bgImage="backPic"
       title="设备监测"
-      @leftClick="devicemenuShow"
+      @leftClick="onLeftClick"
       :safeAreaInsetTop="true"
       :fixed="true"
       height="50px"
@@ -14,9 +14,31 @@
       leftIconColor="#303133"
     >
       <view class="u-nav-slot" slot="left">
-        <u-icon name="arrow-left" size="20"> </u-icon>
+        <!-- 菜单选择页显示三横线，选完设备类型进入列表后显示返回键 -->
+        <view v-if="menushow" class="menu-icon">
+          <view class="menu-line"></view>
+          <view class="menu-line"></view>
+          <view class="menu-line"></view>
+        </view>
+        <u-icon v-else name="arrow-left" size="20" color="#303133"></u-icon>
       </view>
     </u-navbar>
+    <!-- 左上角三横线展开的菜单 -->
+    <view
+      v-if="navMenuShow"
+      class="nav-menu-mask"
+      @tap="navMenuShow = false"
+    ></view>
+    <view v-if="navMenuShow" class="nav-menu-panel">
+      <view
+        class="nav-menu-item"
+        v-for="(item, index) in navMenuList"
+        :key="index"
+        @tap="navMenuClick(item)"
+      >
+        {{ item.name }}
+      </view>
+    </view>
     <view class="devic-box-content">
       <view v-if="menushow" class="menupage">
         <DeviceMenu @menuClick="menuClick"></DeviceMenu>
@@ -69,6 +91,12 @@ export default {
       showColum: {},
       menushow: true,
       deviceType: "",
+      //左上角三横线菜单
+      navMenuShow: false,
+      navMenuList: [
+        // component：切换到外层 index.vue 的 tab 组件；url：跳转独立页面
+        { name: "瓦斯日报", component: "gasreport" },
+      ],
       // tabList: [
       //   {
       //     name: "设备监测",
@@ -102,14 +130,49 @@ export default {
     NavChange: function (item) {
       console.log("item", item);
       // this.PageCur = item.index;
+      this.navMenuShow = false;
       this.deviceType = item.id;
       this.menushow = false;
     },
     devicemenuShow(e) {
       this.menushow = !this.menushow;
     },
+    //左上角图标：菜单选择页展开三横线菜单，已进入列表页则返回菜单选择
+    onLeftClick() {
+      if (this.menushow) {
+        this.toggleNavMenu();
+      } else {
+        this.navMenuShow = false;
+        this.menushow = true;
+      }
+    },
+    //左上角三横线菜单：展开/收起
+    toggleNavMenu() {
+      this.navMenuShow = !this.navMenuShow;
+    },
+    //点击菜单项：优先切换外层 tab 组件，否则跳转独立页面
+    navMenuClick(item) {
+      this.navMenuShow = false;
+      if (!item) {
+        return;
+      }
+      if (item.component) {
+        this.$emit("changePage", item.component);
+        return;
+      }
+      if (!item.url) {
+        return;
+      }
+      uni.navigateTo({
+        url: item.url,
+        fail: () => {
+          uni.showToast({ title: "页面不存在", icon: "none" });
+        },
+      });
+    },
     menuClick(params) {
       debugger;
+      this.navMenuShow = false;
       let data = params.menu
         .map((item) => item.children)
         .flatMap((i) => i)
@@ -177,4 +240,61 @@ export default {
 ::v-deep .u-tabs__wrapper {
   margin: 0px 15px !important;
 }
+
+//左上角三横线图标
+.menu-icon {
+  width: 18px;
+  height: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .menu-line {
+    width: 18px;
+    height: 2px;
+    border-radius: 1px;
+    background-color: #303133;
+  }
+}
+
+//三横线展开的下拉菜单
+.nav-menu-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.15);
+  z-index: 998;
+}
+
+.nav-menu-panel {
+  position: fixed;
+  left: 10px;
+  top: calc(var(--status-bar-height) + 54px);
+  width: 140px;
+  padding: 4px 0px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  z-index: 999;
+
+  .nav-menu-item {
+    height: 44px;
+    padding: 0px 16px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #303133;
+
+    &:active {
+      background-color: #f2f6ff;
+    }
+
+    & + .nav-menu-item {
+      border-top: 1px solid #f0f2f5;
+    }
+  }
+}
 </style>

pages/filecenter/filecenter.vue

@@ -6,7 +6,7 @@
       :fixed="true"
       height="50px"
       bgColor="transparent"
-     titleStyle="fw600 fs-18"
+      titleStyle="fw600 fs-18"
       leftIconColor="#303133"
       @leftClick="goBack"
     >
@@ -125,7 +125,9 @@
                       ></image>
                     </view>
                     <view class="file-info-content">
-                      <text class="file-info-value">{{ item.bpmStatus_dictText }}</text>
+                      <text class="file-info-value">{{
+                        item.bpmStatus_dictText
+                      }}</text>
                       <text class="file-info-label">审批状态</text>
                     </view>
                   </view>
@@ -220,8 +222,12 @@
                         <view class="detail-table-cell">{{
                           item.createTime
                         }}</view>
-                        <view class="detail-table-cell">{{ item.endTime }}</view>
-                        <view class="detail-table-cell">{{ item.comment }}</view>
+                        <view class="detail-table-cell">{{
+                          item.endTime
+                        }}</view>
+                        <view class="detail-table-cell">{{
+                          item.comment
+                        }}</view>
                         <view class="detail-table-cell">
                           <text v-if="item.assignees[0].isExecutor">
                             已处理
@@ -325,10 +331,16 @@
                 </view>
               </view>
               <view class="commit-modal-footer">
-                <view class="action-btn action-btn-outline" @click="cancelCommit">
+                <view
+                  class="action-btn action-btn-outline"
+                  @click="cancelCommit"
+                >
                   <text class="action-btn-text">取消</text>
                 </view>
-                <view class="action-btn action-btn-primary" @click="confirmCommit">
+                <view
+                  class="action-btn action-btn-primary"
+                  @click="confirmCommit"
+                >
                   <text class="action-btn-text">确定</text>
                 </view>
               </view>
@@ -372,10 +384,16 @@
                 </view>
               </view>
               <view class="retract-modal-footer">
-                <view class="action-btn action-btn-outline" @click="cancelRetract">
+                <view
+                  class="action-btn action-btn-outline"
+                  @click="cancelRetract"
+                >
                   <text class="action-btn-text">取消</text>
                 </view>
-                <view class="action-btn action-btn-primary" @click="confirmRetract">
+                <view
+                  class="action-btn action-btn-primary"
+                  @click="confirmRetract"
+                >
                   <text class="action-btn-text">确定</text>
                 </view>
               </view>
@@ -474,15 +492,9 @@ export default {
     },
   },
   methods: {
+    //左上角返回键：直接返回首页
     goBack() {
-      uni.navigateBack({
-        delta: 1,
-        fail() {
-          uni.switchTab({
-            url: "/pages/index/index",
-          });
-        },
-      });
+      this.$emit("changePage", "device");
     },
     // fileTreeShow(e) {
     //   this.menushow = !this.menushow;
@@ -794,7 +806,11 @@ export default {
         (item) => item.value === selected.value
       );
       this.selectedCommitIndex =
-        index >= 0 ? index : e.indexs && e.indexs[0] !== undefined ? e.indexs[0] : 0;
+        index >= 0
+          ? index
+          : e.indexs && e.indexs[0] !== undefined
+          ? e.indexs[0]
+          : 0;
     },
     confirmCommit() {
       var fileiId = this.commitItem.id;

pages/gasreport/components/taskBoard.vue

@@ -1,177 +1,230 @@
 <template>
-    <view class="taskBoard">
-        <u-navbar :bgStatusImage="backPic0" :bgImage="backPic" :title="gasTitle" :safeAreaInsetTop="true" leftIcon="">
-        </u-navbar>
-        <u-list :height="666" v-if="isShow">
-            <u-list-item v-for="(item, index) in indexList" :key="index">
-                <u-cell icon="share" @click="getBorad(item)">
-                    <view slot="title" class="u-slot-title">
-                        <text class="u-cell-text">
-                            <text>{{ item.name }}</text>
-                            <text style="margin-left:10px">{{ item.checkPerson ? `(${item.checkPerson})` : '' }}</text>
-                        </text>
-                    </view>
-                    <view slot="value" class="u-slot-title">
-                        <u-tag :text="item.classType_dictText" plain size="mini"
-                            :type="item.classType_dictText == '早班' ? 'success' : item.classType_dictText == '中班' ? 'warning' : 'error'">
-                        </u-tag>
-                    </view>
-                </u-cell>
-            </u-list-item>
-        </u-list>
-        <!-- 填报日期弹窗 -->
-        <u-modal v-if="isShow" showCancelButton showConfirmButton confirmText="确定" cancelText="取消" :show="showTime"
-            :title="titleTime" @confirm="confirmTime" @cancel="cancelTime">
-            <view class="dialog-item" @click="getChangeTime">
-                <text class="dialog-label">任务日期：</text>
-                <u--input  readonly v-model="searchTime" placeholder="请选择任务日期" inputAlign="center"
-                    suffixIcon="arrow-right"></u--input>
-                <u-calendar :show="showCalendar" :minDate="minDate" :maxDate="maxDate" v-model="searchTime" mode="single"
-                    closeOnClickOverlay @confirm="changeTime" @close="closeTime"></u-calendar>
-            </view>
-        </u-modal>
-        <component v-else :is="loadComponent" :taskId="taskId" @getBackBoard="getBackBoard"></component>
-    </view>
+  <view class="taskBoard">
+    <u-navbar
+      :bgStatusImage="backPic0"
+      :bgImage="backPic"
+      :title="gasTitle"
+      :safeAreaInsetTop="true"
+      leftIcon="arrow-left"
+      leftIconColor="#303133"
+      @leftClick="goBack"
+    >
+    </u-navbar>
+    <u-list :height="666" v-if="isShow">
+      <u-list-item v-for="(item, index) in indexList" :key="index">
+        <u-cell icon="share" @click="getBorad(item)">
+          <view slot="title" class="u-slot-title">
+            <text class="u-cell-text">
+              <text>{{ item.name }}</text>
+              <text style="margin-left: 10px">{{
+                item.checkPerson ? `(${item.checkPerson})` : ""
+              }}</text>
+            </text>
+          </view>
+          <view slot="value" class="u-slot-title">
+            <u-tag
+              :text="item.classType_dictText"
+              plain
+              size="mini"
+              :type="
+                item.classType_dictText == '早班'
+                  ? 'success'
+                  : item.classType_dictText == '中班'
+                  ? 'warning'
+                  : 'error'
+              "
+            >
+            </u-tag>
+          </view>
+        </u-cell>
+      </u-list-item>
+    </u-list>
+    <!-- 填报日期弹窗 -->
+    <u-modal
+      v-if="isShow"
+      showCancelButton
+      showConfirmButton
+      confirmText="确定"
+      cancelText="取消"
+      :show="showTime"
+      :title="titleTime"
+      @confirm="confirmTime"
+      @cancel="cancelTime"
+    >
+      <view class="dialog-item" @click="getChangeTime">
+        <text class="dialog-label">任务日期：</text>
+        <u--input
+          readonly
+          v-model="searchTime"
+          placeholder="请选择任务日期"
+          inputAlign="center"
+          suffixIcon="arrow-right"
+        ></u--input>
+        <u-calendar
+          :show="showCalendar"
+          :minDate="minDate"
+          :maxDate="maxDate"
+          v-model="searchTime"
+          mode="single"
+          closeOnClickOverlay
+          @confirm="changeTime"
+          @close="closeTime"
+        ></u-calendar>
+      </view>
+    </u-modal>
+    <component
+      v-else
+      :is="loadComponent"
+      :taskId="taskId"
+      @getBackBoard="getBackBoard"
+    ></component>
+  </view>
 </template>
 
 <script>
 import api from "@/api/api";
-import taskBoardAddress from './taskBoardAddress.vue'
-import moment from 'moment'
+import taskBoardAddress from "./taskBoardAddress.vue";
+import moment from "moment";
 export default {
-    name: 'taskBoard',
-    components: {
-        taskBoardAddress
-    },
-    props: {},
+  name: "taskBoard",
+  components: {
+    taskBoardAddress,
+  },
+  props: {},
 
-    data() {
-        return {
-            showTime: false,//是否显示填报日期弹窗
-            titleTime: '',
-            searchTime: '',//检测时间
-            showCalendar: false,//控制日期选型下拉开启
-            // timeRan: Number(new Date()),
-            minDate: moment().subtract(30*10, 'days').format('YYYY-MM-DD'),
-            // minDate: moment().subtract(160, 'days').format('YYYY-MM-DD'),
-            maxDate:moment().add(30*10, 'days').format('YYYY-MM-DD'),
-            isShow: true,
-            loadComponent: '',
-            taskId: '',
-            indexList: [],
-            gasTitle: '巡检任务',//标题
-            backPic0: "url(/static/topnavbar0.png)",
-            backPic: "url(../../static/topnavbar.png)",
-        }
+  data() {
+    return {
+      showTime: false, //是否显示填报日期弹窗
+      titleTime: "",
+      searchTime: "", //检测时间
+      showCalendar: false, //控制日期选型下拉开启
+      // timeRan: Number(new Date()),
+      minDate: moment()
+        .subtract(30 * 10, "days")
+        .format("YYYY-MM-DD"),
+      // minDate: moment().subtract(160, 'days').format('YYYY-MM-DD'),
+      maxDate: moment()
+        .add(30 * 10, "days")
+        .format("YYYY-MM-DD"),
+      isShow: true,
+      loadComponent: "",
+      taskId: "",
+      indexList: [],
+      gasTitle: "巡检任务", //标题
+      backPic0: "url(/static/topnavbar0.png)",
+      backPic: "url(../../static/topnavbar.png)",
+    };
+  },
+  computed: {
+    teamCode: function () {
+      return uni.getStorageSync("login_user_info")["districtTeam"];
+    },
+  },
+  mounted() {
+    this.getTimeList();
+  },
+  methods: {
+    //左上角返回键：直接返回首页
+    goBack() {
+      this.$emit("goHome");
+    },
+    //点击弹出日期下拉选项
+    getChangeTime() {
+      this.showCalendar = true;
+    },
+    changeTime(e) {
+      let that = this;
+      that.searchTime = e[0];
+      uni.setStorageSync("searchTime", that.searchTime);
+      that.showCalendar = false;
+    },
+    closeTime() {
+      this.searchTime = "";
+      this.showCalendar = false;
     },
-    computed: {
-        teamCode: function () {
-            return uni.getStorageSync('login_user_info')['districtTeam']
-        },
+    //点击返回上一级
+    getBackBoard() {
+      let that = this;
+      that.isShow = true;
+      that.loadComponent = "";
     },
-    mounted() {
-        this.getTimeList()
+    //点击跳转到识别看板
+    getBorad(item) {
+      let that = this;
+      that.taskId = item.id;
+      that.showTime = true;
     },
-    methods: {
-        //点击弹出日期下拉选项
-        getChangeTime() {
-            this.showCalendar = true
-        },
-        changeTime(e) {
-            let that = this
-            that.searchTime = e[0]
-            uni.setStorageSync("searchTime", that.searchTime);
-            that.showCalendar = false
-        },
-        closeTime() {
-            this.searchTime = ''
-            this.showCalendar = false
-        },
-        //点击返回上一级
-        getBackBoard() {
-            let that = this
-            that.isShow = true
-            that.loadComponent = ''
-        },
-        //点击跳转到识别看板
-        getBorad(item) {
-            let that = this
-            that.taskId = item.id
-            that.showTime = true
-        },
-        //选择检测时间-确定
-        confirmTime() {
-            let that = this
-            if (that.searchTime) {
-                that.isShow = false
-                that.showTime = false
-                that.loadComponent = 'taskBoardAddress'
+    //选择检测时间-确定
+    confirmTime() {
+      let that = this;
+      if (that.searchTime) {
+        that.isShow = false;
+        that.showTime = false;
+        that.loadComponent = "taskBoardAddress";
+      }
+    },
+    //选择检测时间-取消
+    cancelTime() {
+      let that = this;
+      that.isShow = true;
+      that.showTime = false;
+    },
+    //获取任务管理列表数据
+    getTimeList() {
+      let that = this;
+      new Promise((resolve, reject) => {
+        api
+          .teamList({ pageNo: 1, pageSize: 100, teamCode: that.teamCode })
+          .then((response) => {
+            if (response.data.code == 200) {
+              that.indexList = response.data.result.records;
+            } else {
+              reject(response);
             }
-        },
-        //选择检测时间-取消
-        cancelTime() {
-            let that = this
-            that.isShow = true
-            that.showTime = false
-        },
-        //获取任务管理列表数据
-        getTimeList() {
-            let that = this
-            new Promise((resolve, reject) => {
-                api
-                    .teamList({ pageNo: 1, pageSize: 100, teamCode: that.teamCode })
-                    .then((response) => {
-                        if (response.data.code == 200) {
-                            that.indexList = response.data.result.records
-                        } else {
-                            reject(response);
-                        }
-                    })
-                    .catch((error) => {
-                        console.log("catch===>response", response);
-                        reject(error);
-                    });
-            });
-        }
-    }
-
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .taskBoard {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
 }
 
 .dialog-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    .dialog-label {
-        width: 70px;
-        text-align: center;
-    }
+  .dialog-label {
+    width: 70px;
+    text-align: center;
+  }
 }
 
 ::v-deep .u-input {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 3px 9px !important;
-    width: 180px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 9px !important;
+  width: 180px;
 }
 
 ::v-deep .u-popup {
-    flex: 0
+  flex: 0;
 }
 
 ::v-deep .u-slot-title {
-    display: flex;
+  display: flex;
 }
 </style>

pages/gasreport/gasreport.vue

@@ -1,154 +1,180 @@
 <template>
-    <view class="gas-report" name="gasreport">
-        <u-navbar :bgStatusImage="backPic0" :bgImage="backPic" :title="gasTitle" :safeAreaInsetTop="true"
-            leftIcon="list"   @leftClick="showPopup" > </u-navbar>
-        <view class="gas-content">
-            <component :is="loadComponent" :firstAddress="firstAddress" :secondAddress="secondAddress"
-                :firstTj="firstTj" :secondTj="secondTj"></component>
-        </view>
-        <!-- 导航弹出层 -->
-        <view class="popup-modal">
-            <popupModal :showModel="showModel" @handlerClick="handlerClick"></popupModal>
-        </view>
+  <view class="gas-report" name="gasreport">
+    <u-navbar
+      :bgStatusImage="backPic0"
+      :bgImage="backPic"
+      :title="gasTitle"
+      :safeAreaInsetTop="true"
+      leftIcon="arrow-left"
+      leftIconColor="#303133"
+      @leftClick="goBack"
+    >
+    </u-navbar>
+    <view class="gas-content">
+      <component
+        :is="loadComponent"
+        :firstAddress="firstAddress"
+        :secondAddress="secondAddress"
+        :firstTj="firstTj"
+        :secondTj="secondTj"
+        @goHome="goHome"
+      ></component>
     </view>
+    <!-- 导航弹出层 -->
+    <view class="popup-modal">
+      <popupModal
+        :showModel="showModel"
+        @handlerClick="handlerClick"
+      ></popupModal>
+    </view>
+  </view>
 </template>
 
 <script>
 import api from "@/api/api";
-import popupModal from './components/popupModal.vue'
-import gasFill from './components/gasFill.vue'
-import gasTask from './components/gasTask.vue'
-import gasRecordCard from './components/gasRecordCard.vue'
-import gasImgIdentify from './components/gasImgIdentify.vue'
-import taskBoard from './components/taskBoard.vue'
+import popupModal from "./components/popupModal.vue";
+import gasFill from "./components/gasFill.vue";
+import gasTask from "./components/gasTask.vue";
+import gasRecordCard from "./components/gasRecordCard.vue";
+import gasImgIdentify from "./components/gasImgIdentify.vue";
+import taskBoard from "./components/taskBoard.vue";
 export default {
-    name: 'gasreport',
-    components: {
-        popupModal,
-        gasFill,
-        gasTask,
-        gasRecordCard,
-        gasImgIdentify,
-        taskBoard
+  name: "gasreport",
+  components: {
+    popupModal,
+    gasFill,
+    gasTask,
+    gasRecordCard,
+    gasImgIdentify,
+    taskBoard,
+  },
+  data() {
+    return {
+      backPic0: "url(/static/topnavbar0.png)",
+      backPic: "url(../../static/topnavbar.png)",
+      gasTitle: "瓦斯日报", //标题
+      showModel: false, //是否打开弹出层
+      // loadComponent: 'gasFill',//默认加载组件
+      // loadComponent: 'gasImgIdentify',//默认加载组件
+      loadComponent: "taskBoard", //默认加载组件
+      taskTj: {},
+      firstAddress: "", //一次线路
+      secondAddress: "", //二次线路
+      firstTj: [], //一次统计
+      secondTj: [], //二次统计
+    };
+  },
+  computed: {},
+  mounted() {
+    this.queryNowGasInfoByUser();
+  },
+  methods: {
+    showPopup() {
+      this.showModel = !this.showModel;
     },
-    data() {
-        return {
-            backPic0: "url(/static/topnavbar0.png)",
-            backPic: "url(../../static/topnavbar.png)",
-            gasTitle: '瓦斯日报',//标题
-            showModel: false,//是否打开弹出层
-            // loadComponent: 'gasFill',//默认加载组件
-            // loadComponent: 'gasImgIdentify',//默认加载组件
-            loadComponent: 'taskBoard',//默认加载组件
-            taskTj: {},
-            firstAddress: '',//一次线路
-            secondAddress: '',//二次线路
-            firstTj: [],//一次统计
-            secondTj: [],//二次统计
-        };
+    //子组件请求返回首页：通知外层 index.vue 切回首页页签（设备中心）
+    goHome() {
+      this.$emit("changePage", "device");
     },
-    computed: {
-
+    //左上角返回键：返回上一页
+    goBack() {
+      uni.navigateBack({
+        delta: 1,
+        fail() {
+          uni.switchTab({
+            url: "/pages/index/index",
+          });
+        },
+      });
     },
-    mounted() {
-        this.queryNowGasInfoByUser()
+    //导航栏点击
+    handlerClick(data) {
+      let that = this;
+      switch (data) {
+        case "瓦斯巡检记录卡管理":
+          that.loadComponent = "gasRecordCard";
+          that.gasTitle = "瓦斯巡检记录卡管理";
+          that.showModel = false;
+          break;
+        case "图片识别":
+          that.loadComponent = "taskBoard";
+          that.gasTitle = "图片识别";
+          that.showModel = false;
+          break;
+        case "早班":
+          that.loadComponent = "gasTask";
+          that.gasTitle = "早班巡检任务";
+          that.firstAddress = that.taskTj.addressEarly1;
+          that.secondAddress = that.taskTj.addressEarly2;
+          that.firstTj = that.taskTj.arrayEarly1;
+          that.secondTj = that.taskTj.arrayEarly2;
+          that.showModel = false;
+          break;
+        case "中班":
+          that.loadComponent = "gasTask";
+          that.gasTitle = "中班巡检任务";
+          that.firstAddress = that.taskTj.addressNoon1;
+          that.secondAddress = that.taskTj.addressNoon2;
+          that.firstTj = that.taskTj.arrayNoon1;
+          that.secondTj = that.taskTj.arrayNoon2;
+          that.showModel = false;
+          break;
+        case "夜班":
+          that.loadComponent = "gasTask";
+          that.gasTitle = "夜班巡检任务";
+          that.firstAddress = that.taskTj.addressNight1;
+          that.secondAddress = that.taskTj.addressNight2;
+          that.firstTj = that.taskTj.arrayNight1;
+          that.secondTj = that.taskTj.arrayNight2;
+          that.showModel = false;
+          break;
+        case "瓦斯巡检填报":
+          that.loadComponent = "gasFill";
+          that.gasTitle = "瓦斯巡检填报";
+          that.showModel = false;
+          break;
+      }
     },
-    methods: {
-        showPopup(){
-            this.showModel=!this.showModel
-        },
-        //导航栏点击
-        handlerClick(data) {
-            let that = this
-            switch (data) {
-                case '瓦斯巡检记录卡管理':
-                    that.loadComponent = 'gasRecordCard'
-                    that.gasTitle = '瓦斯巡检记录卡管理'
-                    that.showModel = false
-                    break;
-                case '图片识别':
-                    that.loadComponent = 'taskBoard'
-                    that.gasTitle = '图片识别'
-                    that.showModel = false
-                    break;
-                case '早班':
-                    that.loadComponent = 'gasTask'
-                    that.gasTitle = '早班巡检任务'
-                    that.firstAddress = that.taskTj.addressEarly1
-                    that.secondAddress = that.taskTj.addressEarly2
-                    that.firstTj = that.taskTj.arrayEarly1
-                    that.secondTj = that.taskTj.arrayEarly2
-                    that.showModel = false
-                    break;
-                case '中班':
-                    that.loadComponent = 'gasTask'
-                    that.gasTitle = '中班巡检任务'
-                    that.firstAddress = that.taskTj.addressNoon1
-                    that.secondAddress = that.taskTj.addressNoon2
-                    that.firstTj = that.taskTj.arrayNoon1
-                    that.secondTj = that.taskTj.arrayNoon2
-                    that.showModel = false
-                    break;
-                case '夜班':
-                    that.loadComponent = 'gasTask'
-                    that.gasTitle = '夜班巡检任务'
-                    that.firstAddress = that.taskTj.addressNight1
-                    that.secondAddress = that.taskTj.addressNight2
-                    that.firstTj = that.taskTj.arrayNight1
-                    that.secondTj = that.taskTj.arrayNight2
-                    that.showModel = false
-                    break;
-                case '瓦斯巡检填报':
-                    that.loadComponent = 'gasFill'
-                    that.gasTitle = '瓦斯巡检填报'
-                    that.showModel = false
-                    break;
+    //获取card列表
+    queryNowGasInfoByUser() {
+      let that = this;
+      new Promise((resolve, reject) => {
+        api
+          .queryNowGasInfoByUser({})
+          .then((response) => {
+            if (response.data.code == 200) {
+              that.taskTj = response.data.result;
+            } else {
+              reject(response);
             }
-        },
-        //获取card列表
-        queryNowGasInfoByUser() {
-            let that = this
-            new Promise((resolve, reject) => {
-                api
-                    .queryNowGasInfoByUser({})
-                    .then((response) => {
-                        if (response.data.code == 200) {
-                            that.taskTj = response.data.result
-                        } else {
-                            reject(response);
-                        }
-                    })
-                    .catch((error) => {
-                        console.log("catch===>response", response);
-                        reject(error);
-                    });
-            });
-        },
-
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
     },
-
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .gas-report {
-    position: relative;
-    box-sizing: border-box;
-
-    .gas-content {
-        height: 666px;
-        margin-top: 85px;
-        overflow-y: auto;
-
-        .popup-modal {
-            position: absolute;
-            top: 45px;
-            left: 0;
-            height: 748px;
-            width: 240px;
-        }
+  position: relative;
+  box-sizing: border-box;
 
+  .gas-content {
+    height: 666px;
+    margin-top: 85px;
+    overflow-y: auto;
 
+    .popup-modal {
+      position: absolute;
+      top: 45px;
+      left: 0;
+      height: 748px;
+      width: 240px;
     }
+  }
 }
 </style>

pages/index/index.vue

@@ -1,43 +1,79 @@
 <template>
   <view class="app-container">
-    <view v-if="iframeloading" class="loadding-box" :style="{
-      height: wvHeight + 'px',
-      width: wvWidth + 'px',
-      marginTop: wvTop + 'px',
-      border: 'none',
-    }">
+    <view
+      v-if="iframeloading"
+      class="loadding-box"
+      :style="{
+        height: wvHeight + 'px',
+        width: wvWidth + 'px',
+        marginTop: wvTop + 'px',
+        border: 'none',
+      }"
+    >
       <u-loading-icon></u-loading-icon>
     </view>
-    <iframe v-if="PageCur == 'tun2D'" ref="iframe" src="http://182.92.126.35:8098/" @load="viewLoad" :style="{
-      height: wvHeight + 'px',
-      width: wvWidth + 'px',
-      marginTop: wvTop + 'px',
-      border: 'none',
-      background: '#000',
-    }"></iframe>
+    <iframe
+      v-if="PageCur == 'tun2D'"
+      ref="iframe"
+      src="http://182.92.126.35:8098/"
+      @load="viewLoad"
+      :style="{
+        height: wvHeight + 'px',
+        width: wvWidth + 'px',
+        marginTop: wvTop + 'px',
+        border: 'none',
+        background: '#000',
+      }"
+    ></iframe>
     <!-- <Device
       v-show="PageCur == 'device'"
       :style="{ marginTop: wvTop + 20 + 'px' }"
     ></Device> -->
-    <Device v-show="PageCur == 'device'"></Device>
-    <filecenter :cur="PageCur" v-show="PageCur == 'filecenter'"></filecenter>
-    <warndata v-show="PageCur == 'warndata'" :cur="PageCur"></warndata>
-    <gasreport :cur="PageCur" v-show="PageCur == 'gasreport'"></gasreport>
+    <Device v-show="PageCur == 'device'" @changePage="changePage"></Device>
+    <filecenter
+      :cur="PageCur"
+      v-show="PageCur == 'filecenter'"
+      @changePage="changePage"
+    ></filecenter>
+    <warndata
+      v-show="PageCur == 'warndata'"
+      :cur="PageCur"
+      @changePage="changePage"
+    ></warndata>
+    <gasreport
+      :cur="PageCur"
+      v-show="PageCur == 'gasreport'"
+      @changePage="changePage"
+    ></gasreport>
     <user :cur="PageCur" v-show="PageCur == 'user'"></user>
-    <u-tabbar :value="PageCur" @change="NavChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
-      <u-tabbar-item v-show="menus.device != null" text="设备中心" name="device" :icon="PageCur === 'device'
-        ? '/static/navIcon/sbzx-active.svg'
-        : '/static/navIcon/sbzx.svg'
-        "></u-tabbar-item>
-      <u-tabbar-item v-show="menus.warndata != null" text="预警分析" name="warndata" :icon="PageCur === 'warndata'
-        ? '/static/navIcon/yjfx-active.svg'
-        : '/static/navIcon/yjfx.svg'
-        "></u-tabbar-item>
+    <u-tabbar
+      :value="PageCur"
+      @change="NavChange"
+      :fixed="true"
+      :placeholder="true"
+      :safeAreaInsetBottom="true"
+    >
       <u-tabbar-item
-        text=""
-        name=""
-        :customStyle="{ marginTop: '0rpx' }"
-      >
+        v-show="menus.device != null"
+        text="设备中心"
+        name="device"
+        :icon="
+          PageCur === 'device'
+            ? '/static/navIcon/sbzx-active.svg'
+            : '/static/navIcon/sbzx.svg'
+        "
+      ></u-tabbar-item>
+      <u-tabbar-item
+        v-show="menus.warndata != null"
+        text="预警分析"
+        name="warndata"
+        :icon="
+          PageCur === 'warndata'
+            ? '/static/navIcon/yjfx-active.svg'
+            : '/static/navIcon/yjfx.svg'
+        "
+      ></u-tabbar-item>
+      <u-tabbar-item text="" name="" :customStyle="{ marginTop: '0rpx' }">
         <view slot="active-icon" class="sw-tab-icon">
           <image
             class="sw-tab-img"
@@ -54,18 +90,29 @@
         </view>
       </u-tabbar-item>
 
-      <u-tabbar-item v-show="menus.filecenter != null" text="文件共享" name="filecenter" :icon="PageCur === 'filecenter'
-        ? '/static/navIcon/wjgx-active.svg'
-        : '/static/navIcon/wjgx.svg'
-        "></u-tabbar-item>
+      <u-tabbar-item
+        v-show="menus.filecenter != null"
+        text="文件共享"
+        name="filecenter"
+        :icon="
+          PageCur === 'filecenter'
+            ? '/static/navIcon/wjgx-active.svg'
+            : '/static/navIcon/wjgx.svg'
+        "
+      ></u-tabbar-item>
       <!-- <u-tabbar-item v-show="menus.gasreport != null" text="瓦斯日报" name="gasreport" :icon="PageCur === 'gasreport'
           ? '/static/navIcon/gas-active.png'
           : '/static/navIcon/gas.png'
         "></u-tabbar-item> -->
-      <u-tabbar-item text="我的" name="user" :icon="PageCur === 'user'
-        ? '/static/navIcon/user-active.png'
-        : '/static/navIcon/user.png'
-        "></u-tabbar-item>
+      <u-tabbar-item
+        text="我的"
+        name="user"
+        :icon="
+          PageCur === 'user'
+            ? '/static/navIcon/user-active.png'
+            : '/static/navIcon/user.png'
+        "
+      ></u-tabbar-item>
     </u-tabbar>
   </view>
 </template>
@@ -179,9 +226,8 @@ export default {
   },
   onLoad() {
     this.changeWV();
-
   },
-  mounted() { },
+  mounted() {},
   onShow() {
     // this.changeWV()
   },
@@ -189,9 +235,11 @@ export default {
     this.changeWV();
   },
   methods: {
-
-
     NavChange: function (e) {
+      this.changePage(e);
+    },
+    //切换当前页签（底部 tabbar 与子页面事件共用）
+    changePage: function (e) {
       this.PageCur = e;
       if (e == "tun2D") {
         // this.changeWV()
@@ -221,9 +269,9 @@ export default {
           _this.wvHeight = _this.isLandScape
             ? sysinfo.windowHeight - sysinfo.statusBarHeight - 20
             : sysinfo.windowHeight -
-            sysinfo.statusBarHeight -
-            sysinfo.statusBarHeight -
-            38;
+              sysinfo.statusBarHeight -
+              sysinfo.statusBarHeight -
+              38;
           _this.wvWidth = _this.isLandScape
             ? sysinfo.windowWidth
             : sysinfo.windowWidth;
@@ -241,7 +289,7 @@ export default {
 .app-container {
   width: 100%;
   height: 100vh;
-  background: url('../../static/desk-img/1-3.png') no-repeat;
+  background: url("../../static/desk-img/1-3.png") no-repeat;
   background-size: 100% auto;
 }
 

pages/warndata/warndata.vue

@@ -1,8 +1,16 @@
 <template>
   <view class="container">
-    <u-navbar :title="titleName" :safeAreaInsetTop="true" :fixed="true" height="50px" bgColor="transparent"
-      titleStyle="fw600 fs-18" leftIconColor="#303133" @leftClick="menuShow">
-      <view class="u-nav-slot" slot="left" v-if="!isShowDetail">
+    <u-navbar
+      :title="titleName"
+      :safeAreaInsetTop="true"
+      :fixed="true"
+      height="50px"
+      bgColor="transparent"
+      titleStyle="fw600 fs-18"
+      leftIconColor="#303133"
+      @leftClick="onLeftClick"
+    >
+      <view class="u-nav-slot" slot="left">
         <u-icon name="arrow-left" size="20" color="#303133"></u-icon>
       </view>
     </u-navbar>
@@ -16,8 +24,14 @@
               <view class="vent-card-header" @click.stop="toggleIsShow1">
                 <text class="warn-card-title">通风监测预警</text>
                 <view class="warn-card-action">
-                  <text class="warn-action-text">{{ isShow1 ? "收起" : "展开" }}</text>
-                  <u-icon :name="isShow1 ? 'arrow-up' : 'arrow-down'" color="#1890ff" size="14"></u-icon>
+                  <text class="warn-action-text">{{
+                    isShow1 ? "收起" : "展开"
+                  }}</text>
+                  <u-icon
+                    :name="isShow1 ? 'arrow-up' : 'arrow-down'"
+                    color="#1890ff"
+                    size="14"
+                  ></u-icon>
                 </view>
               </view>
               <view v-show="isShow1">
@@ -25,24 +39,43 @@
                 <view class="vent-card-content" @click="getDetail('vent')">
                   <view class="vent-metrics-row">
                     <view class="vent-metric-card">
-                      <text class="vent-metric-value">{{ windData.zongjinfeng || "--" }}</text>
+                      <text class="vent-metric-value">{{
+                        windData.zongjinfeng || "--"
+                      }}</text>
                       <text class="vent-metric-label">总进风量(m³/min)</text>
                     </view>
                     <view class="vent-metric-card">
-                      <text class="vent-metric-value">{{ windData.zonghuifeng || "--" }}</text>
+                      <text class="vent-metric-value">{{
+                        windData.zonghuifeng || "--"
+                      }}</text>
                       <text class="vent-metric-label">总回风量(m³/min)</text>
                     </view>
                     <view class="vent-metric-card">
-                      <text class="vent-metric-value">{{ xufengliang || "--" }}</text>
+                      <text class="vent-metric-value">{{
+                        xufengliang || "--"
+                      }}</text>
                       <text class="vent-metric-label">总需风量(m³/min)</text>
                     </view>
                   </view>
                   <view class="vent-risk-panel">
-                    <view class="vent-risk-item" v-for="(risk, rIndex) in ventRiskList" :key="rIndex">
-                      <view class="risk-icon" :style="{ background: risk.color }">
-                        <u-icon name="error-circle-fill" color="#ffffff" size="12"></u-icon>
+                    <view
+                      class="vent-risk-item"
+                      v-for="(risk, rIndex) in ventRiskList"
+                      :key="rIndex"
+                    >
+                      <view
+                        class="risk-icon"
+                        :style="{ background: risk.color }"
+                      >
+                        <u-icon
+                          name="error-circle-fill"
+                          color="#ffffff"
+                          size="12"
+                        ></u-icon>
                       </view>
-                      <text class="risk-text">{{ risk.label }}: {{ risk.value }}</text>
+                      <text class="risk-text"
+                        >{{ risk.label }}: {{ risk.value }}</text
+                      >
                     </view>
                   </view>
                 </view>
@@ -56,20 +89,36 @@
               <view class="device-card-header" @click.stop="toggleIsShow5">
                 <text class="warn-card-title">设备监测预警</text>
                 <view class="warn-card-action">
-                  <text class="warn-action-text">{{ isShow5 ? "收起" : "展开" }}</text>
-                  <u-icon :name="isShow5 ? 'arrow-up' : 'arrow-down'" color="#2b7cff" size="14"></u-icon>
+                  <text class="warn-action-text">{{
+                    isShow5 ? "收起" : "展开"
+                  }}</text>
+                  <u-icon
+                    :name="isShow5 ? 'arrow-up' : 'arrow-down'"
+                    color="#2b7cff"
+                    size="14"
+                  ></u-icon>
                 </view>
               </view>
               <view v-show="isShow5">
                 <view class="device-card-divider"></view>
                 <view class="device-card-content" @click="getDetail('device')">
                   <view class="device-grid">
-                    <view class="device-item-card" v-for="(item, index) in deviceList" :key="index">
-                      <image class="device-item-icon" :src="getDeviceIcon(item)" mode="aspectFit"></image>
+                    <view
+                      class="device-item-card"
+                      v-for="(item, index) in deviceList"
+                      :key="index"
+                    >
+                      <image
+                        class="device-item-icon"
+                        :src="getDeviceIcon(item)"
+                        mode="aspectFit"
+                      ></image>
                       <view class="device-item-bar">
                         <text class="device-item-name">{{ item.name }}</text>
                         <view class="device-status-tag">
-                          <text class="device-item-status">{{ item.status }}</text>
+                          <text class="device-item-status">{{
+                            item.status
+                          }}</text>
                         </view>
                       </view>
                     </view>
@@ -85,8 +134,14 @@
               <view class="fire-card-header" @click.stop="toggleIsShow2">
                 <text class="warn-card-title">火灾监测预警</text>
                 <view class="warn-card-action">
-                  <text class="warn-action-text">{{ isShow2 ? "收起" : "展开" }}</text>
-                  <u-icon :name="isShow2 ? 'arrow-up' : 'arrow-down'" color="#2b7cff" size="14"></u-icon>
+                  <text class="warn-action-text">{{
+                    isShow2 ? "收起" : "展开"
+                  }}</text>
+                  <u-icon
+                    :name="isShow2 ? 'arrow-up' : 'arrow-down'"
+                    color="#2b7cff"
+                    size="14"
+                  ></u-icon>
                 </view>
               </view>
               <view v-show="isShow2">
@@ -102,16 +157,29 @@
                       <!-- <view class="fire-block-line"></view> -->
                     </view>
                     <view class="fire-grid">
-                      <view class="fire-data-card" v-for="(item, index) in internalFireList" :key="'internal-' + index">
+                      <view
+                        class="fire-data-card"
+                        v-for="(item, index) in internalFireList"
+                        :key="'internal-' + index"
+                      >
                         <view class="fire-icon-box">
-                          <image class="fire-icon" :src="getFireIcon(item)" mode="aspectFit"></image>
+                          <image
+                            class="fire-icon"
+                            :src="getFireIcon(item)"
+                            mode="aspectFit"
+                          ></image>
                         </view>
                         <view class="fire-data-info">
-                          <text :class="[
-                            'fire-data-value',
-                            isFireValueWarn(item) ? 'fire-value-warn' : '',
-                          ]">{{ item.value }}</text>
-                          <text class="fire-data-label">{{ item.monitorcode }}{{ getFireUnit(item) }}</text>
+                          <text
+                            :class="[
+                              'fire-data-value',
+                              isFireValueWarn(item) ? 'fire-value-warn' : '',
+                            ]"
+                            >{{ item.value }}</text
+                          >
+                          <text class="fire-data-label"
+                            >{{ item.monitorcode }}{{ getFireUnit(item) }}</text
+                          >
                         </view>
                       </view>
                     </view>
@@ -126,16 +194,29 @@
                       <!-- <view class="fire-block-line"></view> -->
                     </view>
                     <view class="fire-grid">
-                      <view class="fire-data-card" v-for="(item, index) in externalFireList" :key="'external-' + index">
+                      <view
+                        class="fire-data-card"
+                        v-for="(item, index) in externalFireList"
+                        :key="'external-' + index"
+                      >
                         <view class="fire-icon-box">
-                          <image class="fire-icon" :src="getFireIcon(item)" mode="aspectFit"></image>
+                          <image
+                            class="fire-icon"
+                            :src="getFireIcon(item)"
+                            mode="aspectFit"
+                          ></image>
                         </view>
                         <view class="fire-data-info">
-                          <text :class="[
-                            'fire-data-value',
-                            isFireValueWarn(item) ? 'fire-value-warn' : '',
-                          ]">{{ item.value }}</text>
-                          <text class="fire-data-label">{{ item.monitorcode }}{{ getFireUnit(item) }}</text>
+                          <text
+                            :class="[
+                              'fire-data-value',
+                              isFireValueWarn(item) ? 'fire-value-warn' : '',
+                            ]"
+                            >{{ item.value }}</text
+                          >
+                          <text class="fire-data-label"
+                            >{{ item.monitorcode }}{{ getFireUnit(item) }}</text
+                          >
                         </view>
                       </view>
                     </view>
@@ -151,8 +232,14 @@
               <view class="dust-card-header" @click.stop="toggleIsShow3">
                 <text class="warn-card-title">粉尘监测预警</text>
                 <view class="warn-card-action">
-                  <text class="warn-action-text">{{ isShow3 ? "收起" : "展开" }}</text>
-                  <u-icon :name="isShow3 ? 'arrow-up' : 'arrow-down'" color="#2b7cff" size="14"></u-icon>
+                  <text class="warn-action-text">{{
+                    isShow3 ? "收起" : "展开"
+                  }}</text>
+                  <u-icon
+                    :name="isShow3 ? 'arrow-up' : 'arrow-down'"
+                    color="#2b7cff"
+                    size="14"
+                  ></u-icon>
                 </view>
               </view>
               <view v-show="isShow3">
@@ -160,16 +247,31 @@
                 <view class="dust-card-content" @click="getDetail('dust')">
                   <view class="dust-alarm-bar">
                     <view class="dust-alarm-icon-wrap">
-                      <image class="dust-alarm-icon" src="/static/warndata/报警.svg" mode="aspectFit"></image>
+                      <image
+                        class="dust-alarm-icon"
+                        src="/static/warndata/报警.svg"
+                        mode="aspectFit"
+                      ></image>
                     </view>
                     <text class="dust-alarm-label">报警:</text>
                     <text class="dust-alarm-value">{{ dustAlarmCount }}</text>
                   </view>
                   <view class="dust-risk-row">
-                    <view class="dust-risk-card" v-for="(risk, index) in dustRiskList" :key="index"
-                      :style="{ background: risk.bg }">
-                      <view class="dust-risk-icon" :style="{ background: risk.iconBg }">
-                        <image class="dust-risk-icon-img" src="/static/warndata/风险.svg" mode="aspectFit"></image>
+                    <view
+                      class="dust-risk-card"
+                      v-for="(risk, index) in dustRiskList"
+                      :key="index"
+                      :style="{ background: risk.bg }"
+                    >
+                      <view
+                        class="dust-risk-icon"
+                        :style="{ background: risk.iconBg }"
+                      >
+                        <image
+                          class="dust-risk-icon-img"
+                          src="/static/warndata/风险.svg"
+                          mode="aspectFit"
+                        ></image>
                       </view>
                       <text class="dust-risk-value">{{ risk.value }}</text>
                       <text class="dust-risk-label">{{ risk.label }}</text>
@@ -186,7 +288,9 @@
               <view class="gas-card-header" @click.stop="toggleIsShow4">
                 <text class="warn-card-title">瓦斯监测预警</text>
                 <view class="warn-card-action">
-                  <text class="warn-action-text">{{ isShow4 ? "收起" : "展开" }}</text>
+                  <text class="warn-action-text">{{
+                    isShow4 ? "收起" : "展开"
+                  }}</text>
                   <u-icon
                     :name="isShow4 ? 'arrow-up' : 'arrow-down'"
                     color="#2b7cff"
@@ -221,13 +325,20 @@
                           ></image>
                         </view>
                         <view class="gas-data-info">
-                          <text class="gas-data-value">{{ item.gasNumber }}</text>
-                          <text class="gas-data-label">{{ item.systemname }}</text>
+                          <text class="gas-data-value">{{
+                            item.gasNumber
+                          }}</text>
+                          <text class="gas-data-label">{{
+                            item.systemname
+                          }}</text>
                         </view>
                       </view>
                     </view>
                   </view>
-                  <view class="gas-block gas-block-second" v-if="gasDevice.length > 0">
+                  <view
+                    class="gas-block gas-block-second"
+                    v-if="gasDevice.length > 0"
+                  >
                     <view class="gas-block-header">
                       <!-- <view class="gas-block-deco">
                         <view class="gas-deco-line"></view>
@@ -251,8 +362,12 @@
                           ></image>
                         </view>
                         <view class="gas-data-info">
-                          <text class="gas-data-value">{{ item.pumpNumber }}</text>
-                          <text class="gas-data-label">{{ item.systemname }}</text>
+                          <text class="gas-data-value">{{
+                            item.pumpNumber
+                          }}</text>
+                          <text class="gas-data-label">{{
+                            item.systemname
+                          }}</text>
                         </view>
                       </view>
                     </view>
@@ -444,6 +559,14 @@ export default {
           });
       });
     },
+    //左上角返回键：详情页返回预警列表页，预警列表页返回首页
+    onLeftClick() {
+      if (!this.isShowDetail) {
+        this.menuShow();
+        return;
+      }
+      this.$emit("changePage", "device");
+    },
     //返回监测首页
     menuShow() {
       this.isShowDetail = true;
@@ -587,7 +710,11 @@ export default {
     },
     dustAlarmCount() {
       const data = this.dustData || {};
-      if (data.alarm !== undefined && data.alarm !== null && data.alarm !== "") {
+      if (
+        data.alarm !== undefined &&
+        data.alarm !== null &&
+        data.alarm !== ""
+      ) {
         return data.alarm;
       }
       return 0;
@@ -763,7 +890,11 @@ export default {
   margin: 0 6rpx;
   padding: 24rpx 8rpx;
   border-radius: 12rpx;
-  background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195, 252, .1) 100%);
+  background: linear-gradient(
+    to bottom,
+    rgba(175, 195, 252, 0.6) 0%,
+    rgba(175, 195, 252, 0.1) 100%
+  );
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -800,7 +931,11 @@ export default {
   margin-top: 16rpx;
   padding: 24rpx 16rpx;
   border-radius: 12rpx;
-  background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195, 252, .1) 100%);
+  background: linear-gradient(
+    to bottom,
+    rgba(175, 195, 252, 0.6) 0%,
+    rgba(175, 195, 252, 0.1) 100%
+  );
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -891,7 +1026,7 @@ export default {
   height: 80rpx;
   margin-bottom: 30rpx;
   box-sizing: border-box;
-  background: url('../../static/warndata/1-3.png') no-repeat center;
+  background: url("../../static/warndata/1-3.png") no-repeat center;
   background-size: 100% 100%;
 }
 
@@ -1006,7 +1141,7 @@ export default {
   width: 100%;
   margin-bottom: 20rpx;
   padding-left: 30rpx;
-  background: url('../../static/warndata/1-1.png') no-repeat center;
+  background: url("../../static/warndata/1-1.png") no-repeat center;
   background-size: 100% 100%;
 }
 
@@ -1038,7 +1173,12 @@ export default {
 .fire-block-line {
   flex: 1;
   height: 28rpx;
-  background: linear-gradient(90deg, #d0e7ff 0%, #eef5ff 72%, rgba(238, 245, 255, 0) 100%);
+  background: linear-gradient(
+    90deg,
+    #d0e7ff 0%,
+    #eef5ff 72%,
+    rgba(238, 245, 255, 0) 100%
+  );
   clip-path: polygon(0 0, calc(100% - 24rpx) 0, 100% 100%, 0 100%);
 }
 
@@ -1054,7 +1194,11 @@ export default {
   margin-bottom: 16rpx;
   padding: 20rpx 16rpx;
   border-radius: 12rpx;
-  background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195, 252, .1) 100%);
+  background: linear-gradient(
+    to bottom,
+    rgba(175, 195, 252, 0.6) 0%,
+    rgba(175, 195, 252, 0.1) 100%
+  );
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1137,7 +1281,7 @@ export default {
 }
 
 .dust-section .warn-action-text {
-   color: #0065f8;
+  color: #0065f8;
 }
 
 .dust-alarm-bar {
@@ -1282,7 +1426,7 @@ export default {
   align-items: center;
   margin-bottom: 20rpx;
   padding-left: 30rpx;
-  background: url('../../static/warndata/1-1.png') no-repeat center;
+  background: url("../../static/warndata/1-1.png") no-repeat center;
   background-size: 100% 100%;
 }
 
@@ -1322,7 +1466,12 @@ export default {
 .gas-block-line {
   flex: 1;
   height: 28rpx;
-  background: linear-gradient(90deg, #d0e7ff 0%, #eef5ff 72%, rgba(238, 245, 255, 0) 100%);
+  background: linear-gradient(
+    90deg,
+    #d0e7ff 0%,
+    #eef5ff 72%,
+    rgba(238, 245, 255, 0) 100%
+  );
   clip-path: polygon(0 0, calc(100% - 24rpx) 0, 100% 100%, 0 100%);
 }
 
@@ -1339,7 +1488,11 @@ export default {
   margin-right: 20rpx;
   padding: 16rpx 10rpx;
   border-radius: 12rpx;
-background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195, 252, .1) 100%);
+  background: linear-gradient(
+    to bottom,
+    rgba(175, 195, 252, 0.6) 0%,
+    rgba(175, 195, 252, 0.1) 100%
+  );
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1407,10 +1560,12 @@ background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195
   line-height: 27px;
   border-radius: 5px;
   background: url(/static/model/windM3.png),
-    linear-gradient(to right,
+    linear-gradient(
+      to right,
       rgba(55, 135, 254, 0.08),
       rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08));
+      rgba(60, 161, 237, 0.08)
+    );
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: right;
@@ -1423,17 +1578,19 @@ background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195
   height: 200rpx;
   text-align: center;
   border-radius: 10px;
-  background: linear-gradient(to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08));
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
 }
 
 .title {
   position: relative;
   width: 100%;
   height: 50rpx;
-  background: url('../../static/warndata/1-1.png');
+  background: url("../../static/warndata/1-1.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   display: flex;
@@ -1479,9 +1636,11 @@ background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195
 .fire-item1 {
   width: 45%;
   margin: 16rpx;
-  background: linear-gradient(to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08));
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08)
+  );
 }
 
 .gascontainer {
@@ -1493,10 +1652,12 @@ background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195
   border-radius: 10px;
   margin: 10px;
   display: flex;
-  background: linear-gradient(to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08));
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
   flex-direction: row;
   justify-content: space-between;
 }
@@ -1515,10 +1676,12 @@ background: linear-gradient(to bottom, rgba(175, 195, 252, .6) 0%, rgba(175, 195
   border-radius: 10px;
   margin: 10px;
   display: flex;
-  background: linear-gradient(to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08));
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
   flex-direction: row;
   justify-content: space-between;
 }