forked from kongfp/TP_Web
init project
parent
70e4d9654b
commit
0b7089bb6c
@ -0,0 +1,4 @@
|
|||||||
|
window.serverConfig = {
|
||||||
|
// 后台服务器
|
||||||
|
VUE_APP_HOST_URL: 'http://192.168.0.47:8000/api/',
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,127 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1361px"
|
||||||
|
height="609px" viewBox="0 0 1361 609" version="1.1">
|
||||||
|
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Group 21</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs/>
|
||||||
|
<g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
|
||||||
|
<g id="Group-21" transform="translate(77.000000, 73.000000)">
|
||||||
|
<g id="Group-18" opacity="0.8"
|
||||||
|
transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
|
||||||
|
<ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367"
|
||||||
|
rx="21.7830479" ry="21.766008"/>
|
||||||
|
<ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601"
|
||||||
|
rx="5.2173913" ry="5.21330997"/>
|
||||||
|
<path
|
||||||
|
d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z"
|
||||||
|
id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"/>
|
||||||
|
<path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6"
|
||||||
|
stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7"
|
||||||
|
stroke-width="0.702678964" opacity="0.7" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"/>
|
||||||
|
<path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9"
|
||||||
|
stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
stroke-dasharray="1.405357899873153,2.108036953469981"/>
|
||||||
|
<g id="Group-17"
|
||||||
|
transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)"
|
||||||
|
fill="#CFDAE6">
|
||||||
|
<ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653"
|
||||||
|
ry="9.12768076"/>
|
||||||
|
<path
|
||||||
|
d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z"
|
||||||
|
id="Oval-4"
|
||||||
|
transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Group-14"
|
||||||
|
transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
|
||||||
|
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439"
|
||||||
|
rx="29.1176471" ry="29.1402439"/>
|
||||||
|
<ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439"
|
||||||
|
rx="21.5686275" ry="21.5853659"/>
|
||||||
|
<ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341"
|
||||||
|
rx="23.7254902" ry="23.7439024"/>
|
||||||
|
<ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439"
|
||||||
|
rx="10.7843137" ry="10.7926829"/>
|
||||||
|
<path
|
||||||
|
d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z"
|
||||||
|
id="Oval-2" fill="#BACAD9"/>
|
||||||
|
<g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)"
|
||||||
|
fill="#E6A1A6">
|
||||||
|
<ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824"
|
||||||
|
ry="6.47560976"/>
|
||||||
|
<path
|
||||||
|
d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z"
|
||||||
|
id="Oval-2-Copy-2"
|
||||||
|
transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "/>
|
||||||
|
</g>
|
||||||
|
<ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706"
|
||||||
|
ry="1.61890244"/>
|
||||||
|
<ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098"
|
||||||
|
rx="1.61764706" ry="1.61890244"/>
|
||||||
|
<ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488"
|
||||||
|
rx="2.15686275" ry="2.15853659"/>
|
||||||
|
<path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6"
|
||||||
|
opacity="0.8"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group-10" opacity="0.799999952"
|
||||||
|
transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
|
||||||
|
<ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32"
|
||||||
|
rx="11.1864407" ry="11.2941176"/>
|
||||||
|
<g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
|
||||||
|
<ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627"
|
||||||
|
ry="8.55614973"/>
|
||||||
|
<path
|
||||||
|
d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z"
|
||||||
|
id="Oval-7"/>
|
||||||
|
</g>
|
||||||
|
<path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6"
|
||||||
|
stroke-width="0.941176471"/>
|
||||||
|
<ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186"
|
||||||
|
cy="3.29411765" rx="3.26271186" ry="3.29411765"/>
|
||||||
|
<ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017"
|
||||||
|
ry="2.82352941"/>
|
||||||
|
<path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6"
|
||||||
|
stroke-width="0.941176471"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group-19" opacity="0.33"
|
||||||
|
transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
|
||||||
|
<g id="Group-17"
|
||||||
|
transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)"
|
||||||
|
fill="#BACAD9">
|
||||||
|
<circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"/>
|
||||||
|
<path
|
||||||
|
d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z"
|
||||||
|
id="Oval-4"
|
||||||
|
transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "/>
|
||||||
|
</g>
|
||||||
|
<circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"/>
|
||||||
|
<path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9"
|
||||||
|
stroke-width="1.16666667"/>
|
||||||
|
<path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9"
|
||||||
|
stroke-width="1.16666667"/>
|
||||||
|
<polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667"
|
||||||
|
points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"/>
|
||||||
|
<path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7"
|
||||||
|
stroke-width="1.16666667" opacity="0.6"/>
|
||||||
|
<path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9"
|
||||||
|
stroke-width="1.16666667"/>
|
||||||
|
<path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6"
|
||||||
|
stroke-width="1.16666667"/>
|
||||||
|
<circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"/>
|
||||||
|
<circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"/>
|
||||||
|
<circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25"
|
||||||
|
r="8.75"/>
|
||||||
|
<circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333"
|
||||||
|
cy="30.3333333" r="5.83333333"/>
|
||||||
|
<circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<div xmlns="" id="divScriptsUsed" style="display: none"/>
|
||||||
|
<script xmlns="" id="globalVarsDetection"
|
||||||
|
src="chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/wrs_env.js"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
@ -1,58 +0,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-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>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,249 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="hello">
|
||||||
|
<Nav></Nav>
|
||||||
|
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
<el-form-item label="日期：">
|
||||||
|
<el-input v-model="formInline.date" placeholder="日期"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="警号：">
|
||||||
|
<el-input v-model="formInline.policeId" placeholder="警号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="事件：">
|
||||||
|
<el-input v-model="formInline.event" placeholder="事件"></el-input>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSearch">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
stripe
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
prop="record_time"
|
||||||
|
label="记录仪日期时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="police_id"
|
||||||
|
label="警号">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="event_type"
|
||||||
|
label="事件">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span>
|
||||||
|
{{ scope.row.event_type || '未定义事件' }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="is_violation"
|
||||||
|
label="是否违规">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span v-if="scope.row.is_violation">是</span>
|
||||||
|
<span v-else>否</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="small_image"
|
||||||
|
label="缩率图">
|
||||||
|
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-image :preview-src-list="[scope.row.small_image]"
|
||||||
|
style="width: 80px; height: 80px"
|
||||||
|
:src="scope.row.small_image"
|
||||||
|
></el-image>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="car_number"
|
||||||
|
label="车牌号">
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column show-overflow-tooltip label="视频">
|
||||||
|
|
||||||
|
<template v-slot="scope">
|
||||||
|
|
||||||
|
<el-button type="primary" @click="goto_video(scope.row)" icon="el-icon-video-play"
|
||||||
|
:disabled="scope.row.video_dir === '' || scope.row.video_dir === null"
|
||||||
|
>
|
||||||
|
|
||||||
|
<span v-if="scope.row.video_dir">播放视频</span>
|
||||||
|
<span v-else>暂无视频</span>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
class="tablePage"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="currentPage"
|
||||||
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
layout="total, sizes, prev, pager, next"
|
||||||
|
:total="totalNumber">
|
||||||
|
</el-pagination>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Nav from "@/components/Nav.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HelloWorld',
|
||||||
|
components: {
|
||||||
|
Nav
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 1,
|
||||||
|
totalNumber: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
isDisplay: true,
|
||||||
|
|
||||||
|
formInline: {
|
||||||
|
date: '',
|
||||||
|
policeId: '',
|
||||||
|
event: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
eventMap: {
|
||||||
|
1: "抽烟",
|
||||||
|
2: "汽车追尾",
|
||||||
|
3: "打架",
|
||||||
|
4: "闯红绿灯",
|
||||||
|
},
|
||||||
|
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
record_time: '2016-05-02 20:20:20',
|
||||||
|
police_id: '王小虎',
|
||||||
|
event_type: '上海市普陀区金沙江路 1518 弄',
|
||||||
|
is_violation: true,
|
||||||
|
small_image: "",
|
||||||
|
video_dir: "http://static.smartisanos.cn/common/video/t1-ui.mp4",
|
||||||
|
car_number: "",
|
||||||
|
is_display: true,
|
||||||
|
relative_time: 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
goto_video(rowData) {
|
||||||
|
let highlights = [ // 进度条时间点高亮
|
||||||
|
{
|
||||||
|
text: rowData.event_type,
|
||||||
|
time: rowData.relative_time,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.$router.push({
|
||||||
|
name: 'play_video',
|
||||||
|
params: {video_url: rowData.video_dir, highlights: highlights}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onSearch() {
|
||||||
|
this.$axios({
|
||||||
|
url: window.serverConfig.VUE_APP_HOST_URL,
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
datetime: this.formInline.date || undefined,
|
||||||
|
police_id: this.formInline.policeId || undefined,
|
||||||
|
event_type: this.formInline.event || undefined,
|
||||||
|
page: this.currentPage || undefined,
|
||||||
|
page_size: this.pageSize || undefined
|
||||||
|
}
|
||||||
|
}).then(response => {
|
||||||
|
// console.log('请求成功');
|
||||||
|
// console.log(response.data);
|
||||||
|
this.totalNumber = response.data.count;
|
||||||
|
if (!this.isDisplay) {
|
||||||
|
this.tableData = response.data.results.filter((data) => {
|
||||||
|
return data.is_display === true;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.tableData = response.data.results
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}).catch(error => {
|
||||||
|
// console.log('请求失败');
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.pageSize = val;
|
||||||
|
this.onSearch();
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.currentPage = val;
|
||||||
|
this.onSearch();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped>
|
||||||
|
h3 {
|
||||||
|
margin: 40px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hello {
|
||||||
|
margin: 10px auto;
|
||||||
|
text-align: right;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-form-inline {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin: 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablePage {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<div class="view-account">
|
||||||
|
|
||||||
|
<div class="view-account-header"></div>
|
||||||
|
<div class="view-account-container">
|
||||||
|
|
||||||
|
<div class="view-account-top-logo">
|
||||||
|
<img src="../assets/account-logo.png" alt="">
|
||||||
|
<div>TP视频管理系统后台</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="view-account-form">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
size="large"
|
||||||
|
:model="formInline"
|
||||||
|
:rules="rules"
|
||||||
|
>
|
||||||
|
<el-form-item path="username">
|
||||||
|
<el-input v-model="formInline.username" placeholder="请输入用户名">
|
||||||
|
<template #prefix>
|
||||||
|
<span class="el-icon-user"></span>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item path="password">
|
||||||
|
<el-input
|
||||||
|
v-model="formInline.password"
|
||||||
|
type="password"
|
||||||
|
showPasswordOn="click"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<span class="el-icon-lock"></span>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleSubmit" class="loginButton">登录</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {reactive} from 'vue';
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'LoginPage',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formInline: reactive({
|
||||||
|
username: 'admin',
|
||||||
|
password: '123456',
|
||||||
|
isCaptcha: true,
|
||||||
|
}),
|
||||||
|
rules: {
|
||||||
|
username: {required: true, message: '请输入用户名', trigger: 'blur'},
|
||||||
|
password: {required: true, message: '请输入密码', trigger: 'blur'},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSubmit() {
|
||||||
|
this.$router.push({
|
||||||
|
name: 'home',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.view-account {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-account-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.view-account-container {
|
||||||
|
flex: 1;
|
||||||
|
padding: 32px 12px;
|
||||||
|
width: 420px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-account-top-logo {
|
||||||
|
padding: 32px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginButton {
|
||||||
|
min-width: 420px;
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.view-account {
|
||||||
|
background-image: url('../assets/login.svg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="nav">
|
||||||
|
|
||||||
|
<h1>TP视频管理系统</h1>
|
||||||
|
|
||||||
|
<el-button type="primary" class="ChoiceButton">
|
||||||
|
<router-link :to="routeInfo.name">{{ routeInfo.info }}</router-link>
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "GlobNav",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
routeInfo: {
|
||||||
|
name: '/home',
|
||||||
|
info: '回到首页'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
let routeName = this.$route.name;
|
||||||
|
if (routeName === 'home') {
|
||||||
|
this.routeInfo.name = '/login'
|
||||||
|
this.routeInfo.info = '退出登录'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.nav {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 150px;
|
||||||
|
//background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
//margin: 30px 50px 0 50px;
|
||||||
|
font: normal 20px/20px '微软雅黑';
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ChoiceButton {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
color: blue;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
// 路由管理
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Router from 'vue-router'
|
||||||
|
|
||||||
|
Vue.use(Router)
|
||||||
|
|
||||||
|
|
||||||
|
export default new Router({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: '/home'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
name: 'home',
|
||||||
|
component: () => import('./components/Home.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: () => import('./components/Login.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/play',
|
||||||
|
name: 'play_video',
|
||||||
|
component: () => import('./components/MyPlayer.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue