企业维修适配修改

Houjie

2025-07-24 964faa1077a89713910063c39ebe08fac4e4c56e

 pages/device/deviceWebDeils/deviceWebDeils.vue

@@ -1,467 +1,463 @@
<template>
   <view class="container">
      <cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="productionTask">
         <block slot="backText">返回</block>
         <block slot="content">设备详情</block>
         <block slot="right">
            <view @click="goHome">
               <image class="search" src="/static/icon/icon_home.png" style="width: 25px; height: 25px;" alt="" />
            </view>
         </block>
      </cu-custom>
      <view class="container">
  <view class="container">
    <cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="productionTask">
      <block slot="backText">返回</block>
      <block slot="content">设备详情</block>
      <!--          <block slot="right">
              <view @click="goHome">
                <image class="search" src="/static/icon/icon_home.png" style="width: 25px; height: 25px;" alt="" />
              </view>
            </block> -->
    </cu-custom>
    <view class="container">
      <uni-forms ref="form" :modelValue="formData" validate-trigger="bind" err-show-type="undertext">
        <uni-group top="1">
          <uni-forms-item :label-width="100" required name="num" label="设备编号:">
            <uni-easyinput v-model="formData.equipmentCode" :disabled="true"/>
          </uni-forms-item>

          <uni-forms-item :label-width="100" name="remark" label="设备名称:">
            <uni-easyinput v-model="formData.equipmentName" :disabled="true"/>
          </uni-forms-item>
          <view class="text-gray margin-bottom-lg">—————————— 基本信息 ——————————</view>
          <uni-forms-item :label-width="100" name="taskCode" label="维修状态:">
            <uni-easyinput :disabled="true" v-model="formData.repairStatus_dictText"/>
          </uni-forms-item>
          <uni-forms-item :label-width="100" name="endLocation" label="保养状态:">
            <uni-easyinput :disabled="true" v-model="formData.maintenanceStatus_dictText"/>

         <uni-forms ref="form" :modelValue="formData" validate-trigger="bind" err-show-type="undertext">
            <uni-group top="1">
          </uni-forms-item>
          <uni-forms-item :label-width="100" name="endLocation" label="使用车间:">
            <uni-easyinput :disabled="true" v-model="formData.orgId_dictText"/>

               <uni-forms-item :label-width="100" required name="num" label="设备编号:">
                  <uni-easyinput v-model="formData.equipmentCode" :disabled="true" />
               </uni-forms-item>
          </uni-forms-item>

               <uni-forms-item :label-width="100" name="remark" label="设备名称:">
                  <uni-easyinput v-model="formData.equipmentName" :disabled="true" />
               </uni-forms-item>
               <!-- <uni-forms-item :label-width="100" name="outNum" label="关键设备标识:">
               <uni-easyinput v-model="formData.equipmentImportance" :disabled="true" />
            </uni-forms-item> -->
               <view class="text-gray margin-bottom-lg">—————————— 基本信息 ——————————</view>
               <uni-forms-item :label-width="100" name="taskCode" label="维修状态:">
                  <uni-easyinput :disabled="true" v-model="formData.repairStatus_dictText" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="保养状态:">
                  <uni-easyinput :disabled="true" v-model="formData.maintenanceStatus_dictText" />
          <uni-forms-item :label-width="100" name="endLocation" label="安装位置:">
            <uni-easyinput :disabled="true" v-model="formData.installationPosition"/>
          </uni-forms-item>
          <uni-forms-item :label-width="100" name="endLocation" label="技术状态:">
            <uni-easyinput :disabled="true" v-model="formData.technologyStatus_dictText"/>
          </uni-forms-item>
          <uni-forms-item :label-width="100" name="endLocation" label="设备管理员:">
            <uni-easyinput :disabled="true" v-model="formData.equipmentManager_dictText"/>
          </uni-forms-item>
          <uni-forms-item :label-width="100" name="endLocation" label="出厂日期:">
            <uni-easyinput :disabled="true" v-model="formData.leaveFactoryDate"/>
          </uni-forms-item>
          <uni-forms-item :label-width="100" name="outNum" label="设备文档:">
            <uni-file-picker v-model="fileLists" :extension="['.pdf']" @fail="uploadFail"
                             :list-styles="listStyles" :delIcon="del" :max-count="5" file-mediatype="all"
                             @downloadFile="downloadFile" @select="onFileSelect" @delete="onFileDelete">
              <button size="mini" type="primary">点击上传</button>
            </uni-file-picker>
          </uni-forms-item>
        </uni-group>
      </uni-forms>
      <view class="file-list margin-sm">
        <view class="file-item" v-for="(file, index) in this.selectedFiles" :key="index">
          <view class="file-icon">
            <!-- 文件图标 -->
            <image src="/static/icon_file.png" style="height: 25px;  width: 25px; margin-right: 10px;"
                   mode='aspectFit' class="zai-logo "></image>

               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="使用车间:">
                  <uni-easyinput :disabled="true" v-model="formData.orgId_dictText" />

               </uni-forms-item>

               <uni-forms-item :label-width="100" name="endLocation" label="安装位置:">
                  <uni-easyinput :disabled="true" v-model="formData.installationPosition" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="技术状态:">
                  <uni-easyinput :disabled="true" v-model="formData.technologyStatus_dictText" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="设备管理员:">
                  <uni-easyinput :disabled="true" v-model="formData.equipmentManager_dictText" />
               </uni-forms-item>
               <uni-forms-item :label-width="100" name="endLocation" label="出厂日期:">
                  <uni-easyinput :disabled="true" v-model="formData.leaveFactoryDate" />
               </uni-forms-item>
            </uni-group>
         </uni-forms>
         <view class="file-list margin-sm">
            <view class="file-item" v-for="(file, index) in this.selectedFiles" :key="index">
               <view class="file-icon">
                  <!-- 文件图标 -->
                  <image src="/static/icon_file.png" style="height: 25px;  width: 25px; margin-right: 10px;"
                     mode='aspectFit' class="zai-logo "></image>

               </view>
               <view class="file-name">
                  <!-- 文件名 -->
                  {{file.fileName}}
               </view>
               <view class="file-actions">
                  <!-- 下载按钮 -->
                  <image v-show="showBtn" src="/static/icon_down.png" @click="downloadFile(file)"
                     style="height: 25px;  width: 25px; margin-right: 10px;"></image>
               </view>
            </view>
         </view>
         <view class="flex  margin-bottom-xs">
            <button v-if="authIncludes('eam:reportRepair:add')"  class="flex-sub  cu-btn bg-blue margin-sm   lg" hover-class="is-hover"
               @click="goReportRepair()">报修</button>
            <button class="flex-sub  cu-btn bg-blue margin-sm   lg" hover-class="is-hover"
               @click="goCheck()">点检</button>
            <button class="flex-sub  cu-btn bg-blue margin-sm   lg" hover-class="is-hover"
               @click="goBaoZhou()">周保</button>
            <button class="flex-sub  cu-btn bg-blue margin-sm   lg" hover-class="is-hover"
               @click="goMaintenance()">维修</button>
         </view>
      </view>
   </view>
          </view>
          <view class="file-name">
            <!-- 文件名 -->
            {{ file.fileName }}
          </view>
          <view class="file-actions">
            <!-- 下载按钮 -->
            <image v-show="showBtn" src="/static/icon_down.png" @click="downloadFile(file)"
                   style="height: 25px;  width: 25px; margin-right: 10px;"></image>
          </view>
        </view>
      </view>
      <view class="flex  margin-bottom-xs">
        <button v-if="authIncludes('eam:reportRepair:add')" class="flex-sub  cu-btn bg-blue margin-sm   lg"
                hover-class="is-hover"
                @click="goReportRepair()">报修
        </button>
        <button class="flex-sub  cu-btn bg-blue margin-sm   lg" hover-class="is-hover"
                @click="goCheck()">点检
        </button>
        <button class="flex-sub  cu-btn bg-blue margin-sm   lg" hover-class="is-hover"
                @click="goBaoZhou()">周保
        </button>
        <button class="flex-sub  cu-btn bg-blue margin-sm   lg" hover-class="is-hover"
                @click="goMaintenance()">维修
        </button>
      </view>
    </view>
  </view>
