|
|
@@ -0,0 +1,328 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
+ <meta name="keywords"
|
|
|
+ content="工时管理，工时统计，工时填报，项目成本统计，生产工时管理系统，工时成本管理，工时管理软件，研发工时管理系统，企业工时管理系统，项目工时统计，项目工时统计软件，项目工时统计系统，工时统计系统，工时统计表" />
|
|
|
+ <meta name="description" content="工时管家提供专业的工时填报和统计报表。支持PC和手机端。可按项目，部门，岗位等多维度统计成本。" />
|
|
|
+ <title>工时管家-专注工时管理，手机移动填报，核算项目投入人力成本，企业IPO利器！</title>
|
|
|
+ <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
|
|
|
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext"
|
|
|
+ rel="stylesheet">
|
|
|
+ <link href="css/bootstrap.css" rel="stylesheet">
|
|
|
+ <link href="css/font-awesome.css" rel="stylesheet">
|
|
|
+ <link href="css/swiper.css" rel="stylesheet">
|
|
|
+ <link href="css/magnific-popup.css" rel="stylesheet">
|
|
|
+ <link href="css/styles.css" rel="stylesheet">
|
|
|
+ <link rel="stylesheet" href="css/reset.css">
|
|
|
+ <link rel="stylesheet" href="css/tongyong.css">
|
|
|
+ <link rel="stylesheet" href="css/knowledgeField.css">
|
|
|
+ <!-- 底部重写 -->
|
|
|
+ <link rel="stylesheet" href="css/bottom.css">
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="./css/element-uiCss.css">
|
|
|
+ <script src="./js/vue.min.js"></script>
|
|
|
+ <script src="./js/element-ui.js"></script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body data-spy="scroll" data-target=".fixed-top">
|
|
|
+ <div class="spinner-wrapper">
|
|
|
+ <div class="spinner">
|
|
|
+ <div class="bounce1"></div>
|
|
|
+ <div class="bounce2"></div>
|
|
|
+ <div class="bounce3"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 头部 -->
|
|
|
+ <iframe id="headerIframe" src="./moduleView/header.html" class="iframeClass" onLoad="reinitIframe();"></iframe>
|
|
|
+ <!-- 主体内容 -->
|
|
|
+ <div class="knowledgeFieldCon" id="app">
|
|
|
+ <div v-loading="detailsSwitchingLoading" class="wh100 flex">
|
|
|
+ <!-- 知识园地 -->
|
|
|
+ <div class="knowledgeField" v-if="!isItForDetails">
|
|
|
+ <div class="knowledgeField-header">
|
|
|
+ <div class="knowledgeField-header-text">知识园地</div>
|
|
|
+ <div class="flex">
|
|
|
+ <el-input placeholder="请输入内容" v-model.trim="info" size="small" class="elInput"
|
|
|
+ @keyup.enter="getKnowledgeFieldTable()">
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary" size="mini" @click="getKnowledgeFieldTable()">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex1 knowledgeField-content" v-loading="knowledgeFieldTableLoading">
|
|
|
+ <div v-for="(item,index) in knowledgeFieldTableList" :key="index">
|
|
|
+ <div class="knowledgeField-content-item">
|
|
|
+ <div class="image"><el-image :src="item.coverImg" class="wh100"></el-image></div>
|
|
|
+ <div class="textContent">
|
|
|
+ <div>{{ item.title }}</div>
|
|
|
+ <p>{{ item.profile }}</p>
|
|
|
+ <span @click="learnMore(item, true)">了解详情></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider v-if="index < knowledgeFieldTableList.length - 1"></el-divider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="knowledgeField-bottom flex-center">
|
|
|
+ <el-pagination background layout="total, prev, pager, next, sizes" :page-sizes="[4, 8, 12, 20]"
|
|
|
+ :page-size="pageSize" :current-page.sync="pageIndex" @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 知识详情 -->
|
|
|
+ <div v-if="isItForDetails" class="knowledgeDetails">
|
|
|
+ <div class="returnIcon" @click="back()">
|
|
|
+ <i class="el-icon-arrow-left"></i>
|
|
|
+ </div>
|
|
|
+ <div class="knowledgeDetails-left">
|
|
|
+ <div class="knowledgeDetails-left-title">{{ articleDetails.title }}</div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div class="knowledgeDetails-left-con">
|
|
|
+ <div class="flex distribution">
|
|
|
+ <ul class="flex">
|
|
|
+ <li class="grey">标签：</li>
|
|
|
+ <li class="blue" v-for="(item, index) in articleDetails.categoryNamesList" :key="index">{{ item }}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center distribution timeContent">
|
|
|
+ <p>发布时间</p>
|
|
|
+ <span>{{ articleDetails.createTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center distribution readUse" style="justify-content: flex-end;">
|
|
|
+ <div class="text">推荐使用:</div>
|
|
|
+ <div><img src="./image/detailWork.png" alt=""></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hypertextContent" v-html="articleDetails.content">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="knowledgeDetails-left-bottom flex-center"></div>
|
|
|
+ </div>
|
|
|
+ <div class="knowledgeDetails-right">
|
|
|
+ <div class="latestArticles">
|
|
|
+ <div class="knowledgeDetails-right-title">
|
|
|
+ <div>最新文章</div>
|
|
|
+ <span @click="learnMore({}, false, true)">查看更多></span>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="latestList">
|
|
|
+ <div class="latestList-item" v-for="(item, index) in latestArticles" :key="index"
|
|
|
+ @click="detailsJump(item)">
|
|
|
+ <div class="latestList-item-image">
|
|
|
+ <el-image :src="item.coverImg" class="wh100"></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="latestList-item-text">
|
|
|
+ <div class="latestList-item-text-title">{{ item.title }}</div>
|
|
|
+ <div class="data">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="relatedRecommendations">
|
|
|
+ <div class="knowledgeDetails-right-title">
|
|
|
+ <div>相关推荐</div>
|
|
|
+ <span @click="learnMore({}, false, true)">查看更多></span>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="latestList">
|
|
|
+ <div class="latestList-item" v-for="(item, index) in relatedRecommendations" :key="index"
|
|
|
+ @click="detailsJump(item)">
|
|
|
+ <div class="latestList-item-image">
|
|
|
+ <el-image :src="item.coverImg" class="wh100"></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="latestList-item-text">
|
|
|
+ <div class="latestList-item-text-title">{{ item.title }}</div>
|
|
|
+ <div class="data">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Scripts -->
|
|
|
+ <script src="js/js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
|
|
|
+ <script src="js/js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
|
|
|
+ <script src="js/js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
|
|
|
+ <script src="js/js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
|
|
|
+ <script src="js/js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
|
|
|
+ <script src="js/js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
|
|
|
+ <script src="js/js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
|
|
|
+ <script src="js/js/scripts.js"></script>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ info: '',
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ total: 0,
|
|
|
+ // requestPrefix: 'http://192.168.2.17:8080',
|
|
|
+ requestPrefix: 'http://47.101.180.183:9049',
|
|
|
+ // requestPrefix: '',
|
|
|
+ knowledgeFieldTableList: [],
|
|
|
+ latestArticles: [],
|
|
|
+ relatedRecommendations: [],
|
|
|
+ detailRow: {},
|
|
|
+ articleDetails: {},
|
|
|
+ isItForDetails: false,
|
|
|
+ knowledgeFieldTableLoading: false,
|
|
|
+ detailsSwitchingLoading: false,
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getArticleDetails() {
|
|
|
+ const url = `${this.requestPrefix}/article/getArticleById`
|
|
|
+ const params = { id: this.detailRow.id }
|
|
|
+ this.httpRequest(this.addQueryParams(url, params)).then(res => {
|
|
|
+ const row = {
|
|
|
+ ...res.data,
|
|
|
+ categoryNamesList: res.data.categoryNames ? res.data.categoryNames.split(',') : []
|
|
|
+ };
|
|
|
+ this.articleDetails = row
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getLatestArticles() {
|
|
|
+ const url = `${this.requestPrefix}/article/latestList`;
|
|
|
+ const params = { id: this.detailRow.id }
|
|
|
+ this.httpRequest(this.addQueryParams(url, params)).then(res => {
|
|
|
+ this.latestArticles = res.data.map(item => {
|
|
|
+ if(item.coverImg) {
|
|
|
+ item.coverImg = `data:image/jpeg;base64, ${item.coverImg}`
|
|
|
+ }
|
|
|
+ return { ...item }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRelatedRecommendations() {
|
|
|
+ const url = `${this.requestPrefix}/article/relatedList`
|
|
|
+ const params = { id: this.detailRow.id }
|
|
|
+ this.httpRequest(this.addQueryParams(url, params)).then(res => {
|
|
|
+ this.relatedRecommendations = res.data.map(item => {
|
|
|
+ if(item.coverImg) {
|
|
|
+ item.coverImg = `data:image/jpeg;base64, ${item.coverImg}`
|
|
|
+ }
|
|
|
+ return { ...item }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getKnowledgeFieldTable() {
|
|
|
+ const url = `${this.requestPrefix}/article/pageList`
|
|
|
+ const params = { pageIndex: this.pageIndex, pageSize: this.pageSize, info: this.info }
|
|
|
+ this.knowledgeFieldTableLoading = true
|
|
|
+ this.httpRequest(this.addQueryParams(url, params)).then(res => {
|
|
|
+ const { total = 0, data = [] } = res
|
|
|
+ data.forEach(item => {
|
|
|
+ if(item.coverImg) {
|
|
|
+ item.coverImg = `data:image/jpeg;base64, ${item.coverImg}`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.total = total
|
|
|
+ this.knowledgeFieldTableList = [...data]
|
|
|
+ }).finally(() => {
|
|
|
+ this.knowledgeFieldTableLoading = false
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err, '<==== 请求失败')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ this.detailRow = {}
|
|
|
+ this.detailsSwitchingLoading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isItForDetails = false
|
|
|
+ }, 500)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.detailsSwitchingLoading = false
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ detailsJump(item) {
|
|
|
+ this.detailRow = item
|
|
|
+ this.detailsSwitchingLoading = true
|
|
|
+ this.getArticleDetails()
|
|
|
+ this.getLatestArticles()
|
|
|
+ this.getRelatedRecommendations()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.detailsSwitchingLoading = false
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ learnMore(item, flag = false, reset = false) {
|
|
|
+ this.detailRow = item
|
|
|
+ this.detailsSwitchingLoading = true
|
|
|
+ if (reset) {
|
|
|
+ this.pageIndex = 1
|
|
|
+ this.pageSize = 4
|
|
|
+ this.info = ''
|
|
|
+ this.getKnowledgeFieldTable()
|
|
|
+ }
|
|
|
+ if (flag) {
|
|
|
+ this.getArticleDetails()
|
|
|
+ this.getLatestArticles()
|
|
|
+ this.getRelatedRecommendations()
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isItForDetails = flag
|
|
|
+ }, 500)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.detailsSwitchingLoading = false
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageIndex = 1
|
|
|
+ this.pageSize = val
|
|
|
+ this.getKnowledgeFieldTable()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pageIndex = val
|
|
|
+ this.getKnowledgeFieldTable()
|
|
|
+ },
|
|
|
+ // 封装请求接口
|
|
|
+ httpRequest(url, options = {}, method = 'GET') {
|
|
|
+ // 默认配置
|
|
|
+ const defaultOptions = {
|
|
|
+ method,
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ },
|
|
|
+ body: null,
|
|
|
+ };
|
|
|
+
|
|
|
+ const requestOptions = { ...defaultOptions, ...options };
|
|
|
+
|
|
|
+ if (requestOptions.body && typeof requestOptions.body !== 'string') {
|
|
|
+ requestOptions.body = JSON.stringify(requestOptions.body);
|
|
|
+ }
|
|
|
+ return fetch(url, requestOptions)
|
|
|
+ .then(response => {
|
|
|
+ if (!response.ok) {
|
|
|
+ throw new Error(`HTTP错误: ${response.status}`);
|
|
|
+ }
|
|
|
+ return response.json();
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('请求失败:', error);
|
|
|
+ throw error;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addQueryParams(url, params) {
|
|
|
+ const urlWithParams = new URL(url);
|
|
|
+ Object.keys(params).forEach(key => {
|
|
|
+ urlWithParams.searchParams.append(key, params[key]);
|
|
|
+ });
|
|
|
+ return urlWithParams.toString();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ this.getKnowledgeFieldTable()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ <script src="js/iframe.js"></script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
