这是vue.app,如何实现点击跳转 - CSDN文库", "datePublished": "2023-06-17", "keywords": " 这是vue.app,如何实现点击跳转", "description": "文章浏览阅读196次。你可以在 `GoodsList` 组件中定义一个 `click` 事件,并通过 `$emit` 方法将要跳转的组件名称传递给父组件 `App`。然后在 `App` 组件中定义一个 `onClick` 方法,用于接收子组件传递过来的组件名称,并将其赋值给 `active` 属性,用于控制显示哪个组件。具体实现可以参考下面的代码:" }
活动介绍

<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <GoodsList @click="onClick"/> <GoodsDetail01 v-show= "active === 'GoodsDetail01'" /> <GoodsDetail02 v-show= "active === 'GoodsDetail02'" /> </div> </template> <script> import GoodsList from './components/goodsList.vue'; import GoodsDetail01 from './components/goodsDetail01.vue'; import GoodsDetail02 from './components/goodsDetail02.vue'; // import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', data(){ return{ active: 'GoodsList' }; }, methods:{ onClick(name){ this.name = name; } }, components: { // HelloWorld, GoodsList, GoodsDetail01, GoodsDetail02 } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>这是vue.app,如何实现点击跳转

时间: 2023-06-17 11:07:42 浏览: 196
你可以在 `GoodsList` 组件中定义一个 `click` 事件,并通过 `$emit` 方法将要跳转的组件名称传递给父组件 `App`。然后在 `App` 组件中定义一个 `onClick` 方法,用于接收子组件传递过来的组件名称,并将其赋值给 `active` 属性,用于控制显示哪个组件。具体实现可以参考下面的代码: ```html <template> <div> <div class="goods" v-for="item in goodsList" :key="item.id" @click="goToDetail(item)"> {{ item.name }} </div> </div> </template> <script> export default { name: 'GoodsList', data() { return { goodsList: [ { id: 1, name: '商品1' }, { id: 2, name: '商品2' }, { id: 3, name: '商品3' }, ], }; }, methods: { goToDetail(item) { this.$emit('click', item.id === 1 ? 'GoodsDetail01' : 'GoodsDetail02'); } } }; </script> ``` ```html <template> <div id="app"> <GoodsList @click="onClick"/> <GoodsDetail01 v-show="active === 'GoodsDetail01'" /> <GoodsDetail02 v-show="active === 'GoodsDetail02'" /> </div> </template> <script> import GoodsList from './components/GoodsList.vue'; import GoodsDetail01 from './components/GoodsDetail01.vue'; import GoodsDetail02 from './components/GoodsDetail02.vue'; export default { name: 'App', data() { return { active: 'GoodsList', }; }, methods: { onClick(name) { this.active = name; }, }, components: { GoodsList, GoodsDetail01, GoodsDetail02, }, }; </script> ```
阅读全文

相关推荐

<template> <TransitionGroup appear enter-active-class="animate__animated animate__bounceInLeft" tag="div" > 欢迎使用数字化工厂智慧平台 </TransitionGroup> <Transition appear enter-active-class="animate__animated animate__bounceInRight"> <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> </Transition> </template> <script lang="ts" setup> import { underlineToHump } from '@/utils' import { useDesign } from ‘@/hooks/web/useDesign’ import { useAppStore } from ‘@/store/modules/app’ import { ThemeSwitch } from ‘@/layout/components/ThemeSwitch’ import { LocaleDropdown } from ‘@/layout/components/LocaleDropdown’ import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from ‘./components’ defineOptions({ name: ‘Login’ }) const { t } = useI18n() const appStore = useAppStore() const { getPrefixCls } = useDesign() const prefixCls = getPrefixCls(‘login’) <style lang="scss" scoped> $ prefix-cls: #{$ namespace}-login; .#{$ prefix-cls} { overflow: auto; &__left { &::before { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-image: url('@/assets/svgs/login-bg.svg'); background-position: center; background-repeat: no-repeat; content: ''; } } } </style> <style lang="scss"> .dark .login-form { .el-divider__text { background-color: var(--login-bg-color); } .el-card { background-color: var(--login-bg-color); } } </style> 插入一张newlogo.png的背景图100%平铺作为背景,左右都要,整个的

<template>
<el-carousel indicator-positlon="outside"> <el-carouscl-iten v-for="item in imgs" :key="item"> < img :src="item" sty1e="width:100%;"/> </el-carousel-item> </el-carousely> 主题系列 <el-divider /> < img :src="item1.img"/> {{item1.name}} 招牌菜系 <el-divider /> < img src="../assets/buy.png"/>     菜品名称     ¥15元     <button>-</button>     5     <button>+</button> </template> <script>     import { reactive,toRefs } from 'vue'     import img1 from "../assets/1.png"     import img2 from "../assets/2.png"     import img3 from "../assets/3.png"     import img4 from "../assets/4.png"     import img5 from "../assets/1.png"     import img6 from "../assets/1.png"     import img7 from "../assets/1.png"     import img8 from "../assets/1.png"     import img9 from "../assets/1.png"     import img10 from "../assets/1.png"     export default{         setup(){             let data=reactive({                 imgs:[img1,img2,img3,img4],                 list:[                     {name:"川菜系列",img:img5},                     {name:"鲁菜系列",img:img6},                     {name:"粤菜系列",img:img7},                     {name:"湘菜系列",img:img8},                     {name:"闽菜系列",img:img9},                 ]             })             return{                 ...toRefs(data)             }         }     } </script>

