Skip to content

Commit 4226757

Browse files
whyengineerwhyengineer
committed
table component ok
1 parent b36d187 commit 4226757

File tree

10 files changed

+871
-133
lines changed

10 files changed

+871
-133
lines changed

‎package-lock.json‎

Lines changed: 229 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,14 @@
1515
"dependencies": {
1616
"core-js": "^3.6.5",
1717
"electron-log": "^4.3.0",
18+
"electron-pdf-window": "^1.0.12",
1819
"element-ui": "^2.4.5",
1920
"mysql": "^2.18.1",
2021
"sqlite3": "^5.0.0",
2122
"typeorm": "^0.2.29",
2223
"vue": "^2.6.11",
24+
"vue-dragscroll": "^2.1.0",
25+
"vue-pdf": "^4.2.0",
2326
"vue-router": "^3.2.0",
2427
"vuex": "^3.4.0"
2528
},

‎src/App.vue‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,18 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
4-
<div>
5-
<p>
6-
If Element is successfully added to this project, you'll see an
7-
<code v-text="'<el-button>'"></code>
8-
below
9-
</p>
10-
<el-button>el-button</el-button>
11-
</div>
12-
<HelloWorld msg="Welcome to Your Vue.js App"/>
3+
<router-view></router-view>
134
</div>
145
</template>
156

167
<script>
17-
import HelloWorld from './components/HelloWorld.vue'
18-
8+
199
export default {
2010
name: 'app',
21-
components: {
22-
HelloWorld
23-
}
2411
}
2512
</script>
2613

2714
<style>
2815
#app {
29-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
30-
-webkit-font-smoothing: antialiased;
31-
-moz-osx-font-smoothing: grayscale;
32-
text-align: center;
33-
color: #2c3e50;
34-
margin-top: 60px;
16+
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
3517
}
3618
</style>

‎src/components/HelloWorld.vue‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/components/itemViewer.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div class="item">
3+
<h1>{{val.value}}</h1>
4+
<h2>{{val.footprint}}</h2>
5+
<div class="img">
6+
<el-image
7+
style="width: 150px; height: 150px"
8+
:src="
9+
val.imgs.length > 0
10+
? val.imgs[0] + '?imageView2/1/w/150/h/150/q/75'
11+
: ''
12+
"
13+
:preview-src-list="val.imgs"
14+
>
15+
</el-image>
16+
<el-image style="width: 150px; height: 150px" :src="val.symbolUrl">
17+
</el-image>
18+
<el-image style="width: 150px; height: 150px" :src="val.fpUrl">
19+
</el-image>
20+
</div>
21+
<el-row>
22+
<el-col :span="10" :offset="1">
23+
<el-table :data="descTable" stripe style="width: 100%">
24+
<el-table-column label="Parameter" prop="name" align="center"> </el-table-column>
25+
<el-table-column label="Value" prop="val" align="center"> </el-table-column>
26+
</el-table>
27+
</el-col>
28+
<el-col :span="10" :offset="2">
29+
<el-table :data="val.prices" stripe style="width: 100%">
30+
<el-table-column label="Number" prop="num" align="center"> </el-table-column>
31+
<el-table-column label="Price" prop="price" align="center"> </el-table-column>
32+
</el-table>
33+
</el-col>
34+
</el-row>
35+
</div>
36+
</template>
37+
<script>
38+
export default {
39+
props: {
40+
val: {},
41+
},
42+
created() {
43+
this.descTable= [];
44+
console.log(this.height)
45+
let descs = this.val.desc.split(",");
46+
for (let i in descs) {
47+
let b = descs[i].split(":");
48+
this.descTable.push({
49+
name: b[0],
50+
val: b[1],
51+
});
52+
}
53+
},
54+
data() {
55+
return {
56+
descTable: [],
57+
};
58+
},
59+
};
60+
</script>
61+
<style scoped>
62+
.item{
63+
text-align: left;
64+
margin: 20px;
65+
}
66+
.h1{
67+
padding-left: 10%;
68+
}
69+
.img{
70+
text-align: center;
71+
}
72+
</style>