</template>

<script>
   import {
      stringify
   } from "querystring";
   import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
   import {
      saveAs
   } from 'file-saver'; // 引入 file-saver 库
   export default {
      mixins: [MescrollMixin], // 使用mixin
      data() {
         return {
import {
  stringify
} from "querystring";
import {
  saveAs
} from 'file-saver'; // 引入 file-saver 库
export default {
  data() {
    return {
      listStyles: {
        "borderStyle": {
          "width": "0", // 边框宽度
        },
        "border": false, // 是否显示边框
        "dividline": false
      },
      formData: {
        equipmentCode: '',
        equipmentName: '',
        repairStatus_dictText: '',
        maintenanceStatus_dictText: '',
        orgId_dictText: '',
        installationPosition: '',
        technologyStatus_dictText: '',
        equipmentManager_dictText: '',
        leaveFactoryDate: ''
      },
      fileLists: [],
      NavBarColor: this.NavBarColor,
      url: {
        stallList: "/eam/equipment/queryById",
        add: 'eam/equipmentAttachment/add',
        upload: "/eam/sysFiles/batch_upload",
        downloadFile: 'eam/equipmentAttachment/downloadFile'
      },
      id: '',
      styles: {
        color: '#2979FF',
        borderColor: '#2979FF'
      },
      msg1Count: 0,
      msg2Count: 0,
      msg1Title: ""
    }
  },

            formData: {
               fileLists: []
            },
            fileLists: [],
            NavBarColor: this.NavBarColor,
            url: {
               stallList: "/eam/equipment/queryById",
               add: 'eam/equipmentAttachment/add',
               upload: "/eam/sysFiles/batch_upload",
               downloadFile: 'eam/equipmentAttachment/downloadFile'
            },
            id: '',
            upOption: {
               page: {
                  num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                  size: 10 // 每页数据的数量
               },
               noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
               empty: {
                  tip: '~ 暂无数据 ~', // 提示
               },
               loading: '',
               text: '全部',
               isShowNoMore: false,
               textNoMore: '我是有底线的 >_<'
            },
            styles: {
               color: '#2979FF',
               borderColor: '#2979FF'
            },
            msg1Count: 0,
            msg2Count: 0,
            msg1Title: ""
         }
      },
		
      computed: {
         authList() {
            return this.$store.getters.getAuth || []
         },
         top() {
            return this.CustomBar * 2 + 160
         },
         style() {
            var StatusBar = this.StatusBar;
            var CustomBar = this.CustomBar;
            var CustomBar = this.CustomBar;
            var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
            return style
         },
      },
      onLoad(options) {
         const decodedEquipmentId = decodeURIComponent(options.equipmentId);
         this.id = decodedEquipmentId;
         console.log(this.id)
         if (!this.id) {
            uni.showModal({
               title: '提示',
               content: "错误不存在",
               showCancel: false
            });
         } else {
            this.upCallback();
         }
  computed: {
    authList() {
      return this.$store.getters.getAuth || []
    },
    top() {
      return this.CustomBar * 2 + 160
    },
    style() {
      var StatusBar = this.StatusBar;
      var CustomBar = this.CustomBar;
      var CustomBar = this.CustomBar;
      var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
      return style
    },
  },
  // onLoad(options) {
  //   const decodedEquipmentId = decodeURIComponent(options.equipmentId);
  //   this.id = decodedEquipmentId;
  //   console.log(this.id)
  //   if (!this.id) {
  //     uni.showModal({
  //       title: '提示',
  //       content: "错误不存在",
  //       showCancel: false
  //     });
  //   }
  //
  // },
  onUnload() {
    this.id = null;
    this.formData = {}; // 清空数据
    this.fileLists = [];
  },
  onLoad(options) {
    const decodedEquipmentId = decodeURIComponent(options.equipmentId);
    this.id = decodedEquipmentId;
    console.log(this.id)
    if (!this.id) {
      uni.showModal({
        title: '提示',
        content: "错误不存在",
        showCancel: false
      });
    } else {
      this.getData(); // ✅ 只执行一次
    }
  },

      },
      onShow() {
         // 从路由参数中获取equipmentId
         const equipmentIdFromRoute = this.$router.query.equipmentId;
         if (equipmentIdFromRoute) {
            // 如果存在，更新this.id
            this.id = equipmentIdFromRoute;
            // 重新获取设备详情数据
            this.upCallback();
         }
      },
      watch: {
         // 监听$route变化
         $route(to, from) {
            // 更新equipmentId参数
            this.id = to.query.equipmentId;
            console.log('更新后的equipmentId:', this.equipmentId);
         }
      },
      created() {},
      methods: {
         authIncludes(code) {
            return this.authList.some(auth => auth.action === code)
         },
         downloadFile(item) {
            uni.showModal({
               title: '提示',
               content: '确认要下载吗',
               cancelText: '取消',
               confirmText: '确认',
               success: res => {
                  if (res.confirm) {
                     this.downFile(item)
                  }
               }
            })
  created() {

         },
    this.getFileList();
  },
  methods: {
    getData() {
      this.$http.get(this.url.stallList, {
        params: {
          pageNo: 999,
          pageSize: 1,
          order: 'asc',
          column: 'createTime',
          id: this.id
        },

      }).then(res => {
        this.announcement1 = res.data.result
        console.log("url", res)
        //设置列表数据
        if (res.data.success) {
          console.log("res", res.data.result.equipmentCode)
          this.formData = this.announcement1
        }
      }).catch(() => {
        //联网失败, 结束加载
      })
    },
    authIncludes(code) {
      return this.authList.some(auth => auth.action === code)
    },
    downloadFile(item) {
      uni.showModal({
        title: '提示',
        content: '确认要下载吗',
        cancelText: '取消',
        confirmText: '确认',
        success: res => {
          if (res.confirm) {
            this.downFile(item)
          }
        }
      })

    },


         downFile(item) {
            this.$http.download(this.url.downloadFile, {
               params: {
                  id: item.id
               },
               responseType: 'blob' // 确保响应类型为 blob
            }).then(response => {
               console.log('Response:', response); // 查看完整响应结构
    downFile(item) {
      this.$http.download(this.url.downloadFile, {
        params: {
          id: item.id
        },
        responseType: 'blob' // 确保响应类型为 blob
      }).then(response => {
        console.log('Response:', response); // 查看完整响应结构

               // 获取 tempFilePath（Blob URL）
               const tempFilePath = response.tempFilePath;
        // 获取 tempFilePath（Blob URL）
        const tempFilePath = response.tempFilePath;

               if (!tempFilePath) {
                  uni.showToast({
                     title: '文件下载失败',
                     icon: 'none'
                  });
                  return;
               }
        if (!tempFilePath) {
          uni.showToast({
            title: '文件下载失败',
            icon: 'none'
          });
          return;
        }

               let fileName = item.fileName;
        let fileName = item.fileName;

               // 创建 <a> 标签并触发下载
               const link = document.createElement('a');
               link.href = tempFilePath;
               link.setAttribute('download', fileName);
               link.style.display = 'none';
        // 创建 <a> 标签并触发下载
        const link = document.createElement('a');
        link.href = tempFilePath;
        link.setAttribute('download', fileName);
        link.style.display = 'none';

               document.body.appendChild(link);
               link.click();
        document.body.appendChild(link);
        link.click();

               // 清理资源
               document.body.removeChild(link);
        // 清理资源
        document.body.removeChild(link);

            }).catch(err => {
               console.error('Download error:', err);
               uni.showToast({
                  title: '文件下载失败',
                  icon: 'none'
               });
            });
         },
         getFileList() {
            this.$http.get(this.url.fileList, {
               params: {
                  equipmentId: this.id,
                  pageNo: 1,
                  pageSize: 999,
                  column: 'createTime',
                  order: 'desc'
               },
            }).then(res => {
               if (res.data.success) {
                  this.selectedFiles = res.data.result.records || [];
      }).catch(err => {
        console.error('Download error:', err);
        uni.showToast({
          title: '文件下载失败',
          icon: 'none'
        });
      });
    },
    getFileList() {
      this.$http.get(this.url.fileList, {
        params: {
          equipmentId: this.id,
          pageNo: 1,
          pageSize: 999,
          column: 'createTime',
          order: 'desc'
        },
      }).then(res => {
        if (res.data.success) {
          this.selectedFiles = res.data.result.records || [];

               }
            }).catch(() => {
               uni.showToast({
                  title: '获取文件列表失败',
                  icon: 'none'
               });
            });
         },
         uploadFail(e) {
            console.log('上传失败：', e)
         },
        }
      }).catch(() => {
        uni.showToast({
          title: '获取文件列表失败',
          icon: 'none'
        });
      });
    },
    uploadFail(e) {
      console.log('上传失败：', e)
    },


    onFileSelect(e) {
      const tempFilePaths = e.tempFilePaths;

         onFileSelect(e) {
            const tempFilePaths = e.tempFilePaths;
      uni.showLoading({
        title: '上传中...'
      });

            uni.showLoading({
               title: '上传中...'
            });
      const uploadPromises = tempFilePaths.map((filePath, index) => {
        return new Promise((resolve, reject) => {
          this.$http.upload(this.url.upload, {
            filePath: filePath,
            name: 'file'
          })
              .then(uploadRes => {
                const serverFile = uploadRes.data.result[0];
                console.log(serverFile);
                // 提取fileSuffix并拼接
                if (serverFile.fileSuffix && serverFile.fileName && !serverFile
                    .fileName.includes('.')) {
                  serverFile.fileName += '.' + serverFile.fileSuffix;
                }
                this.fileLists = [];
                // 防止重复添加（根据 id 或 fileName 判断）
                if (!this.fileLists.some(file => file.id === serverFile.id)) {
                  this.fileLists.push(serverFile);
                }
                resolve();
              })
              .catch(err => {
                console.error(`文件 ${index + 1} 上传失败`, err);
                uni.showToast({
                  title: `第 ${index + 1} 个文件上传失败`,
                  icon: 'none'
                });
                reject(err);
              });
        });
      });

            const uploadPromises = tempFilePaths.map((filePath, index) => {
               return new Promise((resolve, reject) => {
                  this.$http.upload(this.url.upload, {
                        filePath: filePath,
                        name: 'file'
                     })
                     .then(uploadRes => {
                        const serverFile = uploadRes.data.result[0];
                        console.log(serverFile);
                        // 提取fileSuffix并拼接
                        if (serverFile.fileSuffix && serverFile.fileName && !serverFile
                           .fileName.includes('.')) {
                           serverFile.fileName += '.' + serverFile.fileSuffix;
                        }
                        this.fileLists = [];
                        // 防止重复添加（根据 id 或 fileName 判断）
                        if (!this.fileLists.some(file => file.id === serverFile.id)) {
                           this.fileLists.push(serverFile);
                        }
                        resolve();
                     })
                     .catch(err => {
                        console.error(`文件 ${index + 1} 上传失败`, err);
                        uni.showToast({
                           title: `第 ${index + 1} 个文件上传失败`,
                           icon: 'none'
                        });
                        reject(err);
                     });
               });
            });
      Promise.all(uploadPromises)
          .then(() => {
            uni.hideLoading();
            uni.showToast({
              title: '全部上传成功，正在提交...'
            });
            this.submitFileList(); // 自动提交所有文件
          })
          .catch(() => {
            uni.hideLoading();
            uni.showToast({
              title: '部分上传失败',
              icon: 'none'
            });
          });
    },
    // 文件删除回调
    onFileDelete(e) {
      console.log('删除文件:', e.index);
    },

            Promise.all(uploadPromises)
               .then(() => {
                  uni.hideLoading();
                  uni.showToast({
                     title: '全部上传成功，正在提交...'
                  });
                  this.submitFileList(); // 自动提交所有文件
               })
               .catch(() => {
                  uni.hideLoading();
                  uni.showToast({
                     title: '部分上传失败',
                     icon: 'none'
                  });
               });
         },
         // 文件删除回调
         onFileDelete(e) {
            console.log('删除文件:', e.index);
         },

         // 删除单个文件
         deleteFile(index) {
            this.fileLists.splice(index, 1);
         },
    // 删除单个文件
    deleteFile(index) {
      this.fileLists.splice(index, 1);
    },


         submitFileList() {
            if (!this.fileLists.length) {
               uni.showToast({
                  title: '没有可提交的文件',
                  icon: 'none'
               });
               return;
            }
            console.log(this.fileLists)
            this.$http.post(this.url.add, {
               equipmentId: this.id,
               fileList: this.fileLists
            }).then(res => {
               if (res.data.success) {
                  uni.showToast({
                     title: '提交成功'
                  });
                  this.getFileList();
               } else {
                  uni.showToast({
                     title: '提交失败',
                     icon: 'none'
                  });
               }
            }).catch(err => {
               uni.showToast({
                  title: '提交异常',
                  icon: 'none'
               });
               console.error('提交失败:', err);
            });
         },
         goHome() {
            uni.reLaunch({
               url: '/pages/index/index'
            })
         },
         /**
          * 报修
          */
         goReportRepair() {
            uni.redirectTo({
               url: `/pages/reportRepair/reportRepair?equipmentId=${encodeURIComponent(this.id)}`
            });
         },
         /**
          * 点检
          */
         goCheck() {
            uni.redirectTo({
               // url: '/pages/checkList/checkList',
               url: `/pages/checkList/checkList?equipmentId=${encodeURIComponent(this.id)}`
            });
         },
         /**
          * 周保
          */
         goBaoZhou() {
            uni.redirectTo({
               // url: '/pages/baoZhou/baoZhou',
               url: `/pages/baoZhou/baoZhou?equipmentId=${encodeURIComponent(this.id)}`
            });
         },
         /**
          * 周保
          */
         goMaintenance() {
            uni.redirectTo({
               // url: '/pages/maintenanceReport/maintenanceReport',
               url: `/pages/maintenanceReport/maintenanceReport?equipmentId=${encodeURIComponent(this.id)}`
            });
         },
         upCallback() {
            console.log("id", this.id)
            this.$http.get(this.url.stallList, {
               params: {
                  pageNo: 999,
                  pageSize: 1,
                  order: 'asc',
                  column: 'createTime',
                  id: this.id
               },
    submitFileList() {
      if (!this.fileLists.length) {
        uni.showToast({
          title: '没有可提交的文件',
          icon: 'none'
        });
        return;
      }
      console.log(this.fileLists)
      this.$http.post(this.url.add, {
        equipmentId: this.id,
        fileList: this.fileLists
      }).then(res => {
        if (res.data.success) {
          uni.showToast({
            title: '提交成功'
          });
          this.getFileList();
        } else {
          uni.showToast({
            title: '提交失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        uni.showToast({
          title: '提交异常',
          icon: 'none'
        });
        console.error('提交失败:', err);
      });
    },

            }).then(res => {
               this.announcement1 = res.data.result
               console.log("url", res)
               //设置列表数据
               if (res.data.success) {
                  console.log("res", res.data.result.equipmentCode)
                  this.formData = this.announcement1
               }
            }).catch(() => {
               //联网失败, 结束加载
            })
         },
    /**
     * 报修
     */
    goReportRepair() {
      uni.redirectTo({
        url: `/pages/reportRepair/reportRepair?equipmentId=${encodeURIComponent(this.id)}`
      });
    },
    /**
     * 点检
     */
    goCheck() {
      uni.redirectTo({
        // url: '/pages/checkList/checkList',
        url: `/pages/checkList/checkList?equipmentId=${encodeURIComponent(this.id)}`
      });
    },
    /**
     * 周保
     */
    goBaoZhou() {
      uni.redirectTo({
        // url: '/pages/baoZhou/baoZhou',
        url: `/pages/baoZhou/baoZhou?equipmentId=${encodeURIComponent(this.id)}`
      });
    },
    /**
     * 周保
     */
    goMaintenance() {
      uni.redirectTo({
        // url: '/pages/maintenanceReport/maintenanceReport',
        url: `/pages/maintenanceReport/maintenanceReport?equipmentId=${encodeURIComponent(this.id)}`
      });
    },

         mescrollInit(mescroll) {
            console.log('mescrollInit')
            this.mescroll = mescroll;
         },
      },
  },

   }
}
</script>

<style>
   .is-hover {
      color: rgba(255, 255, 255, 0.6);
      background-color: #55aaff;
      border-color: #55aaff;
   }
.is-hover {
  color: rgba(255, 255, 255, 0.6);
  background-color: #55aaff;
  border-color: #55aaff;
}


.content {
  margin-top: 5px;
}

   .content {
      margin-top: 5px;
   }
.content scroll-view {
  scrollIndicator: "none"
}

   .content scroll-view {
      scrollIndicator: "none"
   }

   .popupView {
      margin-top: 85px;
      height: auto;
   }
</style>
.popupView {
  margin-top: 45px;
  height: auto;
}
</style>