vue2代码写法改vue3/样式优化

src/pages/business/mhxf/informationSelect/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <u-sticky bgColor="#fff" style="border-bottom: 1px #ececec solid">
+  <u-sticky bgColor="#fff" style="box-shadow: 1px 1px 4px rgb(26 26 26 / 10%)">
     <u-tabs :list="list" @click="tabsClick" :current="current"></u-tabs>
   </u-sticky>
 
-  <view class="informationSelect" @touchstart="fingerstart" @touchend="fingerend" style="background-color: #ffffff; padding: 10px">
+  <view class="informationSelect" @touchstart="fingerstart" @touchend="fingerend" style="background-color: #ffffff">
     <uni-swipe-action>
       <uni-swipe-action-item>
         <!-- 各类查询 start -->
-        <view class="content1">
+        <view class="content">
           <u-input style="border-radius: 50px; margin-bottom: 10px" @blur="blur" v-model="dataInput" prefixIcon="search" prefixIconStyle="color: #0c7bf9" :placeholder="placeholderText"> </u-input>
           <view style="text-align: center; color: rgb(189, 189, 189); font-size: 14px" v-if="!dataRes">暂无数据</view>
           <view v-if="current == 8">
-            <view class="con" style="">
+            <view class="con">
               <view class="time">{{ newTime }}</view>
               <video src="http://file.usky.cn/statics/video/20230203.mp4" autoplay :controls="false" :show-center-play-btn="false" :loop="true" style="width: 100%"></video>
             </view>
           </view>
           <view v-else>
-            <u-row v-for="po in classifyData" :key="po" style="height: 36px; line-height: 36px">
+            <u-row v-for="po in classifyData" :key="po">
               <u-col span="4">
                 <view style="text-align: right; padding: 0px 5px 0px 5px">{{ po.title }}</view>
               </u-col>
@@ -612,7 +612,7 @@ function getNowTime() {
     addZero(date.getSeconds());
   newTime.value = time;
 }
