Skip to content

T
ty_patentSys
Commit 225627a7 by liudx
Options

专利详情页面

parent 2fbd9c61
Showing with 514 additions and 152 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -9,8 +9,10 @@
},
"dependencies": {
"ant-design-vue": "^3.2.20",
"axios": "^1.4.0",
"core-js": "^3.6.5",
"echarts": "^5.4.2",
"echarts-wordcloud": "^2.1.0",
"postcss-px2rem": "^0.3.0",
"px2rem-loader": "^0.1.9",
"vue": "^3.0.0",
......
src/components/EchartsCloud.vue 0 → 100644
<template>
<div :id="id" :style="style"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-wordcloud";
export default {
name: "EchartsCloud",
data() {
return {
chart: "",
};
},
props: {
id: {
type: String,
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
dataArr:{
type:Array,
default:[]
}
},
computed: {
style() {
return {
width: this.width,
height: this.height,
};
},
},
watch: {
option: {
handler(newVal) {
if (this.chart) {
this.chart.setOption(newVal);
} else {
this.init();
}
},
deep: true,
},
},
mounted() {
this.initchart();
},
methods: {
initchart() {
let myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
series: [
{
type: "wordCloud",
//用来调整词之间的距离
gridSize: 10,
//用来调整字的大小范围
// Text size range which the value in data will be mapped to.
// Default to have minimum 12px and maximum 60px size.
sizeRange: [14, 60],
// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
//用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
// rotationRange: [-45, 0, 45, 90],
// rotationRange: [ 0,90],
rotationRange: [0, 0],
//随机生成字体颜色
// maskImage: maskImage,
textStyle: {
color: function () {
return (
"rgb(" +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
")"
);
},
},
//位置相关设置
// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
// Default to be put in the center and has 75% x 80% size.
left: "center",
top: "center",
right: null,
bottom: null,
width: "200%",
height: "200%",
//数据
data: this.dataArr
},
],
});
},
},
};
</script>
src/components/HelloWorld.vue deleted 100644 → 0
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/utils/API.js 0 → 100644
import { get, post } from './request'
//示例
export const login = p => post('/api/user/get_login', p);
src/utils/aes_util.js 0 → 100644
const CryptoJS = require('./aes.js'); //引用AES源码js
const key = CryptoJS.enc.Utf8.parse("taiyuaniopasdfgh"); //十六位十六进制数作为秘钥
const iv = CryptoJS.enc.Utf8.parse('taiyuaniopasdfgh');//十六位十六进制数作为秘钥偏移量
// /**
// * aes 解密方法
// */
// function AesDecrypt(word) {
// let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
// let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
// let decrypt = CryptoJS.AES.decrypt(srcs, key, {
// iv: iv,
// mode: CryptoJS.mode.CBC,
// padding: CryptoJS.pad.Pkcs7
// });
// let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
// return decryptedStr.toString();
// }
// /**
// * aes 加密方法
// */
// function AesEncrypt(word) {
// let srcs = CryptoJS.enc.Utf8.parse(word);
// let encrypted = CryptoJS.AES.encrypt(srcs, key, {
// iv: iv,
// mode: CryptoJS.mode.CBC,
// padding: CryptoJS.pad.Pkcs7
// });
// return encrypted.ciphertext.toString().toUpperCase();
// }
//
// /**
// * base64 加密方法
// */
// function Base64Encode(val) {
// let str = CryptoJS.enc.Utf8.parse(val);
// let base64 = CryptoJS.enc.Base64.stringify(str);
// return base64;
// }
//
// /**
// * base64 解密方法
// */
// function Base64Decode(val) {
// let words = CryptoJS.enc.Base64.parse(val);
// return words.toString(CryptoJS.enc.Utf8);
// }
function AES_Encrypt(word) {
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
var hexStr = encrypted.ciphertext.toString().toUpperCase();
// console.log('hexStr->' + hexStr);
var oldHexStr = CryptoJS.enc.Hex.parse(hexStr);
// 将密文转为Base64的字符串
var base64Str = CryptoJS.enc.Base64.stringify(oldHexStr);
// console.log('base64Str->' + base64Str);
//这里根据需求返回 base64Str 或 hexStr(解密时有小小差别)
return base64Str;
}
function AES_Decrypt(word) {
// console.log('word->' + word);
var srcs = word;
var decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
var value = decryptedStr.toString();
// console.log('value->' + value);
return value;
}
//暴露接口
module.exports = {
// AesEncrypt,
// AesDecrypt,
// Base64Encode,
// Base64Decode,
AES_Encrypt,
AES_Decrypt
}
src/utils/request.js 0 → 100644
import axios from 'axios';
import store from '../store/index'
// 环境的切换
axios.defaults.baseURL = 'http://192.168.110.15:5001/';
// 请求超时时间
axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
// const token = store.state.token;
// token && (config.headers.Authorization = token);
console.log(config)
return config;
},
error => {
return Promise.error(error);
})
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
});/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
src/views/About.vue deleted 100644 → 0
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue deleted 100644 → 0
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
src/views/login/index.vue
......@@ -31,9 +31,7 @@
>
<a-form-item
name="username"
:rules="[
{ required: true, message: '请输入用户名！' },
]"
:rules="[{ required: true, message: '请输入用户名！' }]"
>
<a-input v-model:value="formState.username">
<template #prefix>
......@@ -44,9 +42,7 @@
<a-form-item
name="password"
:rules="[
{ required: true, message: '请输入密码！' },
]"
:rules="[{ required: true, message: '请输入密码！' }]"
>
<a-input-password v-model:value="formState.password">
<template #prefix>
......@@ -56,12 +52,12 @@
</a-form-item>
<a-form-item>
<a-form-item name="remember" style="float: left;">
<a-form-item name="remember" style="float: left">
<a-checkbox v-model:checked="formState.remember"
>记住密码</a-checkbox
>
</a-form-item>
<a-form-item name="remember" style="float: right;">
<a-form-item name="remember" style="float: right">
<a-checkbox v-model:checked="formState.autologin"
>自动登录</a-checkbox
>
......@@ -72,17 +68,18 @@
type="primary"
html-type="submit"
class="login-form-button"
@click="login"
>
登录
</a-button>
</a-form-item>
<a-form-item>
<div class="admin_login" style="float: left;">
<img src="../../static/login/icon-glydl.png" alt="">&nbsp;&nbsp;
<div class="admin_login" style="float: left">
<img src="../../static/login/icon-glydl.png" alt="" />&nbsp;&nbsp;
<!-- <a href="">管理员登录</a> -->
<router-link to="/adminLogin">管理员登录</router-link>
</div>
<div style="float: right;">
<div style="float: right">
<router-link to="/forget">忘记密码</router-link>
</div>
</a-form-item>
......@@ -90,8 +87,16 @@
</div>
</div>
<footer>
<a style="color: #818A9F;" href="http://zhongyanrenzhi.com/#/product2" target="_blank">产品介绍&nbsp;&nbsp;&nbsp;&nbsp;</a>|
<a style="color: #818A9F;" target="_blank" href="http://zhongyanrenzhi.com/#/into/1"
<a
style="color: #818a9f"
href="http://zhongyanrenzhi.com/#/product2"
target="_blank"
>产品介绍&nbsp;&nbsp;&nbsp;&nbsp;</a
>|
<a
style="color: #818a9f"
target="_blank"
href="http://zhongyanrenzhi.com/#/into/1"
>&nbsp;&nbsp;&nbsp;&nbsp;关于中研认知</a
><br />
<span>版权所有：北京中研硕福科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;</span
......@@ -100,6 +105,8 @@
</div>
</template>
<script>
import { AES_Encrypt, AES_Decrypt } from "@/utils/aes_util.js";
import { login } from "@/utils/API";
export default {
name: "login",
data() {
......@@ -112,6 +119,16 @@ export default {
},
};
},
mounted() {},
methods: {
// login() {
// login({
// ...parmas
// }).then((res) => {
// });
// },
},
};
</script>
<style lang="less" scoped>
......@@ -119,7 +136,7 @@ export default {
height: 50px;
}
/deep/.ant-form {
margin-top:30px;
margin-top: 30px;
}
/deep/.login-form-button {
width: 100%;
......@@ -127,8 +144,7 @@ export default {
font-weight: bold;
font-size: 18px;
}
/deep/.ant-form-item-control-input{
/deep/.ant-form-item-control-input {
height: 60px;
}
.login {
......@@ -211,8 +227,8 @@ export default {
}
}
}
.admin_login{
img{
.admin_login {
img {
width: 20px;
vertical-align: middle;
}
......
src/views/patent/patentDetails.vue
......@@ -10,32 +10,101 @@
<div class="patent_num">{{ "一种大直径单桩单钩水下翻桩方法" }}</div>
</div>
<div class="patent_con">
<!-- 技术摘要 -->
<div class="patent_con1">
<h2 class="title">技术摘要</h2>
<p class="desc">
本技术解决的问题：如果是单船起吊，则起重船上一定要具备主吊钩和副吊钩，且钩头方位、各个钩的起重能力需满足要求，否则就只有采用两条起重船才能实现翻身，因此要增加船舶设备的投入，施工成本高。
</p>
<div class="patent_con_left">
<!-- 技术摘要 -->
<div class="patent_con1" id="technicalSummary">
<h2 class="title">技术摘要</h2>
<p class="desc">
本技术解决的问题：如果是单船起吊，则起重船上一定要具备主吊钩和副吊钩，且钩头方位、各个钩的起重能力需满足要求，否则就只有采用两条起重船才能实现翻身，因此要增加船舶设备的投入，施工成本高。
</p>
</div>
<!-- 摘要 -->
<div class="patent_con1" id="summary">
<h2 class="title">摘要</h2>
<p class="desc">
本发明公开了一种大直径单桩单钩水下翻桩方法，采用一艘具有一个主钩的起重船并包括以下步骤：先根据单桩起吊后平衡状态时与水平面的夹角为α计算主钩至主吊耳之间的距离以及主钩至单桩底部的距离，然后根据α确定主吊钢丝绳的直径和辅吊钢丝绳的直径；将两根主吊钢丝绳的上端均挂在主钩上，下端各自挂在单桩的两个主吊耳上，再将辅吊钢丝绳的上端挂在主钩上，下端通过U形扣钳制在单桩的底部；主钩起吊单桩，使单桩落入水中，并下放至单桩的底部桩尖触到海底泥面；继续下放起重船的主钩使辅吊钢丝绳逐渐呈松弛状态，将辅吊钢丝绳与主钩脱钩，同时U形扣自动脱离单桩的底部，然后起升主钩将单桩竖立。本发明的翻桩方法可有效降低船舶设备的投入。
</p>
</div>
<!-- 技术领域 -->
<div class="patent_con1" id="techAera">
<h2 class="title">技术领域</h2>
<EchartsCloud :id="'tech'" :dataArr="techArr"></EchartsCloud>
</div>
<!-- 应用领域 -->
<div class="patent_con1" id="appArea">
<h2 class="title">应用领域</h2>
<EchartsCloud
:id="'applicationArea'"
:dataArr="techArr"
></EchartsCloud>
</div>
<!-- 主要录项 -->
<div class="patent_con1" id="mainentries">
<h2 class="title">主要录项</h2>
</div>
</div>
<!-- 摘要 -->
<div class="patent_con1">
<h2 class="title">摘要</h2>
<p class="desc">
本发明公开了一种大直径单桩单钩水下翻桩方法，采用一艘具有一个主钩的起重船并包括以下步骤：先根据单桩起吊后平衡状态时与水平面的夹角为α计算主钩至主吊耳之间的距离以及主钩至单桩底部的距离，然后根据α确定主吊钢丝绳的直径和辅吊钢丝绳的直径；将两根主吊钢丝绳的上端均挂在主钩上，下端各自挂在单桩的两个主吊耳上，再将辅吊钢丝绳的上端挂在主钩上，下端通过U形扣钳制在单桩的底部；主钩起吊单桩，使单桩落入水中，并下放至单桩的底部桩尖触到海底泥面；继续下放起重船的主钩使辅吊钢丝绳逐渐呈松弛状态，将辅吊钢丝绳与主钩脱钩，同时U形扣自动脱离单桩的底部，然后起升主钩将单桩竖立。本发明的翻桩方法可有效降低船舶设备的投入。
</p>
<div class="patent_con_anchor">
<a-anchor>
<a-anchor-link href="#technicalSummary" title="AI技术摘要" />
<a-anchor-link href="#summary" title="摘要" />
<a-anchor-link href="#techAera" title="技术领域" />
<a-anchor-link href="#appAera" title="应用领域" />
<a-anchor-link href="#mainentries" title="主要录项" />
<a-anchor-link href="#technicalSummary" title="相关人" />
<a-anchor-link href="#summary" title="地址" />
<a-anchor-link href="#techAera" title="统计信息" />
<a-anchor-link href="#appAera" title="分类号" />
<a-anchor-link href="#mainentries" title="法律信息" />
<a-anchor-link href="#appAera" title="权利要求" />
<a-anchor-link href="#mainentries" title="说明书" />
</a-anchor>
<div id="components-back-top-demo-custom">
<a-back-top>
<div class="ant-back-top-inner">回到顶部</div>
</a-back-top>
<div class="back">回到顶部</div>
</div>
</div>
<!-- 技术领域 -->
<div class="patent_con_right"></div>
</div>
</div>
</template>
<script>
import EchartsCloud from "../../components/EchartsCloud.vue";
export default {
name: "patentDetails",
data() {
return {};
return {
techArr: [
{
name: "支架搬运车",
value: 30,
},
{
name: "人工智能领域",
value: 80,
},
{
name: "广泛应用",
value: 70,
},
{
name: "驾驶室",
value: 301,
},
],
};
},
components: {
EchartsCloud,
},
methods: {
getCurrentAnchor() {
return "#technicalSummary";
},
},
components: {},
methods: {},
created() {},
};
</script>
......@@ -62,29 +131,84 @@ export default {
}
}
.patent_con {
.patent_con1 {
width: 949px;
// height: 175px;
background: #ffffff;
border-radius: 8px 8px 8px 8px;
opacity: 1;
padding: 40px 30px;
margin: 15px 0;
.title {
color: #1c1c28;
font-size: 18px;
font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
font-weight: bold;
display: flex;
position: relative;
justify-content: space-evenly;
background-color: #f3f3f6;
.patent_con_left {
.patent_con1 {
width: 949px;
// height: 175px;
background: #ffffff;
border-radius: 8px 8px 8px 8px;
opacity: 1;
padding: 40px 30px;
margin: 15px 0;
.title {
color: #1c1c28;
font-size: 18px;
font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
font-weight: bold;
line-height: 28px;
}
.desc {
font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #1c1c28;
line-height: 28px;
}
}
}
.patent_con_anchor {
margin-top: 15px;
width: 150px;
height: 500px;
font-weight: bold;
color: #666666;
// background-color: #fff;
:deep(.ant-anchor-link-title) {
color: #666666;
}
:deep(.ant-anchor-link-active > .ant-anchor-link-title) {
color: #1890ff;
}
line-height: 28px;
:deep(.ant-anchor-wrapper) {
background-color: #fff;
padding-left: 10px;
color: #666666;
}
.desc{
font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #1C1C28;
line-height: 28px;
#components-back-top-demo-custom .ant-back-top {
bottom: 55%;
left: 57%;
}
#components-back-top-demo-custom .ant-back-top-inner {
margin-top: 20px;
width: 150px;
height: 60px;
background-color: #fff;
text-align: center;
line-height: 60px;
}
}
.back{
display: none;
margin-top: 20px;
width: 150px;
height: 60px;
background-color: #fff;
text-align: center;
line-height: 60px;
}
.patent_con_right {
margin-top: 15px;
width: 610px;
height: 600px;
background-color: #fff;
}
}
}
......
vue.config.js
......@@ -12,21 +12,21 @@ const postcss = px2rem({
})
module.exports = {
// devServer: {
// // 端口号
// port: 8080,
// // 配置不同的后台API地址
// proxy: {
// '/api': {
// target: 'http://www.dzm.com',
// ws: false,
// changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// }
// }
// }
// },
devServer: {
// 端口号
port: 8080,
// 配置不同的后台API地址
proxy: {
'/api': {
target: 'http://192.168.110.15:5001/api',
ws: false,
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
},
configureWebpack: {
resolve: {
alias: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment