10個のファイルの変更、1838行の追加、1196行の削除
+ 1
- 0
package.json
ファイルの表示
| @@ -22,6 +22,7 @@ | |||
| "js-base64": "^2.5.2", | |||
| "regenerator-runtime": "^0.13.5", | |||
| "vant": "^2.12.48", | |||
| "vconsole": "^3.15.1", | |||
| "vue": "^2.7.8", | |||
| "vue-router": "^3.5.4", | |||
| "vuex": "^3.6.2", | |||
+ 23
- 0
src/api/psychological.js
ファイルの表示
| @@ -0,0 +1,23 @@ | |||
| import axios from 'axios'; | |||
| import prefix from '@/store/prefix'; | |||
| import { PsyBaseUrl } from '@/config/models'; | |||
| const service = axios.create({ | |||
| baseURL: PsyBaseUrl | |||
| }); | |||
| service.interceptors.request.use(request => { | |||
| if (localStorage.getItem(prefix + 'ssjlToken')) { | |||
| request.headers.AccessToken = localStorage.getItem(prefix + 'ssjlToken'); | |||
| } | |||
| return request; | |||
| }); | |||
| export const APIPsy = { | |||
| getHomeData | |||
| }; | |||
| export default APIPsy; | |||
| function getHomeData(data) { | |||
| return service({ | |||
| url: `/api/Data/GetHomeData`, | |||
| method: 'get', | |||
| params: data | |||
| }); | |||
| } | |||
+ 19
- 1
src/main.js
ファイルの表示
| @@ -18,13 +18,31 @@ import '@/plugins/vant'; | |||
| import '@/assets/css/index.scss'; | |||
| // 移动端适配 | |||
| import 'amfe-flexible'; | |||
| import VConsole from 'vconsole'; | |||
| Vue.prototype.$dayjs = dayjs; | |||
| Vue.prototype.$echarts = echarts; | |||
| Vue.prototype.$store = store; | |||
| Vue.prototype.$own = own; | |||
| Vue.prototype.$axios = request; | |||
| Vue.prototype.$green = '#189b3b'; | |||
| // 判断是否是pc设备 | |||
| const isPc = () => { | |||
| const userAgentInfo = navigator.userAgent; | |||
| const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']; | |||
| let flag = true; | |||
| for (let v = 0; v < Agents.length; v++) { | |||
| if (userAgentInfo.indexOf(Agents[v]) > 0) { | |||
| flag = false; | |||
| break; | |||
| } | |||
| } | |||
| return flag; | |||
| }; | |||
| //如果不是生产环境并且不是pc设备那么就显示调试 | |||
| if (process.env.NODE_ENV == 'test' && !isPc()) { | |||
| // eslint-disable-next-line no-unused-vars | |||
| const vConsole = new VConsole(); | |||
| } | |||
| // filters | |||
| import './filters'; | |||
| Vue.config.productionTip = false; | |||
+ 16
- 4
src/views/insight/index.vue
ファイルの表示
| @@ -152,6 +152,7 @@ | |||
| <script> | |||
| import DateSwitch from '@/components/DateSwitch.vue'; | |||
| import { format, startOfMonth, endOfMonth } from 'date-fns'; | |||
| export default { | |||
| components: { | |||
| DateSwitch | |||
| @@ -249,7 +250,8 @@ export default { | |||
| }, | |||
| upImg: require('@/assets/today/icons/up.png'), | |||
| downImg: require('@/assets/today/icons/down.png'), | |||
| date: '' | |||
| date: '', | |||
| monthDate: {} | |||
| }; | |||
| }, | |||
| created() {}, | |||
| @@ -259,8 +261,6 @@ export default { | |||
| watch: { | |||
| active(val) { | |||
| console.log(val); | |||
| /* this.emotionActive = 0; | |||
| this.signActive = 0; */ | |||
| this.$nextTick(() => { | |||
| this.initData(); | |||
| this.initEmotionChart(); | |||
| @@ -317,7 +317,19 @@ export default { | |||
| updateDate(value) { | |||
| console.log('组件原始值', value); | |||
| this.date = this.active == 0 ? value.replace('~', '-') : value; | |||
| console.log('接口所需要的值', this.date); | |||
| if (this.active == 1) { | |||
| this.getMonthStaEnd(this.date); | |||
| } | |||
| console.log('接口所需要的值', this.date, '如果是月', this.monthDate); | |||
| }, | |||
| getMonthStaEnd(value) { | |||
| const dateObj = {}; | |||
| const start = startOfMonth(value); | |||
| const end = endOfMonth(value); | |||
| dateObj.start = format(start, 'yyyy-MM-dd'); | |||
| dateObj.end = format(end, 'yyyy-MM-dd'); | |||
| this.monthDate = { ...dateObj }; | |||
| }, | |||
| initData() { | |||
| //初始化图表 | |||
+ 3
- 2
src/views/login/login.vue
ファイルの表示
| @@ -68,13 +68,14 @@ export default { | |||
| created() {}, | |||
| mounted() { | |||
| // TODO 获取code再拿code获取openId | |||
| // this.getCode(); | |||
| this.getCode(); | |||
| }, | |||
| methods: { | |||
| getCode() { | |||
| let url = window.location.href; | |||
| if (url.indexOf('code') > -1) { | |||
| let codeUrl = window.location.href.split('?code='); | |||
| console.log('获取code的url', codeUrl); | |||
| if (codeUrl) { | |||
| let timeStamp = new Date().getTime(); | |||
| let code = codeUrl[1].split('&')[0]; | |||
| @@ -129,7 +130,7 @@ export default { | |||
| this.countDown(); | |||
| } | |||
| if (item.stateCode === 0 && item.code === null) { | |||
| // this.notify('请勿频繁获取，验证码5分钟内有效'); | |||
| //this.notify('请勿频繁获取，验证码5分钟内有效'); | |||
| NotifyService.notify({ message: item.message }); | |||
| } | |||
| }) | |||
+ 77
- 190
src/views/today/emotionDetails.vue
ファイルの表示
| @@ -1,6 +1,6 @@ | |||
| <template> | |||
| <div class="psychological-container"> | |||
| <NavBar title="月报" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar> | |||
| <NavBar title="心理监测" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar> | |||
| <div class="tab-bar"> | |||
| <div class="date-tab-con"> | |||
| <div class="date-tab-list"> | |||
| @@ -19,6 +19,22 @@ | |||
| </div> | |||
| <div class="main" v-show="current !== 3"> | |||
| <div class="tab-bar"> | |||
| <div class="date-tab-con"> | |||
| <div class="date-tab-list"> | |||
| <div | |||
| :class="['date-tab-item', { active: current === index, notClick: false }]" | |||
| @click="onTabClick(item.value, index)" | |||
| v-for="(item, index) in dateList" | |||
| :key="index" | |||
| > | |||
| <img :src="tabImgUrl" alt v-if="index == 3" /> | |||
| <span>{{ item.text }}</span> | |||
| <img class="more" :src="selectDownImg" alt v-if="index == 3" /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="top"> | |||
| <!-- 日期选择 --> | |||
| <!-- 标题 --> | |||
| @@ -138,20 +154,13 @@ | |||
| <div class="echart"> | |||
| <EchartBox | |||
| echartId="charts" | |||
| outTitle="压力数据图" | |||
| :outTitle="emoLegend.outTitle" | |||
| height="200" | |||
| width="200" | |||
| :legend="emoLegend" | |||
| :options="emoOptions" | |||
| :options="defaultOptions" | |||
| ></EchartBox> | |||
| </div> | |||
| <!-- <EchartBox | |||
| echartId="charts" | |||
| outTitle="压力数据图" | |||
| height="300" | |||
| :legend="emoLegend" | |||
| :options="emoOptions" | |||
| ></EchartBox> --> | |||
| </div> | |||
| <div class="line-gray"></div> | |||
| @@ -197,9 +206,14 @@ | |||
| <div class="title"> | |||
| <span class="title-text">{{ surveyTitle }}</span> | |||
| <div class="mood-list" v-if="emotionList.length > 0"> | |||
| <div class="item" v-for="(item, index) in emotionList" :key="index"> | |||
| <div | |||
| class="item" | |||
| v-for="(item, index) in emotionList" | |||
| :key="index" | |||
| :style="{ backgroundColor: item.color }" | |||
| > | |||
| <p> | |||
| <span :style="{ color: item.color }" class="day">{{ item.days }}</span> | |||
| <span class="day">{{ item.days }}</span> | |||
| <span class="day-text">天</span> | |||
| </p> | |||
| @@ -282,6 +296,7 @@ import { EmotionModel, PsyBaseUrl } from '@/config/models'; | |||
| import EchartBox from '@/components/EchartBox'; | |||
| import NavBar from '@/components/NavBar'; | |||
| import axios from 'axios'; | |||
| import ToastService from '@/services/toast-service'; | |||
| export default { | |||
| name: 'psychological-monitor', | |||
| components: { | |||
| @@ -290,16 +305,6 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| emoLegend: { | |||
| title: '', | |||
| list: [ | |||
| { name: '无压力倾向', color: '#179b3b' }, | |||
| { name: '轻度压力倾向', color: '#8dc21f' }, | |||
| { name: '中度压力倾向', color: '#2ea7e0' }, | |||
| { name: '重度压力倾向', color: '#ff5f8b' } | |||
| ] | |||
| }, | |||
| // 日期选择标签 | |||
| dateList: [ | |||
| { name: 'today', text: '今天', value: 0 }, | |||
| @@ -429,145 +434,31 @@ export default { | |||
| }; | |||
| }, | |||
| computed: { | |||
| // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title | |||
| emoOptions() { | |||
| emoLegend() { | |||
| return { | |||
| grid: { | |||
| top: '10%', | |||
| left: '10%', | |||
| right: '10%', | |||
| bottom: '20%' | |||
| }, | |||
| xAxis: { | |||
| type: 'category', | |||
| axisLine: { | |||
| show: false | |||
| }, | |||
| textStyle: { | |||
| fontSize: 10 | |||
| }, | |||
| axisTick: { | |||
| show: false | |||
| }, | |||
| nameLocation: 'left', | |||
| axisLabel: { | |||
| show: true, | |||
| fontSize: 12, | |||
| showMinLabel: true, //显示最小值 | |||
| showMaxLabel: true //显示最大值 | |||
| }, | |||
| data: ['6:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'] | |||
| }, | |||
| yAxis: { | |||
| type: 'value' | |||
| }, | |||
| series: [ | |||
| { | |||
| type: 'line', | |||
| data: this.emotionDataNew, | |||
| symbol: 'circle', | |||
| symbolSize: 12, | |||
| smooth: true, | |||
| itemStyle: { | |||
| normal: { | |||
| color: '#fff', | |||
| borderWidth: 2, | |||
| lineStyle: { | |||
| width: 6, | |||
| type: 'solid', | |||
| color: '#189b3b' | |||
| } | |||
| } | |||
| } | |||
| } | |||
| title: '', | |||
| outTitle: `${this.emoName}数据图`, | |||
| list: [ | |||
| { name: `无${this.emoName}倾向`, color: '#179b3b' }, | |||
| { name: `轻度${this.emoName}倾向`, color: '#8dc21f' }, | |||
| { name: `中度${this.emoName}倾向`, color: '#2ea7e0' }, | |||
| { name: `重度${this.emoName}倾向`, color: '#ff5f8b' } | |||
| ] | |||
| }; | |||
| }, | |||
| // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title | |||
| defaultOptions() { | |||
| return { | |||
| time: { | |||
| useUTC: false | |||
| }, | |||
| title: { | |||
| text: this.echartsTitle, | |||
| left: 1, | |||
| right: 25, | |||
| bottom: 20, | |||
| top: '3%', | |||
| textStyle: { | |||
| fontSize: 16, | |||
| fontWeight: 'bold' | |||
| } | |||
| }, | |||
| legend: { | |||
| width: '65%', | |||
| orient: 'horizontal', | |||
| right: 'right', | |||
| top: 1, | |||
| bottom: '1%', | |||
| itemHeight: 12, | |||
| itemWidth: 12, | |||
| itemGap: 10, | |||
| align: 'left', | |||
| selectedMode: false, | |||
| data: [ | |||
| { | |||
| name: `轻度${this.emoName}倾向`, | |||
| icon: 'rect', | |||
| itemStyle: { | |||
| color: '#8dc21f' | |||
| }, | |||
| textStyle: { | |||
| fontSize: 12 | |||
| } | |||
| }, | |||
| { | |||
| name: `中度${this.emoName}倾向`, | |||
| itemStyle: { | |||
| color: '#2ea7e0' | |||
| }, | |||
| icon: 'rect', | |||
| textStyle: { | |||
| fontSize: 12 | |||
| } | |||
| }, | |||
| { | |||
| name: `重度${this.emoName}倾向`, | |||
| itemStyle: { | |||
| color: '#ff5f8b' | |||
| }, | |||
| icon: 'rect', | |||
| textStyle: { | |||
| fontSize: 12 | |||
| } | |||
| }, | |||
| { | |||
| name: `无${this.emoName}倾向`, | |||
| icon: 'rect', | |||
| itemStyle: { | |||
| color: '#179b3b' | |||
| }, | |||
| textStyle: { | |||
| fontSize: 12 | |||
| } | |||
| } | |||
| ], | |||
| formatter: function (name) { | |||
| // 自定义显示内容 | |||
| if (name.length > 6) { | |||
| return name.substring(0, 6) + '\n' + name.substring(6); | |||
| } else { | |||
| return name; | |||
| } | |||
| } | |||
| }, | |||
| grid: { | |||
| show: true, | |||
| borderWidth: 1, | |||
| top: '20%', | |||
| borderWidth: 0, | |||
| top: '3%', | |||
| left: '1%', | |||
| right: '5%', | |||
| bottom: '10%', | |||
| right: '3%', | |||
| bottom: '15%', | |||
| containLabel: true | |||
| }, | |||
| xAxis: { | |||
| @@ -611,8 +502,8 @@ export default { | |||
| fontSize: 14 | |||
| }, | |||
| show: true, | |||
| height: 15, | |||
| bottom: 5, | |||
| height: 20, | |||
| bottom: 4, | |||
| handleStyle: { | |||
| borderWidth: 1, | |||
| borderCap: 'square' | |||
| @@ -639,16 +530,16 @@ export default { | |||
| nameTextStyle: { | |||
| fontSize: 13 | |||
| }, | |||
| alignTicks: true, | |||
| alignTicks: false, | |||
| axisTick: { | |||
| show: true | |||
| show: false | |||
| }, | |||
| axisLabel: { | |||
| show: true, | |||
| fontSize: 13 | |||
| }, | |||
| splitLine: { | |||
| show: true, | |||
| show: false, | |||
| lineStyle: { | |||
| color: '#ddd', | |||
| width: 1 | |||
| @@ -713,7 +604,7 @@ export default { | |||
| series: [ | |||
| { | |||
| type: 'pie', | |||
| radius: ['40%', '80%'], | |||
| radius: ['40%', '90%'], | |||
| avoidLabelOverlap: false, | |||
| startAngle: 270, // 设置逆时针渲染 | |||
| itemStyle: { | |||
| @@ -816,9 +707,8 @@ export default { | |||
| // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪 | |||
| this.loadParams(); | |||
| this.initEchartText(); | |||
| this.getPieData(); | |||
| this.getCalendarData(); | |||
| this.getPsychologiclData('2023-11-21'); | |||
| this.getPsychologiclData(); | |||
| this.createList(); | |||
| //this.getWeekResult(); | |||
| }, | |||
| @@ -951,7 +841,7 @@ export default { | |||
| }, | |||
| // 获取情绪数据 | |||
| getPsychologiclData(date, startDate, endDate) { | |||
| this.$toast.loading({ | |||
| ToastService.loading({ | |||
| message: '数据加载中' | |||
| }); | |||
| let reqDate = date | |||
| @@ -1114,7 +1004,7 @@ export default { | |||
| { | |||
| name: '平均值', | |||
| type: 'scatter', | |||
| symbolSize: 8, | |||
| symbolSize: 14, | |||
| data: this.emotionData | |||
| }, | |||
| { | |||
| @@ -1122,15 +1012,15 @@ export default { | |||
| type: 'custom', | |||
| data: this.weekAndMonData, | |||
| renderItem: function (params, api) { | |||
| var categoryIndex = api.value(0); | |||
| var end = api.coord([categoryIndex, api.value(1)]); | |||
| var start = api.coord([categoryIndex, api.value(2)]); | |||
| var width = 8; | |||
| var rectShape = that.$echarts.graphic.clipRectByRect( | |||
| let categoryIndex = api.value(0); | |||
| let end = api.coord([categoryIndex, api.value(1)]); | |||
| let start = api.coord([categoryIndex, api.value(2)]); | |||
| let width = 16; | |||
| let rectShape = that.$echarts.graphic.clipRectByRect( | |||
| { | |||
| x: start[0] - width / 2, | |||
| y: start[1], | |||
| width: 8, | |||
| width: 16, | |||
| height: end[1] - start[1] | |||
| }, | |||
| { | |||
| @@ -1162,25 +1052,25 @@ export default { | |||
| { | |||
| name: `轻度${this.emoName}倾向`, | |||
| type: 'scatter', | |||
| symbolSize: 8, | |||
| symbolSize: 12, | |||
| data: '' | |||
| }, | |||
| { | |||
| name: `中度${this.emoName}倾向`, | |||
| type: 'scatter', | |||
| symbolSize: 8, | |||
| symbolSize: 12, | |||
| data: '' | |||
| }, | |||
| { | |||
| name: `重度${this.emoName}倾向`, | |||
| type: 'scatter', | |||
| symbolSize: 8, | |||
| symbolSize: 12, | |||
| data: '' | |||
| }, | |||
| { | |||
| name: `无${this.emoName}倾向`, | |||
| type: 'scatter', | |||
| symbolSize: 8, | |||
| symbolSize: 12, | |||
| data: '' | |||
| } | |||
| ]; | |||
| @@ -1215,17 +1105,14 @@ export default { | |||
| this.result = data.Result; | |||
| this.resultLevel = data.ResultLevel; | |||
| this.advice = data.Advice; | |||
| this.$toast.success({ | |||
| ToastService.success({ | |||
| message: '数据加载完成' | |||
| }); | |||
| } | |||
| }) | |||
| .catch(() => { | |||
| this.$dialog({ | |||
| message: '登录过期，请重新进入' | |||
| }); | |||
| }) | |||
| .finally(() => {}); | |||
| .catch(error => { | |||
| console.log(error); | |||
| }); | |||
| }, | |||
| // 计算百分比 | |||
| calcPercentage(value, total) { | |||
| @@ -1306,32 +1193,32 @@ export default { | |||
| this.current = index; | |||
| this.currentDays = value; | |||
| this.$store.commit('tabClick', index); | |||
| /* let currentDate = new Date(); */ | |||
| let currentDate = new Date(); | |||
| this.surveyTitle = value === 7 ? '7天概览' : '30天概览'; | |||
| if (value === 7) { | |||
| /* let dateList = this.getPostDate(currentDate, 6, true); */ | |||
| this.getPsychologiclData('', /* dateList[0] */ '2023-11-15', /* dateList[1] */ '2023-11-21'); | |||
| this.startDate = /* dateList[0] */ '2023-11-15'; | |||
| this.endDate = /* dateList[1] */ '2023-11-21'; | |||
| let dateList = this.getPostDate(currentDate, 6, true); | |||
| this.getPsychologiclData('', dateList[0] /* '2023-11-15' */ /* dateList[1] */ /* '2023-11-21' */); | |||
| this.startDate = dateList[0] /* '2023-11-15' */; | |||
| this.endDate = dateList[1] /* '2023-11-21' */; | |||
| } else if (value === 0) { | |||
| // 今天 | |||
| this.defaultOptions.xAxis.data = this.xAxisData; | |||
| this.defaultOptions.series = this.defaultSeries; | |||
| this.defaultOptions.series[0].data = this.emotionData; | |||
| this.getPsychologiclData( | |||
| this.selectDate ? this.selectDate : /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21' | |||
| this.selectDate ? this.selectDate : this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */ | |||
| ); | |||
| this.startDate = /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21'; | |||
| this.endDate = /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21'; | |||
| this.startDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */; | |||
| this.endDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */; | |||
| } else if (value === 30) { | |||
| // 30天 | |||
| this.defaultOptions.xAxis.data = this.xAxisData; | |||
| this.defaultOptions.series = this.defaultSeries; | |||
| this.defaultOptions.series[0].data = this.emotionData; | |||
| /* let dateList = this.getPostDate(currentDate, 30, true); */ | |||
| this.getPsychologiclData('', /* dateList[0] */ '2023-11-21', /* dateList[1] */ '2023-12-21'); | |||
| this.startDate = /* dateList[0] */ '2023-11-21'; | |||
| this.endDate = /* dateList[1] */ '2023-12-21'; | |||
| let dateList = this.getPostDate(currentDate, 30, true); | |||
| this.getPsychologiclData('', dateList[0] /* '2023-11-21' */, dateList[1] /* '2023-12-21' */); | |||
| this.startDate = dateList[0] /* '2023-11-21' */; | |||
| this.endDate = dateList[1] /* '2023-12-21' */; | |||
| } else { | |||
| // 周报菜单 | |||
| this.getWeekResult(); | |||
| @@ -1473,7 +1360,7 @@ export default { | |||
| this.isPopup = false; | |||
| }, | |||
| getWeekResult() { | |||
| this.$toast.loading('数据加载中'); | |||
| ToastService.loading('数据加载中'); | |||
| let baseUrl = | |||
| process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart'; | |||
| let reqUrl = `${baseUrl}/api/Data/GetWeekResult`; | |||
| @@ -1500,7 +1387,7 @@ export default { | |||
| }; | |||
| }) | |||
| .reverse(); | |||
| this.$toast.success('数据加载完成'); | |||
| ToastService.success('数据加载完成'); | |||
| }); | |||
| }, | |||
| onClickItem(recordId) { | |||
+ 64
- 5
src/views/today/index.vue
ファイルの表示
| @@ -35,12 +35,12 @@ | |||
| <div class="title" @click="onRouterTo('emotionDetails')"> | |||
| <p>今日情绪感知</p> | |||
| <div> | |||
| <p>4.28</p> | |||
| <p>{{ now }}</p> | |||
| <van-icon name="arrow" size="18" /> | |||
| </div> | |||
| </div> | |||
| <ul> | |||
| <li> | |||
| <!-- <li> | |||
| <h4>40</h4> | |||
| <p>疲劳倾向</p> | |||
| <span>无疲劳倾向</span> | |||
| @@ -57,6 +57,12 @@ | |||
| <p>焦虑倾向</p> | |||
| <span>无焦虑倾向</span> | |||
| <time>12:30</time> | |||
| </li> --> | |||
| <li v-for="(item, index) in psyDataList" :key="index"> | |||
| <h4>{{ item.value || '--' }}</h4> | |||
| <p>{{ item.name || '--' }}</p> | |||
| <span>{{ item.result || '--' }}</span> | |||
| <time>{{ item.time || '--' }}</time> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| @@ -65,7 +71,7 @@ | |||
| <div class="title" @click="onRouterTo('signsDetails')"> | |||
| <p>今体征感知</p> | |||
| <div> | |||
| <p>4.28</p> | |||
| <p>{{ now }}</p> | |||
| <van-icon name="arrow" size="18" /> | |||
| </div> | |||
| </div> | |||
| @@ -200,6 +206,7 @@ | |||
| import TabBar from '@/components/TabBar'; | |||
| import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant'; | |||
| import APICore from '@/api/core'; | |||
| import APIPsy from '@/api/psychological'; | |||
| export default { | |||
| components: { | |||
| TabBar, | |||
| @@ -216,14 +223,66 @@ export default { | |||
| maxDate: new Date(2023, 12, 18), | |||
| currentRate1: 0, | |||
| currentRate2: 0, | |||
| result: [] | |||
| result: [], | |||
| uid: '2023101521270090082', | |||
| psyDataList: [] | |||
| }; | |||
| }, | |||
| computed: { | |||
| now() { | |||
| return this.$dayjs(new Date()).format('MM.DD'); | |||
| } | |||
| }, | |||
| created() { | |||
| this.getAuth(); | |||
| }, | |||
| mounted() {}, | |||
| mounted() { | |||
| this.getHomeData(); | |||
| }, | |||
| methods: { | |||
| // 获取首页情绪数据 | |||
| getHomeData() { | |||
| let reqParams = { | |||
| uid: this.uid, | |||
| date: this.$dayjs(new Date()).format('YYYY-MM-DD') /* '2023-11-21' */ | |||
| }; | |||
| APIPsy.getHomeData(reqParams).then(res => { | |||
| const data = res.data.response; | |||
| if (!data) { | |||
| return this.$toast.fail(res.data.msg); | |||
| } | |||
| this.psyDataList = [ | |||
| // 2023.12.5 修改菜单顺序 | |||
| // 疲劳指数 | |||
| { | |||
| value: data.TirScore, | |||
| name: '疲劳指数', | |||
| class: 'tiredness', | |||
| result: data.TirDesc, | |||
| time: data.TirMeasureUpdateTime ? this.$dayjs(data.TirMeasureUpdateTime).format('HH:mm') : '', | |||
| level: data.TirLevel | |||
| }, | |||
| // 压力指数 | |||
| { | |||
| value: data.StressScore, | |||
| name: '压力指数', | |||
| class: 'stress', | |||
| result: data.StressDesc, | |||
| time: data.StressMeasureUpdateTime ? this.$dayjs(data.StressMeasureUpdateTime).format('HH:mm') : '', | |||
| level: data.StressLevel | |||
| }, | |||
| // 抑郁 | |||
| { | |||
| value: data.DepScore, | |||
| name: '抑郁指数', | |||
| class: 'depression', | |||
| result: data.DepDesc, | |||
| time: data.DepMeasureUpdateTime ? this.$dayjs(data.DepMeasureUpdateTime).format('HH:mm') : '', | |||
| level: data.DepLevel | |||
| } | |||
| ]; | |||
| }); | |||
| }, | |||
| formatDate(date) { | |||
| return `${date.getMonth() + 1}/${date.getDate()}`; | |||
| }, | |||
+ 486
- 505
src/views/today/scss/emotion-details.scss
ファイル差分が大きすぎるため省略します
ファイルの表示
+ 430
- 350
src/views/today/scss/signs-details.scss
ファイルの表示
| @@ -1,224 +1,225 @@ | |||
| .signs { | |||
| min-height: 100vh; | |||
| width: 100%; | |||
| overflow: hidden; | |||
| background-color: #fff; | |||
| .main { | |||
| min-height: 100vh; | |||
| width: 100%; | |||
| overflow: hidden; | |||
| background-color: #fff; | |||
| .main { | |||
| position: relative; | |||
| height: calc(100vh - 100px); | |||
| overflow: scroll; | |||
| padding-top: 100px; | |||
| .date { | |||
| padding: 20px 40px; | |||
| color: #8b8b8b; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| /* justify-content: space-around; */ | |||
| .left { | |||
| font-size: 28px; | |||
| } | |||
| .right { | |||
| font-size: 32px; | |||
| } | |||
| } | |||
| .circle { | |||
| position: relative; | |||
| padding: 80px; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| .van-circle { | |||
| height: 200px !important; | |||
| width: 200px !important; | |||
| position: relative; | |||
| height: calc(100vh - 100px); | |||
| overflow: scroll; | |||
| .date { | |||
| padding: 20px 40px; | |||
| color: #8B8B8B; | |||
| .circle-text { | |||
| height: 100%; | |||
| padding: 0 20px; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| .left { | |||
| @include center(); | |||
| font-size: 62px; | |||
| color: #333; | |||
| } | |||
| .right { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| /* justify-content: space-around; */ | |||
| .left{ | |||
| font-size: 28px; | |||
| justify-content: flex-start; | |||
| align-self: center; | |||
| flex-direction: column; | |||
| img { | |||
| height: 50px; | |||
| width: 50px; | |||
| margin: 0 10px; | |||
| object-fit: contain; | |||
| } | |||
| .right { | |||
| font-size: 32px; | |||
| span { | |||
| font-size: 18px; | |||
| } | |||
| } | |||
| /* flex-direction: column; */ | |||
| } | |||
| .circle { | |||
| position: relative; | |||
| padding: 80px; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| .van-circle { | |||
| height: 200px !important; | |||
| width: 200px !important; | |||
| position: relative; | |||
| .circle-text { | |||
| height: 100%; | |||
| padding: 0 20px; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| .left { | |||
| @include center(); | |||
| font-size: 62px; | |||
| color: #333; | |||
| } | |||
| .right { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-self: center; | |||
| flex-direction: column; | |||
| img { | |||
| height: 50px; | |||
| width: 50px; | |||
| margin: 0 10px; | |||
| object-fit: contain; | |||
| } | |||
| span { | |||
| font-size: 18px; | |||
| } | |||
| } | |||
| /* flex-direction: column; */ | |||
| } | |||
| } | |||
| .circle-white { | |||
| position:absolute; | |||
| bottom: 78px; | |||
| right: 45%; | |||
| height: 50px; | |||
| width: 50px; | |||
| border: 2px solid; | |||
| border-radius: 50%; | |||
| background: #fff; | |||
| } | |||
| } | |||
| .circle-white { | |||
| position: absolute; | |||
| bottom: 78px; | |||
| right: 45%; | |||
| height: 50px; | |||
| width: 50px; | |||
| border: 2px solid; | |||
| border-radius: 50%; | |||
| background: #fff; | |||
| } | |||
| } | |||
| .progress { | |||
| position: relative; | |||
| flex: 1; | |||
| font-size: 30px; | |||
| padding: 0 40px; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .progress-circle { | |||
| position: absolute; | |||
| top: -12px; | |||
| left: 0; | |||
| height: 35px; | |||
| width: 35px; | |||
| background-color: #fff; | |||
| border-radius: 50%; | |||
| border: 12px solid; | |||
| z-index: 99; | |||
| } | |||
| .state-item { | |||
| width: 100%; | |||
| .state-line { | |||
| position: relative; | |||
| height: 30px; | |||
| font-size: 32px; | |||
| &.low { | |||
| border-top-left-radius: 20px; | |||
| border-bottom-left-radius: 20px; | |||
| } | |||
| &.blue { | |||
| background-color: $green; | |||
| } | |||
| &.hight { | |||
| background-color: $com_red; | |||
| border-top-right-radius: 20px; | |||
| border-bottom-right-radius: 20px; | |||
| } | |||
| } | |||
| .progress { | |||
| position: relative; | |||
| flex: 1; | |||
| font-size: 30px; | |||
| padding: 0 40px; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .progress-circle { | |||
| position: absolute; | |||
| top: -12px; | |||
| left: 0; | |||
| height: 35px; | |||
| width: 35px; | |||
| background-color: #fff; | |||
| border-radius: 50%; | |||
| border: 12px solid; | |||
| z-index: 99; | |||
| } | |||
| .state-item { | |||
| width: 100%; | |||
| .state-line { | |||
| position: relative; | |||
| height: 30px; | |||
| font-size: 32px; | |||
| &.low { | |||
| border-top-left-radius: 20px; | |||
| border-bottom-left-radius: 20px; | |||
| } | |||
| &.blue { | |||
| background-color: $green; | |||
| } | |||
| &.hight { | |||
| background-color: $com_red; | |||
| border-top-right-radius: 20px; | |||
| border-bottom-right-radius: 20px; | |||
| } | |||
| } | |||
| .state-text { | |||
| padding: 40px 0 40px 0; | |||
| @include center(); | |||
| color: #333; | |||
| font-weight: bold; | |||
| } | |||
| } | |||
| .state-text { | |||
| padding: 40px 0 40px 0; | |||
| @include center(); | |||
| color: #333; | |||
| font-weight: bold; | |||
| } | |||
| .statistics { | |||
| position: relative; | |||
| padding: 0px 28px 10px 28px; | |||
| .list { | |||
| flex: 1; | |||
| width: 100%; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| align-items: center; | |||
| font-size: 32px; | |||
| .item { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: flex-start; | |||
| width: 126px; | |||
| padding: 30px 60px 30px 20px; | |||
| /* height: px2rem(136); */ | |||
| flex-direction: column; | |||
| border: 1px solid $border_color; | |||
| border-radius: 30px; | |||
| color: #fff; | |||
| .top { | |||
| font-size: 24px; | |||
| } | |||
| .middle { | |||
| font-size: 48px; | |||
| /* padding: 10px; */ | |||
| } | |||
| .bottom { | |||
| font-size: 24px | |||
| } | |||
| .line { | |||
| height: 3px; | |||
| width: 100%; | |||
| margin: 5px 0; | |||
| background-color: #fff; | |||
| @include center(); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .statistics { | |||
| position: relative; | |||
| padding: 0px 28px 10px 28px; | |||
| .list { | |||
| flex: 1; | |||
| width: 100%; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| align-items: center; | |||
| font-size: 32px; | |||
| .item { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: flex-start; | |||
| width: 126px; | |||
| padding: 30px 60px 30px 20px; | |||
| /* height: px2rem(136); */ | |||
| flex-direction: column; | |||
| border: 1px solid $border_color; | |||
| border-radius: 30px; | |||
| color: #fff; | |||
| .top { | |||
| font-size: 24px; | |||
| } | |||
| .middle { | |||
| font-size: 48px; | |||
| /* padding: 10px; */ | |||
| } | |||
| .bottom { | |||
| font-size: 24px; | |||
| } | |||
| .line { | |||
| height: 3px; | |||
| width: 100%; | |||
| margin: 5px 0; | |||
| background-color: #fff; | |||
| @include center(); | |||
| } | |||
| } | |||
| .warn-tips { | |||
| padding: 40px 40px; | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| .left { | |||
| img { | |||
| height: 60px; | |||
| width: 60px; | |||
| object-fit: contain; | |||
| margin-right: 30px; | |||
| } | |||
| } | |||
| .right { | |||
| font-size: 28px; | |||
| .orange { | |||
| color: #edb21d; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .warn-tips { | |||
| padding: 40px 40px; | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| .left { | |||
| img { | |||
| height: 60px; | |||
| width: 60px; | |||
| object-fit: contain; | |||
| margin-right: 30px; | |||
| } | |||
| .tab-bar{ | |||
| padding: 20px 40px; | |||
| } | |||
| .right { | |||
| font-size: 28px; | |||
| .orange { | |||
| color: #edb21d; | |||
| } | |||
| } | |||
| } | |||
| .tab-bar { | |||
| padding: 20px; | |||
| position: relative; | |||
| .date-tab-con { | |||
| height: 50px; | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| background: #fff; | |||
| border-top-left-radius: 40px; | |||
| border-top-right-radius: 40px; | |||
| border-bottom-left-radius: 40px; | |||
| border-bottom-right-radius: 40px; | |||
| .date-tab-list { | |||
| display: flex; | |||
| justify-content: space-around; | |||
| align-items: center; | |||
| color: #fff; | |||
| flex: 1; | |||
| height: 50px; | |||
| .date-tab-item { | |||
| position: relative; | |||
| .date-tab-con { | |||
| height: 50px; | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| background: #fff; | |||
| border-top-left-radius: 40px; | |||
| border-top-right-radius: 40px; | |||
| border-bottom-left-radius: 40px; | |||
| border-bottom-right-radius: 40px; | |||
| .date-tab-list { | |||
| display: flex; | |||
| justify-content: space-around; | |||
| align-items: center; | |||
| color: #fff; | |||
| flex: 1; | |||
| height: 50px; | |||
| .date-tab-item { | |||
| position: relative; | |||
| margin: 0 8px; | |||
| height: 100%; | |||
| width: 100%; | |||
| border-radius: 40px; | |||
| color: #6D6D6D; | |||
| font-size: 28px; | |||
| font-weight: bold; | |||
| @include center(); | |||
| background-color: #e6e6e6; | |||
| img { | |||
| height: 50px; | |||
| width: 50px; | |||
| padding: 0 16px; | |||
| } | |||
| .more { | |||
| width: 20px; | |||
| height: 12px; | |||
| } | |||
| /* &.active::after { | |||
| margin: 0 8px; | |||
| height: 100%; | |||
| width: 100%; | |||
| border-radius: 40px; | |||
| color: #6d6d6d; | |||
| font-size: 28px; | |||
| font-weight: bold; | |||
| @include center(); | |||
| background-color: #e6e6e6; | |||
| img { | |||
| height: 50px; | |||
| width: 50px; | |||
| padding: 0 16px; | |||
| } | |||
| .more { | |||
| width: 20px; | |||
| height: 12px; | |||
| } | |||
| /* &.active::after { | |||
| content: ''; | |||
| width: 88px; | |||
| position: absolute; | |||
| @@ -227,20 +228,20 @@ | |||
| box-sizing: border-box; | |||
| border-bottom: 8px solid $green; | |||
| } */ | |||
| &.active { | |||
| color: #fff; | |||
| background-color: $green; | |||
| } | |||
| &.notClick { | |||
| background-color: $border_color; | |||
| color: #fff; | |||
| border: 1px solid #fff; | |||
| } | |||
| } | |||
| .date-tab-item:nth-child(3) { | |||
| border-right: 1px solid #E0E0E0; | |||
| } | |||
| /* .date-tab-item:first-child { | |||
| &.active { | |||
| color: #fff; | |||
| background-color: $green; | |||
| } | |||
| &.notClick { | |||
| background-color: $border_color; | |||
| color: #fff; | |||
| border: 1px solid #fff; | |||
| } | |||
| } | |||
| .date-tab-item:nth-child(3) { | |||
| border-right: 1px solid #e0e0e0; | |||
| } | |||
| /* .date-tab-item:first-child { | |||
| border-top-left-radius: 15px; | |||
| border-bottom-left-radius: 15px; | |||
| } | |||
| @@ -248,139 +249,218 @@ | |||
| border-top-right-radius: 15px; | |||
| border-bottom-right-radius: 15px; | |||
| } */ | |||
| } | |||
| img { | |||
| height: 50xp; | |||
| width: 50px; | |||
| object-fit: contain; | |||
| } | |||
| } | |||
| } | |||
| .top { | |||
| flex: 1; | |||
| .title { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| padding: 0px 32px 20px 26px; | |||
| font-size: 36px; | |||
| .title-left { | |||
| font-weight: bold; | |||
| .van-icon { | |||
| margin-left: 5px; | |||
| font-size: 18px; | |||
| } | |||
| } | |||
| } | |||
| .monitoring-count { | |||
| text-align: left; | |||
| padding: 6px 28px; | |||
| line-height: 40px; | |||
| p { | |||
| font-size: 24px; | |||
| color: #8b8b8b; | |||
| } | |||
| } | |||
| .pie-chart-con { | |||
| flex: 1; | |||
| padding: 10px 0 20px 0; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: flex-start; | |||
| .pie-chart-left { | |||
| position: relative; | |||
| height: 300px; | |||
| padding-left: 30px; | |||
| width: 35%; | |||
| @include center(); | |||
| #pieChart { | |||
| height: 212px; | |||
| width: 212px; | |||
| } | |||
| } | |||
| .pie-chart-right { | |||
| height: 300px; | |||
| width: 65%; | |||
| padding-right: 40px; | |||
| @include center(); | |||
| .list { | |||
| flex-direction: column; | |||
| .item { | |||
| width: 100%; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| font-size: 24px; | |||
| padding: 18px 0; | |||
| .item-left { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| padding-right: 20px; | |||
| .item-circle { | |||
| height: 24px; | |||
| width: 24px; | |||
| margin: 0 8px; | |||
| } | |||
| span { | |||
| font-size: 24px; | |||
| } | |||
| img { | |||
| height: 50xp; | |||
| width: 50px; | |||
| object-fit: contain; | |||
| .text { | |||
| color: #000; | |||
| font-size: 24px; | |||
| } | |||
| } | |||
| .item-right { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .line-chart-con { | |||
| height: 600px; | |||
| padding: 20px; | |||
| .line-chart { | |||
| height: 580px; | |||
| padding: 20px; | |||
| background-color:#fff; | |||
| border: 1px solid $com_light_green; | |||
| border-radius: 40px; | |||
| } | |||
| } | |||
| .echart-container { | |||
| flex: 1; | |||
| position: relative; | |||
| min-height: 600px; | |||
| background-color: #fff; | |||
| padding: 0 20px; | |||
| } | |||
| .bottom { | |||
| flex: 1; | |||
| .result { | |||
| padding: 20px 40px; | |||
| .result-con { | |||
| .title { | |||
| span { | |||
| font-size: 46px; | |||
| font-weight: bold; | |||
| } | |||
| } | |||
| .bottom { | |||
| flex: 1; | |||
| .result { | |||
| padding: 20px 40px; | |||
| .result-con { | |||
| .title { | |||
| span { | |||
| font-size: 46px; | |||
| font-weight: bold; | |||
| } | |||
| } | |||
| .status { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| align-items: center; | |||
| align-content: space-between; | |||
| justify-content: space-between; | |||
| width: 100%; | |||
| margin: 20px 0; | |||
| p { | |||
| font-size: 52px; | |||
| color: $green; | |||
| font-weight: bold; | |||
| } | |||
| ul { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| align-items: center; | |||
| justify-content: flex-start; | |||
| li { | |||
| width: 40px; | |||
| height: 30px; | |||
| border-radius: 20px; | |||
| position: relative; | |||
| & + li { | |||
| margin-left: 10px; | |||
| } | |||
| &.toobad { | |||
| background-color: #ff5f8b; | |||
| &:after{ | |||
| background-color: #ff5f8b; | |||
| } | |||
| } | |||
| &.ordinary { | |||
| background-color: #2ea7e0; | |||
| &:after{ | |||
| background-color: #2ea7e0; | |||
| } | |||
| } | |||
| &.sameas { | |||
| background-color: #8dc21f; | |||
| &:after{ | |||
| background-color: #8dc21f; | |||
| } | |||
| } | |||
| &.excellent { | |||
| background-color: #179b3b; | |||
| &:after{ | |||
| background-color: #179b3b; | |||
| } | |||
| } | |||
| &.active { | |||
| width: 240px; | |||
| &:after { | |||
| opacity: 1; | |||
| } | |||
| &:before { | |||
| opacity: 1; | |||
| } | |||
| } | |||
| &:after { | |||
| content: ''; | |||
| display: block; | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translateX(-50%) translateY(-50%); | |||
| width: 60px; | |||
| height: 60px; | |||
| opacity: 0; | |||
| border-radius: 50%; | |||
| } | |||
| &:before { | |||
| content: ''; | |||
| display: block; | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translateX(-50%) translateY(-50%); | |||
| width: 35px; | |||
| height: 35px; | |||
| opacity: 0; | |||
| border-radius: 50%; | |||
| background-color:#fff; | |||
| z-index: 2; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .tips { | |||
| font-size: 24px; | |||
| } | |||
| } | |||
| } | |||
| .status { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| align-items: center; | |||
| align-content: space-between; | |||
| justify-content: space-between; | |||
| width: 100%; | |||
| margin: 20px 0; | |||
| p { | |||
| font-size: 52px; | |||
| color: $green; | |||
| font-weight: bold; | |||
| } | |||
| .wran-tips { | |||
| padding: 20px 40px 50px 40px; | |||
| font-size: 24px; | |||
| .tips-title { | |||
| font-weight: bold; | |||
| padding: 20px 0; | |||
| color: #333; | |||
| ul { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| align-items: center; | |||
| justify-content: flex-start; | |||
| li { | |||
| width: 40px; | |||
| height: 30px; | |||
| border-radius: 20px; | |||
| position: relative; | |||
| & + li { | |||
| margin-left: 10px; | |||
| } | |||
| &.toobad { | |||
| background-color: #ff5f8b; | |||
| &:after { | |||
| background-color: #ff5f8b; | |||
| } | |||
| } | |||
| &.ordinary { | |||
| background-color: #2ea7e0; | |||
| &:after { | |||
| background-color: #2ea7e0; | |||
| } | |||
| } | |||
| &.sameas { | |||
| background-color: #8dc21f; | |||
| &:after { | |||
| background-color: #8dc21f; | |||
| } | |||
| } | |||
| &.excellent { | |||
| background-color: #179b3b; | |||
| &:after { | |||
| background-color: #179b3b; | |||
| } | |||
| } | |||
| &.active { | |||
| width: 240px; | |||
| &:after { | |||
| opacity: 1; | |||
| } | |||
| &:before { | |||
| opacity: 1; | |||
| } | |||
| } | |||
| &:after { | |||
| content: ''; | |||
| display: block; | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translateX(-50%) translateY(-50%); | |||
| width: 60px; | |||
| height: 60px; | |||
| opacity: 0; | |||
| border-radius: 50%; | |||
| } | |||
| &:before { | |||
| content: ''; | |||
| display: block; | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translateX(-50%) translateY(-50%); | |||
| width: 35px; | |||
| height: 35px; | |||
| opacity: 0; | |||
| border-radius: 50%; | |||
| background-color: #fff; | |||
| z-index: 2; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .tips { | |||
| font-size: 24px; | |||
| } | |||
| } | |||
| } | |||
| .wran-tips { | |||
| padding: 20px 40px 50px 40px; | |||
| font-size: 24px; | |||
| .tips-title { | |||
| font-weight: bold; | |||
| padding: 20px 0; | |||
| color: #333; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
+ 719
- 139
src/views/today/signsDetails.vue
ファイル差分が大きすぎるため省略します
ファイルの表示
読み込み中…