-//根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
+//根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
 //小于10的拼接上0字符串
 function addZero(s) {
   return s < 10 ? "0" + s : s;
@@ -655,9 +655,10 @@ body {
 }
 
 .informationSelect {
-  height: calc(100vh - 45px);
+  height: calc(100vh - 88px);
   background-color: #ffffff;
-  .content1 {
+  .content {
+    padding: 10px;
     .u-row {
       height: 36px;
       line-height: 36px;
@@ -669,7 +670,7 @@ body {
 
         view {
           padding: 0 10px;
-          min-height: 40px;
+          min-height: 36px;
           overflow: hidden; //超出的文本隐藏
           // text-overflow: ellipsis; //溢出用省略号显示
           overflow: auto;

src/pages/business/mhxf/unitInfoCollection/index.vue

@@ -10,12 +10,12 @@
       <view style="padding: 10px 0">
         <view class="" style="padding: 10px 10px 20px 10px; background: #ffffff">
           <u--form :model="form" ref="uForm" :rules="rules" labelWidth="130" style="padding-left: 9px">
-            <u-form-item label="组织机构代码" prop="name1" required :borderBottom="true">
-              <u-input v-model="form.name1" placeholder="请输入组织机构代码" border="none" />
-            </u-form-item>
             <u-form-item label="单位名称" prop="name2" required :borderBottom="true">
               <u-input v-model="form.name2" placeholder="请输入单位名称" border="none" />
             </u-form-item>
+            <u-form-item label="组织机构代码" prop="name1" required :borderBottom="true">
+              <u-input v-model="form.name1" placeholder="请输入组织机构代码" border="none" />
+            </u-form-item>
             <u-form-item label="法人代表" prop="name3" required :borderBottom="true">
               <u-input v-model="form.name3" placeholder="请输入法人代表" border="none" />
             </u-form-item>
@@ -253,7 +253,7 @@ function submit() {}
  * @action弹出框点击事件
  */
 function handleAction(value, index) {
-  console.log(value)
+  console.log(value);
 
   if (value == "单位地址") {
     if (!addDisabled.value) {

src/pages/common/textview/index.vue

@@ -6,38 +6,40 @@
   </view>
 </template>
 
-<script>
-  export default {
-    data() {
-      return {
-        title: '',
-        content: ''
-      }
-    },
-    onLoad(options) {
-      this.title = options.title
-      this.content = options.content
-      uni.setNavigationBarTitle({
-        title: options.title
-      })
-    }
-  }
+<script setup>
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
+
+const data = reactive({
+  title: "",
+  content: "",
+});
+
+const { title, content } = toRefs(data);
+
+onLoad((options) => {
+  title.value = options.title;
+  content.value = options.content;
+  uni.setNavigationBarTitle({
+    title: options.title,
+  });
+});
 </script>
 
 <style scoped>
-  page {
-    background-color: #ffffff;
-  }
+page {
+  background-color: #ffffff;
+}
 
-  .view-title {
-    font-weight: bold;
-  }
+.view-title {
+  font-weight: bold;
+}
 
-  .view-content {
-    font-size: 26rpx;
-    padding: 12px 5px 0;
-    color: #333;
-    line-height: 24px;
-    font-weight: normal;
-  }
+.view-content {
+  font-size: 26rpx;
+  padding: 12px 5px 0;
+  color: #333;
+  line-height: 24px;
+  font-weight: normal;
+}
 </style>

src/pages/common/webview/index.vue

@@ -4,31 +4,35 @@
   </view>
 </template>
 
-<script>
-  export default {
-    data() {
-      return {
-        params: {},
-        webviewStyles: {
-          progress: {
-            color: "#FF3333"
-          }
-        }
-      }
-    },
-    props: {
-      src: {
-        type: [String],
-        default: null
-      }
+<script setup>
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
+
+const props = defineProps({
+  // 数据
+  src: {
+    type: [String],
+    default: null,
+  },
+});
+
+const data = reactive({
+  params: {},
+  webviewStyles: {
+    progress: {
+      color: "#FF3333",
     },
-    onLoad(event) {
-      this.params = event
-      if (event.title) {
-        uni.setNavigationBarTitle({
-          title: event.title
-        })
-      }
-    }
+  },
+});
+
+const { params, webviewStyles } = toRefs(data);
+
+onLoad((event) => {
+  params.value = event;
+  if (event.title) {
+    uni.setNavigationBarTitle({
+      title: event.title,
+    });
   }
+});
 </script>

src/pages/index.vue

@@ -160,7 +160,6 @@ import useXunJianStore from "@/store/modules/xunJian.js";
 
 import { scan_push, getHomePageData, getFunctionalModuleStatistics } from "@/api/index";
 
-
 const settingsStore = useXunJianStore(); //全局变量值Store
 const BASE_URL = inject("$BASE_URL");
 
@@ -208,9 +207,9 @@ onLoad((option) => {
   // }
 
   // // 图表切换渲染
-  // this.hackReset = false;
-  // this.$nextTick(() => {
-  //   this.hackReset = true;
+  // hackReset.value = false;
+  // nextTick(() => {
+  //   hackReset.value = true;
   // });
 });
 
@@ -220,7 +219,7 @@ async function init() {
 //扫码
 function scanQRCode() {
   // console.log(1);
-  // this.scanCode();
+  // scanCode();
   // 将this赋值给that
   let that = this;
   // 微信公众号获取位置
@@ -418,11 +417,11 @@ async function getHandleData(param = {}) {
 onNavigationBarButtonTap((e) => {
   if (e.float == "right") {
     // alert("你点击了扫一扫");
-    this.scanQRCode();
+    scanQRCode();
   } else {
     // alert("你点击了获取位置");
-    // this.getLocation()
-    this.showTag();
+    // getLocation()
+    showTag();
   }
 });
 </script>
@@ -499,4 +498,4 @@ li {
   margin: 0;
   list-style: none;
 }
-</style>
+</style>

src/pages/mine/help/index.vue

@@ -12,55 +12,57 @@
   </view>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      list: [
-        // {
-        //   icon: 'iconfont icon-github',
-        //   title: '若依问题',
-        //   childList: [{
-        //     title: '若依开源吗？',
-        //     content: '开源'
-        //   }, {
-        //     title: '若依可以商用吗？',
-        //     content: '可以'
-        //   }, {
-        //     title: '若依官网地址多少？',
-        //     content: 'http://ruoyi.vip'
-        //   }, {
-        //     title: '若依文档地址多少？',
-        //     content: 'http://doc.ruoyi.vip'
-        //   }]
-        // },
+<script setup>
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
+
+const { proxy } = getCurrentInstance();
+
+const data = reactive({
+  list: [
+    // {
+    //   icon: 'iconfont icon-github',
+    //   title: '若依问题',
+    //   childList: [{
+    //     title: '若依开源吗？',
+    //     content: '开源'
+    //   }, {
+    //     title: '若依可以商用吗？',
+    //     content: '可以'
+    //   }, {
+    //     title: '若依官网地址多少？',
+    //     content: 'http://ruoyi.vip'
+    //   }, {
+    //     title: '若依文档地址多少？',
+    //     content: 'http://doc.ruoyi.vip'
+    //   }]
+    // },
+    {
+      icon: "iconfont icon-help",
+      title: "其他问题",
+      childList: [
         {
-          icon: "iconfont icon-help",
-          title: "其他问题",
-          childList: [
-            {
-              title: "如何退出登录？",
-              content: "请点击[我的] - [应用设置] - [退出登录]即可退出登录",
-            },
-            {
-              title: "如何修改用户头像？",
-              content: "请点击[我的] - [选择头像] - [点击提交]即可更换用户头像",
-            },
-            {
-              title: "如何修改登录密码？",
-              content: "请点击[我的] - [应用设置] - [修改密码]即可修改登录密码",
-            },
-          ],
+          title: "如何退出登录？",
+          content: "请点击[我的] - [应用设置] - [退出登录]即可退出登录",
+        },
+        {
+          title: "如何修改用户头像？",
+          content: "请点击[我的] - [选择头像] - [点击提交]即可更换用户头像",
+        },
+        {
+          title: "如何修改登录密码？",
+          content: "请点击[我的] - [应用设置] - [修改密码]即可修改登录密码",
         },
       ],
-    };
-  },
-  methods: {
-    handleText(item) {
-      this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`);
     },
-  },
-};
+  ],
+});
+
+const { list } = toRefs(data);
+
+function handleText(item) {
+  proxy.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`);
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/mine/info/edit.vue

@@ -8,7 +8,7 @@
         <uni-forms-item label="手机号码" name="phonenumber">
           <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
         </uni-forms-item>
-        <uni-forms-item label="邮箱" name="email" >
+        <uni-forms-item label="邮箱" name="email">
           <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
         </uni-forms-item>
         <uni-forms-item label="性别" name="sex" required>
@@ -24,82 +24,88 @@
 import { getUserProfile } from "@/api/system/user";
 import { updateUserProfile } from "@/api/system/user";
 
-export default {
-  data() {
-    return {
-      user: {
-        nickName: "",
-        phonenumber: "",
-        email: "",
-        sex: "",
-      },
-      sexs: [
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
+
+const data = reactive({
+  user: {
+    nickName: "",
+    phonenumber: "",
+    email: "",
+    sex: "",
+  },
+  sexs: [
+    {
+      text: "男",
+      value: "0",
+    },
+    {
+      text: "女",
+      value: "1",
+    },
+  ],
+  rules: {
+    nickName: {
+      rules: [
         {
-          text: "男",
-          value: "0",
+          required: true,
+          errorMessage: "用户昵称不能为空",
         },
+      ],
+    },
+    phonenumber: {
+      rules: [
         {
-          text: "女",
-          value: "1",
+          required: true,
+          errorMessage: "手机号码不能为空",
         },
-      ],
-      rules: {
-        nickName: {
-          rules: [
-            {
-              required: true,
-              errorMessage: "用户昵称不能为空",
-            },
-          ],
+        {
+          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+          errorMessage: "请输入正确的手机号码",
         },
-        phonenumber: {
-          rules: [
-            {
-              required: true,
-              errorMessage: "手机号码不能为空",
-            },
-            {
-              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-              errorMessage: "请输入正确的手机号码",
-            },
-          ],
+      ],
+    },
+    email: {
+      rules: [
+        {
+          required: true,
+          errorMessage: "邮箱地址不能为空",
         },
-        email: {
-          rules: [
-            {
-              required: true,
-              errorMessage: "邮箱地址不能为空",
-            },
-            {
-              format: "email",
-              errorMessage: "请输入正确的邮箱地址",
-            },
-          ],
+        {
+          format: "email",
+          errorMessage: "请输入正确的邮箱地址",
         },
-      },
-    };
-  },
-  onLoad() {
-    this.getUser();
-  },
-  onReady() {
-    this.$refs.form.setRules(this.rules);
-  },
-  methods: {
-    getUser() {
-      getUserProfile().then((response) => {
-        this.user = response.data;
-      });
-    },
-    submit(ref) {
-      this.$refs.form.validate().then((res) => {
-        updateUserProfile(this.user).then((response) => {
-          this.$modal.msgSuccess("修改成功");
-        });
-      });
+      ],
     },
   },
-};
+});
+
+const { user, sexs, rules } = toRefs(data);
+
+const { proxy } = getCurrentInstance();
+
+const form = ref(null);
+
+function getUser() {
+  getUserProfile().then((response) => {
+    user.value = response.data;
+  });
+}
+function submit(ref) {
+  form.value.validate().then((res) => {
+    updateUserProfile(user.value).then((response) => {
+      proxy.$modal.msgSuccess("修改成功");
+    });
+  });
+}
+
+onLoad((options) => {
+  getUser();
+});
+
+onReady(() => {
+  form.value.setRules(rules.value);
+});
 </script>
 
 <style lang="scss">

src/pages/mine/pwd/index.vue

@@ -15,71 +15,81 @@
   </view>
 </template>
 
-<script>
-  import { updateUserPwd } from "@/api/system/user"
+<script setup>
+import { updateUserPwd } from "@/api/system/user";
 
-  export default {
-    data() {
-      return {
-        user: {
-          oldPassword: undefined,
-          newPassword: undefined,
-          confirmPassword: undefined
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
+
+const data = reactive({
+  user: {
+    oldPassword: undefined,
+    newPassword: undefined,
+    confirmPassword: undefined,
+  },
+  rules: {
+    oldPassword: {
+      rules: [
+        {
+          required: true,
+          errorMessage: "旧密码不能为空",
+        },
+      ],
+    },
+    newPassword: {
+      rules: [
+        {
+          required: true,
+          errorMessage: "新密码不能为空",
         },
-        rules: {
-          oldPassword: {
-            rules: [{
-              required: true,
-              errorMessage: '旧密码不能为空'
-            }]
-          },
-          newPassword: {
-            rules: [{
-                required: true,
-                errorMessage: '新密码不能为空',
-              },
-              {
-                minLength: 6,
-                maxLength: 20,
-                errorMessage: '长度在 6 到 20 个字符'
-              }
-            ]
-          },
-          confirmPassword: {
-            rules: [{
-                required: true,
-                errorMessage: '确认密码不能为空'
-              }, {
-                validateFunction: (rule, value, data) => data.newPassword === value,
-                errorMessage: '两次输入的密码不一致'
-              }
-            ]
-          }
-        }
-      }
+        {
+          minLength: 6,
+          maxLength: 20,
+          errorMessage: "长度在 6 到 20 个字符",
+        },
+      ],
     },
-    onReady() {
-      this.$refs.form.setRules(this.rules)
+    confirmPassword: {
+      rules: [
+        {
+          required: true,
+          errorMessage: "确认密码不能为空",
+        },
+        {
+          validateFunction: (rule, value, data) => data.newPassword === value,
+          errorMessage: "两次输入的密码不一致",
+        },
+      ],
     },
-    methods: {
-      submit() {
-        this.$refs.form.validate().then(res => {
-          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
-            this.$modal.msgSuccess("修改成功")
-          })
-        })
-      }
-    }
-  }
+  },
+});
+
+const { user, rules } = toRefs(data);
+
+const { proxy } = getCurrentInstance();
+
+const form = ref(null);
+
+function submit() {
+  form.value.validate().then((res) => {
+    updateUserPwd(user.value.oldPassword, user.value.newPassword).then((response) => {
+      proxy.$modal.msgSuccess("修改成功");
+    });
+  });
+}
+
+onReady(() => {
+  form.value.setRules(rules.value);
+});
 </script>
 
 <style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
+page {
+  background-color: #ffffff;
+}
 
-  .pwd-retrieve-container {
-    padding-top: 36rpx;
-    padding: 15px;
-  }
+.pwd-retrieve-container {
+  padding-top: 36rpx;
+  padding: 15px;
+}
 </style>

src/pages/setting/building/building.vue

@@ -9,77 +9,77 @@
         <table style="border: 1px solid #ccc" cellspacing="0" cellpadding="0" align="center">
           <tr>
             <td>建筑物名称</td>
-            <td>{{ this.getDetailData.build_name }}</td>
+            <td>{{ contentgetDetailData.build_name }}</td>
           </tr>
           <tr>
             <td>建筑物类别</td>
-            <td>{{ this.getDetailData.build_type }}</td>
+            <td>{{ contentgetDetailData.build_type }}</td>
           </tr>
           <tr>
             <td>建造日期</td>
-            <td>{{ this.getDetailData.build_time }}</td>
+            <td>{{ contentgetDetailData.build_time }}</td>
           </tr>
           <tr>
             <td>使用性质</td>
-            <td>{{ this.getDetailData.nature_use }}</td>
+            <td>{{ contentgetDetailData.nature_use }}</td>
           </tr>
           <tr>
             <td>火灾危险级</td>
-            <td>{{ this.getDetailData.fire_risk_level }}</td>
+            <td>{{ contentgetDetailData.fire_risk_level }}</td>
           </tr>
           <tr>
             <td>耐火等级</td>
-            <td>{{ this.getDetailData.fire_resistance_rating }}</td>
+            <td>{{ contentgetDetailData.fire_resistance_rating }}</td>
           </tr>
           <tr>
             <td>结构类型</td>
-            <td>{{ this.getDetailData.structure_type }}</td>
+            <td>{{ contentgetDetailData.structure_type }}</td>
           </tr>
           <tr>
             <td>建筑高度</td>
-            <td>{{ this.getDetailData.build_height }}</td>
+            <td>{{ contentgetDetailData.build_height }}</td>
           </tr>
           <tr>
             <td>建筑面积</td>
-            <td>{{ this.getDetailData.build_area }}</td>
+            <td>{{ contentgetDetailData.build_area }}</td>
           </tr>
           <tr>
             <td>占地面积</td>
-            <td>{{ this.getDetailData.land_occupation_area }}</td>
+            <td>{{ contentgetDetailData.land_occupation_area }}</td>
           </tr>
 
           <tr>
             <td>标准层面积</td>
-            <td>{{ this.getDetailData.standard_area }}</td>
+            <td>{{ contentgetDetailData.standard_area }}</td>
           </tr>
           <tr>
             <td>地上层数</td>
-            <td>{{ this.getDetailData.aboveground_layer }}</td>
+            <td>{{ contentgetDetailData.aboveground_layer }}</td>
           </tr>
           <tr>
             <td>地上层面积</td>
-            <td>{{ this.getDetailData.aboveground_area }}</td>
+            <td>{{ contentgetDetailData.aboveground_area }}</td>
           </tr>
 
           <tr>
             <td>地下层数</td>
-            <td>{{ this.getDetailData.underground_floor }}</td>
+            <td>{{ contentgetDetailData.underground_floor }}</td>
           </tr>
           <tr>
             <td>地下层面积</td>
-            <td>{{ this.getDetailData.underground_area }}</td>
+            <td>{{ contentgetDetailData.underground_area }}</td>
           </tr>
           <tr>
             <td>消防控制室位置</td>
-            <td>{{ this.getDetailData.control_room }}</td>
+            <td>{{ contentgetDetailData.control_room }}</td>
           </tr>
           <tr>
             <td>避难层数量</td>
-            <td>{{ this.getDetailData.refuge_layer }}</td>
+            <td>{{ contentgetDetailData.refuge_layer }}</td>
           </tr>
           <tr>
             <td>消防电梯数量</td>
-            <td>{{ this.getDetailData.fire_elevator }}</td>
+            <td>{{ contentgetDetailData.fire_elevator }}</td>
           </tr>
         </table>
       </view>
@@ -91,8 +91,8 @@
         消防设施平面布置图
       </view>
       <view class="padding-lr imgPic">
-        <image v-if="!this.getDetailData.build_plan && this.dataRes == 1" mode="widthFix" src="@/static/images/defaultImg.jpg" />
-        <image v-else mode="widthFix" :src="this.getDetailData.layout_plan" />
+        <image v-if="!contentgetDetailData.build_plan && contentdataRes == 1" mode="widthFix" src="@/static/images/defaultImg.jpg" />
+        <image v-else mode="widthFix" :src="contentgetDetailData.layout_plan" />
       </view>
     </view>
 
@@ -102,8 +102,8 @@
         建筑平面图
       </view>
       <view class="padding-lr padding-bottom-lg imgPic">
-        <image v-if="!this.getDetailData.build_plan && this.dataRes == 1" mode="widthFix" src="@/static/images/defaultImg.jpg" />
-        <image v-else :src="this.getDetailData.build_plan" mode="widthFix" />
+        <image v-if="!contentgetDetailData.build_plan && contentdataRes == 1" mode="widthFix" src="@/static/images/defaultImg.jpg" />
+        <image v-else :src="contentgetDetailData.build_plan" mode="widthFix" />
       </view>
     </view>
   </view>

src/pages/setting/funReport/funcAdd/funcAdd.vue

@@ -38,7 +38,7 @@
           开始时间:
         </view>
         <view class="example-body">
-          <uni-datetime-picker v-model="start_time" :start="this.id ? '' : now" />
+          <uni-datetime-picker v-model="start_time" :start="id ? '' : now" />
         </view>
       </view>
       <view class="form-item" v-if="report_type">
@@ -88,260 +88,277 @@
     </form>
   </view>
 </template>
-<style scoped>
-::v-deep .funcAdd .uni-date-x--border,
-.uni-date-x {
-  border-radius: 0 !important;
-}
-.funcAdd .example-body {
-  margin: 0;
-  width: calc(100% - 200rpx);
-}
-</style>
 
-<script>
-export default {
-  data() {
-    return {
-      id: "",
-
-      report_type: "",
-      device_type: "",
-      start_time: "",
-      end_time: "",
-      remarks: "",
-      device_port: "",
-      port_type: "",
-      device_code: "",
-      now: "",
-
-      deviceListData: [],
-      detailsData: "",
-    };
-  },
-  onLoad: function (option) {
-    this.id = option.id;
-    uni.setNavigationBarTitle({
-      title: option.id ? "编辑" : "新增",
-    });
+<script setup>
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watch } from "vue";
 
-    var nowTemp = new Date();
-    this.now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
+const data = reactive({
+  id: "",
 
-    if (option.id) {
-      this.getDetailsData({ id: option.id });
-    }
-  },
-  watch: {
-    start_time: function () {
-      // alert(this.start_time)
-    },
-    report_type: function (newVal) {
-      if (newVal) {
-        var array123 = ["", "1", "2", "3", "4", "5", "6", "7", "16", "128", "131", "130", "129", "17"];
-        if (array123.indexOf(this.device_type) == -1) {
-          this.device_type = "";
-        }
-      }
-    },
-    device_type: function (newVal) {
-      if (newVal) {
-        this.deviceList({
-          company_code: uni.getStorageSync("selectedCode"),
-          device_type: this.device_type,
-        });
-      }
-    },
-  },
-  methods: {
-    // 回显信息请求
-    async getDetailsData(params = {}) {
-      const res = await this.$myRequest({
-        url: "AlarmReport/editData",
-        data: params,
-        showLoading: true,
-      });
+  report_type: "",
+  device_type: "",
+  start_time: "",
+  end_time: "",
+  remarks: "",
+  device_port: "",
+  port_type: "",
+  device_code: "",
+  now: "",
 
-      this.detailsData = res.data.data[0];
-      console.log(this.detailsData);
-      this.report_type = this.detailsData.report_type;
-      this.device_type = this.detailsData.device_type;
-      this.start_time = this.detailsData.start_time;
-      this.end_time = this.detailsData.end_time;
-      this.remarks = this.detailsData.remarks;
-      this.port_type = this.detailsData.port_type;
-      this.device_port = this.detailsData.device_port;
-      this.device_code = this.detailsData.device_code;
-    },
-
-    async submit() {
-      //提交验证
-
-      if (!this.report_type) {
-        uni.showToast({
-          title: "请输入报备类型",
-          icon: "none",
-        });
-        return;
-      }
-      if (this.report_type == 1) {
-        if (!this.start_time.replace(/^\s*/g, "")) {
-          uni.showToast({
-            title: "请选择开始时间",
-            icon: "none",
-          });
-          return;
-        }
-        if (!this.end_time.replace(/^\s*/g, "")) {
-          uni.showToast({
-            title: "请选择结束时间",
-            icon: "none",
-          });
-          return;
-        }
-      }
-      if (this.report_type == 2 || this.report_type == 3) {
-        if (!this.device_type) {
-          uni.showToast({
-            title: "请选择设备类型",
-            icon: "none",
-          });
-          return;
-        }
-        if (!this.start_time.replace(/^\s*/g, "")) {
-          uni.showToast({
-            title: "请输入开始时间",
-            icon: "none",
-          });
-          return;
-        }
-        if (!this.end_time.replace(/^\s*/g, "")) {
-          uni.showToast({
-            title: "请输入结束时间",
-            icon: "none",
-          });
-          return;
-        }
-      }
+  deviceListData: [],
+  detailsData: "",
+});
 
-      if (this.report_type == 3 && this.device_type) {
-        if (this.device_type == 6) {
-          if (!this.device_port.replace(/^\s*/g, "")) {
-            uni.showToast({
-              title: "请输入端口号",
-              icon: "none",
-            });
-            return;
-          }
-          if (!this.port_type) {
-            uni.showToast({
-              title: "请选择端口类型",
-              icon: "none",
-            });
-            return;
-          }
-          if (!this.device_code) {
-            uni.showToast({
-              title: "请选择报备设备",
-              icon: "none",
-            });
-            return;
-          }
-        }
-        if (!this.device_code) {
-          uni.showToast({
-            title: "请选择报备设备",
-            icon: "none",
-          });
-          return;
-        }
-      }
+const {
+  id,
+  report_type,
+  device_type,
+  start_time,
+  end_time,
+  remarks,
+  device_port,
+  port_type,
+  device_code,
+  now,
 
-      let queryParam = {};
-      if (this.id) {
-        queryParam.id = this.id;
-      }
-      queryParam.report_type = this.report_type;
-      queryParam.company_code = uni.getStorageSync("selectedCode");
-      queryParam.remarks = this.remarks;
-      queryParam.start_time = this.start_time;
-      queryParam.end_time = this.end_time;
-
-      if (this.id) {
-        queryParam.id = this.id;
-      }
+  deviceListData,
+  detailsData,
+} = toRefs;
 
-      if (this.report_type == 1) {
-        this.addDevice(queryParam);
-        return;
-      }
-      if (this.report_type == 2) {
-        queryParam.device_type = this.device_type;
-        this.addDevice(queryParam);
-        return;
-      }
-      if (this.report_type == 3) {
-        queryParam.device_type = this.device_type;
-        if (this.device_type == 6) {
-          queryParam.port_type = this.port_type;
-          queryParam.device_port = this.device_port;
-        }
-        queryParam.device_code = this.device_code;
-        this.addDevice(queryParam);
-        return;
-      }
+// 回显信息请求
+async function getDetailsData(params = {}) {
+  const res = await this.$myRequest({
+    url: "AlarmReport/editData",
+    data: params,
+    showLoading: true,
+  });
+
+  detailsData.value = res.data.data[0];
+  console.log(detailsData.value);
+  report_type.value = detailsData.value.report_type;
+  device_type.value = detailsData.value.device_type;
+  start_time.value = detailsData.value.start_time;
+  end_time.value = detailsData.value.end_time;
+  remarks.value = detailsData.value.remarks;
+  port_type.value = detailsData.value.port_type;
+  device_port.value = detailsData.value.device_port;
+  device_code.value = detailsData.value.device_code;
+}
 
-      this.addDevice(queryParam);
-    },
+async function submit() {
+  //提交验证
 
-    async addDevice(params = {}) {
-      const res = await this.$myRequest({
-        url: this.id ? "AlarmReport/edit" : "AlarmReport/add",
-        data: params,
+  if (!report_type.value) {
+    uni.showToast({
+      title: "请输入报备类型",
+      icon: "none",
+    });
+    return;
+  }
+  if (report_type.value == 1) {
+    if (!start_time.value.replace(/^\s*/g, "")) {
+      uni.showToast({
+        title: "请选择开始时间",
+        icon: "none",
+      });
+      return;
+    }
+    if (!end_time.value.replace(/^\s*/g, "")) {
+      uni.showToast({
+        title: "请选择结束时间",
+        icon: "none",
       });
+      return;
+    }
+  }
+  if (report_type.value == 2 || report_type.value == 3) {
+    if (!device_type.value) {
+      uni.showToast({
+        title: "请选择设备类型",
+        icon: "none",
+      });
+      return;
+    }
+    if (!start_time.value.replace(/^\s*/g, "")) {
+      uni.showToast({
+        title: "请输入开始时间",
+        icon: "none",
+      });
+      return;
+    }
+    if (!end_time.value.replace(/^\s*/g, "")) {
+      uni.showToast({
+        title: "请输入结束时间",
+        icon: "none",
+      });
+      return;
+    }
+  }
 
-      if (!res.data.flag) {
+  if (report_type.value == 3 && device_type.value) {
+    if (device_type.value == 6) {
+      if (!device_port.value.replace(/^\s*/g, "")) {
         uni.showToast({
-          title: "提交失败",
+          title: "请输入端口号",
           icon: "none",
         });
-      } else {
+        return;
+      }
+      if (!port_type.value) {
         uni.showToast({
-          title: "提交成功",
+          title: "请选择端口类型",
+          icon: "none",
         });
+        return;
       }
-      setTimeout(() => {
-        uni.redirectTo({
-          url: "/pages/setting/funReport/funReport",
+      if (!device_code.value) {
+        uni.showToast({
+          title: "请选择报备设备",
+          icon: "none",
         });
-      }, 1000);
-    },
-
-    radioChange(e) {
-      console.log("type:" + e.detail.value);
-      this.radioOne = e.detail.value;
-    },
-
-    //报备设备下拉请求数据
-    async deviceList(params = {}) {
-      const res = await this.$myRequest({
-        url: "AlarmReport/deviceList",
-        data: params,
+        return;
+      }
+    }
+    if (!device_code.value) {
+      uni.showToast({
+        title: "请选择报备设备",
+        icon: "none",
       });
-      this.deviceListData = res.data.data;
+      return;
+    }
+  }
 
-      var arr = [];
-      this.deviceListData.forEach(function (item) {
-        arr.push(item.owner_code);
-      });
-      if (arr.indexOf(this.device_code) == -1) {
-        this.device_code = "";
+  let queryParam = {};
+  if (id.value) {
+    queryParam.id = id.value;
+  }
+  queryParam.report_type = report_type.value;
+  queryParam.company_code = uni.getStorageSync("selectedCode");
+  queryParam.remarks = remarks.value;
+  queryParam.start_time = start_time.value;
+  queryParam.end_time = end_time.value;
+
+  if (id.value) {
+    queryParam.id = id.value;
+  }
+
+  if (report_type.value == 1) {
+    addDevice(queryParam);
+    return;
+  }
+  if (report_type.value == 2) {
+    queryParam.device_type = device_type.value;
+    addDevice(queryParam);
+    return;
+  }
+  if (report_type.value == 3) {
+    queryParam.device_type = device_type.value;
+    if (device_type.value == 6) {
+      queryParam.port_type = port_type.value;
+      queryParam.device_port = device_port.value;
+    }
+    queryParam.device_code = device_code.value;
+    addDevice(queryParam);
+    return;
+  }
+
+  addDevice(queryParam);
+}
+
+async function addDevice(params = {}) {
+  const res = await this.$myRequest({
+    url: id.value ? "AlarmReport/edit" : "AlarmReport/add",
+    data: params,
+  });
+
+  if (!res.data.flag) {
+    uni.showToast({
+      title: "提交失败",
+      icon: "none",
+    });
+  } else {
+    uni.showToast({
+      title: "提交成功",
+    });
+  }
+  setTimeout(() => {
+    uni.redirectTo({
+      url: "/pages/setting/funReport/funReport",
+    });
+  }, 1000);
+}
+
+function radioChange(e) {
+  console.log("type:" + e.detail.value);
+  radioOne.value = e.detail.value;
+}
+
+//报备设备下拉请求数据
+async function deviceList(params = {}) {
+  const res = await this.$myRequest({
+    url: "AlarmReport/deviceList",
+    data: params,
+  });
+  deviceListData.value = res.data.data;
+
+  var arr = [];
+  deviceListData.value.forEach(function (item) {
+    arr.push(item.owner_code);
+  });
+  if (arr.indexOf(device_code.value) == -1) {
+    device_code.value = "";
+  }
+}
+
+onLoad((option) => {
+  id.value = option.id;
+  uni.setNavigationBarTitle({
+    title: option.id ? "编辑" : "新增",
+  });
+
+  var nowTemp = new Date();
+  now.value = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
+
+  if (option.id) {
+    getDetailsData({ id: option.id });
+  }
+});
+
+watch(() => {
+  function start_time() {
+    // alert(start_time.value)
+  }
+  function report_type(newVal) {
+    if (newVal) {
+      var array123 = ["", "1", "2", "3", "4", "5", "6", "7", "16", "128", "131", "130", "129", "17"];
+      if (array123.indexOf(device_type.value) == -1) {
+        device_type.value = "";
       }
-    },
-  },
-};
+    }
+  }
+  function device_type(newVal) {
+    if (newVal) {
+      deviceList({
+        company_code: uni.getStorageSync("selectedCode"),
+        device_type: device_type.value,
+      });
+    }
+  }
+});
 </script>
 
+<style scoped>
+::v-deep .funcAdd .uni-date-x--border,
+.uni-date-x {
+  border-radius: 0 !important;
+}
+.funcAdd .example-body {
+  margin: 0;
+  width: calc(100% - 200rpx);
+}
+</style>
+
 <style lang="scss">
 input,
 select,

src/pages/setting/messagePush/messagePush.vue

@@ -94,8 +94,8 @@ function CheckboxChange(e) {
   checkedValue.value = values;
   // console.log(values)
 
-  // console.log('点击复选框时this.checkedValue')
-  // console.log(this.checkedValue)
+  // console.log('点击复选框时checkedValue.value')
+  // console.log(checkedValue.value)
   for (var i = 0, lenI = items.length; i < lenI; ++i) {
     items[i].checked = false;
     for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
@@ -116,7 +116,7 @@ function getCheckList(params = {}) {
     for (let i = 0; i < checkbox.value.length; i++) {
       //判断value是否存在于返回对象中.存在的话checked重新赋值
       if (getData.value.hasOwnProperty(checkbox.value[i].value)) {
-        // console.log(this.checkbox[i].value)
+        // console.log(checkbox.value[i].value)
         checkbox.value[i].checked = true;
       }
     }
@@ -126,9 +126,9 @@ function getCheckList(params = {}) {
 //提交
 async function btnSubmit() {
   // 提交验证
-  // alert(this.aa);
-  // alert(this.checkedValue)
-  // if (!this.aa.length) {
+  // alert(aa.value);
+  // alert(checkedValue.value)
+  // if (!aa.value.length) {
   // 	uni.showToast({
   // 		title: "请选择推送选项",
   // 		icon: "none"