From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 13:12:48 +0800
Subject: [PATCH] 项目初始化
---
src/pages_qiun/pages/main/index.vue | 348 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 348 insertions(+), 0 deletions(-)
diff --git a/src/pages_qiun/pages/main/index.vue b/src/pages_qiun/pages/main/index.vue
new file mode 100644
index 0000000..6d32aac
--- /dev/null
+++ b/src/pages_qiun/pages/main/index.vue
@@ -0,0 +1,348 @@
+<template>
+ <view class="window">
+ <!-- #ifndef H5 -->
+ <view class="topLine" :style="{ height: topBar + 'px' }"></view>
+ <!-- #endif -->
+ <view class="nav row_align_center" id="nav">
+ <li class="li_5" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>
+ <text class="title li_5">{{ title ? title : '' }}</text>
+ <li class="iconfont icon-zuojiantou back hidden"></li>
+ </view>
+ <view class="row_align_center head" id="head">
+ <!-- 鏃ユ湡涓嬫媺鍒楄〃 -->
+ <drop-down ref="caleDrop" @tap="changDrop(1)" @changeItem="changeTime" :list="timeArray" :contentTop="top"
+ selectWidth="260rpx" contentLeft="0"></drop-down>
+ <!-- 鏃ュ巻閫夋嫨鏃ユ湡 -->
+ <view v-if="showCalendar"
+ :class="['dropdown-item__selected', listWidth != '150rpx' ? 'dropdown-item__right' : 'dropdown-item__left']"
+ @click="openCalendar" class="calendar_drag">
+ <view class="selected__name">{{ nowDate }}</view>
+ <li class="iconfont icon-calendar" style="margin-left: 10rpx;"></li>
+ </view>
+ <!-- 鍏徃鍖哄煙涓嬫媺鍒楄〃 -->
+ <drop-down ref="companyDrop" @tap="changDrop(2)" @changeItem="changeLocation" :list="locationArray"
+ :contentTop="top" contentRight="10" :selectWidth="showCalendar ? '200rpx' : '300rpx'" listWidth="75%">
+ </drop-down>
+ </view>
+ <uni-calendar ref="calendar" :insert="false" :start-date="startDate" :end-date="endDate" :clearDate="false"
+ @confirm="confirm">
+ </uni-calendar>
+ <!--婊戝姩鍒楄〃澶�-->
+ <wuc-tab id="wuctab" :tab-list="tabList" :tabCur.sync="tabCur" tab-class="text-center text-white bg-blue"
+ select-class="text-white"></wuc-tab>
+ <!--涓讳綋鍐呭-->
+ <view class="data_body" :style="{ height: scrollHeight }">
+ <view v-if="tabCur == 0">
+ <wechat :scrollHeight="scrollHeight" />
+ </view>
+ <view v-else-if="tabCur == 1">
+ <user-operate :scrollHeight="scrollHeight" />
+ </view>
+ <view v-else-if="tabCur == 2">
+ <user-healthy :scrollHeight="scrollHeight" />
+ </view>
+ <view v-else-if="tabCur == 3">
+ <user-server :scrollHeight="scrollHeight"></user-server>
+ </view>
+ </view>
+ <!--姘村嵃-->
+ <view class="water-mark-mask row_wrap" :style="{ height: scrollHeight }">
+ <text class="container" v-for="(count, index) in 10" :key="index">{{ info.name }}</text>
+ </view>
+ </view>
+</template>
+<script>
+import Wechat from "../../components/data-center/wechat.vue"
+import UserOperate from "../../components/data-center/user-operate.vue"
+import UserHealthy from "../../components/data-center/user-healthy.vue"
+import UserServer from "../../components/data-center/user-server.vue"
+import WucTab from '../../components/wuc-tab/wuc-tab.vue'
+import DropDown from '../../components/drop-down/drop-down.vue'
+import UniCalendar from '../../components/uni-calendar/uni-calendar.vue'
+
+import Config from '../../static/js/config'
+import Common from "../../static/js/common"
+
+export default {
+ components: {
+ WucTab,
+ DropDown,
+ UniCalendar,
+ Wechat,
+ UserOperate,
+ UserHealthy,
+ UserServer,
+ },
+ data() {
+ return {
+ tabList: Config.TABLIST, //鏍囩澶�
+ timeArray: Config.TIMEARRAY, //鏃堕棿鏁扮粍
+ info: '澶т究瓒呬汉', //鐢ㄦ埛鏁版嵁
+ title: "鏁版嵁鎶ヨ〃涓績", //鏍囬
+ showDataTime: "today", //閫変腑鐨勬椂闂�
+ tabCur: 0, //鏍囩澶翠笅鏍�
+ topBar: 17, //瀵艰埅楂�
+ top: '180', //涓嬫媺鏍忎綅缃�
+ scrollHeight: "100%", //鏁版嵁灞曠ず浣撻珮搴�
+ nowDate: Common.getNowDate(), //鐜板湪鏃ユ湡
+ endDate: Common.getNowDate(), //鏃ュ巻鍙�夋棩鏈熻寖鍥寸殑缁撴潫鏃堕棿
+ startDate: Common.getPreMonth(Common.getNowDate()), //鏃ュ巻鍙�夋棩鏈熻寖鍥寸殑寮�濮嬫椂闂�,
+ showCalendar: false,
+ };
+ },
+ computed: {
+ locationArray() {
+ return [{
+ value: "GDBJ-ENTRY-1",
+ text: "澶╃尗"
+ }, {
+ value: "GDBJ-ENTRY-201",
+ text: "浜笢"
+ }];
+ }
+ },
+ methods: {
+ gotoBack() {
+ Common.navigateBack("/index/index");
+ },
+ changDrop(index) {
+ if (index == 1 && this.$refs.companyDrop.showList) {
+ this.$refs.companyDrop.closePopup()
+ } else if (index == 2 && this.$refs.caleDrop.showList) {
+ this.$refs.caleDrop.closePopup()
+ }
+ },
+ // 鎵撳紑鏃ュ巻
+ openCalendar() {
+ this.$refs.calendar.open();
+ },
+ // 鏃ュ巻閫夋嫨鏃ユ湡
+ confirm(e) {
+ if (this.nowDate != e.fulldate || !this.showCalendar) {
+ this.showCalendar = true;
+ this.$refs.caleDrop.selectAuto();
+ this.nowDate = e.fulldate;
+ this.showDataTime = e.fulldate.replace(/-/g, "");
+ Common.tipMsg("褰撳墠鏃堕棿:" + this.showDataTime)
+ }
+ },
+ //涓嬫媺閫夋嫨鏃堕棿
+ changeTime(e) {
+ if (e.value == "auto") {
+ this.openCalendar();
+ } else if (this.showDataTime != e.value) {
+ this.showDataTime = e.value;
+ this.showCalendar = false;
+ Common.tipMsg("褰撳墠鏃堕棿:" + this.showDataTime)
+ }
+ },
+ changeLocation(e) {
+ Common.tipMsg("褰撳墠閫変腑骞冲彴:" + e.text)
+ },
+ //鑾峰彇璁惧淇℃伅
+ async getTelephoneInfo() {
+ var telephoneInfo = await Common.getTelephoneInfo();
+ let hasHeight = 0;
+ if (telephoneInfo.top >= 40) {
+ this.top = telephoneInfo.statusBarHeight * 2 + 150;
+ this.topBar = telephoneInfo.statusBarHeight;
+ }
+
+ // 璁剧疆婊氬姩楂樺害
+ const query = wx.createSelectorQuery();
+ query.select('#nav').boundingClientRect();
+ query.select('#head').boundingClientRect();
+ query.select('#wuctab').boundingClientRect();
+ query.exec(res => {
+ res.map((item, index) => {
+ hasHeight += item.height;
+ })
+ this.scrollHeight = (telephoneInfo.screenHeight - hasHeight - this.topBar) + 'px';
+ })
+ },
+ getH5Info() {
+ uni.getSystemInfo({
+ success: e => {
+ let hasHeight = 0;
+ let element = wx.createSelectorQuery().in(this);
+ element.select('#nav').boundingClientRect();
+ element.select('#head').boundingClientRect();
+ element.select('#wuctab').boundingClientRect();
+ element.exec(res => {
+ res.map((item, index) => {
+ hasHeight += item.height;
+ })
+ this.scrollHeight = (e.screenHeight - hasHeight) + 'px';
+ })
+ },
+ fail: (err) => {
+ reject(err);
+ }
+ })
+ }
+ },
+ onReady() {
+ //#ifndef H5
+ uni.showShareMenu();
+ this.getTelephoneInfo();
+ //#endif
+ //#ifdef H5
+ this.getH5Info();
+ //#endif
+ }
+};
+</script>
+<style lang="scss">
+page,
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.li_5 {
+ list-style-type: none;
+}
+
+.window {
+ height: 100vh;
+ overflow: hidden;
+
+ .topLine {
+ background-color: #40A2ED;
+ width: 100%;
+ }
+
+ scroll-view {
+ box-sizing: border-box;
+ }
+
+ .swiper {
+ box-sizing: border-box;
+ }
+
+ .nav {
+ background-image: url(http://photo.gdbjyy.cn/image/BCAI/top_bg.jpg);
+ background-size: 100% 100%;
+
+ .back {
+ font-size: 54rpx;
+ padding: 20rpx 14rpx 15rpx 14rpx;
+ color: #fff;
+ }
+
+ .title {
+ color: #fff;
+ font-size: 30rpx;
+ flex: 1;
+ text-align: center;
+ }
+
+ .hidden {
+ visibility: hidden;
+ }
+ }
+
+ .head {
+ padding: 0 16rpx 14rpx 16rpx;
+ color: #fff;
+ background-color: #40A2ED;
+ justify-content: space-between;
+ font-size: 26rpx !important;
+
+ .calendar_drag {
+ width: 340rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .calendar_name {
+ margin-right: 10rpx;
+ }
+
+ .icon-calendar {
+ font-size: 26rpx;
+ margin-top: 4rpx;
+ }
+ }
+ }
+
+ .data_body {
+ overflow: auto;
+ text-align: center;
+ color: #333333;
+ background-repeat: repeat;
+ background-color: #ffffff;
+ position: relative;
+
+ .item {
+ padding: 0 20rpx;
+ margin-bottom: 20rpx;
+
+ .name {
+ font-weight: 600;
+ font-size: 36rpx;
+ }
+
+ .operate {
+ view {
+ padding: 5rpx 12rpx;
+ color: #fff;
+ }
+
+ .bg-blue {
+ background-color: #40A2ED;
+ }
+
+ .bg-yellow {
+ background-color: #FFC300;
+ }
+ }
+
+ .tip {
+ margin-bottom: 30rpx;
+
+ .update {
+ color: #C4100A;
+ margin-left: auto;
+ font-size: 30rpx;
+ }
+ }
+ }
+
+ .cry {
+ font-size: 96rpx;
+ margin-bottom: 10rpx;
+ }
+ }
+}
+
+.water-mark-mask {
+ width: 100%;
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ z-index: 1000;
+ justify-content: space-between;
+ pointer-events: none; //鏃犺榧犳爣浜嬩欢锛岀浉褰撲簬榧犳爣浜嬩欢閫忎紶涓嬪幓涓�鏍�
+ flex: 1;
+ overflow: hidden;
+
+ text {
+ width: 50%;
+ color: #909399;
+ opacity: 0.25;
+ transform: rotate(-15deg);
+ }
+}
+
+.histogram {
+ height: 100%;
+ width: 100%;
+
+ canvas {
+ margin-top: 40rpx;
+ }
+}
+</style>
--
Gitblit v1.9.3