Skip to content

T
ty_patentSys
Commit 5363015f by heshihao
Options

feat: 界面修改

parent da39bb6a
Showing with 147 additions and 197 deletions
src/App.vue
...@@ -5,11 +5,13 @@ ...@@ -5,11 +5,13 @@
</div> </div>
<router-view/> --> <router-view/> -->
<v-scale-screen width="1920" height="960"> <router-view />
<router-view />
</v-scale-screen>
</template> </template>
<script>
export default {};
</script>
<style lang="less"> <style lang="less">
#app { #app {
// height: 100%; // height: 100%;
......
src/main.js
...@@ -5,6 +5,5 @@ import store from "./store"; ...@@ -5,6 +5,5 @@ import store from "./store";
import Antd from "ant-design-vue"; import Antd from "ant-design-vue";
// import "./utils/rem"; // import "./utils/rem";
import "ant-design-vue/dist/antd.css"; import "ant-design-vue/dist/antd.css";
import VScaleScreen from "v-scale-screen";
createApp(App).use(store).use(Antd).use(router).use(VScaleScreen).mount("#app"); createApp(App).use(store).use(Antd).use(router).mount("#app");
src/views/screen/index.vue
<template> <template>
<div class="screen"> <v-scale-screen width="1920" height="960">
<header>太原理工大学专利成果转移转化仪表盘</header> <div class="screen">
<div class="center"> <header>太原理工大学专利成果转移转化仪表盘</header>
<div class="center_left"> <div class="center">
<patentType></patentType> <div class="center_left">
</div> <patentType></patentType>
<div class="center_map">
<patentMap></patentMap>
</div>
<div class="center_right">
<patentPerson></patentPerson>
</div>
</div>
<div class="bottom">
<div class="bottom_echart">
<div class="bottom_title">
<span>专利发展趋势图</span>
<div class="bottom_title_btn">
<span
:class="[activeTrend == 'apply_num' ? 'active' : '']"
@click="changetrend('apply_num')"
>申请量</span
>
<span
:class="[activeTrend == 'publish_num' ? 'active' : '']"
@click="changetrend('publish_num')"
>公布量</span
>
<span
:class="[activeTrend == 'authorize_num' ? 'active' : '']"
@click="changetrend('authorize_num')"
>授权量</span
>
<a-select
ref="select"
v-model:value="trend_year"
style="width: 120px"
:options="yearOptions"
@change="handleChange"
>
</a-select>
</div>
</div> </div>
<div class="echarts_container"> <div class="center_map">
<EchartsCon <patentMap></patentMap>
:id="'patent_trend'"
:option="option5"
v-if="option5"
></EchartsCon>
</div> </div>
</div> <div class="center_right">
<div class="bottom_echart"> <patentPerson></patentPerson>
<div class="bottom_title">
<span>专利产业布局分布（山西十大产业）</span>
</div> </div>
<div class="rank_con"> </div>
<div class="rank_con_left"> <div class="bottom">
<div class="rank_progress" v-for="item in rankArr.slice(0, 5)"> <div class="bottom_echart">
<span class="index1 index" v-if="item.index == '1'">{{ <div class="bottom_title">
item.index <span>专利发展趋势图</span>
}}</span> <div class="bottom_title_btn">
<span class="index2 index" v-else-if="item.index == '2'">{{ <span :class="[activeTrend == 'apply_num' ? 'active' : '']" @click="changetrend('apply_num')"
item.index >申请量</span
}}</span>
<span class="index3 index" v-else-if="item.index == '3'">{{
item.index
}}</span>
<span class="index4 index" v-else>{{ item.index }}</span>
<span
class="name1 name"
:title="item.name"
v-if="item.index == '1'"
>{{ item.name }}</span
>
<span
class="name2 name"
:title="item.name"
v-else-if="item.index == '2'"
>{{ item.name }}</span
>
<span
class="name3 name"
:title="item.name"
v-else-if="item.index == '3'"
>{{ item.name }}</span
>
<span class="name4 name" :title="item.name" v-else>{{
item.name
}}</span>
<a-progress
v-if="item.index == '1'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor1"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else-if="item.index == '2'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor2"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else-if="item.index == '3'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor3"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else
class="progress"
:percent="item.percent"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
> >
</a-progress> <span :class="[activeTrend == 'publish_num' ? 'active' : '']" @click="changetrend('publish_num')"
<span class="num1 num" v-if="item.index == '1'" >公布量</span
>{{ item.value }}个</span
> >
<span class="num2 num" v-else-if="item.index == '2'" <span :class="[activeTrend == 'authorize_num' ? 'active' : '']" @click="changetrend('authorize_num')"
>{{ item.value }}个</span >授权量</span
> >
<span class="num3 num" v-else-if="item.index == '3'" <a-select
>{{ item.value }}个</span ref="select"
v-model:value="trend_year"
style="width: 120px"
:options="yearOptions"
@change="handleChange"
> >
<span class="num4 num" v-else>{{ item.value }}个</span> </a-select>
</div> </div>
</div> </div>
<div class="rank_con_right"> <div class="echarts_container">
<div class="rank_progress" v-for="item in rankArr.slice(5, 10)"> <EchartsCon :id="'patent_trend'" :option="option5" v-if="option5"></EchartsCon>
<span class="index4 index">{{ item.index }}</span> </div>
<span class="name4 name" :title="item.name">{{ item.name }}</span> </div>
<a-progress <div class="bottom_echart">
class="progress" <div class="bottom_title">
:percent="item.percent" <span>专利产业布局分布（山西十大产业）</span>
:stroke-color="gradientColor4" </div>
:trail-color="'rgba(19, 40, 71, 1)'" <div class="rank_con">
:show-info="false" <div class="rank_con_left">
:stroke-linecap="'round'" <div class="rank_progress" v-for="item in rankArr.slice(0, 5)">
> <span class="index1 index" v-if="item.index == '1'">{{ item.index }}</span>
</a-progress> <span class="index2 index" v-else-if="item.index == '2'">{{ item.index }}</span>
<span class="num4 num">{{ item.value }}个</span> <span class="index3 index" v-else-if="item.index == '3'">{{ item.index }}</span>
<span class="index4 index" v-else>{{ item.index }}</span>
<span class="name1 name" :title="item.name" v-if="item.index == '1'">{{ item.name }}</span>
<span class="name2 name" :title="item.name" v-else-if="item.index == '2'">{{ item.name }}</span>
<span class="name3 name" :title="item.name" v-else-if="item.index == '3'">{{ item.name }}</span>
<span class="name4 name" :title="item.name" v-else>{{ item.name }}</span>
<a-progress
v-if="item.index == '1'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor1"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else-if="item.index == '2'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor2"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else-if="item.index == '3'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor3"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else
class="progress"
:percent="item.percent"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<span class="num1 num" v-if="item.index == '1'">{{ item.value }}个</span>
<span class="num2 num" v-else-if="item.index == '2'">{{ item.value }}个</span>
<span class="num3 num" v-else-if="item.index == '3'">{{ item.value }}个</span>
<span class="num4 num" v-else>{{ item.value }}个</span>
</div>
</div>
<div class="rank_con_right">
<div class="rank_progress" v-for="item in rankArr.slice(5, 10)">
<span class="index4 index">{{ item.index }}</span>
<span class="name4 name" :title="item.name">{{ item.name }}</span>
<a-progress
class="progress"
:percent="item.percent"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<span class="num4 num">{{ item.value }}个</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </v-scale-screen>
</template> </template>
<script> <script>
import { patentDevelop, patentIndustryTopN } from "@/utils/screen.js"; import { patentDevelop, patentIndustryTopN } from "@/utils/screen.js";
...@@ -168,6 +131,7 @@ import EchartsCon from "@/components/EchartsCon.vue"; ...@@ -168,6 +131,7 @@ import EchartsCon from "@/components/EchartsCon.vue";
import patentType from "./components/patentType.vue"; import patentType from "./components/patentType.vue";
import patentMap from "./components/patentMap.vue"; import patentMap from "./components/patentMap.vue";
import patentPerson from "./components/patentPerson.vue"; import patentPerson from "./components/patentPerson.vue";
import VScaleScreen from "v-scale-screen";
export default { export default {
name: "screen", name: "screen",
data() { data() {
...@@ -243,6 +207,7 @@ export default { ...@@ -243,6 +207,7 @@ export default {
patentType, patentType,
patentMap, patentMap,
patentPerson, patentPerson,
VScaleScreen,
}, },
methods: { methods: {
init() { init() {
...@@ -274,26 +239,24 @@ export default { ...@@ -274,26 +239,24 @@ export default {
yData4: [], yData4: [],
}; };
patentDevelop({ type: this.activeTrend, year: this.trend_year }).then( patentDevelop({ type: this.activeTrend, year: this.trend_year }).then((res) => {
(res) => { if (res.code == 0) {
if (res.code == 0) { res.data.patent_all.forEach((item) => {
res.data.patent_all.forEach((item) => { data.xData.push(item.name);
data.xData.push(item.name); data.yData1.push(item.value);
data.yData1.push(item.value); });
}); res.data.invention_patent.forEach((item) => {
res.data.invention_patent.forEach((item) => { data.yData2.push(item.value);
data.yData2.push(item.value); });
}); res.data.utility_model.forEach((item) => {
res.data.utility_model.forEach((item) => { data.yData3.push(item.value);
data.yData3.push(item.value); });
}); res.data.appearance_design.forEach((item) => {
res.data.appearance_design.forEach((item) => { data.yData4.push(item.value);
data.yData4.push(item.value); });
}); this.getTrendData(data);
this.getTrendData(data);
}
} }
); });
}, },
getTrendData(data) { getTrendData(data) {
this.option5 = { this.option5 = {
...@@ -505,7 +468,7 @@ export default { ...@@ -505,7 +468,7 @@ export default {
background-image: url("../../static/screen/bg-all.png"); background-image: url("../../static/screen/bg-all.png");
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 100%; height: 960px;
overflow: auto; overflow: auto;
// height: 885px; // height: 885px;
header { header {
...@@ -569,9 +532,7 @@ export default { ...@@ -569,9 +532,7 @@ export default {
color: #fff; color: #fff;
text-shadow: 0px 2px 8px #f6f9fe; text-shadow: 0px 2px 8px #f6f9fe;
} }
:deep( :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
.ant-select:not(.ant-select-customize-input) .ant-select-selector
) {
background-color: #2d58b8; background-color: #2d58b8;
color: #99b1dd; color: #99b1dd;
} }
...@@ -599,25 +560,13 @@ export default { ...@@ -599,25 +560,13 @@ export default {
background: linear-gradient(to right, red, transparent); background: linear-gradient(to right, red, transparent);
} }
.index2 { .index2 {
background: linear-gradient( background: linear-gradient(to right, rgba(255, 108, 0, 1), transparent);
to right,
rgba(255, 108, 0, 1),
transparent
);
} }
.index3 { .index3 {
background: linear-gradient( background: linear-gradient(to right, rgba(221, 205, 66, 1), transparent);
to right,
rgba(221, 205, 66, 1),
transparent
);
} }
.index4 { .index4 {
background: linear-gradient( background: linear-gradient(to right, rgba(44, 61, 81, 1), transparent);
to right,
rgba(44, 61, 81, 1),
transparent
);
} }
.name { .name {
font-size: 12px; font-size: 12px;
......
vue.config.js
...@@ -3,13 +3,13 @@ function resolve(dir) { ...@@ -3,13 +3,13 @@ function resolve(dir) {
return path.join(__dirname, dir); return path.join(__dirname, dir);
} }
// 引入等比适配插件 // 引入等比适配插件
const px2rem = require("postcss-px2rem"); // const px2rem = require("postcss-px2rem");
// 配置基本大小 // // 配置基本大小
const postcss = px2rem({ // const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同 // // 基准大小 baseSize，需要和rem.js中相同
remUnit: 16, // remUnit: 16,
}); // });
module.exports = { module.exports = {
devServer: { devServer: {
......
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