请将该vue项目中的响应式布局调整为可以自适应各个打开端屏幕大小尺寸的方法:<template> <responsive-image class="hd01" :small-image="hd01.smallImage1" :medium-image="hd01.mediumImage1" :large-image="hd01.largeImage1" alt-text="Description of image" /> {{ $t('Business') }} {{ $t('text7') }} {{ $t("more14") }} {{ $t('trip') }} {{ $t('text8') }} {{ $t("more15") }} <responsive-image class="hd02" :small-image="hd02.smallImage2" :medium-image="hd02.mediumImage2" :large-image="hd02.largeImage2" alt-text="Description of image" /> {{ $t('Guest') }} <RoomSwiper :bannerList="roomBannerList" /> {{ $t('Apartment') }} <RoomSwiper :bannerList="apartBannerList" /> {{ $t('Facilities') }} {{ $t('WiFi') }} {{ $t('individually') }} {{ $t('TV') }} {{ $t('laundry') }} {{ $t('safes') }} {{ $t('coffee') }} {{ $t('Minibar') }}
</template> <script> import RoomSwiper from "@/components/swiper/RoomSwiper.vue"; export default { name: "experience", components: { RoomSwiper, }, data() { return { msg: "Welcome to Your Vue.js App", // 响应式图片数据 hd01: { smallImage1: require("../../assets/experience/hd-01-mobile.jpg"), mediumImage1: require("../../assets/experience/hd-01.png"), largeImage1: require("../../assets/experience/hd-01.png"), }, hd02: { smallImage2: require("../../assets/experience/hd-02-mobile.jpg"), mediumImage2: require("../../assets/experience/hd-02.png"), largeImage2: require("../../assets/experience/hd-02.png"), }, roomBannerList: [ { id: 1, imgUrl: require("../../assets/room/room-01.png"), title: "豪华套房", prompt: "尊享私人空间,尽享奢华体验", }, { id: 2, imgUrl: require("../../assets/room/room-02.png"), title: "豪华楼层/豪华雅致大床房", prompt: "面积约为42平方米,装饰现代,舒适典雅。卧室和大理石浴室设气派的落地窗玻璃,可以俯瞰草原城市胜景或乌兰木伦湖滨美景。", }, { id: 3, imgUrl: require("../../assets/room/room-03.png"), title: "豪华双床房", prompt: "面积约为42平方米,装饰现代,舒适典雅。卧室和大理石浴室设气派的落地窗玻璃,可以俯瞰草原城市胜景或乌兰木伦湖滨美景。", }, ], apartBannerList: [ { id: 1, imgUrl: require("../../assets/room/room-01.png"), title: "豪华套房", prompt: "尊享私人空间,尽享奢华体验", }, { id: 2, imgUrl: require("../../assets/room/room-02.png"), title: "豪华楼层/豪华雅致大床房", prompt: "面积约为42平方米,装饰现代,舒适典雅。卧室和大理石浴室设气派的落地窗玻璃,可以俯瞰草原城市胜景或乌兰木伦湖滨美景。", }, { id: 3, imgUrl: require("../../assets/room/room-03.png"), title: "豪华双床房", prompt: "面积约为42平方米,装饰现代,舒适典雅。卧室和大理石浴室设气派的落地窗玻璃,可以俯瞰草原城市胜景或乌兰木伦湖滨美景。", }, ], }; }, }; </script> <style scoped> .content-banner { width: 100vw; height: 60rem; background-image: url("../../assets/banner/banner-04.jpg"); background-size: 100% 100%; position: relative; } .content-wrapper { max-width: 1920px; /* 限制最大宽度 */ margin: 0 auto; padding: 0 4rem; /* 添加基础内边距 */ } /* 优化商务/度假模块 */ .business, .tourism { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; padding: 8rem 0; max-width: 1600px; /* 限制最大内容宽度 */ } .title-en { font-size: 3rem; color: rgb(202, 171, 98); font-weight: bold; line-height: 2em; font-family: "Times New Roman", Times, serif; } .title-zh { font-size: 3.6rem; color: rgb(202, 171, 98); text-align: left; } .content { font-size: clamp(1.6rem, 2vw, 2.2rem); /* 响应式字体 */ line-height: 1.8; margin: 3rem 0; font-family: "Fangsong"; } /* 图片容器优化 */ .img-box { width: 100%; max-width: 800px; /* 限制最大宽度 */ margin: 0 auto; transition: transform 0.3s; } .img-box:hover { transform: scale(1.02); /* 添加悬停效果 */ } /* 文本区域优化 */ .text-box { max-width: 600px; margin: 0 auto; } .more { width: 10rem; font-size: 1.6rem; line-height: 2em; color: rgb(202, 171, 98); text-align: center; cursor: pointer; background-color: rgb(238, 235, 235); } /* 通用属性 */ /* 文本居中 */ .text-center { text-align: center; } /* div居中 */ .div-center { margin: 2rem auto; } /* 上外边距2rem */ .margin-top-20 { margin-top: 2rem; } /* 上外边距5rem */ .margin-top-50 { margin-top: 5rem; } /* 下外边距2rem */ .margin-bottom-20 { margin-bottom: 2rem; } /* 度假旅行 */ /* .tourism { width: 120rem; margin: 0 auto; display: flex; justify-content: space-between; margin-bottom: 10rem; } */ /* 查看客房 */ .content-kefang { width: 100vw; height: 75rem; } /* 客房设施 */ .device-content { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; max-width: 1400px; margin: 8rem auto; align-items: center; } .device-list { columns: 2; /* 增加列数 */ column-gap: 4rem; font-size: clamp(1.6rem, 1.8vw, 2rem); } .device { width: 100rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 10rem; } .textEn { font-family: "Times New Roman", Times, serif !important; } /* 新增响应式断点 */ @media screen and (min-width: 1025px) { .content-banner { height: 50vh; } .business, .tourism { grid-template-columns: 55% 45%; /* 调整比例 */ } } /* 1024px以下 */ @media screen and (max-width: 1024px) { .content-banner { height: 70rem; } .business, .tourism { grid-template-columns: 1fr; gap: 4rem; padding: 4rem 0; } .content-wrapper { width: 160rem; } .title-en { font-size: 4.8rem; } .title-zh { font-size: 5.6rem; } .content { width: 74rem; font-size: 3rem; } .img-box { max-width: 100%; height: auto; } .more { width: 15rem; font-size: 2rem; } .device-content { grid-template-columns: 1fr; gap: 4rem; } /* .device-content { width: 100rem; margin: 10rem auto; display: flex; margin-bottom: 1rem; } */ .device-list { columns: 1; } .device { width: 100rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 10rem; } } @media screen and (max-width: 768px) { .content-banner { height: 82rem; background-image: url("../../assets/banner/banner-04-mobile.jpg"); } .business { flex-direction: column; align-items: center; } .tourism { flex-direction: column; align-items: center; } .content-wrapper { padding: 0 2rem; } .img-box { order: 2; } .text-box { order: 1; } .title-en { font-size: 6rem; } .title-zh { font-size: 6.2rem; } .content { font-size: 1.8rem; } .img-box { width: 110rem; height: 60rem; margin-top: 5rem; margin-bottom: 2rem; } .more { width: 20rem; font-size: 2.4rem; margin-bottom: 5rem; margin-left: 80rem; } .device-content { width: 120rem; margin: 10rem auto; display: flex; margin-bottom: 1rem; flex-direction: row; margin-right: 10rem; } .device-list { font-size: 1.6rem; } .device { width: 150rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 10rem; margin-right: 10rem; } } </style>

将以下代码修改为响应式布局修改页面分辨率时布局仍然保持原样,不出现滚动条<template> XX公司 XX云综合管理平台 <el-row :gutter="20"> <el-col v-for="(app, index) in apps" :key="index" :xs="24" :sm="12" :md="6" :lg="6"> {{ app.name }} {{ app.name }} </el-col> </el-row> </template> <script> export default { name: "Home", data() { return { hoverIndex: -1, apps: [{ name: '智慧应用', icon: 'el-icon-cpu', url: 'index' }, { name: '运行监测', icon: 'el-icon-monitor', url: '' }, { name: 'AI仿真', icon: 'el-icon-data-analysis', url: '' }, { name: '数据中台', icon: 'el-icon-data-board', url: '' } ], redirect: undefined, devicePixelRatio: null, contentStyle: {} } }, methods: { goIndex() { this.$router.replace({ path: "Index" }) } } } </script> <style scoped> .energy-platform { box-sizing: border-box; padding: 8rem 10rem; width: 100%; /* height: 100vh; */ min-height: 100vh; background-image: url('../assets/image/bg.png'); /* 背景图片设置 */ background-size: 100% 100%; background-position: center; background-repeat: no-repeat; filter: brightness(1); } .header { text-align: left; font-style: italic; color: #fff; font-size: 40px; } .company-name { margin-bottom: 30px; } .company-name, .platform-name { text-align: left; font-weight: bold; margin-bottom: 20px; color: #fff; } .gradient-bar { height: 4px; background: linear-gradient(to right, #29b0dd, #2aaed9, #ffffff); width: 260px; margin-bottom: 90px; } .app-container { margin: 0 auto; } .app-card { height: 260px; width: 80%; background: #fff; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .img-item2 { width: 100%; } .app-card:hover { transform: translateY(-5px); box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15); } .app-icon { font-size: 50px; color: #333; margin-bottom: 40px; transition: all 0.3s ease; } .app-card:hover .app-icon { color: #fff; } .app-title { font-size: 22px; font-weight: bold; color: #333; transition: all 0.3s ease; } .app-card:hover .app-title { color: #000; } /* 响应式调整 */ @media (max-width: 768px) { .company-name { font-size: 40px; } .platform-name { font-size: 20px; } .app-card { height: 120px; width: 100%; } .app-icon { font-size: 30px; margin-bottom: 10px; } .app-title { font-size: 16px; } .gradient-bar { margin-bottom: 40px; } } /* 响应式调整 */ @media (max-width: 1366px) { .energy-platform { padding: 150px 100px; } .app-card { width: 90%; } } /* 响应式调整 */ @media (max-width: 1024px) { .energy-platform { padding: 150px 200px; } .app-card { width: 100%; } } </style>

将以下代码转化为uniapp写法 <template> <searchBox></searchBox> <router-link :to="{ path:'/simpleMap', query: { siteId: item.siteId, lineName:item.line.substr(0, item.line.indexOf(';')), siteName: item.site}}"> {{item.site}} {{item.distance}} 米 {{item.line.substr(0,item.line.indexOf(";"))}} 距离{{item.sitenum}} 下一站:{{item.next_site}} </router-link> <router-link to="/">
乘车
</router-link> <router-link to="/LineTransfer">
路线
</router-link>
无数据 暂无车辆信息
</template> <script> import AMap from 'AMap' import Vue from 'Vue' // import axios from 'axios' import searchBox from './searchBox.vue' export default { name: 'FjSite', data () { return { isShow: false, items: [], lineSite: [], lineInfos: [] } }, mounted: function () { this.home = 'block' this.lineInfo() // axios.get('/api/posts', {}).then( // m => console.log(m.data) // ) AMap.service(['AMap.PlaceSearch'], function () { var placeSearch = new AMap.PlaceSearch({ // 构造地点查询类 pageSize: 4, typ: '', pageIndex: 1, city: '天津' // 限定城市,默认全国 // city: '北京市', }) // 中心点坐标 // [currentLocation.lng,currentLocation.lat] // 120.6400961887,31.1411187922 var currentLocation = true if (currentLocation !== undefined) { placeSearch.searchNearBy('公交站点', [117.74026393890381, 39.12581978874623], 1500, function (status, result) { console.log(result) if (status === 'complete' && result.info === 'OK') { var pois = result.poiList.pois var random = [4, 4, 24, 14] pois.forEach((item, index) => { this.items.push({ site: item.name.substr(0, item.name.indexOf('(')), line: item.address, distance: item.distance, next_site: '', sitenum: random[index], siteId: item.id }) this.lineInfo(item.address.substr(0, item.address.indexOf(';') - 1), item.id, index) }) console.log(result.poiList) } }.bind(this)) } }.bind(this)) }, methods: { lineInfo: function (linename, id, index) { console.log(linename, index) AMap.service(['AMap.LineSearch'], function () { var linesearch = new AMap.LineSearch({ pageIndex: 1, city: this.city, pageSize: 10, extensions: 'all' // 返回全部信息 }) linesearch.search(linename, function (status, result) { // 取回公交路线查询结果 console.log(status) if (status === 'complete' && result.info === 'OK') { var tips = result.lineInfo[0] var num = '' this.isShow = true console.log('posi:', tips, id, index) Vue.set(this.lineInfos, index, tips) Vue.set(this.lineSite, index, tips.via_stops) Vue.set(this.items[index], 'lineId', tips.id) if (tips.id !== '' && undefined !== tips.id) { for (let j = 0; j < tips.via_stops.length; j++) { if (tips.via_stops[j].id === id) { num = j + 1 break } } if (num !== tips.via_stops.length) { console.log('下一站:', num) Vue.set(this.items[index], 'next_site', tips.via_stops[num].name) } else { Vue.set(this.items[index], 'next_site', '当前站为终点站') } } } else { this.isShow = true } }.bind(this)) }.bind(this, linename, id, index)) } }, components: { searchBox } } </script> <style scoped> /*新搜索框*/ .toggle{ display: none; } .pop_list_title { width: 100%; height: 0.88rem; padding: 0.14rem 0.2rem; background: #36A3F9; overflow: hidden; position: fixed; left: 0; top: 0; } .pop_list_title .closespan { float: right; display: block; width: 0.9rem; height: 0.6rem; line-height: 0.6rem; font-size: 0.32rem; color: #fff; } .pop_list_title .input_area { float: left; width: 70%; padding: 0.12rem; height: 0.6rem; background: #5DB4F9; margin-left: 0.1rem; border-radius: 0.16rem; } .pop_list_title .input_area input::-webkit-input-placeholder { color: #fff; } .pop_list_title .input_area input { font-size: 0.28rem; color: #fff; display: block; width: 90%; padding-left: 0.52rem; height: 0.36rem; line-height: 0.36rem; background: url(../assets/line/search2.png) no-repeat left center; background-size: 0.36rem 0.36rem; border: none; } .line_list{ } .line_list .part{ background: #fff; color:#292A2C; font-size: 0.32rem; height:2.2rem; width:100%; margin-bottom: 0.2rem; padding:0.3rem; text-align:left; } .line_list .site{ padding-left: 0.52rem; margin-bottom: 0.2rem; background:url(../assets/line/position.png) left no-repeat; background-size:0.36rem; } .line_list .tit{ height: 0.42rem; margin-bottom: 0.2rem; } .line_list .name{ padding-left: 0.52rem; float: left; background:url(../assets/line/car.png) left no-repeat; background-size:0.36rem 0.36rem; } .line_list .distance{ float: right; color:#9A9DA0; margin-right: 0.35rem; } .line_list .sitedistance{ float: right; margin-right: 0.35rem; } .line_list .distance strong{ font-size: 0.28rem; color:#292A2C; margin:0 0.2rem; } .line_list .next_site{ padding-left:0.56rem; color:#9A9DA0; font-size: 0.28rem; } </style>

<template> <group class="items"> 高级 </group> <scroller class="date-content"> <inline-calendar ref="calendar" @on-change="onChange" @on-view-change="onViewChange" class="inline-calendar-demo" :end-date="this.endDate" :show.sync="show" v-model="value" :range="range" :show-last-month="showLastMonth" :show-next-month="showNextMonth" :highlight-weekend="highlightWeekend" :return-six-rows="return6Rows" :hide-header="hideHeader" :hide-week-list="hideWeekList" :replace-text-list="replaceTextList" :weeks-list="weeksList" :render-function="buildSlotFn" :disable-past="disablePast" :disable-future="disableFuture" :disable-weekend="disableWeekend"> </inline-calendar> <group class="items"> <cell class="booklist-wrap"> 已预订列表 </cell> </group> <group class="items choosetime"> <cell v-for="(event, index) in demoEvents" :key = "index" primary="content" :title="event.startTime+'-'+event.endTime" align-items="flex-start" > {{event.userId}} {{event.userPhone}} {{event.title}} </cell> </group> </scroller> <x-button plain @click.native="goRoom" type="default" style="border-radius:99px;">预订</x-button> <alert v-model="show" @on-show="onShow" @on-hide="onHide"> {{bookTip}} 确认 </alert> </template> <script> // import Calendar from './base/CCalendar.vue' import axios from 'axios' // import $ from "jquery" import moment from 'moment' // 格式化时间 import { Flexbox, FlexboxItem,Cell,CellBox,Group,Datetime, PopupPicker,Picker,XInput,XButton, InlineCalendar,Radio,Alert } from 'vux' let selectTime = '' // 选中的时间变量 let selectRoom = '' // 选中的会议室 let selectArea = '' // 选中的地区 export default { // components: { // calendar: Calendar // }, data () { return { show: true, value: '', listValue: '', range: false, showLastMonth: true, showNextMonth: true, highlightWeekend: false, return6Rows: true, hideHeader: false, hideWeekList: false, replaceTextList: {}, replace: false, changeWeeksList: false, weeksList: [], useCustomFn: false, buildSlotFn: () => '', disablePast: true, disableFuture: false, disableWeekend: false, showTimeSpace:false, value3: [], endDate:'', startTime: '', endTime: '', demoEvents: [],// 预定列表 selectArea: '',// 选中的地区 selectRoom: '',// 选中的会议室 DepartList: [],// 地区列表 MeetingRoomList: [],// 会议室列表 show:false, bookTip:''//预定失败提示信息 } }, components: { Flexbox, FlexboxItem, Cell, CellBox, Group, Datetime, PopupPicker, Picker, XInput, XButton, InlineCalendar, Radio, Alert }, beforeMount (to,from, next){ window.com.setTitle('预订会议室') }, computed: { sporsorTitle: { get () { return this.$store.state.form.sporsorTitle }, set (val) { this.$store.dispatch('FORM_SporsorTitle',val) } }, sporsorType: { get () { return this.$store.state.form.sporsorType }, set (val) { this.$store.dispatch('FORM_SporsorType',val) } }, conferRoomId: { get () { return this.$store.state.form.conferRoomId }, set (val) { this.$store.dispatch('FORM_ConferRoomId',val) } }, flagUpSporsor: { get () { return this.$store.state.form.flagUpSporsor }, set (val) { this.$store.dispatch('FORM_FlagUpSporsor',val) } }, sporsorId: { get () { return this.$store.state.form.sporsorId }, set (val) { this.$store.dispatch('FORM_SporsorId',val) } } }, watch: { replace (val) { this.replaceTextList = val ? { 'TODAY': '今' } : {} }, useCustomFn (val) { this.buildSlotFn = val ? (line, index, data) => { return /8/.test(data.date) ? '' : '' } : () => '' }, changeWeeksList (val) { this.weeksList = val ? ['日', '一', '二', '三', '四', '五', '六 '] : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] } }, methods: { onHide () { this.show=false; }, onShow () { this.show=true; }, //会议地点改变 changePicker() { var urlPath = '' if(this.value != '') { urlPath = config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+this.value } else { let date = new Date let nowDate = moment(date).format('YYYY-MM-DD') urlPath = config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+nowDate } // console.log('urlPath:'+urlPath) axios.get(urlPath).then((data) => { var temp = data.data if(temp.code === '0') { var opArry = [] for(var i in temp.data) { temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title opArry.push({ userId:temp.data[i].userId, title:temp.data[i].title, startTime:moment(temp.data[i].startTime).format('HH:mm'), endTime:moment(temp.data[i].endTime).format('HH:mm'), userPhone:temp.data[i].userPhone }); } this.demoEvents = opArry } else { this.bookTip = '获取列表失败' this.show = true; // app.toast("获取列表失败!") } }); }, onViewChange (val, count) { // alert('on view change:'+val + ',' + count) }, onChange (val) { selectTime = val if(this.value3[1] != undefined) { // console.log('url:' + config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+selectTime) axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+selectTime).then((data) => { var temp = data.data if(temp.code === '0') { var opArry = [] for(var i in temp.data) { temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title opArry.push({ userId:temp.data[i].userId, title:temp.data[i].title, startTime:moment(temp.data[i].startTime).format('HH:mm'), endTime:moment(temp.data[i].endTime).format('HH:mm'), userPhone:temp.data[i].userPhone }); } this.demoEvents = opArry } else { this.bookTip = '获取列表失败' this.show = true; // app.toast("获取列表失败!") } }); } }, chooseDepartment (paramkey) { // 根据地区编号获取会议室列表 selectArea = paramkey axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomListByAreaId?areaId='+paramkey).then((data) => { var temp = data.data if(temp.code === '0') { this.MeetingRoomList = temp.data } else { this.bookTip = '获取会议室列表失败' this.show = true; // app.toast('获取会议室列表!') } }); }, chooseBookingRoom (eventroomId) { //根据会议室编号和选定日期获取预定列表 selectRoom = eventroomId if(selectTime === '') {// 选定了会议室,没选定日期 let date = new Date let nowDate = moment(date).format('YYYY-MM-DD') axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+eventroomId+'&orderDate='+nowDate).then((data) => { var temp = data.data if(temp.code === '0') { var opArry = [] for(var i in temp.data) { // var ss = '' // if(temp.data[i].stateShow == '1') { // ss = '进行中' // } else if(temp.data[i].stateShow == '2') { // ss = '正常' // } temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title opArry.push({userName:temp.data[i].userName, userPhone:temp.data[i].userPhone, // stateShow:ss,// 状态 title:temp.data[i].title, startTime:moment(temp.data[i].startTime).format('HH:mm'), endTime:moment(temp.data[i].endTime).format('HH:mm') }); } this.demoEvents = opArry } else { this.bookTip = '获取会议室列表失败' this.show = true; // app.toast('获取会议室失败!') } }); } else {// 选定了会议室,选定日期 // alert("value: " + obj.value + ',selectTime:' + selectTime) } }, //跳转到会议室预定 goRoom () { var choice_time = '' if(this.value != '') { var dateObj = new Date() choice_time = this.value + ' ' + dateObj.getHours() } else { let date = new Date let nowDate = moment(date).format('YYYY-MM-DD HH') choice_time = nowDate } var timeString = moment(window.com.convertDateFromStrings(choice_time + ':00:00')).format('YYYY-MM-DD HH:mm') if(this.value3.length != 0) { this.$router.push({path:'bookingRoom',query:{roomId:this.value3[1],conferenceRoomId:this.$route.query.conferenceRoomId,timeStart:timeString,timeEnd:timeString}}) } else { this.bookTip = '请点击选择会议室' this.show = true; // app.toast('请选择会议室!') } }, //跳到高级搜索 goSearchPage: function() { this.$router.push({path:'conferenceRoomSearch'}) } }, mounted () { let dq=new Date(); let dqtime=dq.getFullYear()+'-'+(dq.getMonth()+2)+'-'+dq.getDate(); this.endDate=dqtime; if(window.localStorage.getItem('userId') != null && window.localStorage.getItem('userId') != undefined) { // 获取地区和会议室名称数据 // console.log('url:'+config.serverUrl + '/microinformation/zy/mi/obtainAreaAndConferenceroomList') axios.get(config.serverUrl + '/microinformation/zy/mi/obtainAreaAndConferenceroomList').then((data) => { var temp = data.data if(temp.code === '0') { this.DepartList = temp.data } else { this.bookTip = '获取地区列表失败' this.show = true; // app.toast('获取地区列表失败!') } }); } else { window.location.href = "http://dwz.cn/1IooUbPb" } } } </script> <style lang="less" src="./booking.less"></style> 这块代码我需要优化一个功能点,即如9:00-18:00之间会议室有空闲时间的就在日期底部显示一个小绿点

大家在看

recommend-type

0132、单片机-485-PC串口通信proteus仿真+程序资料.zip

0132、单片机-485-PC串口通信proteus仿真+程序资料.zip
recommend-type

msxml(xml语言解析器)v4.0sp3parser中文官方安装免费版

msxml是由微软推出的xml语言解析器,主要用来解析所有由微软软件生成的xml标准文档,本款是msxml4.0 sp3版本,也是目前msxml4.0版本中最完善的版本。由于msxml各个版本之间是互相独立的,所以一般用户都需要同时安装多个msxml版本,包括这个msxml 4.0版。 MSXML 4.0 Service Pack 3 (SP3) 完全取代了 MSXML 4.0、MSXML 4.0
recommend-type

华为逆变器SUN2000-(33KTL, 40KTL) MODBUS接口定义描述

ModBus-RTU 协议是工业领域广泛使用的通讯协议,是应用于电气通信终端上的一种通用语言。通过此协议,逆变器相互之间、逆变器经由网络(例如 RS485 总线)和其它设备之间可以通信。它已经成为一通用工业标准。有了它,不同厂商生产的逆变器设备可以连成工业网络,进行集中监控。协议中描述了主从节点定义方式,主节点使用各种请求方式访问其它设备的过程,从节点如何响应来自其它设备的请求,以及双方如何侦测错误并记录。它制定了消息域格局和数据内容的详细定义。 随着华为逆变器业务的不断拓展,越来越多的通用或定制逆变器采用 ModBus 协议进行通讯,本文对华为逆变器的 ModBus 协议进行了描述和说明,用于规范和约束后续的第三方集成开发和定制。
recommend-type

HslCommunication-labview

HslCommunication-labview
recommend-type

IVT-Dongle--paire.rar_LABVIEW 蓝牙_bluetooth labview_labview don

控制蓝牙Dongle 通过蓝牙地址自动配对

最新推荐

recommend-type

the homework of ROS summer school

the homework of ROS summer school
recommend-type

OpenWeatherMap API 调用实战模板.rar

我们制作了一个完整的天气数据获取解决方案,包括环境配置、鉴权处理和实用的调用模板。 环境配置说明,获取 API 密钥: 访问 OpenWeatherMap 官网 注册账号 登录后进入 API 密钥页面生成你的专属 API key 新生成的 API key 可能需要 10-15 分钟才能生效 环境准备 Python 3.6+ 环境 安装必要依赖:pip install requests python-dotenv 环境变量配置 在项目根目录创建 .env 文件 添加内容:OPENWEATHER_API_KEY=你的API密钥 使用说明 基本用法 实例化 OpenWeatherClient 类,它会自动处理 API 密钥验证 使用提供的方法获取不同类型的天气数据:get_current_weather_by_city(city_name, country_code) - 通过城市名获取当前天气 get_current_weather_by_coords(lat, lon) - 通过经纬度度获取当前天气 get_forecast_by_city(city_name, country_code, days) - 获取未来几天的预报 错误处理 代码包含完整的错误处理,包括网络错误、API 错误和参数错误 所有异常都会被捕获并以友好的方式展示 数据格式化 format_weather_data 方法将原始 API 响应转换为易读的文本格式 你可以根据需要修改此方法以适应特定的输出格式要求
recommend-type

基于React框架构建的现代化前端Web应用程序开发模板_包含完整开发环境配置和构建工具链_用于快速启动React项目开发_支持热重载和自动化测试_集成Webpack和Babel构.zip

基于React框架构建的现代化前端Web应用程序开发模板_包含完整开发环境配置和构建工具链_用于快速启动React项目开发_支持热重载和自动化测试_集成Webpack和Babel构.zip
recommend-type

锂电池充放电模型的MatlabSimulink仿真及双向充放电功能实现 DCDC变换器

基于Matlab/Simulink平台实现的锂电池充放电模型及其双向充放电功能。文中首先强调了锂电池充放电模型的重要性和应用背景,随后重点描述了采用恒流(CC)和恒压(CV)两种模式来实现锂电池的高效充放电过程。此外,文章还探讨了通过Simulink仿真工具对DC/DC变换器进行精确控制的方法,以确保电压和电流的有效追踪,从而保障不同充放电环境下的性能表现。最后,文章指出该模型的研究成果有助于提升锂电池的安全性和使用效率。 适合人群:从事电力电子、新能源汽车、储能系统等领域研究的技术人员和科研工作者。 使用场景及目标:适用于希望深入了解锂电池充放电机理并掌握其实现方法的专业人士;旨在帮助研究人员优化锂电池管理系统的设计,提高系统的可靠性和安全性。 其他说明:文中提及的内容不仅限于理论分析,还包括具体的实验验证和技术细节,为后续进一步探索提供了宝贵的经验和数据支持。
recommend-type

基于西门子S7-1200PLC与KTP700触摸屏的四层电梯控制系统设计与实现 · 电梯控制 v2.5

四层电梯控制系统的设计与实现,采用西门子S7-1200PLC和KTP700触摸屏作为主要控制设备。文中首先列出了硬件配置清单,接着深入解析了PLC编程的核心逻辑,如楼层判断、楼层显示处理、触摸屏组态技巧以及电梯开门保持逻辑等。特别提到了数码管显示部分的消隐处理和楼层信号复位开门信号的可靠性改进措施。最后分享了一些调试经验和优化方法,确保系统能够稳定应对各种异常情况。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对PLC编程和电梯控制系统感兴趣的读者。 使用场景及目标:适用于需要设计和实现小型电梯控制系统的项目,旨在帮助读者掌握PLC编程的基本原理和技巧,提高系统的稳定性和可靠性。 其他说明:文中提供的代码片段和调试经验对于初学者来说非常有借鉴价值,可以帮助他们更好地理解和应用相关技术。
recommend-type

Python打造的Slaee管理系统升级版发布

由于提供的文件信息中,文件名《基于python的slaee管理系统 (15).zip》与描述《基于python的slaee管理系统 (15).zip》相同,并且给出的压缩包文件名称列表中只有一个文件《基于python的slaee管理系统 (14).zip》,该信息表明我们正在讨论两个不同版本的Python系统管理软件的压缩包。以下知识点将根据这些信息详细展开: 知识点一:Python编程语言基础 Python是一种高级编程语言,以其简洁的语法和强大的库支持而闻名。它是解释型语言,具有动态类型系统和垃圾回收功能,适用于多种编程范式,包括面向对象、命令式、函数式和过程式编程。Python广泛应用于系统管理、网络服务器、开发脚本、科学计算、数据挖掘和人工智能等领域。 知识点二:系统管理相关知识 系统管理指的是对计算机系统进行配置、监控和维护的过程,包括硬件资源、软件资源和数据资源的管理。在Python中,系统管理通常涉及操作系统级别的任务,如进程管理、文件系统管理、网络配置、系统日志监控等。Python的系统管理库(例如psutil、fabric、paramiko等)提供了丰富的API来简化这些任务。 知识点三:项目版本控制 从文件名《基于python的slaee管理系统 (14).zip》和《基于python的slaee管理系统 (15).zip》可以看出,这是一个项目在不同版本之间的迭代。版本控制是一种记录一个或多个文件随时间变化的方式,它允许用户可以回到特定版本。在软件开发中,版本控制非常重要,它有助于团队协作、代码合并、分支管理和错误跟踪。常见的版本控制系统包括Git、Subversion (SVN)、Mercurial等。 知识点四:打包与部署 提到“压缩包子文件”,这通常意味着文件已经被压缩打包成一个ZIP文件。在软件开发中,打包是为了便于文件传输、存档保存和分发。在Python项目中,打包也是部署过程的一部分。一个Python项目通常需要包含源代码、依赖关系、配置文件和安装脚本等。打包成ZIP文件后,可以通过各种方式部署到服务器上运行,如使用Fabric或Ansible等自动化部署工具。 知识点五:项目命名及版本命名规则 文件命名中的“基于python的slaee管理系统”表明这是一个与Python语言相关的系统管理项目。而数字“15”和“14”则代表着项目的版本号,这表明项目在持续发展,不同的数字代表了项目在不同时期的迭代。版本号的命名规则通常遵循语义化版本控制(SemVer),这种版本控制系统以 MAJOR.MINOR.PATCH 的形式表示版本号。 知识点六:文件压缩与解压缩技术 ZIP是一种常用的文件压缩格式,它通过减少文件大小来提高存储效率和传输速度。ZIP文件通常是无损压缩,意味着文件在压缩和解压缩的过程中不会丢失信息。Python标准库提供了zipfile模块,允许用户在Python程序中创建ZIP文件、读取ZIP文件内容、提取ZIP文件中的文件等操作。用户可以使用各种图形界面工具(如WinRAR、7-Zip)或命令行工具来处理ZIP文件。 总结以上内容,从文件信息中我们可以得知该内容涉及了Python编程语言、系统管理知识、版本控制、打包与部署、命名规则以及文件压缩技术等多方面的知识点。这些知识点对于理解和应用Python进行系统管理软件开发以及软件的版本迭代、打包与部署均具有重要意义。
recommend-type

深入解析PCB走线传输延时:关键因素与实用公式

# 1. PCB走线传输延时基础 在电子工程领域,尤其是在印刷电路板(PCB)设计中,走线传输延时是一个不可忽视的重要概念。传输延时主要指的是电信号通过PCB上的导电路径从源头传送到目的地所耗费的时间。本章将介绍PCB走线传输延时的基础知识点,为后续章节的深入探讨打下坚实的基础。 首先,了解什么是传输延时是至关重要的。简单来说,它反
recommend-type

gpio很弱是什么意思

<think>嗯,用户的问题是关于GPIO信号弱的概念及其影响。用户似乎对硬件或嵌入式系统有一定了解,但需要更深入的解释。从用户提到的"信号弱"来看,ta可能遇到了实际电路设计中的驱动能力问题,或者在学习GPIO原理时遇到了术语困惑。 用户引用了四篇资料,其中提到GPIO的模拟输入输出模式、施密特触发器的作用、上拉下拉电阻的配置,以及信号线串联电阻的作用。这些内容都与GPIO的驱动能力和信号质量相关。特别是引用[4]中提到的"信号线串联小电阻"和"低频电路不考虑反射",暗示用户可能正在处理实际电路中的信号完整性问题。 用户真正想知道的可能是:为什么我的GPIO输出无法正确驱动某个设备?或者
recommend-type

Python打造的Slaee管理系统升级版发布

标题中的“基于python的slaee管理系统”表明这是一个使用Python编程语言开发的系统。Python是一种广泛使用的高级编程语言,以其易读性和简洁的语法而闻名。SLAEE管理系统可能是指一个特定类型的管理软件,但由于没有给出缩写的完整解释,我们可以假设SLAEE可能是某机构或系统名称的缩写。 从标题和描述来看,存在一处笔误:“基于python的slaee管理系统 (19).zip”和“基于python的slaee管理系统 (18).zip”所指的似乎是同一软件系统,只是版本号不同。根据文件名称列表中的两个文件名,可以推断系统至少有两个版本,一个是版本18,一个是版本19。通常情况下,版本号的增加表示软件进行了更新或改进。 接下来,根据这些信息,我们可以阐述一些相关的知识点: 1. Python编程基础:Python是一种解释型、面向对象、高级编程语言。Python支持多种编程范式,包括过程式、面向对象和函数式编程。Python由于其简洁和易于学习的特性,被广泛应用于网络开发、数据分析、人工智能、机器学习和科学计算等领域。 2. 文件压缩与打包:文件压缩是将文件的大小减小以节省存储空间或网络传输时间的技术。常见的文件压缩格式包括ZIP、RAR、7Z等。文件打包通常指的是将多个文件或文件夹压缩成一个单独的文件。这在数据备份、软件分发和档案管理中非常常见。 3. 版本控制:在软件开发中,“版本”通常指软件的特定状态,版本号则用来标识这些状态。版本控制是一种记录文件、目录或集合随着时间变化的方式,以便将来可以检索特定版本。对于软件项目来说,版本控制是至关重要的,它不仅允许开发者追踪和管理代码的变化,而且还能帮助团队协作,解决冲突,并回滚到旧版本。 4. 软件管理系统的开发:一个软件管理系统可能是针对特定业务领域而设计的,它可能包括用户界面、数据库管理、业务逻辑处理、报告生成和其他许多功能。软件管理系统的开发通常涉及需求分析、系统设计、编程、测试和维护等多个阶段。 5. Python在软件开发中的应用:Python因为具有丰富的库和框架,被广泛用于开发各种类型的软件。例如,Django和Flask是用于Web开发的流行Python框架;而对于数据分析和数据科学任务,Pandas、NumPy和Matplotlib等库提供了强大的数据处理和可视化工具;对于机器学习和人工智能,TensorFlow、PyTorch等库使得复杂算法的实现变得更为简单。 6. 系统更新与维护:随着软件的使用和发展,需求可能会变化,新的问题可能会出现,所以软件系统需要定期进行更新和维护。软件更新可能包括修复已知问题、改进现有功能、增加新功能或优化性能。开发者需要评估是否需要为修复安全漏洞或提高系统性能而更新系统,以及更新之后对用户体验的影响。 由于文件名中只提到了“基于python的slaee管理系统”,没有提供该系统具体功能的详细描述,我们无法提供更加具体的技术知识点。如果需要分析系统的工作原理或具体的技术实现细节,还需要更多的信息。
recommend-type

【Keil-ARM编程艺术】:如何编写可维护且高效的代码

# 摘要 本文旨在为读者提供ARM微控制器编程和Keil开发环境的全面指南。第一章概览了ARM微控制