Skip to content

B
bigData
Commit 983dc399 by @zhang-bin-1
Options

gx

parents
Showing with 2851 additions and 0 deletions
.gitignore 0 → 100644
node_modules
dist
README.md 0 → 100644
# linan-bigdata-h5
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve
```
### Compiles and minifies for production
```
yarn run build
```
### Run your tests
```
yarn run test
```
### Lints and fixes files
```
yarn run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "linan-bigdata-h5",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.6.1",
"echarts": "^4.5.0",
"element-ui": "^2.15.7",
"html2canvas": "^1.4.1",
"js-md5": "^0.7.3",
"kuan-vue-flip-clock": "^1.0.1",
"mux.js": "^6.0.1",
"video.js": "^7.7.5",
"videojs-contrib-hls": "^5.15.0",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"babel-plugin-component": "^1.1.1",
"css-loader": "^5.0.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"style-loader": "^2.0.0",
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"vue-router": "^3.1.6",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off",
"no-debugger": "warn"
},
"parserOptions": {
"parser": "babel-eslint"
},
"globals": {
"AMap": false
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title>智管青山湖驾驶舱</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c3cc67d44c9e66dfa68b43daf2c424d8"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<style>
#app .amap-logo{
display: none !important;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but linan-bigdata-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
<template>
<div id="app" ref="app">
<transition name="slide-fade">
<router-view/>
</transition>
</div>
</template>
<script>
// import { getNewToken } from "@/api/api";
export default {
name: "app",
data() {
return {
};
},
created() {
// let userInfo = JSON.parse(localStorage.getItem('accountInfo'))
// // 登陆时的时间
// if (userInfo) {
// // 打开app的时间
// let nowTime =(new Date()).valueOf();
// let utc = nowTime - userInfo.loginTime;
// let date = utc/(60*60*1000) // 相差小时
// let dateTo = userInfo.expireTime / 1000 / 60 / 60
// if (date >= dateTo) {
// localStorage.clear();
// // 退出重新登陆
// this.$router.push('/')
// } else {
// // 刷新token
// getNewToken({id: userInfo.id}).then(res => {
// let loginTime =(new Date()).valueOf();
// res.data.loginTime = loginTime
// localStorage.setItem('accountInfo', JSON.stringify(res.data));
// })
// }
// }
},
methods: {
}
};
</script>
<style lang="stylus">
@import './assets/font/font.css';
#app {
margin: auto;
width: 1920px;
height: 1080px;
}
::-webkit-scrollbar {
width: 5px !important;
/*滚动条宽度*/
height: 5px !important;
/*滚动条高度*/
background-color: #09134E;
}
::-webkit-scrollbar-thumb {
background-color: #1C589E !important;
border-radius: 8px;
}
</style>
src/api/api.js 0 → 100644
/*
* @Descripttion:
* @version:
* @Author: zhouyh
* @Date: 2021-09-30 17:17:21
* @LastEditors: zhouyh
* @LastEditTime: 2021-09-30 17:49:08
*/
import { api, formatParams, config } from "@/utils/request";
// 获取7、30天数据
export function getGroupData(params) {
return api(
Object.assign(formatParams("GET", params), {
url: `${config.proxy}/receive/data/api/report/thirty`,
})
);
}
// 获取当日告警数据
export function getTodayData(params) {
return api(
Object.assign(formatParams("GET", params), {
url: `${config.proxy}/receive/data/api/report/today`,
})
);
}
// 获取最新10条数据 // flag
// export function getLatestData(params) {
// return api(
// Object.assign(formatParams("GET", params), {
// url: `${config.proxy}/receive/data/api/lastest`,
// })
// );
// }
// 获取事件分页列表
export function getEventsData(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/page?currentNo=${params.currentNo}&pageSize=${params.pageSize}&typeId=${params.typeId}`,
})
);
}
// 获取摄像头列表
export function getCameraList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/fullMsg/list?&typeId=${params.typeId}`,
})
);
}
// 获取摄像头分类一级列表
export function CameraShowOne(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/show/one?typeName=${params.typeName}`,
})
);
}
// 获取摄像头分类下级列表
export function CameraShowNext(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/show/next?id=${params.id}&typeId=${params.typeId}`,
})
);
}
// 获取摄像头视频
export function getCameraVideo(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/manage/deviceInfo/view`,
})
);
}
// 一键播报告警
export function personPlayOnByList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/urgentRadioManager/personPlayOnByList`,
})
);
}
// 地图开启播报告警
export function personPlay(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/urgentRadioManager/personPlay`,
})
);
}
// 列表开启播报告警
export function personPlayOnList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/urgentRadioManager/personPlayOnList`,
})
);
}
// 关闭播报告警
export function stopPersonPlay(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/urgentRadioManager/stopPersonPlay`,
})
);
}
// 获取成效统计
export function getResultRate(params) {
return api(
Object.assign(formatParams("GET", params), {
url: `${config.proxy}/receive/data/api/effect/statistics`,
})
);
}
// 获取事件详情
export function eventDetail(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/${params.id}`,
})
);
}
// 登陆
export function login(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/manage/login`,
})
);
}
/**
* 获取token
*/
// export function getNewToken (params) {
// return api(Object.assign(formatParams('GET'), {
// url: `${config.proxy}/login/api/token/update/${params.id}`
// }))
// }
/**
* 获取token
*/
export function getNewToken(params) {
return api(
Object.assign(formatParams("GET"), {
url: `${config.proxy}/login/api/token/update/${params.id}`,
})
);
}
/**
* 7天成效统计(时间与网格) flag
*/
export function queryCustom(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/query/custom`,
})
);
}
/**
* 获取网格列表
*/
export function queryNetArea(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/query/netArea`,
})
);
}
/**
* 获取token,免登陆
*/
export function getUserInfo(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/login/api/getUserInfo/${params.userId}`,
})
);
}
// 获取监控设备分类列表
export function treeList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/manage/deviceClassify/tree/dataList`,
})
);
}
// 根据分类获取监控设备
export function cameraByType(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/manage/deviceInfo/page?current=1&size=999`,
})
);
}
// 监控设备: 云台操作
export function cloud(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/camera/manager/cloud?cameraId=${params.cameraId}&action=${params.action}&command=${params.command}`,
})
);
}
// 上报事件
export function uploadEvent(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/accept/upload/event`,
})
);
}
// 获取类型
// export function eventTypeList(params) {
// return api(
// Object.assign(formatParams("POST", params), {
// url: `/urgentRadioManager/eventTypeList`,
// })
// );
// }
// 获取摄像头回放视频
export function playbackURLs(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/api/playbackURLs`,
})
);
}
// 获取事件类型列表
export function eventTypeList(params) {
return api(
Object.assign(formatParams("POST", params), {
url: `${config.proxy}/receive/data/web/api/eventTypeList`,
})
);
}
\ No newline at end of file
src/api/api3.js 0 → 100644
import { api, formatParams, config } from '@/utils/request';
// 获取7、30天数据
export function getGroupData(params) {
return api(Object.assign(formatParams('GET', params), {
url: `${config.proxy}/receive/data/api/report/thirty`
}))
}
// 获取当日告警数据
export function getTodayData(params) {
return api(Object.assign(formatParams('GET', params), {
url: `${config.proxy}/receive/data/api/report/today`
}))
}
// 获取最新10条数据
export function getLatestData(params) {
return api(Object.assign(formatParams('GET', params), {
url: `${config.proxy}/receive/data/api/lastest`
}))
}
// 获取事件列表
export function getEventsData(params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/receive/data/api/query/page`
}))
}
// 获取事件列表
export function getCameraList(params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/camera/fullMsg/list`
}))
}
// 获取摄像头视频
export function getCameraVideo(params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/camera/view/${params.cameraId}`
}))
}
// 获取成效统计
export function getResultRate(params) {
return api(Object.assign(formatParams('GET', params), {
url: `${config.proxy}/receive/data/api/effect/statistics`
}))
}
// 获取事件详情
export function eventDetail (params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/net/worker/api/detail/${params.id}`
}))
}
// 登陆
export function login (params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/net/worker/api/data/login`
}))
}
/**
* 获取token
*/
// export function getNewToken (params) {
// return api(Object.assign(formatParams('GET'), {
// url: `${config.proxy}/login/api/token/update/${params.id}`
// }))
// }
/**
* 获取token
*/
export function getNewToken (params) {
return api(Object.assign(formatParams('GET'), {
url: `${config.proxy}/net/worker/api/token/update/data/${params.id}`
}))
}
/**
* 7天成效统计(时间与网格)
*/
export function queryCustom (params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/receive/data/api/query/custom`
}))
}
/**
* 获取网格列表
*/
export function queryNetArea (params) {
return api(Object.assign(formatParams('POST', params), {
url: `${config.proxy}/receive/data/api/query/netArea`
}))
}
src/assets/font/font.css 0 → 100644
@font-face {
font-family: YouSheBiaoTiHei;
/* 重命名字体名 */
src: url('./YouSheBiaoTiHei-2.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PangMenZhengDao';
/* 重命名字体名 */
src: url('./PangMenZhengDao.ttf');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
src/components/Header.vue 0 → 100644
<template>
<header class="header">
<h1 class="name">智管青山湖驾驶舱</h1>
<!-- <div @click="open" class="target"><img src="@/assets/logo.png" style="margin-right: 10px;" alt="" />数智治理引擎平台</div> -->
<el-dropdown trigger="click" class="dropdown" @command="handleCommand">
<span class="el-dropdown-link">
{{ userInfo.username ? userInfo.username : "admin" }}
<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-switch-button" command="logout"
>退出登录</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</header>
</template>
<script>
export default {
name: "Header",
data() {
return {
userInfo: "",
};
},
created() {
this.userInfo = JSON.parse(localStorage.getItem("accountInfo"));
},
methods: {
handleCommand(command) {
if (command === "logout") {
this.logout();
}
},
logout() {
localStorage.clear();
this.$router.push("/");
},
open() {
console.log(this.userInfo.id);
let userId = this.userInfo.id ? this.userInfo.id : '';
// var url = "http://81.69.231.72:8015/#/?userId=" + userId
// var url = "http://1.15.3.38:8015/#/?userId=" + userId
var url = "http://218.108.67.198:9020/#/?userId=" + userId
window.open(url)
}
},
};
</script>
<style lang="stylus" scoped>
.header {
position: relative;
height: 92px;
display: flex;
justify-content: center;
border-radius: 4px;
background: url('~@/assets/index/header_bg.png') no-repeat;
z-index: 9;
.name {
margin-top 16px
text-align: center;
font-size: 46px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
letter-spacing: 4px;
}
}
.target{
position: absolute;
left: 30px;
top: 26px;
color: #fff !important;
font-size: 16px;
margin-right: 20px;
color: blue;
cursor: pointer;
}
.dropdown {
position: absolute;
display: flex;
align-items: center;
right: 30px;
top: 26px;
color: #fff;
font-size: 16px;
font-weight: 500;
cursor: pointer;
}
</style>
<style>
.dropdown .el-dropdown{
color: #fff;
}
</style>
src/components/sectioncenter/ResultRate.vue 0 → 100644
<template>
<div class="wrapper">
<div class="title">
<div class="icon"></div>
<p>成效统计</p>
</div>
<div class="RR_main">
<div class="item">
<canvas id="canvas1" width="100" height="100"></canvas>
<p class="font">自治率</p>
</div>
<div class="item">
<canvas id="canvas2" width="100" height="100"></canvas>
<p class="font">共治率</p>
</div>
<div class="item">
<canvas id="canvas3" width="100" height="100"></canvas>
<p class="font">执法率</p>
</div>
</div>
</div>
</template>
<script>
import Progress from "@/utils/progress.js";
import { getResultRate } from "@/api/api";
export default {
name: "ResultRate",
props: {
typeId: {
type: Number
}
},
watch: {
typeId: function () {
this.initResultRate();
},
},
data() {
return {
resultRate: {},
timer: null
};
},
created() {
this.initResultRate();
this.timer = window.setInterval(() => {
this.initResultRate()
}, 60 * 1000 * 5);
},
methods: {
init(el, value, color, bgcolor, text) {
const options = {
el, // canvas元素id
deg: value * 100, // 绘制角度
timer: 1, // 绘制时间
lineWidth: 10, // 线宽
lineBgColor: bgcolor, // 底圆颜色
lineColor: color, // 动态圆颜色
textColor: "#F2B700", // 文本颜色
fontSize: 27, // 字体大小
circleRadius: 60, // 圆半径
text // 是否显示文字
};
new Progress(options);
},
initResultRate() {
getResultRate({typeId: this.typeId}).then(res => {
if (res.code === 200) {
let val = res.data;
this.init(
"canvas1",
val.autonomyRate,
"rgb(120,255,0)",
"rgba(120,255,0,0.5)"
);
this.init(
"canvas2",
val.coTreatmentRate,
"rgb(0,255,222)",
"rgba(0,255,222,0.5)"
);
this.init(
"canvas3",
val.lawEnforcementRate,
"rgb(255,189,2)",
"rgba(255,189,2,0.5)"
);
}
});
}
},
beforeDestroy() {
clearInterval(this.timer);
}
};
</script>
<style lang="stylus" scoped>
.wrapper {
width: 530px;
height: 248px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.RR_main {
width: 100%;
height: 208px;
display: flex;
justify-content: space-around;
align-items: center;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.font {
margin-top: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
text-align: center;
}
}
}
}
.service {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 5px;
}
</style>
src/components/sectioncenter/WarnTrend.vue 0 → 100644
<template>
<div class="wrapper">
<div class="title">
<div class="icon"></div>
<p>30天全区城市眼告警指数走势</p>
</div>
<div id="warnTrend" class="charts"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "WarnTrend",
props: {
data: {
type: Array,
default: () => {
[];
},
},
},
watch: {
data: function () {
const xData = this.data.map((item) => {
return item.date.slice(5);
});
const yValue = this.data.map((item) => {
return item.total;
});
this.initLine(xData, yValue);
},
},
methods: {
initLine(xData, yValue) {
let myChart = echarts.init(document.getElementById("warnTrend"));
// 绘制图表
myChart.clear();
myChart.setOption({
animation: true,
grid: {
left: 20,
top: 20,
right: 20,
bottom: 20,
},
tooltip: {
trigger: "axis",
},
xAxis: {
data: xData,
type: "category",
axisLabel: {
interval: "auto",
color: "#fff",
fontSize: 13,
},
axisLine: {
lineStyle: {
color: "#fff",
},
},
},
yAxis: {
type: "value",
axisLabel: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
opacity: 0.3,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
data: yValue,
type: "line",
smooth: true,
symbol: "none",
symbolSize: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(69, 88, 246, 1)",
},
{
offset: 1,
color: "rgba(24, 255, 214, 1)",
},
]),
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(69, 88, 246, 1)",
},
{
offset: 1,
color: "rgba(24, 255, 214, 0)",
},
]),
},
},
],
});
},
},
};
</script>
<style lang="stylus" scoped>
.wrapper {
width: 530px;
height: 248px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.charts {
width: 100%;
height: 200px;
margin: auto;
}
}
.WT_main {
width: 420px;
}
</style>
src/components/sectionleft/HandleTotalRate.vue 0 → 100644
<template>
<div class="Sevenwrapper">
<div class="title">
<div class="icon"></div>
<p>处置率/处置数统计</p>
</div>
<div class="searchWrapper">
<el-date-picker
class="datePicker"
size="mini"
v-model="dateTime"
type="daterange"
align="right"
:clearable="false"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="initData"
></el-date-picker>
<el-select
class="selectPicker"
size="mini"
v-model="netAreaId"
filterable
placeholder="请选择网格"
@change="initData"
>
<el-option
v-for="item in netArea"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="HTR_main">
<div>
<div class="sub_panel">
<p class="sub_bg">{{ data.disposed }}</p>
</div>
<p class="panel_label">已处置</p>
</div>
<div>
<div id="panel" style="width: 160px; height: 120px"></div>
<p class="panel_label" style="margin-top: -13px">处置率</p>
</div>
<div>
<div class="sub_panel">
<p class="sub_bg">{{ data.waitingDispose }}</p>
</div>
<p class="panel_label">待处置</p>
</div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import { getFullDate, getSevenPassDate } from "@/utils/utils";
import { queryCustom, queryNetArea } from "@/api/api";
export default {
name: "HandleTotalRate",
props: {
typeId: {
type: Number
}
},
watch: {
typeId: function () {
this.initNetArea();
this.initData();
this.initEcharts();
},
},
data() {
return {
netArea: [{ value: "0", label: "全部" }],
data: {},
dateTime: [getSevenPassDate(), getFullDate()],
netAreaId: "0",
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
};
},
methods: {
initNetArea() {
console.log(this.typeId);
this.netArea = [{ value: "0", label: "全部" }];
queryNetArea({typeId: this.typeId}).then((res) => {
this.netArea = this.netArea.concat(
res.data.map((item) => {
return {
value: item.id,
label: item.name,
};
})
);
});
},
initData() {
const { dateTime, netAreaId } = this;
let parmas = {
createDateFrom: dateTime[0],
createDateTo: dateTime[1],
netAreaId: netAreaId,
typeId: this.typeId
};
queryCustom(parmas).then((res) => {
this.data = res.data.sevenReportData;
this.panelChart.setOption({
series: [{ data: [{ value: this.data.disposeRate }] }],
});
});
},
initEcharts() {
this.panelChart = echarts.init(document.getElementById("panel"));
this.panelChart.setOption({
tooltip: {
formatter: "处置率 : {c}%",
},
series: [
{
type: "gauge",
radius: "100%",
axisLine: {
lineStyle: {
color: [
//仪表盘背景颜色渐变
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#FF4128",
},
{
offset: 0.6,
color: "#4BFF8A",
},
{
offset: 1,
color: "#4FF8E9",
},
]),
],
],
width: 18,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
detail: {
formatter: "{value}%",
color: "#FC672C",
fontWeight: "500",
fontSize: "28",
},
data: [{ value: 0 }],
},
],
});
},
},
mounted() {
if (JSON.parse(localStorage.getItem('accountInfo')).level == 2) {
console.log(111)
} else {
this.initNetArea();
this.initData();
}
this.initEcharts();
},
};
</script>
<style lang="stylus">
.Sevenwrapper {
width: 384px;
height: 248px;
margin-top: 10px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.searchWrapper {
padding: 0 14px;
display: flex;
align-items: center;
margin: 14px 0 22px;
.datePicker {
width: 200px;
background: #123154;
border: none;
border-radius: 14px;
.el-range-input {
background: #123154;
color: #6A8EB7;
}
.el-range-separator {
color: #6A8EB7;
}
}
.selectPicker {
width: 140px;
margin-left: 12px;
background: #123154;
border-radius: 14px;
.el-input__inner {
border: none;
color: #6A8EB7;
}
}
}
.HTR_main {
padding: 0 20px;
display: flex;
justify-content: center;
align-items: flex-end;
.panel_label {
margin-top: 7px;
text-align: center;
line-height: 20px;
font-size: 14px;
font-family: MicrosoftYaHeiUI;
color: #ffffff;
}
.sub_panel {
width: 95px;
height: 78px;
display: flex;
justify-content: center;
align-items: center;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
background: url('~@/assets/sub_panel.png') no-repeat;
background-size: cover;
.sub_bg {
height: 50px;
width: 50px;
margin-top: 15px;
background: url('~@/assets/sub_panel_bg.png') no-repeat;
background-size: 50px 50px;
line-height: 50px;
text-align: center;
color: #FC672C;
font-size: 16px;
font-weight: bold;
transform: scale(1);
/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
animation-name: heartbeat; /* 动画名称 */
animation-duration: 3s; /* 动画时长3秒 */
animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
animation-iteration-count: infinite; /* 播放次数：无限 */
/* Safari and Chrome */
-webkit-animation-name: heartbeat; /* 动画名称 */
-webkit-animation-duration: 3s; /* 动画时长3秒 */
-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
-webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}
@keyframes heartbeat {
from {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
}
}
}
</style>
\ No newline at end of file
src/components/sectionleft/WarnDetail.vue 0 → 100644
<template>
<div class="warnDetail">
<div class="title">
<div class="icon"></div>
<p>
当日告警事件 <span>{{ count }}</span>
</p>
</div>
<div class="content">
<div class="cell" v-if="count != 0">
<p class="cell_label"></p>
<div style="width: 150px; height: 10px"></div>
<p class="cell_count">数量</p>
<p class="cell_count">处置率</p>
</div>
<div class="cell" v-for="(item, index) in data" :key="index">
<p class="cell_label">{{ item.label }}</p>
<div class="cell_width">
<div
class="deep"
v-if="maxCount !== 0"
:style="{ width: (item.total / maxCount) * 150 + 'px' }"
>
<div class="deep2"></div>
</div>
<div class="deep" v-else style="width: 2px">
<div class="deep2"></div>
</div>
</div>
<p class="cell_count">{{ item.total }}</p>
<p class="cell_count" style="color: #fcb000">
{{ item.disposeRate + "%" }}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "WarnDetail",
props: {
data: {
type: Array,
default: () => {
[];
},
},
maxCount: {
type: Number,
default: 0,
},
count: {
type: Number,
},
},
mounted() {},
};
</script>
<style lang="stylus" scoped>
.warnDetail {
width: 384px;
height: 320px;
margin-top: 10px;
background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
border-radius: 4px;
border: 2px solid #00356D;
.title {
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(270deg, #072B4D 0%, #134778 100%);
.icon {
width: 2px;
height: 20px;
background: #5CE3FB;
border-radius: 2px;
}
p {
margin-left: 10px;
font-size: 20px;
font-weight: 400;
color: #5CE3FB;
span {
font-weight: 500;
color: #FC672C;
}
}
}
.content {
padding: 20px;
font-size: 12px;
color: #ffffff;
height 75%;
overflow-y: auto;
.cell {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 16px;
.cell_label {
width: 80px;
}
.cell_width {
width: 150px;
height: 10px;
.deep {
height: 10px;
background: url('~@/assets/deep1_icon.png');
.deep2 {
width: 100%;
height: 100%;
background: url('~@/assets/deep2_icon.png');
opacity: 0.1;
/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
animation-name: breath; /* 动画名称 */
animation-duration: 3s; /* 动画时长3秒 */
animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
animation-iteration-count: infinite; /* 播放次数：无限 */
/* Safari and Chrome */
-webkit-animation-name: breath; /* 动画名称 */
-webkit-animation-duration: 3s; /* 动画时长3秒 */
-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
-webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}
@keyframes breath {
from {
opacity: 0.1;
}
/* 动画开始时的不透明度 */
50% {
opacity: 1;
}
/* 动画50% 时的不透明度 */
to {
opacity: 0.1;
}
/* 动画结束时的不透明度 */
}
}
}
.cell_count {
width: 50px;
text-align: center;
}
}
}
}
</style>
src/components/sectionright/VJS.vue 0 → 100644
<!-- =============================
- name: Minitor.vue
- author: yang
- description: Minitor.vue file is ready for
- time: 2021/5/11
============================= -->
<template>
<video
width="600"
height="400"
class="video-js v--box vjs-default-skin"
playsinline
webkit-playsinline
controls
autoplay
muted
preload="auto"
x-webkit-airplay="true"
x5-video-player-fullscreen="true"
x5-video-player-typ="h5"
style="width: 100%; height: 100%"
ref="videoPlayer"
>
<source :src="src" type="application/x-mpegURL" />
</video>
</template>
<script>
import videojs from "video.js";
import lan from "./zh-CN";
import 'video.js/dist/video-js.css'
export default {
name: "Mainitor",
props: {
src: {
type: String,
require: true,
},
poster: {
type: String,
default: null,
},
errorText: {
type: String,
default: "视频播放失败！",
},
},
methods: {
// 初始化监控
init() {
// 语言追加为中文
videojs.addLanguage("zh-CN", lan);
if (!this.$el) {
this.$nextTick(() => {
this.player = videojs(this.$el, this.options, function onPlayerReady() {
this.play()
});
});
} else {
this.player = videojs(this.$el, this.options, function onPlayerReady() {
this.play()
});
}
},
},
mounted() {
this.init();
},
watch: {
src(val) {
if (val) {
this.player.src({
src: val,
type: "application/x-mpegURL",
withCredentials: true,
});
}
},
},
data() {
return {
options: {
bigPlayButton: true,
textTrackDisplay: false,
posterImg: false,
errorDisplay: false,
controls: true,
// fluid: true, // 自适应宽高
language: "zh-CN",
// aspectRatio: "16:9",
notSupportedMessage: this.error,
hls: {
withCredentials: true,
},
},
player: null,
};
},
beforeDestroy() {
// 销毁直播
if (this.player) {
this.player.dispose();
this.player = null;
}
},
};
</script>
<style>
.v--box{
width: 100%;
height: 100%;
object-fit: fill
}
.video-js .vjs-big-play-button {
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
</style>
src/components/sectionright/zh-CN.js 0 → 100644
/**
* @name: zh-CN.js
* @author: yang
* @time: 2021/5/11
*/
export default {
"Play": "播放",
"Pause": "暂停",
"Current Time": "当前时间",
"Duration": "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
"LIVE": "直播",
"Loaded": "加载完成",
"Progress": "进度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Picture-in-Picture": "画中画",
"Exit Picture-in-Picture": "退出画中画",
"Mute": "静音",
"Unmute": "取消静音",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "关闭字幕",
"Captions": "内嵌字幕",
"captions off": "关闭内嵌字幕",
"Chapters": "节目段落",
"Close Modal Dialog": "关闭弹窗",
"Descriptions": "描述",
"descriptions off": "关闭描述",
"Audio Track": "音轨",
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
"No compatible source was found for this media.": "无法找到此视频兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
"Play Video": "播放视频",
"Close": "关闭",
"Modal Window": "弹窗",
"This is a modal window": "这是一个弹窗",
"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
", opens captions settings dialog": ", 开启标题设置弹窗",
", opens subtitles settings dialog": ", 开启字幕设置弹窗",
", opens descriptions settings dialog": ", 开启描述设置弹窗",
", selected": ", 选择",
"captions settings": "字幕设定",
"Audio Player": "音频播放器",
"Video Player": "视频播放器",
"Replay": "重新播放",
"Progress Bar": "进度条",
"Volume Level": "音量",
"subtitles settings": "字幕设定",
"descriptions settings": "描述设定",
"Text": "文字",
"White": "白",
"Black": "黑",
"Red": "红",
"Green": "绿",
"Blue": "蓝",
"Yellow": "黄",
"Magenta": "紫红",
"Cyan": "青",
"Background": "背景",
"Window": "窗口",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字体尺寸",
"Text Edge Style": "字体边缘样式",
"None": "无",
"Raised": "浮雕",
"Depressed": "压低",
"Uniform": "均匀",
"Dropshadow": "下阴影",
"Font Family": "字体库",
"Proportional Sans-Serif": "比例无细体",
"Monospace Sans-Serif": "单间隔无细体",
"Proportional Serif": "比例细体",
"Monospace Serif": "单间隔细体",
"Casual": "舒适",
"Script": "手写体",
"Small Caps": "小型大写字体",
"Reset": "重置",
"restore all settings to the default values": "恢复全部设定至预设值",
"Done": "完成",
"Caption Settings Dialog": "字幕设定窗口",
"Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口",
"End of dialog window.": "结束对话窗口",
"Seek to live, currently behind live": "尝试直播，当前为延时播放",
"Seek to live, currently playing live": "尝试直播，当前为实时播放",
"progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
"{1} is loading.": "正在加载 {1}。"
}
src/main.js 0 → 100644
import Vue from "vue";
import App from "./App.vue";
import router from "./router/router";
import VueRouter from "vue-router";
import "@/styles/common.css";
// 引入videojs
import Video from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$Video = Video;
import hls from "videojs-contrib-hls";
Vue.use(hls); // 要播放hls流
import md5 from "js-md5";
Vue.prototype.$md5 = md5;
import {
Select,
Option,
Radio,
RadioGroup,
Image,
Dialog,
Input,
Button,
Tabs,
Form,
FormItem,
DatePicker,
Table,
Loading,
TableColumn,
Pagination,
Dropdown,
DropdownItem,
DropdownMenu,
Message,
CheckboxGroup,
Checkbox,
Tree,
Cascader,
MessageBox,
Upload,
} from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "@/styles/element.css";
import "@/styles/common.css";
import "./utils/directive";
Vue.config.productionTip = false;
Vue.use(Select)
.use(Option)
.use(Radio)
.use(RadioGroup)
.use(Image)
.use(Dialog)
.use(Input)
.use(Button)
.use(Tabs)
.use(Form)
.use(FormItem)
.use(DatePicker)
.use(Table)
.use(TableColumn)
.use(Pagination)
.use(Dropdown)
.use(DropdownItem)
.use(DropdownMenu)
.use(CheckboxGroup)
.use(Checkbox)
.use(Loading)
.use(Tree)
.use(Upload)
.use(Cascader);
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(VueRouter);
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
src/pages/index.vue 0 → 100644
<template>
<div id="index" ref="app">
<Header></Header>
<transition name="slide-fade">
<router-view />
</transition>
</div>
</template>
<script>
import Header from "@/components/Header";
export default {
name: "index",
components: {
Header,
},
};
</script>
<style lang="stylus" scoped>
#index {
position: relative;
width: 1920px;
height: 1080px;
margin: auto;
background: url('~@/assets/index/main_bg.png') no-repeat;
background-size: 1920px 1080px;
overflow: hidden;
}
</style>
src/pages/login.vue 0 → 100644
<template>
<transition name="fade" mode="in-out">
<div class="login_page">
<section class="form_contianer">
<div class="titleArea">智管青山湖驾驶舱</div>
<div class="operation">
<div class="sub-title">账号登录</div>
<div class="under-line"></div>
<el-form
:model="loginForm"
:rules="rules"
ref="loginForm"
class="loginForm"
>
<el-form-item prop="username" class="login-item">
<el-input
prefix-icon="el-icon-user-solid"
class="area"
type="text"
placeholder="用户名"
@keyup.enter.native="submitForm('loginForm')"
v-model="loginForm.username"
></el-input>
</el-form-item>
<el-form-item prop="password" class="login-item">
<el-input
prefix-icon="el-icon-lock"
class="area"
type="password"
placeholder="密码"
@keyup.enter.native="submitForm('loginForm')"
v-model="loginForm.password"
></el-input>
</el-form-item>
<el-form-item class="login-item">
<el-button type="primary" @click="submitForm" class="submit_btn"
>登录</el-button
>
</el-form-item>
</el-form>
</div>
</section>
</div>
</transition>
</template>
<script>
import { login } from "@/api/api.js";
export default {
data() {
return {
loginForm: {
username: "",
password: "",
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
},
};
},
methods: {
submitForm() {
localStorage.clear();
this.$refs["loginForm"].validate((valid) => {
if (valid) {
let params = {
username: this.loginForm.username,
// password: this.$md5(this.loginForm.password),
password: this.loginForm.password,
};
login(params).then((res) => {
console.log(res);
if (res.code === 200) {
localStorage.setItem("accountInfo", JSON.stringify(res.data.Authorization));
this.$router.push("/index");
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
} else {
return false;
}
});
},
},
};
</script>
<style lang="stylus" scoped>
.login_page {
position: absolute;
width: 1920px;
height: 1080px;
background: url('../assets/login/login_bg.png') no-repeat center center;
background-size: 1920px 1080px;
overflow: hidden;
.form_contianer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 650px;
border-radius: 5px;
padding: 25px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
.titleArea {
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
width: 100%;
padding-bottom: 50px;
line-height: 68px;
letter-spacing: 2px;
font-family: YouSheBiaoTiHei;
font-size: 58px;
font-weight: 500;
color: #fff;
}
.operation {
width: 580px;
height: 391px;
padding-top: 40px;
display: flex;
align-items: center;
flex-direction: column;
background-image: url('~@/assets/login/login_div_bg.png');
background-size: 100% 100%;
.sub-title {
text-align: center;
line-height: 42px;
color: #fff;
font-size: 30px;
font-family: PingFangSC-Regular, PingFang SC;
}
.under-line {
width: 120px;
height: 4px;
margin-top: 10px;
background: #54E3FD;
border-radius: 3px;
}
.loginForm {
width: 450px;
.login-item {
margin-top: 40px;
.submit_btn {
width: 100%;
padding: 13px 0;
font-size: 16px;
}
}
}
}
}
.logo {
position: fixed;
bottom: 60px;
right: 60px;
}
}
.fade-enter {
opacity: 0;
}
.fade-leave {
opacity: 1;
}
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-leave-active {
opacity: 0;
transition: opacity 0.5s;
}
</style>
src/router/router.js 0 → 100644
import Vue from 'vue'
import Router from 'vue-router'
//import Login from '.././views/login.vue'
//import NotFound from '.././views/404.vue'
//import Home from '.././views/index.vue'
Vue.use(Router)
const router = new Router({
mode: 'history',//去掉#号
routes: [
{
path: '/',
name: 'login',
component: () => import('../pages/login')
},
{
path: '/index',
name: 'index',
redirect: '/bigdata',
component: () => import('../pages/index'),
children: [
{
path: '/bigdata',
name: 'bigdata',
component: () => import('../pages/bigdata')
},
{
path: '/event',
name: 'event',
component: () => import('../pages/eventTable')
}
]
}
]
})
router.beforeEach(async(to, from, next) => {
let account = JSON.parse(localStorage.getItem('accountInfo'))
const workerId = account ? account : null
// 已登陆
// console.log(workerId)
if (workerId) {
if (to.path != '/') { // 已登录状态直接去首页
next()
} else {
next('/index')
}
} else {
if (to.path == '/') {
next()
} else {
next({ path: '/' })
} // 未登录的状态跳转登录页
}
})
export default router
\ No newline at end of file
src/styles/common.css 0 → 100644
@charset "utf-8";html{background-color:#fff;color:#030303;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {height: 100%;font-size: 100px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #030303;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}
src/styles/element.css 0 → 100644
.el-input--mini .el-input__inner {
background: rgba(11,29,46,0.6);
color: #fff;
}
.el-dialog__header {
padding: 0;
}
.el-dialog__body {
padding: 0;
color: #606266;
font-size: 14px;
word-break: break-all;
/*background: url("~@/assets/dialog.png") no-repeat;*/
}
.pageination {
display: flex;
margin-top: 8px;
flex-direction: row-reverse;
}
el-pager {
background: #1a74ec;
}
.el-pagination .btn-prev{
background: transparent;
color: #ffffff;
}
.el-pagination .btn-next {
background: transparent;
color: #ffffff;
}
.el-pagination button:disabled {
background: transparent;
color: #ffffff;
}
.el-pager .number {
background: transparent;
color: #ffffff;
}
.el-pagination__total {
color: #ffffff;
}
.el-pager li.active {
color: #155BA5;
}
.el-button--small, .el-button--small.is-round {
margin-left: 29px;
}
.el-image-viewer__canvas img {
width: 55%;
}
\ No newline at end of file
src/styles/public.css 0 → 100644
.public_title {
display: flex;
line-height: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
letter-spacing: 1px;
color: #ffffff;
}
.public_title_icon {
width: 16px;
height: 20px;
margin-right: 7px;
}
.public_extra {
height: 20px;
display: flex;
align-items: center;
font-size: 16px;
font-family: MicrosoftYaHeiUI;
}
.public_extra_icon {
width:26px;
height:10px;
margin:0 3px;
}
\ No newline at end of file
src/utils/directive.js 0 → 100644
import Vue from 'vue'
Vue.directive('drag', {
bind (el) {
let dragBox = el // 获取当前元素
dragBox.onmousedown = e => {
// 算出鼠标相对元素的位置
let disX = e.clientX - dragBox.offsetLeft
let disY = e.clientY - dragBox.offsetTop
document.onmousemove = e => {
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX
let top = e.clientY - disY
// 移动当前元素
dragBox.style.left = left + 'px'
dragBox.style.top = top + 'px'
}
document.onmouseup = () => {
// 鼠标弹起来的时候不再移动
document.onmousemove = null
// 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
document.onmouseup = null
}
}
}
})
\ No newline at end of file
src/utils/progress.js 0 → 100644
let Progress = function (init) {
this.init(init)
};
Progress.prototype = {
init: function (init) {
this.el = init.el;//元素ID
let cvsElement = document.getElementById(this.el),//获取元素
ctx = cvsElement.getContext("2d"),//获取画笔
width = 100,//元素宽度
height = 100,//元素高度
degActive = 0,//动态线条
time = init.timer,//定时器
text = init.text// 文字
//停止时的角度
init.deg >= 0 && init.deg <= 100 ? this.deg = init.deg : this.deg = 100;
//线宽
init.lineWidth !== undefined ?
this.lineWidth = init.lineWidth : this.lineWidth = 20;
//判断宽高较小者
this.wh = width > height ? height : width;
//设置圆的半径，默认为宽高较小者
init.circleRadius > 0 && init.circleRadius <= this.wh / 2 - this.lineWidth / 2 ?
this.circleRadius = init.circleRadius : this.circleRadius = this.wh / 2 - this.lineWidth / 2;
//绘制线的背景颜色
init.lineBgColor !== undefined ?
this.lineBgColor = init.lineBgColor : this.lineBgColor = '#ccc';
//绘制线的颜色
init.lineColor !== undefined ?
this.lineColor = init.lineColor : this.lineColor = '#009ee5';
//绘制文字颜色
init.textColor !== undefined ?
this.textColor = init.textColor : this.textColor = '#009ee5';
//绘制文字大小
init.fontSize !== undefined ?
this.fontSize = init.fontSize : this.fontSize = parseInt(this.circleRadius / 2);
//清除锯齿
if (window.devicePixelRatio) {
cvsElement.style.width = width + "px";
cvsElement.style.height = height + "px";
cvsElement.height = height * window.devicePixelRatio;
cvsElement.width = width * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
//设置线宽
ctx.lineWidth = this.lineWidth;
//启动定时器
this.timer = setInterval(function () {
ctx.clearRect(0, 0, width, height);//清除画布
ctx.beginPath();//开始绘制底圆
ctx.arc(width / 2, height / 2, this.circleRadius, 1, 8);
ctx.strokeStyle = this.lineBgColor;
ctx.stroke();
ctx.beginPath();//开始绘制动态圆
ctx.arc(width / 2, height / 2, this.circleRadius, -Math.PI / 2, degActive * Math.PI / 180 - Math.PI / 2);
ctx.strokeStyle = this.lineColor;
ctx.stroke();
let txt = text ? text : (parseInt(degActive * 100 / 360) + "%");//获取百分比
ctx.font = this.fontSize + "px SimHei";
let w = ctx.measureText(txt).width;//获取文本宽度
let h = this.fontSize / 2;
ctx.fillStyle = this.textColor;
ctx.fillText(txt, width / 2 - w / 2, height / 2 + h / 2);
if (degActive >= this.deg / 100 * 360) {//停止定时器
clearInterval(this.timer);
this.timer = null;
}
degActive++;
}.bind(this), time);
}
};
export default Progress
src/utils/request.js 0 → 100644
import axios from "axios";
import router from "../router/router";
const config = {
// proxy: "http://192.168.3.74:9500", // 本地地址
// proxy: "http://1.15.3.38:19500", // 线上地址
proxy: "http://101.35.253.12:9440/iot", // 线上地址 新
// proxy: "http://192.170.1.18:19500", // 华数地址
// imgUrl: "http://112.17.112.138:19000/images", // 查看服务器图片地址
};
// axios基本配置
const api = axios.create({
timeout: 30000,
// withCredentials: true,
});
// 请求开始拦截
api.interceptors.request.use(
(conf) => {
return conf;
},
(error) => ({ status: 0, msg: error.message })
);
// 请求返回拦截
api.interceptors.response.use(
(response) => {
if (
response.data.code === -1 &&
response.data.msg === "验签失败，请重新登录"
) {
router.push({ name: "Login" });
localStorage.clear();
}
return Promise.resolve(response).then(checkCode);
},
(error) => {
return Promise.reject(error);
}
);
// http状态码错误处理
// const checkStatus = (res) => {
// switch (res.status) {
// case 401: { //登录过期
// console.log('登录过期')
// break;
// }
// default:
// console.log('服务器存在异常')
// break;
// }
// }
// 后台自定义 code错误处理
const checkCode = (res) => {
console.log('fanhui----------res',res)
if (res) {
if (res.data.code === 200 || res.data.status === 100) {
//code为0成功
const returnData = {
code: 200,
success: true,
data: res.data.data,
msg: res.data.message,
};
return returnData;
} else {
//统一处理错误
const returnData = {
success: false,
code: res.data.code,
msg: res.data.message || res.data.msg,
};
return returnData;
}
} else {
const returnData = {
success: false,
code: -1,
msg: "没有返回值",
};
return returnData;
}
};
// 解析参数
const formatParams = (method = "GET", params) => {
let token = JSON.parse(localStorage.getItem("accountInfo"));
//headers配置
const headers = {
// "Content-Type": "application/json;charset=utf-8",
"Authorization": token ? token : '',
};
switch (method) {
case "POST":
return {
headers,
method,
data: params,
};
case "PUT":
return {
headers,
method,
data: params,
};
case "DELETE":
return {
headers,
method,
data: params,
};
case "GET":
return {
headers,
method,
params,
};
default:
return {
headers,
method,
params,
};
}
};
export { api, formatParams, config };
src/utils/utils.js 0 → 100644
// 数组排序降序
export function compare (property) {
return function(a, b){
var value1 = a[property];
var value2 = b[property];
return value2 - value1;
}
}
// 获取当前的月-日
export function getDate () {
const date = new Date()
let month = date.getMonth() + 1
month = month < 10 ? '0' + month : month
let day = date.getDate()
day = day < 10 ? '0' + day : day
return month + '-' + day
}
// 获取当前的年月日
export function getFullDate () {
const date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
month = month < 10 ? '0' + month : month
let day = date.getDate()
day = day < 10 ? '0' + day : day
return year + '-' + month + '-' + day
}
// 获取当前时间七天前的年月日
export function getSevenPassDate () {
let date = new Date(new Date().getTime() - 1000 * 3600 * 24 * 7)
let year = date.getFullYear()
let month = date.getMonth() + 1
month = month < 10 ? '0' + month : month
let day = date.getDate()
day = day < 10 ? '0' + day : day
return year + '-' + month + '-' + day
}
\ No newline at end of file
vue.config.js 0 → 100644
// const publicPath = process.env.NODE_ENV === 'production' ? '/linan_gzcloud/' : '/';
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
// publicPath,
productionSourceMap: !isProd,
configureWebpack: {
externals: {
'AMap': 'AMap'
}
}
}
\ No newline at end of file
yarn-error.log 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
yarn.lock 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
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