‎src/components/pdfViewer.vue‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<template>
2+
<div class="pdfViewer">
3+
<div>
4+
<el-pagination
5+
layout="prev, pager, next"
6+
:total="pageTotalNum * 10"
7+
:current-page.sync="pageNum"
8+
@current-change="handleCurrentChange"
9+
background
10+
>
11+
</el-pagination>
12+
<div class="ctrl">
13+
<el-button
14+
icon="el-icon-zoom-in"
15+
circle
16+
type="primary"
17+
@click="zoomin"
18+
></el-button>
19+
<el-button
20+
icon="el-icon-zoom-out"
21+
circle
22+
type="primary"
23+
@click="zoomout"
24+
></el-button>
25+
<el-button
26+
icon="el-icon-refresh-right"
27+
circle
28+
type="primary"
29+
@click="clock"
30+
></el-button>
31+
<el-button
32+
icon="el-icon-refresh-left"
33+
circle
34+
type="primary"
35+
@click="counterClock"
36+
></el-button>
37+
<el-progress v-if="loadedRatio>0&&loadedRatio<1" :text-inside="true" :stroke-width="26" :percentage="Math.floor(100*loadedRatio)" style="padding-top: 10px;"></el-progress>
38+
</div>
39+
</div>
40+
<div v-dragscroll="true" :class='{"grab-bing": zoom > 100 }'>
41+
<pdf
42+
:style="{'width':zoom+'%'}"
43+
ref="pdf"
44+
:src="url"
45+
:page="pageNum"
46+
:rotate="pageRotate"
47+
@progress="loadedRatio = $event"
48+
@page-loaded="pageLoaded($event)"
49+
@num-pages="pageTotalNum = $event"
50+
@error="pdfError($event)"
51+
@link-clicked="page = $event"
52+
>
53+
</pdf>
54+
</div>
55+
</div>
56+
</template>
57+
58+
<script>
59+
import pdf from "vue-pdf";
60+
import { dragscroll } from 'vue-dragscroll'
61+
62+
export default {
63+
props: {
64+
url: String,
65+
},
66+
directives: { dragscroll },
67+
components: {
68+
pdf,
69+
},
70+
data() {
71+
return {
72+
zoom: 100,
73+
pageNum: 1,
74+
pageTotalNum: 1,
75+
pageRotate: 0,
76+
loadedRatio: 0,
77+
curPageNum: 0,
78+
};
79+
},
80+
methods: {
81+
// 上一页函数，
82+
prePage() {
83+
var page = this.pageNum;
84+
page = page > 1 ? page - 1 : this.pageTotalNum;
85+
this.pageNum = page;
86+
},
87+
// 下一页函数
88+
nextPage() {
89+
var page = this.pageNum;
90+
page = page < this.pageTotalNum ? page + 1 : 1;
91+
this.pageNum = page;
92+
},
93+
handleCurrentChange(val) {
94+
this.pageNum = val;
95+
},
96+
// 页面顺时针翻转90度。
97+
clock() {
98+
this.pageRotate += 90;
99+
},
100+
// 页面逆时针翻转90度。
101+
counterClock() {
102+
this.pageRotate -= 90;
103+
},
104+
// 页面加载回调函数，其中e为当前页数
105+
pageLoaded(e) {
106+
this.curPageNum = e;
107+
},
108+
// 其他的一些回调函数。
109+
pdfError(error) {
110+
console.error(error);
111+
},
112+
zoomin(){
113+
this.zoom+=20
114+
},
115+
zoomout(){
116+
this.zoom-=20
117+
if(this.zoom<100){
118+
this.zoom=100
119+
}
120+
}
121+
},
122+
};
123+
</script>
124+
<style scoped>
125+
.ctrl{
126+
text-align: right;
127+
padding-right: 100px;
128+
padding-left: 100px;
129+
padding-top: 10px;
130+
padding-bottom: 30px;
131+
}
132+
.pdfViewer{
133+
margin: 50px;
134+
}
135+
.grab-bing {
136+
overflow: hidden;
137+
max-height: 90vh;
138+
cursor : -webkit-grab;
139+
cursor : -moz-grab;
140+
cursor : -o-grab;
141+
cursor : grab;
142+
}
143+
144+
145+
.grab-bing:active {
146+
overflow: hidden;
147+
max-height: 90vh;
148+
cursor : -webkit-grabbing;
149+
cursor : -moz-grabbing;
150+
cursor : -o-grabbing;
151+
cursor : grabbing;
152+
}
153+
</style>

0 commit comments

Comments
 (0)