update
init
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
import { get } from '/@/views/mobile/api/api';
|
||||
|
||||
const prefix: string = import.meta.env.VITE_GLOB_APP_PREFIX;
|
||||
export const Api = {
|
||||
queryById: prefix + '/knowledge/knowledgeStorage/queryById',
|
||||
};
|
||||
// 知识详情
|
||||
export const queryById = (params: any) => get(Api.queryById, params);
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="card-title">
|
||||
<div class="card-left">
|
||||
<div class="title-text">{{ title }}</div>
|
||||
<div><slot></slot></div>
|
||||
</div>
|
||||
<div class="title-icon"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
const props = defineProps({
|
||||
title: propTypes.string,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.card-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.card-left {
|
||||
display: flex;
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #252535;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="job-details">
|
||||
<div class="job-tab-container">
|
||||
<van-skeleton title :row="2" :loading="loading">
|
||||
<div class="detail-tit">
|
||||
<div class="detail-tit-text" v-show="info?.title">{{ info.title }}</div>
|
||||
<van-tag class="tag-unit" plain type="primary" color="#999" text-color="#333333" v-show="info?.subTitle">
|
||||
{{ info.subTitle }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<div class="tag-list">
|
||||
<div class="tag-item" v-show="info?.tag">{{ info.tag }}</div>
|
||||
</div>
|
||||
</van-skeleton>
|
||||
</div>
|
||||
<!--岗位内容-->
|
||||
<div class="job-content">
|
||||
<van-skeleton title :row="8" :loading="loading">
|
||||
<div v-html="htmlText"></div>
|
||||
</van-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { queryById } from '/@/views/post-health/api';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
const htmlText = ref('');
|
||||
const loading = ref(true); //加载骨架屏
|
||||
const route = useRoute();
|
||||
const info = ref({
|
||||
title: '',
|
||||
subTitle: '',
|
||||
tag: '',
|
||||
});
|
||||
onMounted(() => {
|
||||
info.value = {
|
||||
title: route.query?.title || '',
|
||||
subTitle: route.query?.subTitle || '',
|
||||
tag: route.query?.tag || '',
|
||||
};
|
||||
getDetail();
|
||||
});
|
||||
|
||||
function getDetail() {
|
||||
if (!route.query?.id) {
|
||||
loading.value = false;
|
||||
return showToast('请求参数有误');
|
||||
}
|
||||
queryById({ id: route.query.id })
|
||||
.then(({ code, result }) => {
|
||||
loading.value = false;
|
||||
if (code !== 200) return;
|
||||
htmlText.value = result.content;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/assets/less/index.less';
|
||||
|
||||
.job-details {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
background: @page-bgc;
|
||||
|
||||
.job-tab-container {
|
||||
padding: 10px 15px;
|
||||
background: @card-fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.detail-tit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.detail-tit-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tag-unit {
|
||||
margin-left: 6px;
|
||||
height: 16px;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #21bebe;
|
||||
padding: 3px 7px;
|
||||
background: rgba(33, 190, 190, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-content {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
padding: 10px 15px;
|
||||
background: @card-fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="unit-card">
|
||||
<div class="text-wrapper">
|
||||
<div class="tag-item" @click="changeTag">
|
||||
<div class="unit-name">管理岗位</div>
|
||||
<div class="tag-content"> 3个岗位100条知识 累计学习200人次 </div>
|
||||
</div>
|
||||
<div class="tag-item">
|
||||
<div class="unit-name">管理岗位</div>
|
||||
<div class="tag-content"> 3个岗位100条知识 累计学习200人次 </div>
|
||||
</div>
|
||||
<div class="tag-item">
|
||||
<div class="unit-name">管理岗位</div>
|
||||
<div class="tag-content"> 3个岗位100条知识 累计学习200人次 </div>
|
||||
</div>
|
||||
<div class="tag-item">
|
||||
<div class="unit-name">管理岗位</div>
|
||||
<div class="tag-content"> 3个岗位100条知识 累计学习200人次 </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const emits = defineEmits(['change']);
|
||||
function changeTag(item) {
|
||||
emits('change', item);
|
||||
}
|
||||
defineExpose({
|
||||
changeTag,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.text-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.tag-item {
|
||||
width: calc(100% / 3 - 10px);
|
||||
background: #f3f3f3;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.unit-name {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.tag-content {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { computed, ref } from 'vue';
|
||||
// 1.展开收起
|
||||
export function useFold() {
|
||||
const foldState = ref(true);
|
||||
function setFoldState() {
|
||||
foldState.value = !foldState.value;
|
||||
}
|
||||
const foldText = computed(() => (foldState.value ? '展开' : '收起'));
|
||||
return { foldState, foldText, setFoldState };
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="post-health">
|
||||
<div class="user-unit-card">
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item name="1">
|
||||
<template #title>
|
||||
<CardTitle title="我的岗位健康">
|
||||
<div class="Depart-info">采气工 财务部主任</div>
|
||||
</CardTitle>
|
||||
</template>
|
||||
<div class="user-unit-content" :class="[toggleCard ? 'fold' : 'unfold']">
|
||||
<div class="danger-container">
|
||||
<p class="risk-factor">危险因素</p>
|
||||
<ul class="danger-ul">
|
||||
<li
|
||||
class="danger-li"
|
||||
v-for="(item, i) in data"
|
||||
:key="i"
|
||||
:class="[activeTab == i ? 'active' : '']"
|
||||
@click="setActiveTab(i)"
|
||||
>{{ item.name }}</li
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="measure">
|
||||
<van-tag type="primary">文章</van-tag>
|
||||
<span class="measure-text">防护措施</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</div>
|
||||
<div class="unit-card-list">
|
||||
<van-collapse v-model="activeUnits">
|
||||
<van-collapse-item name="1">
|
||||
<template #title>
|
||||
<CardTitle title="采油单位" />
|
||||
</template>
|
||||
<UnitCard @change="changeTag" />
|
||||
</van-collapse-item>
|
||||
<van-collapse-item name="2">
|
||||
<template #title>
|
||||
<CardTitle title="采气单位" />
|
||||
</template>
|
||||
<UnitCard />
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import UnitCard from '/@/views/post-health/components/unitCard.vue';
|
||||
import CardTitle from '/@/views/post-health/components/cardTitle.vue';
|
||||
import { useTabHooks } from '/@/hooks/useTab.ts';
|
||||
const toggleCard = ref(false);
|
||||
const activeNames = ref(['1']);
|
||||
const activeUnits = ref(['1']);
|
||||
const { activeTab, setActiveTab } = useTabHooks(0);
|
||||
|
||||
const data = [
|
||||
{ name: '硫化氢' },
|
||||
{ name: '压力容器作业' },
|
||||
{ name: '气瓶冲装(高压)' },
|
||||
{ name: '硫化氢' },
|
||||
{ name: '压力容器作业' },
|
||||
{ name: '气瓶冲装(高压)' },
|
||||
{ name: '硫化氢' },
|
||||
{ name: '压力容器作业' },
|
||||
{ name: '气瓶冲装(高压)' },
|
||||
];
|
||||
function changeTag(tag) {}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import '/@/assets/less/index.less';
|
||||
.post-health {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: @page-bgc;
|
||||
.user-unit-card {
|
||||
background: @card-fff;
|
||||
position: relative;
|
||||
.Depart-info {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.user-unit-content {
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease-in-out;
|
||||
will-change: height;
|
||||
&.unfold {
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
&.fold {
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.danger-container {
|
||||
padding: 10px 16px;
|
||||
background: @card-gray;
|
||||
border-radius: 8px;
|
||||
.risk-factor {
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
.danger-ul {
|
||||
.flex-wrap();
|
||||
.danger-li {
|
||||
color: #252535;
|
||||
.flex-center();
|
||||
padding: 3px 8px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
background: @card-fff;
|
||||
border: 1px solid @card-fff;
|
||||
border-radius: 15px;
|
||||
&.active {
|
||||
color: #3390ff;
|
||||
.primaryButton();
|
||||
}
|
||||
}
|
||||
}
|
||||
.measure {
|
||||
margin-top: 10px;
|
||||
padding: 14px 16px;
|
||||
background: @card-gray;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
.measure-text {
|
||||
margin: 0 9px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.unit-card-list {
|
||||
margin-top: 10px;
|
||||
background: @card-fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user