528 lines
12 KiB
Vue
528 lines
12 KiB
Vue
<template>
|
||
<view class="container88">
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<z-nav-bar title="时辰取穴"></z-nav-bar>
|
||
<view>
|
||
<!-- {{date}}---{{timestamp}} -->
|
||
<!-- <uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section> -->
|
||
<view class="datetimeBox">
|
||
<uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" />
|
||
</view>
|
||
<view class="flexbox box1 grayBg">
|
||
<view class="">
|
||
<text style="color: #666; line-height: 60rpx;">所查询时间：</text><br />
|
||
<text style="color: #666; white-space:nowrap;;">{{dateToString}}</text>
|
||
</view>
|
||
<view class="yunqi">
|
||
<text style="color: #666; line-height: 50rpx; width: 100%; margin-right: 15rpx;">天干地支</text>
|
||
<view class="shu">
|
||
<text>{{tiangandizhi.hour}} - 时</text>
|
||
<text>{{tiangandizhi.day}} - 日</text>
|
||
<text>{{tiangandizhi.month}} - 月</text>
|
||
<text>{{tiangandizhi.year}} - 年</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 主体 -->
|
||
<view class="centerBox">
|
||
↓ 12时辰对应穴位图表 左滑查看全部
|
||
</view>
|
||
<view class="centerBox" style="text-align: right; padding-top: 0; font-size: 24rpx;">
|
||
注：表中带* 者是原穴
|
||
</view>
|
||
<view class="container" style="display: flex;">
|
||
<view class="d-table" style="width:15%;position: relative; z-index: 1;">
|
||
<view class="leftBar">
|
||
<!-- <view :class="i === 1 ? 'd-th' : 'd-td'">张三</view> -->
|
||
<table border cellspacing="0" style="width:100%; background-color:#fbd5ca;">
|
||
<tr>
|
||
<td class="oneHeight"></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="" style="height: 100rpx;"></td>
|
||
</tr>
|
||
<tr :class="curIndex == 2 ? 'cur' :''">
|
||
<td class="shuHeight1">23~01</td>
|
||
</tr>
|
||
<tr :class="curIndex == 3 ? 'cur' :''">
|
||
<td class="shuHeight1">01~03</td>
|
||
</tr>
|
||
<tr :class="curIndex == 4 ? 'cur' :''">
|
||
<td class="shuHeight1">03~05</td>
|
||
</tr>
|
||
<tr :class="curIndex == 5 ? 'cur' :''">
|
||
<td class="shuHeight1">05~07</td>
|
||
</tr>
|
||
<tr :class="curIndex == 6 ? 'cur' :''">
|
||
<td class="shuHeight1">07~09</td>
|
||
</tr>
|
||
<tr :class="curIndex == 7 ? 'cur' :''">
|
||
<td class="shuHeight1">09~11</td>
|
||
</tr>
|
||
<tr :class="curIndex == 8 ? 'cur' :''">
|
||
<td class="shuHeight1">11~13</td>
|
||
</tr>
|
||
<tr :class="curIndex == 9 ? 'cur' :''">
|
||
<td class="shuHeight1">13~15</td>
|
||
</tr>
|
||
<tr :class="curIndex == 10 ? 'cur' :''">
|
||
<td class="shuHeight1">15~17</td>
|
||
</tr>
|
||
<tr :class="curIndex == 11 ? 'cur' :''">
|
||
<td class="shuHeight1">17~19</td>
|
||
</tr>
|
||
<tr :class="curIndex == 12 ? 'cur' :''">
|
||
<td class="shuHeight1">19~21</td>
|
||
</tr>
|
||
<tr :class="curIndex == 13 ? 'cur' :''">
|
||
<td class="shuHeight1">21~23</td>
|
||
</tr>
|
||
</table>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-x class="border-right" style="width: 85%;">
|
||
<view class="d-table scroll-x">
|
||
<table border style="width: 600px; background-color: antiquewhite;" cellspacing="0">
|
||
<tr class="tableTh">
|
||
<!-- <td colspan="1" class=""></td> -->
|
||
<td class="oneHeight" colspan="2">灵龟八法</td>
|
||
<td class="oneHeight" colspan="2">飞腾八法</td>
|
||
<td class="oneHeight" colspan="5">子午流注</td>
|
||
</tr>
|
||
<tr class="tableTh">
|
||
<!-- <td colspan="1" rowspan="2" class=""></td> -->
|
||
<td class="" rowspan="2" style="height: 100rpx;">开穴</td>
|
||
<td class="" rowspan="2" style="height: 100rpx;">合穴</td>
|
||
<td class="" rowspan="2" style="height: 100rpx;">开穴</td>
|
||
<td class="" rowspan="2" style="height: 100rpx;">合穴</td>
|
||
<td class="" rowspan="2" style="height: 100rpx;">子午纳干</td>
|
||
<td colspan="4">子午纳子</td>
|
||
</tr>
|
||
<!-- </td>
|
||
</tr> -->
|
||
<tr class="tableTh">
|
||
<td class="">补法</td>
|
||
<td class="">泄法</td>
|
||
<td class="">过时泄本</td>
|
||
<td class="">过时补原</td>
|
||
</tr>
|
||
<tr v-for="(item,index) in quxue" :key="index" :class="item.now ? 'cur' : ''">
|
||
<td class="shuHeight "><text class="verticalRl"
|
||
:style="{color: getHightLightColor(item.lgbf.KX)}">{{item.lgbf.KX}}</text></td>
|
||
<td class="shuHeight "><text class="verticalRl"
|
||
:style="{color: getHightLightColor(item.lgbf.HX)}">{{item.lgbf.HX}}</text></td>
|
||
<td class="shuHeight "><text class="verticalRl"
|
||
:style="{color: getHightLightColor(item.ftbf.KX)}">{{item.ftbf.KX}}</text></td>
|
||
<td class="shuHeight "><text class="verticalRl"
|
||
:style="{color: getHightLightColor(item.ftbf.HX)}">{{item.ftbf.HX}}</text></td>
|
||
<td class="shuHeight ">
|
||
<view class="flexbox" v-if="item.zwlz.ngf.length > 0"
|
||
style="justify-content: space-evenly;align-items: center; align-content: center;">
|
||
<text class="verticalRl" :style="{color: getHightLightColor(item1)}"
|
||
v-for="(item1,index1) in item.zwlz.ngf" :key="index1">{{item1}}</text>
|
||
|
||
</view>
|
||
</td>
|
||
|
||
<td class="shuHeight">
|
||
<text class="verticalRl"
|
||
:style="{color: getHightLightColor(item.zwlz.nzf.bf)}">{{item.zwlz.nzf.bf}}</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl"
|
||
:style="{color: getHightLightColor(item.zwlz.nzf.xf)}">{{item.zwlz.nzf.xf}}</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl"
|
||
:style="{color: getHightLightColor(item.zwlz.nzf.gsxb)}">{{item.zwlz.nzf.gsxb}}</text>
|
||
</td>
|
||
<td class="shuHeight">
|
||
<text class="verticalRl"
|
||
:style="{color: getHightLightColor(item.zwlz.nzf.gsbf)}">{{item.zwlz.nzf.gsbf}}</text>
|
||
</td>
|
||
</tr>
|
||
|
||
</table>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="centerBox">
|
||
注：表中带* 者是原穴
|
||
</view>
|
||
<music-play :playData="playData"></music-play>
|
||
<z-navigation></z-navigation>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import musicPlay from '@/components/music.vue'
|
||
import $http from '@/config/requestConfig.js';
|
||
|
||
function formatDateTime(time) {
|
||
var date = new Date(time);
|
||
var y = date.getFullYear();
|
||
var m = date.getMonth() + 1;
|
||
m = m < 10 ? ('0' + m) : m;
|
||
var d = date.getDate();
|
||
d = d < 10 ? ('0' + d) : d;
|
||
var h = date.getHours();
|
||
h = h < 10 ? ('0' + h) : h;
|
||
var minute = date.getMinutes();
|
||
var second = date.getSeconds();
|
||
minute = minute < 10 ? ('0' + minute) : minute;
|
||
second = second < 10 ? ('0' + second) : second;
|
||
|
||
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
|
||
};
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
playData: {},
|
||
curIndex: null,
|
||
pageWidth: uni.getSystemInfoSync().windowWidth,
|
||
pageHeight: uni.getSystemInfoSync().windowHeight - 200,
|
||
fiveYunNum: 5,
|
||
// date: new Date().toISOString().slice(0, 10), // 只返回年月日
|
||
date: new Date().getTime(), // 返回年月日带时间
|
||
dateToString: formatDateTime(new Date()), // 字符串格式的日期
|
||
timestamp: Date.now() - 2 * 24 * 3600 * 1000, // 时间戳
|
||
showCalendar: false,
|
||
quxue: [], // 时辰取穴
|
||
tiangandizhi: {},
|
||
yuanXue: [
|
||
'腕骨', '丘墟', '丘墟', '太溪', '大陵', '京骨', '阳池', '太渊', '合谷', '太白', '冲阳', '神门'
|
||
],
|
||
}
|
||
},
|
||
onLoad() {
|
||
let da = new Date().toISOString().slice(0, 10)
|
||
this.timestamp = new Date(da).getTime()
|
||
console.log('初始时间', this.dateToString, this.date)
|
||
this.getXueWei(this.dateToString)
|
||
this.getTGDZ(this.dateToString)
|
||
},
|
||
|
||
onHide() {
|
||
|
||
},
|
||
methods: {
|
||
scroll: function(e) {},
|
||
// 设置文字颜色
|
||
getHightLightColor(text) {
|
||
if (text.indexOf('*') != -1) {
|
||
return "#9c3211"
|
||
}
|
||
},
|
||
// 获取天干地支
|
||
getTGDZ(date) {
|
||
let that = this
|
||
$http.request({
|
||
url: "book/point/TGDZForYear",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
"date": date
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
console.log('天干地支', res.tgdz)
|
||
this.tiangandizhi = res.tgdz
|
||
}
|
||
|
||
}).catch(e => {
|
||
console.log(e, 'e')
|
||
});
|
||
},
|
||
// 获取时辰取穴
|
||
getXueWei(date) {
|
||
let that = this
|
||
$http.request({
|
||
url: "book/point/SCQX",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
"date": date
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0 && res.flag.length > 0) {
|
||
console.log('时辰取穴', res.flag)
|
||
this.quxue = res.flag
|
||
this.curIndex = res.flag.findIndex(function(item) {
|
||
return item.now == true
|
||
})
|
||
this.curIndex = this.curIndex + 2
|
||
console.log(this.curIndex, 'this.curIndex')
|
||
}
|
||
|
||
}).catch(e => {
|
||
this.curIndex = null
|
||
console.log(e, 'e')
|
||
});
|
||
},
|
||
// checkAdult(item) {
|
||
// return item.now == true
|
||
// },
|
||
changeLog(e) {
|
||
console.log('change事件:', e);
|
||
let ss = e.slice(0, 10)
|
||
this.timestamp = new Date(ss).getTime()
|
||
this.dateToString = e
|
||
this.getXueWei(e)
|
||
this.getTGDZ(e)
|
||
},
|
||
},
|
||
|
||
components: {
|
||
musicPlay
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './scss/common.scss';
|
||
|
||
.leftBar {
|
||
td {
|
||
font-weight: bold;
|
||
color: #a84a2d;
|
||
}
|
||
}
|
||
|
||
tr.cur {
|
||
background-color: #e7a896;
|
||
color: #fff;
|
||
|
||
td {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.tableTh {
|
||
background-color: #fbd5ca;
|
||
font-weight: bold;
|
||
color: #a84a2d;
|
||
}
|
||
|
||
.shuHeight {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.shuHeight1 {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.verticalRl {
|
||
writing-mode: vertical-rl;
|
||
}
|
||
|
||
.oneHeight {
|
||
height: 50rpx;
|
||
}
|
||
|
||
.twoHeight {
|
||
height: 94rpx;
|
||
}
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
table td {
|
||
border-bottom: 1px solid #a84a2d;
|
||
border-right: 1px solid #a84a2d;
|
||
}
|
||
|
||
table tr:first-child td {
|
||
border-top: 1px solid #a84a2d;
|
||
}
|
||
|
||
table tr td:first-child {
|
||
border-left: 1px solid #a84a2d;
|
||
}
|
||
|
||
td {
|
||
padding: 8rpx 10rpx;
|
||
}
|
||
|
||
.oneWidth {
|
||
width: 124rpx;
|
||
}
|
||
|
||
/deep/ .uni-table-th {
|
||
padding: 14rpx 20rpx
|
||
}
|
||
|
||
* {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.centerBox {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.yinli {
|
||
line-height: 50rpx;
|
||
|
||
text {
|
||
writing-mode: vertical-rl;
|
||
letter-spacing: 20rpx;
|
||
color: #c06346;
|
||
}
|
||
}
|
||
|
||
.box1 {
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
justify-content: space-between; align-items: center;
|
||
|
||
.yunqi {
|
||
color: #c06346;
|
||
text-align: right;
|
||
|
||
.shu {
|
||
text {
|
||
writing-mode: vertical-rl;
|
||
line-height: 60rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.grayBg {
|
||
background-color: #eee;
|
||
}
|
||
|
||
.scroll-view_H {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
|
||
.leftone {
|
||
|
||
border-left: 1px solid #ddd;
|
||
}
|
||
|
||
.row {
|
||
display: inline-block;
|
||
text-align: center;
|
||
background-color: #fef9e4;
|
||
border-right: 1px solid #ddd;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
.row.cur {
|
||
background-color: #8d3d16;
|
||
color: #fff;
|
||
position: relative;
|
||
border-right: 0;
|
||
z-index: 5;
|
||
box-shadow: 0 0 10px #8d3d16;
|
||
}
|
||
|
||
.line {
|
||
padding: 20rpx;
|
||
border-top: 1px solid #ddd;
|
||
|
||
span {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
|
||
.line1 {
|
||
font-size: 24rpx;
|
||
height: 200rpx;
|
||
writing-mode: vertical-rl;
|
||
;
|
||
}
|
||
|
||
.zhuyun {
|
||
color: #8d3d16;
|
||
background-color: #faede7;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.keyun {
|
||
color: #c06346;
|
||
background-color: #fceeed;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.container88 {
|
||
padding: 10rpx;
|
||
|
||
background-color: #fff;
|
||
padding-bottom: 70rpx;
|
||
}
|
||
|
||
.datetimeBox {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.liuqiBox {
|
||
.line.keyun {
|
||
padding: 60rpx 10rpx
|
||
}
|
||
}
|
||
|
||
.wuYunBox {
|
||
.row {
|
||
width: 20%;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
/deep/ .uni-calendar__content-mobile {
|
||
bottom: 100rpx !important;
|
||
}
|
||
|
||
.sizai {
|
||
.keyun {
|
||
position: relative;
|
||
}
|
||
|
||
.keyun::after {
|
||
position: absolute;
|
||
content: '';
|
||
top: 24rpx;
|
||
left: 0;
|
||
font-size: 24rpx;
|
||
display: block;
|
||
width: 100%;
|
||
color: #888;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
|
||
.sizai1 {
|
||
.keyun::after {
|
||
content: '（司天）';
|
||
}
|
||
}
|
||
|
||
.sizai2 {
|
||
.keyun::after {
|
||
content: '（在泉）';
|
||
}
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
</style> |