sheyang
/
sheyangCoastalSystem
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

12/12 23:06

Browse Source
hezhengao
何峥傲 1 year ago
parent 050d776cd8
commit e3f08837b1
7 changed files with 256 additions and 237 deletions
Show Stats Download Patch File Download Diff File

19
src/views/Login/index.vue
Unescape View File

@ -16,12 +16,12 @@
<div class="title_text">{{ title_text }}</div> <div class="title_text">{{ title_text }}</div>
</div> </div>
<div class="time_body"> <div class="time_body">
<div class="box_all"> <div class="box_all" v-if="play">
<div class="time_item">{{ timeArr.timeText }}</div> <div class="time_item">{{ timeArr.timeText }}</div>
<div class="time_item">{{ timeArr.week }}</div> <div class="time_item">{{ timeArr.week }}</div>
<div class="time">{{ timeArr.timeTime }}</div> <div class="time">{{ timeArr.timeTime }}</div>
</div> </div>
<div class="box_all_right"> <div class="box_all_right" v-if="play">
<div class="box_all_right_pic"></div> <div class="box_all_right_pic"></div>
<div class="box_all_right_name">{{ userName }}</div> <div class="box_all_right_name">{{ userName }}</div>
</div> </div>
@ -35,7 +35,7 @@
<div class="text2" @click="change2">数字证书登录</div> <div class="text2" @click="change2">数字证书登录</div>
</div> </div>
<!-- 账号密码 --> <!-- 账号密码 -->
<div class="username" v-show="show"> <div class="username" v-if="show">
<div class="username_box"> <div class="username_box">
<div class="username_icon"></div> <div class="username_icon"></div>
<div class="name"> <div class="name">
@ -55,6 +55,7 @@
placeholder="请输入密码" placeholder="请输入密码"
v-model="formValue.password" v-model="formValue.password"
onkeyup="value=value.replace(/[^\x00-\xff]/g, '')" onkeyup="value=value.replace(/[^\x00-\xff]/g, '')"
type="password"
></el-input> ></el-input>
</div> </div>
</div> </div>
@ -71,11 +72,11 @@
<img class="codeImg" :src="picUrl" alt="" /> <img class="codeImg" :src="picUrl" alt="" />
</div> </div>
<div class="uselogin"> <div class="uselogin">
<el-button @click="onLogin" class="loginbtn">登录</el-button> <el-button @click="onLogin">登录</el-button>
</div> </div>
</div> </div>
<!-- 证书登录 --> <!-- 证书登录 -->
<div class="username" v-show="show1"> <div class="username" v-if="show1">
<div class="book"> <div class="book">
<div class="bookname">请输入电子数字证书</div> <div class="bookname">请输入电子数字证书</div>
<div class="bookicon"></div> <div class="bookicon"></div>
@ -374,7 +375,7 @@ export default {
.book { .book {
width: 23vw; width: 23vw;
height: 15vh; height: 15vh;
margin-bottom: 5.8vh; margin-bottom: 7.7vh;
color: #ecf4f9; color: #ecf4f9;
border: 1px solid #1ceadf; border: 1px solid #1ceadf;
text-align: center; text-align: center;
@ -415,6 +416,7 @@ export default {
// margin-bottom: 2vh; // margin-bottom: 2vh;
.el-input__inner { .el-input__inner {
width: 21.5vw; width: 21.5vw;
height: 5vh;
// border: 1px solid #1ceadf; // border: 1px solid #1ceadf;
background-color: #0a3762; background-color: #0a3762;
// background-color: #0b2f59; // background-color: #0b2f59;
@ -444,6 +446,7 @@ export default {
.word { .word {
.el-input__inner { .el-input__inner {
width: 21.5vw; width: 21.5vw;
height: 5vh;
// border: 1px solid #1ceadf; // border: 1px solid #1ceadf;
background-color: #0a3762; background-color: #0a3762;
// background-color: #0b2f59; // background-color: #0b2f59;
@ -471,6 +474,7 @@ export default {
} }
.el-input__inner { .el-input__inner {
width: 14vw; width: 14vw;
height: 5vh;
// border: 1px solid #1ceadf; // border: 1px solid #1ceadf;
background-color: #0a3762; background-color: #0a3762;
// background-color: #0b2f59; // background-color: #0b2f59;
@ -479,7 +483,7 @@ export default {
} }
.codeImg { .codeImg {
width: 14vw; width: 14vw;
height: 4.5vh; height: 5vh;
border: 1px solid #1ceadf; border: 1px solid #1ceadf;
border-radius: 5%; border-radius: 5%;
margin-left: 0.5vw; margin-left: 0.5vw;
@ -489,6 +493,7 @@ export default {
margin-top: 3vh; margin-top: 3vh;
.el-button { .el-button {
width: 23vw; width: 23vw;
height: 5vh;
background-image: url(../../assets/login/loginbtn.png); background-image: url(../../assets/login/loginbtn.png);
background-size: 100% 100%; background-size: 100% 100%;
border: none; border: none;

2
src/views/buildUse/index.vue
Unescape View File

@ -57,7 +57,7 @@ export default {
roll_list: [ roll_list: [
{ {
id: '1', id: '1',
name: '非法捕猎', name: '非法狩猎',
route: '/hunting' route: '/hunting'
}, },
{ {

39
src/views/sensingDevice/components/carLarge.vue
Unescape View File

@ -24,7 +24,7 @@ export default {
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.init_charts() this.init_charts()
}, 500) }, 2000)
}, },
created() { created() {
this.onvehicleTrafficStatistics() this.onvehicleTrafficStatistics()
@ -35,7 +35,7 @@ export default {
const res = await vehicleTrafficStatistics() const res = await vehicleTrafficStatistics()
this.list = Object.keys(res.data) this.list = Object.keys(res.data)
this.list1 = Object.values(res.data) this.list1 = Object.values(res.data)
console.log(this.list, 'kkk')
}, },
init_charts() { init_charts() {
console.log(123) console.log(123)
@ -57,33 +57,44 @@ export default {
{ {
type: 'category', type: 'category',
data: this.list, data: this.list,
textStyle: {
fontSize: '4',
color:'#fff'
},
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
} }
], ],
grid: { grid: {
// 让图表占满容器 // 让图表占满容器
top: '20px', top: '20px',
right: '10px' right: '9px',
left:'50px',
bottom:'60px'
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
min: 100, min: 10000,
max: 700, max: 70000,
interval: 100 interval: 5000,
// textStyle: {
// color:'#fff'
// }
}, },
{ {
show: false, // show: false,
type: 'value', type: 'value',
min: 0, min: 10000,
max: 25, max: 70000,
interval: 5, interval: 5000,
axisLabel: { axisLabel: {
formatter: '{value} °C' formatter: '{value} '
} }
} }
], ],
@ -99,11 +110,11 @@ export default {
data: this.list1 data: this.list1
}, },
{
// name: 'Temperature', {
name: '准确车流量',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: this.list1 data: this.list1
} }
] ]

7
src/views/sensingDevice/components/mancarStatistics.vue
Unescape View File

@ -25,8 +25,11 @@ export default {
} }
}, },
mounted() { mounted() {
setTimeout(()=>{
this.init_charts() this.init_charts()
this.init_car_charts() this.init_car_charts()
},1500)
}, },
created() { created() {
this.onhumanVehicleStatistics() this.onhumanVehicleStatistics()
@ -34,8 +37,8 @@ export default {
methods: { methods: {
async onhumanVehicleStatistics() { async onhumanVehicleStatistics() {
const res = await humanVehicleStatistics() const res = await humanVehicleStatistics()
this.list = res.data this.list = res.data
console.log(this.list, 'aaa')
}, },
// //
init_charts() { init_charts() {

32
src/views/sensingDevice/components/peopleLarge.vue
Unescape View File

@ -25,7 +25,7 @@ export default {
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.echarts_icon() this.echarts_icon()
}, 500) }, 1500)
}, },
created() { created() {
this.onhumanTrafficStatistics() this.onhumanTrafficStatistics()
@ -35,11 +35,10 @@ export default {
const res = await humanTrafficStatistics() const res = await humanTrafficStatistics()
this.list = Object.keys(res.data) this.list = Object.keys(res.data)
this.list1 = Object.values(res.data) this.list1 = Object.values(res.data)
console.log(this.list, 'iiiii')
}, },
// //
echarts_icon() { echarts_icon() {
console.log(this.list, 'haha')
console.log('hza') console.log('hza')
var chartDom = document.getElementById('people_chart') var chartDom = document.getElementById('people_chart')
var myChart = echarts.init(chartDom) var myChart = echarts.init(chartDom)
@ -57,15 +56,12 @@ export default {
} }
}, },
// legend: {
// itemGap: 24 // 修改间距
// },
grid: { grid: {
top: '10%', top: '10%',
left: '3%', left: '0%',
right: '4%', right: '7%',
bottom: '3%', bottom: '1%',
containLabel: true containLabel: true
}, },
xAxis: [ xAxis: [
@ -75,17 +71,21 @@ export default {
//X轴日期 //X轴日期
data: this.list, data: this.list,
axisLabel: { axisLabel: {
textStyle: { Interval:'0'
fontSize: '7' , textStyle: {
width:'1',
fontSize: '7',
color:'#fff'
} }
} }
} }
], ],
yAxis: [ yAxis: [
{ {
min: 100, min: 1000,
max: 600, max: 10000,
interval: 100, interval: 1000,
data: this.list1,
type: 'value' type: 'value'
} }
], ],
@ -97,7 +97,7 @@ export default {
smooth: true, smooth: true,
lineStyle: { lineStyle: {
borderColor: '#464646', borderColor: '#464646',
width: 0
}, },
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {

4
src/views/sensingDevice/components/personCatch.vue
Unescape View File

@ -56,7 +56,7 @@
</template> </template>
<script> <script>
import { getTransitUserAPI } from '@/api/sensingDevice/resource' import { transitUserRecord } from '@/api/sensingDevice/resource'
export default { export default {
name: 'PersonCatch', name: 'PersonCatch',
props: { props: {
@ -188,7 +188,7 @@ export default {
}, 500) }, 500)
}, },
async ontransitUserRecord() { async ontransitUserRecord() {
const res = await getTransitUserAPI() const res = await transitUserRecord()
this.roll_list = res.rows this.roll_list = res.rows
console.log(res, 'oop') console.log(res, 'oop')
} }

390
src/views/sensingDevice/utils/initEcharts.js
Unescape View File

@ -1,195 +1,195 @@
// * echarts 初始化方法 // // * echarts 初始化方法
import * as echarts from 'echarts' // import * as echarts from 'echarts'
import EleResize from '@/utils/esresize' // import EleResize from '@/utils/esresize'
export const init_echarts = () => { // export const init_echarts = () => {
// * echarts 实例 // // * echarts 实例
const myChart = echarts.init(document.getElementById('people_chart')) // const myChart = echarts.init(document.getElementById('people_chart'))
let resize_div = document.getElementById('people_chart') // let resize_div = document.getElementById('people_chart')
// *echarts表自适应 // // *echarts表自适应
EleResize.on(resize_div, () => { // EleResize.on(resize_div, () => {
myChart.resize() // myChart.resize()
}) // })
// * echarts 选项 // // * echarts 选项
myChart.setOption({ // myChart.setOption({
color: ['#80ffa5', '#00ddff', '#37a2ff', '#ffbf00'], // color: ['#80ffa5', '#00ddff', '#37a2ff', '#ffbf00'],
title: { // title: {
// text: '标题' // // text: '标题'
}, // },
tooitip: { // tooitip: {
trigger: 'axis', // trigger: 'axis',
axisPointer: { // axisPointer: {
type: 'cross', // type: 'cross',
label: { // label: {
backgroundColor: '#6a7985' // backgroundColor: '#6a7985'
} // }
} // }
}, // },
legend: { // legend: {
// data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'] // // data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
}, // },
toolbox: { // toolbox: {
feature: { // feature: {
saveAsImage: {} // saveAsImage: {}
} // }
}, // },
grid: { // grid: {
left: '3%', // left: '3%',
right: '4%', // right: '4%',
bottom: '3%', // bottom: '3%',
containLabel: true // containLabel: true
}, // },
xAxis: [ // xAxis: [
{ // {
type: 'category', // type: 'category',
boundaryGap: false, // boundaryGap: false,
data: ['11-26', '11-27', '11-28', '11-29', '11-30', '12-01', '12-02'] // data: ['11-26', '11-27', '11-28', '11-29', '11-30', '12-01', '12-02']
} // }
], // ],
yAxis: [ // yAxis: [
{ // {
type: 'value' // type: 'value'
} // }
], // ],
series: [ // series: [
{ // {
// name: 'Line 1', // // name: 'Line 1',
type: 'line', // type: 'line',
stack: 'Total', // stack: 'Total',
smooth: true, // smooth: true,
lineStyle: { // lineStyle: {
width: 0 // width: 0
}, // },
showSymbol: false, // showSymbol: false,
areaStyle: { // areaStyle: {
opacity: 0.8, // opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ // {
offset: 0, // offset: 0,
color: 'rgb(128, 255, 165)' // color: 'rgb(128, 255, 165)'
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgb(1, 191, 236)' // color: 'rgb(1, 191, 236)'
} // }
]) // ])
}, // },
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [140, 232, 101, 264, 90, 340, 250] // data: [140, 232, 101, 264, 90, 340, 250]
}, // },
{ // {
// name: 'Line 2', // // name: 'Line 2',
type: 'line', // type: 'line',
stack: 'Total', // stack: 'Total',
smooth: true, // smooth: true,
lineStyle: { // lineStyle: {
width: 0 // width: 0
}, // },
showSymbol: false, // showSymbol: false,
areaStyle: { // areaStyle: {
opacity: 0.8, // opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ // {
offset: 0, // offset: 0,
color: 'rgb(0, 221, 255)' // color: 'rgb(0, 221, 255)'
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgb(77, 119, 255)' // color: 'rgb(77, 119, 255)'
} // }
]) // ])
}, // },
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [120, 282, 111, 234, 220, 340, 310] // data: [120, 282, 111, 234, 220, 340, 310]
}, // },
{ // {
// name: 'Line 3', // // name: 'Line 3',
type: 'line', // type: 'line',
stack: 'Total', // stack: 'Total',
smooth: true, // smooth: true,
lineStyle: { // lineStyle: {
width: 0 // width: 0
}, // },
showSymbol: false, // showSymbol: false,
areaStyle: { // areaStyle: {
opacity: 0.8, // opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ // {
offset: 0, // offset: 0,
color: 'rgb(55, 162, 255)' // color: 'rgb(55, 162, 255)'
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgb(116, 21, 219)' // color: 'rgb(116, 21, 219)'
} // }
]) // ])
}, // },
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [320, 132, 201, 334, 190, 130, 220] // data: [320, 132, 201, 334, 190, 130, 220]
}, // },
{ // {
// name: 'Line 4', // // name: 'Line 4',
type: 'line', // type: 'line',
stack: 'Total', // stack: 'Total',
smooth: true, // smooth: true,
lineStyle: { // lineStyle: {
width: 0 // width: 0
}, // },
showSymbol: false, // showSymbol: false,
areaStyle: { // areaStyle: {
opacity: 0.8, // opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ // {
offset: 0, // offset: 0,
color: 'rgb(255, 0, 135)' // color: 'rgb(255, 0, 135)'
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgb(135, 0, 157)' // color: 'rgb(135, 0, 157)'
} // }
]) // ])
}, // },
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [220, 402, 231, 134, 190, 230, 120] // data: [220, 402, 231, 134, 190, 230, 120]
}, // },
{ // {
// name: 'Line 5', // // name: 'Line 5',
type: 'line', // type: 'line',
stack: 'Total', // stack: 'Total',
smooth: true, // smooth: true,
lineStyle: { // lineStyle: {
width: 0 // width: 0
}, // },
showSymbol: false, // showSymbol: false,
label: { // label: {
show: true, // show: true,
position: 'top' // position: 'top'
}, // },
areaStyle: { // areaStyle: {
opacity: 0.8, // opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ // {
offset: 0, // offset: 0,
color: 'rgb(255, 191, 0)' // color: 'rgb(255, 191, 0)'
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgb(224, 62, 76)' // color: 'rgb(224, 62, 76)'
} // }
]) // ])
}, // },
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [220, 302, 181, 234, 210, 290, 150] // data: [220, 302, 181, 234, 210, 290, 150]
} // }
] // ]
}) // })
} // }

Write Preview
Loading…
Cancel
Save