Commit cffef485 徐主花

料架

0 个父辈
正在显示 134 个修改的文件 包含 7021 行增加0 行删除
> 1%
last 2 versions
not dead
ENV = 'development'
NODE_ENV = development
VUE_APP_Version=T 0.01
VUE_APP_BASE_API = '/dev-api'
VUE_APP_REQUEST_URL = 'http://192.168.1.35:5001'
VUE_APP_IONICURL='http://192.168.1.108:5000'
\ No newline at end of file
ENV = 'production'
NODE_ENV = production
VUE_APP_Version=V 0.01
VUE_APP_BASE_API = '/pro-api'
VUE_APP_REQUEST_URL = 'http://192.168.1.35:5001'
VUE_APP_IONICURL='http://192.168.1.108:5000'
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# app
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
此文件的差异太大,无法显示。
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "vue-cli-service build --mode development",
"alpha": "vue-cli-service build --mode alpha"
},
"dependencies": {
"ant-design-vue": "^1.7.5",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"echarts": "^4.9.0",
"element-ui": "^2.15.1",
"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^5.1.1",
"vfluentdesign": "0.0.100",
"vue": "^2.6.11",
"vue-i18n": "^8.24.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
}
}
此文件类型无法预览
<!DOCTYPE html>
<html lang="">
<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"> -->
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<!-- <link rel="icon" href="../src/assets/logo.png"> -->
<link rel="icon" type="image/x-icon" href="<%= BASE_URL %>favicon.ico">
<title>NEOTEL</title>
<style>
html,body{
height: 100%;
}
body
{
/* min-width: 360px; */
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app" style="height: 100%;"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app" style="height:100%">
<router-view/>
</div>
</template>
<style lang="less">
html,body,#app,.el-container{
/*设置内部填充为0,几个布局元素之间没有间距*/
padding: 0px;
/*外部间距也是如此设置*/
margin: 0px;
/*统一设置高度为100%*/
height: 100%;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.lanopacity ::-webkit-input-placeholder { /* WebKit browsers */
// color: #cfcdcb;;
// font-size: 14px;
font-size: 14px !important;
color: rgb(207, 205, 203) !important;
}
.el-popover {
background-color: rgba(255,255,255,0.2) !important;
color: #606266;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
border: 0 !important;
}
.el-popper[x-placement^=top] .popper__arrow::after {
bottom: 1px;
margin-left: -6px;
border: 0 !important;
}
.el-popper[x-placement^=top] .popper__arrow {
bottom: -6px;
left: 50%;
margin-right: 3px;
border: 0 !important;
}
// .lanopacity >.drop-down-box{
// opacity: 0 !important;
// }
.lanopacity .drop-down-container{
box-shadow:none !important;
}
.lanopacity input{
font-size: 14px !important;
color: #cfcdcb !important;
}
.fv-dark-DropDown .drop-down-box .drop-down-container input {
font-size: 14px !important;
}
.lanopacity ::-webkit-input-placeholder{ /* WebKit browsers */
font-size: 13px !important;
}
.el-table .el-table__body tr:hover > td {
background-color: #0D1F34 !important;
}
</style>
此文件类型无法预览
module.exports = {
language: {
name: "繁体中文",
current: "當前語言",
text:'秒即將進入主頁',
local:'zh-CN',
copyright:'版權所有:上海摯錦科技有限公司',
search:'搜索'
},
backTips:{
title:'退出登錄',
content:'確定要退出登錄嗎?',
confirm:'確定',
cancel:'取消',
},
navbar: {
home: "首頁",
about: "關於我們",
join: "加入我們",
contact: "聯繫我們"
},
Login:{
loginText:'用戶登錄',
signIn:'登錄選項',
btn:'登錄',
userErr:'用戶名不能爲空',
passwordErr:'密碼不能爲空',
version:'版本',
mind:'記住我'
},
IonicHome:{
title:'離子污染',
test:'測試',
system:'系统',
help:'幫助',
print:'打印'
},
IonicSystem:{
electric:'電流',
conductance:'電導率',
pump:'泵',
filtering:'過濾閥體',
washTheBody:'清洗阀体',
coefficient:'清洗閥體:',
time:'過濾時間:',
rinse:'清洗',
filter:'過濾',
stop:'停止'
},
Face:{
facial:'人臉識別',
signIn:'登錄選項',
option:'職位 :',
userInfo:{
staffName:'沈懿俊',
staffId:'帥哥',
emil:'billy.shen@neotel.tech',
company:'上海摯錦科技有限公司'
},
},
Menu:{
neoscan:'NEO SCAN',
smdbox:'SMD BOX',
kanban:'KANBAN',
neobot:'NEO BOT',
neolight:'NEO LIGHT',
neox:'NEOX',
lightOrder:'輕工單',
product:'產品信息',
barcode:'條碼',
tmviewer:'遠程協助',
drp:'虛擬桌面',
bigdata:'大數據',
lot:'物聯網',
system:'系统',
},
Home:{
logoOut:'退出',
history:'最近打開',
},
Kanban:{
back:'返回',
logoOut:'退出',
status:'EPM:設備狀態 ',
order:'定製',
wendu:'溫度',
shidu:'溼度',
jingdian:'靜電值',
qiya:'氣壓',
}
};
\ No newline at end of file
// module.exports = {
// language: {
// name: "English",
// current: "Current Language",
// text:'s are about to enter the homepage',
// local:'en-US',
// copyright:'Copyright © 2021 Neotel Technology Co., Ltd. All rights reserved.'
// },
// backTips:{
// title:'Log out',
// content:'Are you sure you want to log out?',
// confirm:'Confirm',
// cancel:'Cancel',
// },
// navbar: {
// home: "Home",
// about: "About",
// join: "Join Us",
// contact: "Contact Us"
// },
// Login:{
// loginText:"User Login",
// signIn:"Sign-in option",
// btn:"Sign in",
// userErr:"The user name can't be empty",
// passwordErr:"The password can't be empty",
// version:'Version',
// mind:'Remember me'
// },
// Face:{
// facial:'Facial Recognition',
// signIn:'Sign-in option',
// option:'Option :',
// userInfo:{
// staffName:'billy.shen',
// staffId:'Sales Director',
// emil:'billy.shen@neotel.tech',
// company:'Neotel-Technology'
// },
// },
// Home:{
// neoscan:'NEO SCAN',
// smdbox:'SMD BOX',
// kanban:'KANBAN',
// neobot:'NEO BOT',
// neolight:'NEO LIGHT',
// neox:'NEOX',
// logoOut:'Sign Out',
// history:'Recent',
// lightOrder:'WORK ORDER',
// product:'PRODUCT',
// barcode:'MATERIAL ID',
// tmviewer:'REMOTE SUPPORT',
// drp:'VIRTUAL DESKTOP',
// bigdata:'BIG DATA',
// lot:'CONNECTIVITY',
// system:'SYSTEM',
// },
// Kanban:{
// lightOrder:'Lite Work Order',
// product:'PRODUCT',
// barcode:'Material ID',
// tmviewer:'Remote Support',
// drp:'Virtual Desktop',
// bigdata:'BIG DATA',
// lot:'Connectivity',
// system:'System',
// back:'Back',
// logoOut:'Sign Out',
// status:'EPM:Equipment Performance Monitoring ',
// order:'Custom',
// wendu:'Temp',
// shidu:'Humidity',
// jingdian:'ESD',
// qiya:'Pressure',
// }
// };
module.exports = {
language: {
name: "English",
current: "Language",
text:'sec waiting for access',
local:'en-US',
copyright:'Copyright © 2021 Neotel Technology Co., Ltd. All rights reserved.',
search:'Search'
},
backTips:{
title:'Sign Out',
content:'Sure to Exit?',
confirm:'Confirm',
cancel:'Cancel',
},
navbar: {
home: "Main",
about: "About Neotel",
join: "Join Us",
contact: "Contact Us"
},
Login:{
loginText:'Sign In',
signIn:'Sign Options',
btn:'Log In',
userErr:'User Name Cannot be Empty',
passwordErr:'Password Not Null',
version:'Version',
mind:'Remember me'
},
IonicHome:{
title:'Ionic contamination',
test:'Test',
system:'System',
help:'Help',
print:'打印'
},
IonicSystem:{
electric:'Current',
conductance:'Conductivity',
pump:'Pump',
filtering:'Filter valve',
washTheBody:'Rinse valve',
coefficient:'Filtration value:',
time:'Filtration time',
rinse:'Rinse',
filter:'Filtration',
stop:'Stop'
},
Face:{
facial:'Facial Recognition',
signIn:'Sign Options',
option:'Position :',
userInfo:{
staffName:'沈懿俊',
staffId:'销售总监',
emil:'billy.shen@neotel.tech',
company:'上海挚锦科技有限公司'
},
},
Menu:{
neoscan:'NEO SCAN',
smdbox:'SMD BOX',
kanban:'KANBAN',
neobot:'NEO BOT',
neolight:'NEO LIGHT',
neox:'NEOX',
lightOrder:'Work Order',
product:'Product Info',
barcode:'Material ID',
tmviewer:'Remote Support',
drp:'Virtual Desktop',
bigdata:'Big Data',
lot:'Connectivity',
system:'System',
},
Home:{
logoOut:'Sign Out',
history:'Recent',
},
Kanban:{
back:'Return',
logoOut:'Sign Out',
status:'EPM:System Status ',
order:'Customized',
wendu:'Temperature',
shidu:'Humidity',
jingdian:'ESD',
qiya:'Air Pressure',
}
};
\ No newline at end of file
module.exports = {
language: {
name: "日本語",
current: "言語",
text:'秒ホームページに入ります。',
local:'ja-JP',
copyright:'コピーライト所有:上海摯錦科技有限会社',
search:'かいさぐる'
},
backTips:{
title:'ログアウト',
content:'本当にログアウトしますか?',
confirm:'確認',
cancel:'キャンセル',
},
navbar: {
home: "トップページ",
about: "摯錦について",
join: "弊社に加入します。",
contact: "弊社と連絡します。"
},
Login:{
loginText:'ユーザー登録',
signIn:'登録選択肢',
btn:'登録',
userErr:'ユーザ名は空ではありません',
passwordErr:'パスワードがではありません。',
version:'バージョン',
mind:'私を覚えて'
},
IonicHome:{
title:'イオン汚染',
test:'テスト',
system:'システム',
help:'ヘルプ',
print:'プリント'
},
IonicSystem:{
electric:'電流',
conductance:'導電率',
pump:'ポンプ',
filtering:'濾過バルブ',
washTheBody:'洗浄バルブ',
coefficient:'濾過係数:',
time:'濾過時間',
rinse:'洗浄',
filter:'濾過',
stop:'停止'
},
Face:{
facial:'顔認証',
signIn:'登録選択肢',
option:'役職 :',
userInfo:{
staffName:'沈懿俊',
staffId:'销售总监',
emil:'billy.shen@neotel.tech',
company:'上海挚锦科技有限公司'
},
},
Menu:{
neoscan:'NEO SCAN',
smdbox:'SMD BOX',
kanban:'KANBAN',
neobot:'NEO BOT',
neolight:'NEO LIGHT',
neox:'NEOX',
lightOrder:'ライトオーダー',
product:'材料情報',
barcode:'バーコード',
tmviewer:'遠隔協力',
drp:'仮想 トップ',
// drp:'バーチャル デスクトップ',
bigdata:'ビッグデータ',
lot:'連結性',
system:'システム',
},
Home:{
logoOut:'退出',
history:'最近開く',
},
Kanban:{
back:'リターン',
logoOut:'退出',
status:'EPM:設備状態 ',
order:'カスタマイズ',
wendu:'温度',
shidu:'湿度',
jingdian:'静電値',
qiya:'気圧',
}
};
\ No newline at end of file
module.exports = {
language: {
name: "简体中文",
current: "当前语言",
text:'秒即将进入主页',
local:'zh-CN',
copyright:'版权所有:上海挚锦科技有限公司',
search:'搜索'
},
backTips:{
title:'退出登录',
content:'确定要退出登录吗?',
confirm:'确定',
cancel:'取消',
},
navbar: {
home: "首页",
about: "关于我们",
join: "加入我们",
contact: "联系我们"
},
Login:{
loginText:'用户登录',
signIn:'登录选项',
btn:'登录',
userErr:'用户名不能为空',
passwordErr:'密码不能为空',
version:'版本',
mind:'记住我'
},
IonicHome:{
title:'离子污染测试仪',
test:'测试',
system:'系统',
help:'帮助',
print:'打印'
},
IonicSystem:{
electric:'电流',
conductance:'电导率',
pump:'泵',
filtering:'过滤阀体',
washTheBody:'清洗阀体',
coefficient:'过滤系数:',
time:'过滤时间:',
rinse:'清洗',
filter:'过滤',
stop:'停止'
},
Face:{
facial:'人脸识别',
signIn:'登录选项',
option:'职位 :',
userInfo:{
staffName:'沈懿俊',
staffId:'销售总监',
emil:'billy.shen@neotel.tech',
company:'上海挚锦科技有限公司'
},
},
Menu:{
neoscan:'NEO SCAN',
smdbox:'SMD BOX',
kanban:'KANBAN',
neobot:'NEO BOT',
neolight:'NEO LIGHT',
neox:'NEOX',
lightOrder:'轻工单',
product:'产品信息',
barcode:'条码',
tmviewer:'远程协助',
drp:'虚拟桌面',
bigdata:'大数据',
lot:'物联网',
system:'系统',
},
Home:{
logoOut:'退出',
history:'最近打开',
},
Kanban:{
back:'返回',
logoOut:'退出',
status:'EPM:设备状态 ',
order:'定制',
wendu:'温度',
shidu:'湿度',
jingdian:'静电值',
qiya:'气压',
}
};
\ No newline at end of file
import Vue from 'vue';
const api = {
clearName:'/clear_name',
selectDevice:'/post_selected_device',
triggerFace:'/trigger_face',
recogniteName:'/get_recognitions_name',
tempEnroll:'/temp_enroll',
tempGetGaceGromEsp:'/api/temp_get_face_from_esp',
IonicLogin:'/api/login ', //登录
getProducts:'/api/products', //获取产品列表
addProduct:'/api/products',//创建产品
delProduct:'/api/products',//创建产品
upload:'/api/upload',//修改图片
editProduct:'/api/products',//修改产品
calibrationstart:'/api/calibrationstart', //开始校准
calibrationvalue:'/api/calibrationvalue',//获取校准返回值
calibrationstop:'/api/calibrationstop',//停止校准
calibrationchange:'/api/calibrationchange',//滴入液体
getrecord:'/api/getrecord', //获取记录值
ionstart:'api/ionstart',//开始测试
testvalue:'/api/testvalue',//获取图表数据
ionstop:'/api/ionstop',//停止测试
calibrationstatus:'/api/calibrationstatus',//获取校准是否正在运行
};
Vue.prototype.$api = api;
\ No newline at end of file
// const env = {
// development: {
// url: '/',
// },
// production: {
// url: 'https://www.lanbeixzj.com/front/',
// },
// test: {
// url: 'http://xzjtest.lanbeiqianbao.com/front/' // 可配置不同服务的
// }
// };
// export default env[process.env.NODE_ENV]
let baseUrl = "";
\ No newline at end of file
import Vue from 'vue';
import axios from 'axios'
import Qs from 'qs'
import { getToken } from '@/axios/token'
import { Message } from 'element-ui';
axios.defaults.baseURL='http://192.168.1.108:5000';
// axios.defaults.baseURL = process.env.VUE_APP_REQUEST_URL;
// axios.defaults.baseURL = process.env.VUE_APP_IONICURL;
// if(process.env.NODE_ENV=="development"){
// console.log('BASE_API=development='+process.env.NODE_ENV);
// axios.defaults.baseURL='http://192.168.1.35:5001';
// }else if(process.env.NODE_ENV == "production"){
// console.log('BASE_API=production='+process.env.NODE_ENV);
// axios.defaults.baseURL='http://192.168.1.35:5001';
// }
axios.defaults.transformRequest = function (data, headers) {
let ContentType = headers['Content-Type'] || headers.common['Content-Type'] || headers.post['Content-Type'] || 'application/json';
if (ContentType === "application/json") {
return JSON.stringify(data);
}
if (ContentType === "application/x-www-form-urlencoded") {
return Qs.stringify(data);
}
return data;
};
axios.interceptors.request.use((config)=>{
// config.headers['token'] = getToken();
return config;
})
// 添加响应拦截器
axios.interceptors.response.use((response)=>{
console.log('response=='+response);
let {status} = response;
if(status == 200 || status == 204 || status == 201){
response.status = 200;
}
// 对响应数据做点什么
// let {code,msg} = response.data;
// if(code != 20000){
// Message({
// message: msg || '网络错误',
// type: 'warning',
// duration:2000
// });
// }
return response
}, err=>{
// 对响应错误做点什么
// Message({
// message: '服务器不给力!!!',
// type: 'error',
// duration:2000
// });
console.log(err);
return Promise.reject(err);
})
// const api = {
// axios: axios,
// get: (url, params) => axios.get(url, {params:params}).then(handlerResponse),
// post: (url, data, config) =>
// axios
// .post(url, data, Object.assign({}, baseConfig, config))
// .then(handlerResponse)
// }
Vue.prototype.$axios = axios;
\ No newline at end of file
const tokenKey = 'token';
//存
export function setToken(token){
return sessionStorage.setItem(tokenKey,token);
};
//取
export function getToken(){
return sessionStorage.getItem(tokenKey);
};
//删
export function removeToken(){
return sessionStorage.removeItem(tokenKey);
};
\ No newline at end of file
<template>
<div class="n_header">
<div style="font-size:18px;line-hight:42px;margin-top:26px;">
{{$t('IonicHome.title')}}
</div>
<div style="position:absolute;right:38px;line-hight:25px;margin-top:23px;"><span class="lanopacity"><fv-DropDown class="lanopacity" :options="lists" style="
width: 102px;" @change="selectModel($event)" :placeholder="$t('language.name')" theme="dark">
<template v-slot:lists="item">
<p>{{item.text}}</p>
</template></fv-DropDown></span></div>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
lists:[
{ key: "zh", text: "简体中文" },
{ key: "cn", text: "繁体中文" },
{ key: "en", text: "English" },
{ key: "ja", text: "日本語" },
],
asbox:false,
timer:'',
date:new Date(),
input4:'',
myChart:''
}
},
components: {
},
computed:{
},
methods:{
getTime(){
let _this = this;
let a=this.$t('language.local')
this.timer = setInterval(function(){
_this.date = new Date().toLocaleString(a);
});
},
toHome(){
this.$router.push('/Home');
},
selectModel(v){
let lang = v.option.key;
this.$i18n.locale = lang;
localStorage.setItem("lang", lang);
clearInterval(this.timer);
this.getTime();
},
logoOut(){
this.$infoBox(this.$t('backTips.content'), {
status: 'correct',
title: this.$t('backTips.title'),
confirmTitle: this.$t('backTips.confirm'),
cancelTitle: this.$t('backTips.cancel'),
confirm: () => { this.$router.push('/Login') },
cancel: () => { this.asidebox; },
// theme: 'dark'
});
},
asidebox(){
this.asbox=!this.asbox;
},
},
mounted() {
this.getTime();
},
}
</script>
<style scoped lang="less">
@import url('../styles/IonicsoilHeader.less');
.el-main{
padding: 0 !important;
background-color: #242424;
}
.more-font{
font-size: 0.75rem !important;
transform: scale(0.75);
-webkit-transform-origin-x: 0;
}
.selectColor{
background-color: black;
color: white;
}
</style>
\ No newline at end of file
<template>
<div>
<!-- <div style="position: relative;">
<transition name="el-fade-in">
<div style="position: absolute;bottom:40px;width:100px;padding:0 10px;background-color:rgba(255,255,255,0.2); margin-left: -10px;" v-show="flag">
<div style="">
<div v-for="(v,i) in options" :key="i" @click="changeLang(v)" style="padding:10px 0 5px;text-align: left;">{{v.label}}</div>
</div>
<span><img style="width:10px;height:7px;position: absolute;" src="../assets/img/op03.png" alt=""></span>
</div>
</transition>
<div @click="open" style="width:100px;border:1px solid rgba(255,255,255,0.2); line-height:24px">
<span style="font-weight: bold;">
{{value}}
</span>
<i><img :class="{'rota':!flag}" style="width:10px;height:10px;" src="../assets/img/op07.png" alt=""></i>
</div>
</div> -->
<el-popover
placement="top"
width="80"
v-model="visible">
<i class="arrow"><img class="arrow-img" src="../assets/img/op03.png" alt=""></i>
<div class="lans" v-for="(v,i) in options" :key="i" @click="changeLang(v)" style="color: rgba(255,255,255,0.6);">{{v.label}}</div>
<el-button @click="open" slot="reference">
<label style="font-weight: bold; color: rgba(255,255,255,0.6);">{{$t('language.name')}}</label>
<i style="margin-left:8px"><img :class="{'rota':!visible}" style="width:15px;height:8px;" src="../assets/img/op07.png" alt=""></i>
</el-button>
</el-popover>
</div>
</template>
<script>
export default {
name:'Language',
data() {
return {
visible: false,
rota:'rota',
flag:false,
options: [
{
value: 'cn',
label: '繁体中文'
},
{
value: 'zh',
label: '简体中文'
}, {
value: 'en',
label: 'English'
}, {
value: 'ja',
label: '日本語'
}],
value: 'Language'
}
},
created() {
// let lang = document.documentElement.lang;
// localStorage.setItem("lang", lang);
// this.toActive(lang);
},
methods: {
open(){
this.flag=!this.flag;
},
changeLang(v) {
this.visible = false;
this.open();
// let lang = e.target.innerText;
let lang = v.value
this.$i18n.locale = lang;
localStorage.setItem("lang", lang);
this.value = v.label;
// this.toActive(lang);
},
// toActive(lang) {
// this.isActive = lang == "zh" ? true : false;
// }
}
}
</script>
<style lang="less" scoped>
.rota{
transform: rotate(180deg);
}
/deep/ .el-button {
background: transparent;
color: #FFF;
padding: 10px;
min-width: 100px;
width: 110px;
}
.arrow{
position: absolute;
display: block;
bottom: 0;
left: 50%;
margin-left: -7px;
}
.arrow-img{
width:15px;height:7px;position: absolute;
}
.lans{
padding:7px 0 0 17px;text-align: left;cursor: pointer;color:white;
}
.lans:hover{
background-color: rgba(255,255,255,0.2) !important;
}
// /deep/ .el-input--suffix .el-input__inner {
// padding-right: 30px;
// background-color: rgba(255,255,255,0);
// border:none !important;
// }
// /deep/.el-select-dropdown {
// position: absolute;
// z-index: 1001;
// border: 1px solid #E4E7ED;
// border-radius: 4px;
// background-color: rgba(255,255,255,0);
// box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
// box-sizing: border-box;
// margin: 5px 0;
// color: white;
// }
// /deep/ .el-form-item__error{
// color: rgb(0 120 212);
// }
</style>
\ No newline at end of file
<template>
<div id="toast" class="toast-css" v-show="toastFlag">
<i><span class="unmfsize" id="num">{{t}}</span>
<span style="font-size:12px">{{$t('language.text')}}</span>
</i>
</div>
</template>
<script>
export default {
name:'Toast',
data() {
return {
toastFlag:false,
t:5,
text:'秒即将进入主页'
}
},
methods: {
toast(){
this.toastFlag=true;
console.log('ttt=='+this.t)
// $("#num").html(this.t);
if(this.t>0){
this.t--;
}else{
// $("#toast").addClass("hide");
this.toastFlag=false;
this.t=5;
this.$router.push('/Home')
// location.href = "https://www.baidu.com/";
// window.open("https://www.baidu.com/");
return
}
setTimeout(this.toast,1000);
}
},
mounted(){
// this.text=this.$t('language.text');
}
}
</script>
<style lang="less">
.toast-css {
font-size: 0.32rem;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 15px;
margin: 0 0 0 -60px;
border-radius: 4px;
position: fixed !important;
top: 50%;
left: 50%;
width: 130px;
text-align: center;
}
.unmfsize{
font-size: 12px;
}
</style>
\ No newline at end of file
html,
body {
height: 100%;
}
body {
min-width: 900px;
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
html,
body {
height: 100%;
}
body {
min-width: 1000px;
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
.IonicHometop1 {
height: 100%;
color: white;
}
.IonicHometop1 .top1_echarts {
height: 50%;
background: #2c2c2c;
}
.IonicHometop1 .IonicHometop2 {
display: flex;
margin-top: 20px;
}
.IonicHometop1 .IonicHometop2 .IonicHomedetail1 {
width: 17.1875rem;
height: 250px;
background: #2c2c2c;
}
.IonicHometop1 .IonicHometop2 .IonicHomedetail2 {
width: 13.75rem;
height: 250px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.IonicHometop1 .IonicHometop2 .IonicHomedetail2 .IonicHomedetail2_imgsize {
height: 30px;
width: 30px;
}
.IonicHometop1 .IonicHometop2 .IonicHomedetail2 .IonicHomedetail2_text {
margin-top: 15px;
font-size: 13px;
}
html,
body {
height: 100%;
}
body {
min-width: 900px;
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
.login-body {
justify-content: center;
display: flex;
align-items: center;
height: 100%;
}
.login-body .login-box {
background-color: rgba(255, 255, 255, 0.2);
padding: 0.625rem;
display: flex;
flex-flow: column;
}
.login-body .login-box .login-content {
display: flex;
}
.login-body .login-box .login-content .logo-wh {
width: 11.25rem;
height: 11.25rem;
margin-right: 0.625rem;
}
.login-body .login-box .login-content .login-right {
width: 11.25rem;
height: 11.25rem;
display: flex;
align-items: center;
flex-flow: column;
}
.login-body .login-box .login-content .login-right .title {
align-items: center;
display: flex;
justify-content: center;
color: white;
height: 2.1875rem;
font-size: 0.875rem;
}
.login-body .login-box .login-content .login-right .login-user,
.login-body .login-box .login-content .login-right .user-msg,
.login-body .login-box .login-content .login-right .login-pwd,
.login-body .login-box .login-content .login-right .pwd-msg,
.login-body .login-box .login-content .login-right .login-btn {
width: 11.25rem;
height: 1.875rem;
}
.login-body .login-box .login-content .login-right .user-msg,
.login-body .login-box .login-content .login-right .pwd-msg {
height: 1.6875rem;
text-align: left;
text-indent: 5px;
color: #8f2c22;
font-size: 0.6875rem;
display: flex;
align-items: center;
}
.login-body .login-box .login-content .login-right .login-btn {
color: white;
}
.login-body .login-box .login-optin {
align-items: center;
display: flex;
justify-content: flex-end;
height: 1.71875rem;
margin-top: 1.25rem;
margin-right: 0.625rem;
}
.login-body .login-box .login-optin .option-text {
font-size: 0.625rem;
margin-right: 0.625rem;
}
.login-body .login-box .login-optin .option-img {
width: 1.5625rem;
height: 1.5625rem;
cursor: pointer;
}
.login-body .footer {
position: absolute;
bottom: 3.125rem;
display: flex;
width: 100%;
}
.login-body .footer .footer-body {
padding: 0.3125rem 15%;
display: flex;
width: 100%;
font-size: 14px;
line-height: 14px;
color: white;
}
.login-body .footer .footer-body .ver-css {
display: flex;
flex: 1;
align-items: center;
color: rgba(255, 255, 255, 0.6);
font-size: 0.625rem;
}
.login-body .footer .footer-body .ver-css .ver-text {
margin-left: 8px;
}
html,
body {
height: 100%;
}
body {
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
.IonicRinseCss {
padding: 0 45px;
}
.IonicRinseCss .charts-margin {
margin-top: 25px;
}
.IonicRinseCss .charts-margin .chartCss {
height: 500px;
background: #2B2C2C;
}
@media screen and (min-width: 768px) {
.IonicRinseCss .charts-margin .chartCss {
height: 380px;
background: #2B2C2C;
}
}
.IonicRinseCss .charts-margin .numCss {
height: 145px;
background: #2B2C2C;
display: flex;
align-items: center;
justify-content: center;
}
.IonicRinseCss .charts-margin .numCss .numText {
font-size: 30px;
color: white;
}
.IonicRinseCss .charts-margin .process {
height: 210px;
background: white;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.IonicRinseCss .charts-margin .status-margin {
display: flex;
margin-top: 20px;
}
.IonicRinseCss .charts-margin .status-margin .statusText {
width: 70px;
line-height: 25px;
border: 1px solid #797979;
color: white;
flex: 1;
font-size: 14px;
}
.IonicRinseCss .charts-margin .status-margin .statusImg {
width: 17px;
height: 19px;
}
.IonicRinseCss .stopCss {
margin-top: 25px;
margin-bottom: 50px;
}
.IonicRinseCss .stopCss .stop-margin {
margin-top: 25px;
}
.IonicRinseCss .stopCss .stop-margin .stopRow {
display: flex;
justify-content: center;
}
.IonicRinseCss .stopCss .stop-margin .stopRow .stopBox {
display: flex;
margin-top: 20px;
}
.IonicRinseCss .stopCss .stop-margin .stopRow .stopBox .stopText {
width: 70px;
line-height: 25px;
border: 1px solid #797979;
color: white;
flex: 1;
font-size: 14px;
}
html,
body {
height: 100%;
}
body {
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
.stytem {
padding: 0 45px;
}
.stytem .vcss {
margin-top: 25px;
display: flex;
align-items: center;
}
.stytem .vcss .vcssChild {
width: 115px;
height: 25px;
font-size: 14px;
border: 1px solid #797979;
color: white;
margin-right: 40px;
text-align: left;
text-indent: 5px;
}
.stytem .vcss .clearCss {
margin-top: 25px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.stytem .clearCss {
margin-top: 25px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.stytem .clearCss .clearBox {
height: 25px;
}
.stytem .clearCss .marginr40 {
margin-right: 40px;
}
.stytem .stepTable {
margin-top: 50px;
padding: 0 60px;
}
.stytem .testProcess {
margin-left: 20px;
margin-top: 60px;
}
.stytem .testProcess .processTiem {
width: 100%;
line-height: 40px;
background: #2B2C2C;
display: flex;
}
.stytem .testProcess .processTiem .tiem {
color: white;
text-align: left;
text-indent: 5px;
width: 70px;
font-size: 14px;
}
.stytem .testProcess .processTiem .timeInput {
flex: 1;
border: 0;
background: #2B2C2C;
}
.stytem .testProcess .statusCss {
display: flex;
margin-top: 20px;
}
.stytem .testProcess .statusCss .stepName {
width: 70px;
line-height: 25px;
color: white;
flex: 1;
font-size: 14px;
}
.stytem .testProcess .statusCss .stepImg {
width: 17px;
height: 19px;
}
.stytem .processing {
margin: 60px 0 25px 0;
}
.stytem .processing .filterCss {
width: 90px;
line-height: 25px;
border: 1px solid #797979;
color: white;
font-size: 14px;
}
.stytem .processing .testCss {
width: 90px;
line-height: 25px;
border: 1px solid #797979;
color: white;
margin-top: 20px;
font-size: 14px;
}
@media screen and (max-width: 992px) {
.stytem .stepTable {
margin-top: 50px;
padding: 0;
}
.stytem .testProcess {
margin-top: 60px;
margin-left: 0;
}
}
html,
body {
height: 100%;
}
body {
min-width: 1000px;
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
.IonicTest .IonicTestCss {
width: 50rem;
margin: auto;
color: white;
}
.IonicTest .IonicTestCss .IonicTest_top1 {
display: flex;
}
.IonicTest .IonicTestCss .IonicTest_top1 .IonicTest_top1_left {
width: 36.25rem;
background: #2c2c2c;
}
.IonicTest .IonicTestCss .IonicTest_top1 .IonicTest_top1_right {
width: 13.75rem;
height: 330px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.IonicTest .IonicTestCss .IonicTest_top1 .IonicTest_top1_right .IonicTest_size {
height: 60px;
width: 60px;
}
.IonicTest .IonicTestCss .IonicTest_top2 {
display: flex;
margin-top: 29px;
}
.IonicTest .IonicTestCss .IonicTest_top2 .IonicTest_top2_left {
width: 36.25rem;
height: 200px;
background: #2c2c2c;
}
.IonicTest .IonicTestCss .IonicTest_top2 .IonicTest_top2_right {
width: 12.5rem;
height: 200px;
}
.IonicTest .IonicTestCss .IonicTest_top2 .IonicTest_top2_right .IonicTest_top2_text {
width: 12.5rem;
line-height: 1.6rem;
background: #2c2c2c;
font-size: 13px;
text-align: left;
text-indent: 5px;
}
.IonicTest .IonicTestCss .IonicTest_top2 .IonicTest_top2_right .IonicTest_top2_text_bottom {
display: flex;
margin-top: 21px;
}
.IonicTest .IonicTestCss .IonicTest_top2 .IonicTest_top2_right .IonicTest_top2_text_bottom .IonicTest_radio {
margin-right: 32px;
font-size: 13px;
}
html,
body {
height: 100%;
}
body {
min-width: 900px;
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
.flex-box-css {
display: flex;
justify-content: center;
}
.header {
display: flex;
line-height: 85px;
font-size: 1.6rem;
justify-content: flex-end;
color: #cfcdcb;
margin-right: 1.25rem;
}
.header .header-body {
font-size: 14px;
display: flex;
align-items: center;
}
.header .header-body .line-css {
width: 1px;
height: 26px;
margin-right: 0.625rem;
}
.header .header-body .logout-img {
width: 18px;
height: 20px;
margin-right: 0.5rem;
}
.header .header-body .logout-css {
margin-right: 0.625rem;
}
.n_header {
display: flex;
height: 85px;
justify-content: center;
color: #cfcdcb;
position: relative;
}
.n_header .header-body {
font-size: 14px;
display: flex;
align-items: center;
}
.n_header .header-body .line-css {
width: 1px;
height: 26px;
margin-right: 0.625rem;
}
.n_header .header-body .logout-img {
width: 18px;
height: 20px;
margin-right: 0.5rem;
}
.n_header .header-body .logout-css {
margin-right: 0.625rem;
}
html,
body {
height: 100%;
}
body {
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
html,
body {
height: 100%;
}
body {
min-width: 360px;
/* background-color: rgba(61,61,61,0.95); */
/* background-color: #3d3d3d; */
background: url('../assets/img/1.jpg') no-repeat;
background-size: 100% 100%;
color: white;
font-family: "Open Sans", sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size: 13px;
direction: ltr;
overflow: hidden;
*zoom: 1;
}
.hide {
display: none !important;
}
.layout {
height: 100%;
/* background-color: #3d3d3d;
background-color: rgba(100,100,100,0.2); */
}
.identify-body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.identify-info {
background-color: rgba(255, 255, 255, 0.2);
padding: 10px;
}
.identify-title {
color: #323130;
text-align: center;
font-size: 16px;
margin-bottom: 15px;
}
.identify-img-body {
display: flex;
}
.identify-logo {
width: 200px;
height: 200px;
margin-right: 10px;
}
.identify-img {
width: 200px;
height: 200px;
}
.identify-login-body {
display: flex;
justify-content: flex-end;
margin-right: 4px;
margin-top: 10px;
}
.identify-login-text {
color: #164f8a;
margin-right: 8px;
display: flex;
align-items: center;
}
.identify-login-img {
width: 25px;
height: 25px;
}
.page-lock {
top: 50%;
left: 50%;
position: absolute;
margin-top: -140px;
margin-left: -325px;
background-color: rgba(255, 255, 255, 0.2);
}
.page-face-lock {
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -160px;
}
.face-btn {
border: 1px solid #164f8a;
border-radius: 5px;
padding: 10px 10px;
width: 60px;
position: relative;
left: 50%;
margin-left: -35px;
cursor: pointer;
}
.face_btn {
overflow: hidden;
margin-top: 25px;
}
.face-img {
background-color: rgba(255, 255, 255, 0.2);
height: 240px;
width: 320px;
}
.page-logo {
text-align: center;
margin-bottom: 15px;
}
.page-lock-logo {
float: left;
width: 200px;
height: 200px;
margin-right: 10px;
}
.page-lock .page-body {
width: 630px;
padding: 12px 10px;
/* background-color: rgba(255,255,255,0.2); */
/* background-color: rgba(100, 100,100, 0.8); */
}
.page-lock-info {
padding-left: 10px;
float: right;
width: 200px;
text-align: left;
color: white;
}
.page-lock .page-lock-img {
float: left;
width: 200px;
height: 200px;
}
.page-lock .page-lock-info .email {
display: block;
font-size: 14px;
line-height: 14px;
margin-bottom: 10px;
}
.page-lock .page-body:after,
.page-lock .page-body:before {
display: table;
content: "";
line-height: 0;
}
.locked {
margin-bottom: 1px;
font-size: 14px;
line-height: 14px;
}
.page-lock .page-footer-custom {
text-align: left !important;
font-size: 12px;
color: #eaeaea;
margin-top: 10px;
margin-left: 10px;
margin: 0 0 20px 10px;
color: #164f8a;
}
.clear {
clear: both;
}
a:link {
color: rosybrown;
}
a:visited {
color: #666;
}
a:hover {
color: rosybrown;
}
a:active {
color: yellow;
}
@media (max-width: 768px) {
.identify-info {
padding: 20px;
}
.identify-img-body {
display: flex;
flex-flow: column;
}
.identify-logo {
margin-right: 0;
margin-bottom: 10px;
}
.page-lock {
margin-top: -305px;
margin-left: -150px;
}
.page-face-lock {
margin-top: -200px;
margin-left: -160px;
}
.page-lock .page-lock-logo {
float: none !important;
display: block;
margin: 0 auto;
text-align: center;
margin-bottom: 15px;
}
.page-lock .page-lock-img {
float: none !important;
display: block;
margin: 0 auto;
text-align: center;
margin-bottom: 15px;
}
.page-lock .page-lock-info {
float: none !important;
width: 260px;
margin: 0 auto 0 30px;
}
.page-lock .page-body {
padding: 10px;
text-align: center;
width: 280px;
}
.locked {
display: block;
margin-bottom: 20px;
}
}
.toast-css {
font-size: 0.32rem;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 15px;
margin: 0 0 0 -60px;
border-radius: 4px;
position: fixed;
top: 50%;
left: 50%;
width: 130px;
text-align: center;
}
.discern-btn {
background-color: #164f8a;
padding: 10px 15px;
border-radius: 5px;
border: 1px solid #164f8a;
color: #FFF;
cursor: pointer;
}
.login-btn-text {
display: block;
text-align: center;
width: 330px;
margin: 15px 0;
color: #666;
font-size: 16px;
}
.login-btn-body {
justify-content: center;
display: flex !important;
width: 330px;
margin: 10px 0;
}
.login-img-a {
text-decoration: none;
display: inline-block;
}
.login-img-css {
width: 30px;
height: 30px;
}
.login-img-css-margin {
margin-right: 10px;
}
html,
body {
height: 100%;
}
body {
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.w_100 {
width: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
.aside-body {
height: 100%;
background-color: #2c2c2c;
}
.aside-body .aside {
color: white;
}
.aside-body .aside .homeImg {
top: 0;
background-color: #2c2c2c;
display: flex;
justify-content: center;
align-items: center;
height: 85PX;
width: 120PX;
}
.aside-body .aside .homeImg .home-size {
width: 38PX;
height: 35PX;
}
.aside-body .aside .aside-menu {
cursor: pointer;
background-color: #2c2c2c;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
height: 105PX;
}
.aside-body .aside .aside-menu .aside-img {
width: 66PX;
height: 42PX;
}
.aside-body .aside .aside-menu .aside-text {
font-size: 13PX;
margin-top: 14PX;
}
@media (max-width: 700px) {
.aside-body {
display: none;
}
}
html,
body {
height: 100%;
}
body {
min-width: 900px;
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
#header {
width: 10px;
height: 100%;
}
.ub {
display: flex;
}
.ub-ac {
display: flex;
justify-content: center;
}
.ub-pc {
display: flex;
align-items: center;
}
.ub-ec {
display: flex;
justify-content: flex-end;
}
.ub-v {
display: flex;
flex-flow: column;
}
.bg-img {
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2 {
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3 {
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color {
height: 100%;
background-color: #232423;
}
.trans {
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser {
cursor: pointer;
}
.recog-body,
.facial-body {
justify-content: center;
display: flex;
align-items: center;
height: 100%;
}
.recog-body .recog-box,
.facial-body .recog-box,
.recog-body .facial-box,
.facial-body .facial-box {
background-color: rgba(255, 255, 255, 0.2);
padding: 0.625rem;
display: flex;
flex-flow: column;
}
.recog-body .recog-box .recog-content,
.facial-body .recog-box .recog-content,
.recog-body .facial-box .recog-content,
.facial-body .facial-box .recog-content,
.recog-body .recog-box .facial-content,
.facial-body .recog-box .facial-content,
.recog-body .facial-box .facial-content,
.facial-body .facial-box .facial-content {
display: flex;
}
.recog-body .recog-box .recog-content .logo-wh,
.facial-body .recog-box .recog-content .logo-wh,
.recog-body .facial-box .recog-content .logo-wh,
.facial-body .facial-box .recog-content .logo-wh,
.recog-body .recog-box .facial-content .logo-wh,
.facial-body .recog-box .facial-content .logo-wh,
.recog-body .facial-box .facial-content .logo-wh,
.facial-body .facial-box .facial-content .logo-wh {
width: 11.25rem;
height: 11.25rem;
margin-right: 0.625rem;
}
.recog-body .recog-box .recog-content .facial-center,
.facial-body .recog-box .recog-content .facial-center,
.recog-body .facial-box .recog-content .facial-center,
.facial-body .facial-box .recog-content .facial-center,
.recog-body .recog-box .facial-content .facial-center,
.facial-body .recog-box .facial-content .facial-center,
.recog-body .facial-box .facial-content .facial-center,
.facial-body .facial-box .facial-content .facial-center {
width: 11.25rem;
height: 11.25rem;
background-color: rgba(255, 255, 255, 0.2);
margin-right: 1.25rem;
}
.recog-body .recog-box .recog-content .recog-right,
.facial-body .recog-box .recog-content .recog-right,
.recog-body .facial-box .recog-content .recog-right,
.facial-body .facial-box .recog-content .recog-right,
.recog-body .recog-box .facial-content .recog-right,
.facial-body .recog-box .facial-content .recog-right,
.recog-body .facial-box .facial-content .recog-right,
.facial-body .facial-box .facial-content .recog-right,
.recog-body .recog-box .recog-content .facial-right,
.facial-body .recog-box .recog-content .facial-right,
.recog-body .facial-box .recog-content .facial-right,
.facial-body .facial-box .recog-content .facial-right,
.recog-body .recog-box .facial-content .facial-right,
.facial-body .recog-box .facial-content .facial-right,
.recog-body .facial-box .facial-content .facial-right,
.facial-body .facial-box .facial-content .facial-right {
width: 11.25rem;
height: 11.25rem;
}
.recog-body .recog-box .recog-content .facial-right,
.facial-body .recog-box .recog-content .facial-right,
.recog-body .facial-box .recog-content .facial-right,
.facial-body .facial-box .recog-content .facial-right,
.recog-body .recog-box .facial-content .facial-right,
.facial-body .recog-box .facial-content .facial-right,
.recog-body .facial-box .facial-content .facial-right,
.facial-body .facial-box .facial-content .facial-right {
color: white;
text-align: left;
}
.recog-body .recog-box .recog-content .facial-right .staffname,
.facial-body .recog-box .recog-content .facial-right .staffname,
.recog-body .facial-box .recog-content .facial-right .staffname,
.facial-body .facial-box .recog-content .facial-right .staffname,
.recog-body .recog-box .facial-content .facial-right .staffname,
.facial-body .recog-box .facial-content .facial-right .staffname,
.recog-body .facial-box .facial-content .facial-right .staffname,
.facial-body .facial-box .facial-content .facial-right .staffname {
line-height: 1.875rem;
font-size: 1.25rem;
padding: 0.3125rem 0;
}
.recog-body .recog-box .recog-content .facial-right .option-css,
.facial-body .recog-box .recog-content .facial-right .option-css,
.recog-body .facial-box .recog-content .facial-right .option-css,
.facial-body .facial-box .recog-content .facial-right .option-css,
.recog-body .recog-box .facial-content .facial-right .option-css,
.facial-body .recog-box .facial-content .facial-right .option-css,
.recog-body .facial-box .facial-content .facial-right .option-css,
.facial-body .facial-box .facial-content .facial-right .option-css,
.recog-body .recog-box .recog-content .facial-right .email-css,
.facial-body .recog-box .recog-content .facial-right .email-css,
.recog-body .facial-box .recog-content .facial-right .email-css,
.facial-body .facial-box .recog-content .facial-right .email-css,
.recog-body .recog-box .facial-content .facial-right .email-css,
.facial-body .recog-box .facial-content .facial-right .email-css,
.recog-body .facial-box .facial-content .facial-right .email-css,
.facial-body .facial-box .facial-content .facial-right .email-css,
.recog-body .recog-box .recog-content .facial-right .company-css,
.facial-body .recog-box .recog-content .facial-right .company-css,
.recog-body .facial-box .recog-content .facial-right .company-css,
.facial-body .facial-box .recog-content .facial-right .company-css,
.recog-body .recog-box .facial-content .facial-right .company-css,
.facial-body .recog-box .facial-content .facial-right .company-css,
.recog-body .facial-box .facial-content .facial-right .company-css,
.facial-body .facial-box .facial-content .facial-right .company-css {
font-size: 0.78125rem;
height: 1.09375rem;
margin-bottom: 0.625rem;
}
.recog-body .recog-box .recog-optin,
.facial-body .recog-box .recog-optin,
.recog-body .facial-box .recog-optin,
.facial-body .facial-box .recog-optin {
align-items: center;
display: flex;
justify-content: flex-end;
height: 1.71875rem;
margin-top: 1.25rem;
margin-right: 0.625rem;
}
.recog-body .recog-box .recog-optin .option-text,
.facial-body .recog-box .recog-optin .option-text,
.recog-body .facial-box .recog-optin .option-text,
.facial-body .facial-box .recog-optin .option-text {
font-size: 0.625rem;
margin-right: 0.625rem;
}
.recog-body .recog-box .recog-optin .option-img,
.facial-body .recog-box .recog-optin .option-img,
.recog-body .facial-box .recog-optin .option-img,
.facial-body .facial-box .recog-optin .option-img {
width: 1.5625rem;
height: 1.5625rem;
cursor: pointer;
}
.recog-body .recog-box .facial-optin,
.facial-body .recog-box .facial-optin,
.recog-body .facial-box .facial-optin,
.facial-body .facial-box .facial-optin {
text-align: left;
margin-top: 0.625rem;
color: white;
}
//设置 rem 函数
function setRem () {
// 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
// 1024 默认大小16px; 1024px = 64rem ;每个元素px基础上/16
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= Math.max(htmlWidth/64,12) + 'px';
// console.log('size='+htmlWidth/60)
let htmlHeight = document.documentElement.clientHeight || document.body.clientHeight;
localStorage.setItem("htmlHeight",htmlHeight);
}
// 初始化
setRem();
window.onresize = function () {
setRem()
}
window.addEventListener("load", setRem());
import Vue from 'vue'
import App from './App.vue'
import VueFluent from "vfluentdesign";
import "vfluentdesign/lib/index.css";
Vue.use(VueFluent);
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'
import router from './router'
import store from './store'
import VueI18n from 'vue-i18n'
// import './utils/rem'
import less from 'less'
import './axios/api'
import './axios/require'
// import 'lib-flexible'
import './libs/rem.js';
Vue.use(less)
Vue.config.productionTip = true
Vue.use(VueI18n);
Vue.use(ElementUI);
Vue.use(VueFluent);
Vue.use(Antd);
const i18n = new VueI18n({
locale: localStorage.getItem("lang") || "zh",
messages: {
zh: require("./assets/i18n/zh"),
en: require("./assets/i18n/en"),
ja: require("./assets/i18n/ja"),
cn: require("./assets/i18n/cn"),
}
});
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'
const IonicFace = () => import('../views/IonicFace.vue')
const IonicRecorder = () => import('../views/IonicRecorder.vue')
const IonicLogin = () => import('../views/IonicLogin.vue')
const IonicIndex = () => import('../views/IonicIndex.vue')
const IonicHome = () => import('../views/IonicHome.vue')
const IonicSystem = () => import('../views/IonicSystem.vue')
const IonicHelp = () => import('../views/IonicHelp.vue')
const IonicTest = () => import('../views/IonicTest.vue')
const IonicRinse = () => import('../views/IonicRinse.vue')
Vue.use(VueRouter)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const routes = [
{
path:'/',
name:'IonicLogin',
component:IonicLogin,
meta:{
title:'IonicLogin'
}
},
{
path:'/IonicFace',
name:'IonicFace',
component:IonicFace,
meta:{
title:'人脸识别'
}
},
,
{
path:'/IonicRecorder',
name:'IonicRecorder',
component:IonicRecorder,
meta:{
title:'Recorder'
}
},
{
path:'/IonicLogin',
name:'IonicLogin',
component:IonicLogin,
meta:{
title:'IonicLogin'
}
},
{
path:'/IonicIndex',
name:'IonicIndex',
component:IonicIndex,
meta:{
title:'IonicIndex'
},
children:[
{
path: '/IonicHome',
name: 'IonicHome',
component: IonicHome,
meta:{
title:'首页'
}
},
{
path: '/IonicSystem',
name: 'IonicSystem',
component: IonicSystem,
meta:{
title:'系统'
}
},
{
path: '/IonicHelp',
name: 'IonicHelp',
component: IonicHelp,
meta:{
title:'帮助'
}
},
{
path: '/IonicTest',
name: 'IonicTest',
component: IonicTest,
meta:{
title:'测试'
}
},
{
path: '/IonicRinse',
name: 'IonicRinse',
component: IonicRinse,
meta:{
title:'清洗'
}
}
]
},
]
const router = new VueRouter({
routes
})
export default router
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let state={
asideFlag:true, //导航栏显示
menuID:0,
menuPath:localStorage.getItem("asideId") //跳转的路径
};
let getters={
};
let actions={
showAside({commit},val){
commit('showAside');
},
hideAside({commit},val){
commit('hideAside')
},
changePath({commit},val){
commit('changePath');
}
};
let mutations={
showAside(state,val){
localStorage.setItem('flag',true);
state.asideFlag=true;
},
hideAside(state,val){
localStorage.removeItem('flag');
state.asideFlag=false;
},
changePath(state,val){
state.menuPath = localStorage.getItem("asideId");
console.log('state.menuPath=='+state.menuPath);
}
};
let modules={};
export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules
})
html,body{
height: 100%;
}
body
{
min-width: 360px;
/* background-color: rgba(61,61,61,0.95); */
/* background-color: #3d3d3d; */
background: url('../assets/img/1.jpg') no-repeat;
background-size: 100% 100%;
color:white;
font-family: "Open Sans", sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size: 13px;
direction: ltr;
overflow: hidden;
*zoom: 1;
}
.hide{
display: none !important;
}
.layout{
height:100%;
/* background-color: #3d3d3d;
background-color: rgba(100,100,100,0.2); */
}
.identify-body{
display: flex;align-items: center;justify-content: center;height: 100%;
}
.identify-info{
background-color: rgba(255, 255, 255, 0.2);padding: 10px;
}
.identify-title{
color:rgb(50 49 48);text-align: center;font-size: 16px;margin-bottom: 15px;
}
.identify-img-body{
display: flex;
}
.identify-logo{
width: 200px;height: 200px;
margin-right: 10px;
}
.identify-img{
width: 200px;height: 200px;
}
.identify-login-body{
display: flex;justify-content: flex-end;margin-right: 4px;margin-top: 10px;
}
.identify-login-text{
color: #164f8a;margin-right: 8px;display: flex;align-items: center;
}
.identify-login-img{
width: 25px;height: 25px;
}
.page-lock {
top: 50%;
left: 50%;
position: absolute;
margin-top: -140px;
margin-left: -325px;
background-color: rgba(255,255,255,0.2);
}
.page-face-lock{
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -160px;
}
.face-btn{
border:1px solid #164f8a;
border-radius: 5px;
padding: 10px 10px;
width: 60px;
position: relative;
left: 50%;
margin-left: -35px;
cursor: pointer;
}
.face_btn{
overflow: hidden;margin-top: 25px;
}
.face-img{
background-color: rgba(255,255,255,0.2);
height: 240px;
width: 320px;
}
.page-logo{
text-align: center;
margin-bottom: 15px;
}
.page-lock-logo{
float: left;
width: 200px;
height: 200px;
margin-right: 10px;
}
.page-lock .page-body {
width: 630px;
padding: 12px 10px;
/* background-color: rgba(255,255,255,0.2); */
/* background-color: rgba(100, 100,100, 0.8); */
}
.page-lock-info{
padding-left: 10px;
float: right;
width: 200px;
text-align: left;
color: white;
}
.page-lock .page-lock-img {
float: left;
width: 200px;
height: 200px;
}
.page-lock .page-lock-info .email {
display: block;
font-size: 14px;
line-height: 14px;
margin-bottom: 10px;
}
.page-lock .page-body:after, .page-lock .page-body:before {
display: table;
content: "";
line-height: 0;
}
.locked{
margin-bottom: 1px;
font-size: 14px;
line-height: 14px;
}
.page-lock .page-footer-custom {
text-align: left !important;
font-size: 12px;
color: #eaeaea;
margin-top: 10px;
margin-left: 10px;
margin: 0 0 20px 10px;
color: #164f8a;
}
.clear {
clear: both;
}
a:link {color:rosybrown;}
a:visited {color:#666;}
a:hover {color:rosybrown;}
a:active {color:yellow;}
@media (max-width: 768px){
.identify-info {
padding: 20px;
}
.identify-img-body {
display: flex;
flex-flow: column;
}
.identify-logo {
margin-right: 0;
margin-bottom: 10px;
}
.page-lock{
margin-top: -305px;
margin-left: -150px;
}
.page-face-lock{
margin-top: -200px;
margin-left: -160px;
}
.page-lock .page-lock-logo {
float: none !important;
display: block;
margin: 0 auto;
text-align: center;
margin-bottom: 15px;
}
.page-lock .page-lock-img {
float: none !important;
display: block;
margin: 0 auto;
text-align: center;
margin-bottom: 15px;
}
.page-lock .page-lock-info {
float: none !important;
width: 260px;
margin: 0 auto 0 30px;
}
.page-lock .page-body {
padding: 10px;
text-align: center;
width: 280px;
}
.locked{
display: block;
margin-bottom: 20px;
}
}
.toast-css{
font-size: 12px;color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 15px;
margin: 0 0 0 -60px;
border-radius: 4px;
position: fixed; top: 50%;
left: 50%;
width: 130px;
text-align: center;
}
.discern-btn{
background-color: #164f8a ;padding: 10px 15px;border-radius: 5px;border:1px solid #164f8a;color: #FFF;cursor: pointer;
}
.login-btn-text{
display: block;
text-align: center;
width: 330px;margin:15px 0;
color:#666;font-size: 16px;
}
.login-btn-body{
justify-content: center;
display: flex !important;
width: 330px;
margin: 10px 0;
}
.login-img-a{
text-decoration: none;display: inline-block;
}
.login-img-css{
width: 30px;
height: 30px;
}
.login-img-css-margin{
margin-right: 10px;
}
\ No newline at end of file
@import 'common.less';
\ No newline at end of file
@import 'common.less';
.IonicHometop1{
height: 100%;
// width:50rem;
color: white;
// margin-top:15px;
// margin-left:50px;
// margin-right:50px;
// margin: 15px 0;
.top1_echarts{
height: 50%;
// height:350px;
background:#2c2c2c ;
}
.IonicHometop2{
display:flex; margin-top:20px;
.IonicHomedetail1{
width: 17.1875rem;
// width:275px;
height:250px;
background:#2c2c2c ;
}
.IonicHomedetail2{
width: 13.75rem;
height: 250px;
// width: 220px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
.IonicHomedetail2_imgsize{
height:30px;width:30px;
}
.IonicHomedetail2_text{
margin-top:15px;font-size:13px;
}
}
}
}
\ No newline at end of file
@import 'common.less';
.login-body{
.ub;.ub-ac;.ub-pc;
height: @height;
.login-box{
background-color: rgba(255, 255, 255, 0.2);
// padding: 2rem;
padding: .625rem;
.ub-v;
.login-content{
.ub;
.logo-wh{
// width: 36rem;
// height: 36rem;
// margin-right: 2rem;
width: 11.25rem;
height: 11.25rem;
margin-right: .625rem;
// border:1px solid
}
.login-right{
// width: 36rem;
// height: 36rem;
width: 11.25rem;
height: 11.25rem;
// border:1px solid;
display: flex;
align-items: center;
flex-flow: column;
.title{
.ub-pc;
.ub-ac;
color: white;
// height: 7rem;
height: 2.1875rem;
font-size: .875rem;
}
.login-user,.user-msg,.login-pwd,.pwd-msg,.login-btn{
// width: 100%;
// width: 36rem;
// height: 6rem;
width: 11.25rem;
height: 1.875rem;
}
.user-msg,.pwd-msg{
// height: 5.4rem;
height: 1.6875rem;
text-align: left;
text-indent: 5px;
color: #8f2c22;
font-size: .6875rem;
.ub-pc
}
.login-pwd{
}
.pwd-msg{
}
.login-btn{
color: white;
}
}
}
.login-optin{
.ub-pc;
.ub-ec;
// height: 5.5rem;
// margin-top: 4rem;
// margin-right: 2rem;
height: 1.71875rem;
margin-top: 1.25rem;
margin-right: .625rem;
.option-text{
font-size: .625rem;
// margin-right: 2rem;
margin-right: .625rem;
}
.option-img {
// width: 5rem;
// height: 5rem;
width: 1.5625rem;
height: 1.5625rem;
cursor: pointer;
}
}
}
.footer{
position: absolute; bottom:3.125rem;display: flex;width:100%;
.footer-body{
padding:.3125rem 15%;
display: flex;width:100%;
font-size:14px;
line-height: 14px;
color:white;
.ver-css{
display:flex;flex:1;align-items: center;color:rgba(255,255,255,0.6);
font-size: .625rem;
.ver-text{
margin-left: 8px;
}
}
}
}
}
@import './common.less';
.recog-body,.facial-body{
.ub;.ub-ac;.ub-pc;
height: @height;
.recog-box,.facial-box{
background-color: rgba(255, 255, 255, 0.2);
padding: .625rem;
.ub-v;
.recog-content,.facial-content{
.ub;
.logo-wh{
width: 11.25rem;
height: 11.25rem;
margin-right: .625rem;
// border:1px solid
}
.facial-center{
width: 11.25rem;
height: 11.25rem;
background-color: rgba(255, 255, 255, 0.2);
// border:1px solid;
margin-right: 1.25rem;
}
.recog-right,.facial-right{
width: 11.25rem;
height: 11.25rem;
// border:1px solid;
}
.facial-right{
color: white;
text-align: left;
.staffname{
line-height: 1.875rem;
font-size: 1.25rem;
padding: .3125rem 0;
// border:1px solid;
}
.option-css,.email-css,.company-css{
font-size: .78125rem;
height: 1.09375rem;
margin-bottom: .625rem;
// border: 1px solid;
}
}
}
.recog-optin{
.ub-pc;
.ub-ec;
height: 1.71875rem;
margin-top: 1.25rem;
margin-right: .625rem;
.option-text{
font-size: .625rem;
margin-right: .625rem;
}
.option-img {
width: 1.5625rem;
height: 1.5625rem;
cursor: pointer;
}
}
.facial-optin{
// border: 1px solid;
text-align: left;
margin-top: .625rem;
color: white;
}
}
}
\ No newline at end of file
@import './common.less';
.IonicRinseCss{
padding: 0 45px;
.charts-margin{
margin-top:25px;
.chartCss{
height:500px;background:#2B2C2C;
}
@media screen and (min-width: 768px) {
.chartCss{
height:380px;background:#2B2C2C;
}
}
.numCss{
height:145px;background:#2B2C2C;display:flex;align-items:center;justify-content: center;
.numText{
font-size:30px;color:white;
}
}
.process{
height:210px;background:white;margin-top:20px;display:flex;align-items:center;justify-content: center;
}
.status-margin{
display:flex;margin-top:20px;
.statusText{
width:70px;line-height:25px;border:1px solid #797979;color:white;flex:1;font-size:14px;
}
.statusImg{
width:17px;height:19px;
}
}
}
.stopCss{
margin-top:25px;
margin-bottom:50px;
.stop-margin{
margin-top:25px;
.stopRow{
display:flex;justify-content:center;
.stopBox{
display:flex;margin-top:20px;
.stopText{
width:70px;line-height:25px;border:1px solid #797979;color:white;flex:1;font-size:14px;
}
}
}
}
}
}
\ No newline at end of file
@import './common.less';
.stytem{
padding:0 45px;
.vcss{
margin-top:25px;display:flex;align-items:center;
.vcssChild{
width:115px;height:25px;font-size:14px;border:1px solid #797979;color:white;margin-right:40px;text-align:left;text-indent:5px;
}
.clearCss{
margin-top:25px;margin-top:25px;display:flex;align-items:center;justify-content:flex-end;
}
}
.clearCss{
margin-top:25px;margin-top:25px;display:flex;align-items:center;justify-content:flex-end;
.clearBox{
height:25px;
}
.marginr40{
margin-right:40px;
}
}
.stepTable{
margin-top:50px; padding: 0 60px;
}
.testProcess{
margin-left:20px;
margin-top:60px;
.processTiem{
width:100%;line-height:40px;background:#2B2C2C;display:flex;
// margin-top:20px;
.tiem{
color:white;text-align:left;text-indent: 5px;width:70px;font-size:14px;
}
.timeInput{
flex:1;border:0;background:#2B2C2C;
}
}
.statusCss{
display:flex;margin-top:20px;
.stepName{
width:70px;line-height:25px;color:white;flex:1;font-size:14px;
}
.stepImg{
width:17px;height:19px;
}
}
}
.processing{
margin:60px 0 25px 0;
.filterCss{
width:90px;line-height:25px;border:1px solid #797979;color:white;font-size:14px;
}
.testCss{
width:90px;line-height:25px;border:1px solid #797979;color:white;margin-top:20px;font-size:14px;
}
}
@media screen and (max-width: 992px) {
.stepTable {
margin-top:50px; padding: 0;
}
.testProcess{
margin-top:60px;
margin-left:0;
}
}
}
\ No newline at end of file
@import './common.less';
.IonicTest{
.IonicTestCss{
width:50rem;
margin:auto;
// border:1px solid red;
// margin-top:15px;margin-left:52px; margin-right:51px;
color:white;
.IonicTest_top1{
display:flex;
.IonicTest_top1_left{
width:36.25rem;
// height: 100%;
// height:330px;
// width:580px;
// height:330px;
background:#2c2c2c ;
}
.IonicTest_top1_right{
width:13.75rem;
// width:220px;
height:330px;display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
.IonicTest_size{
height:60px;width:60px;
}
}
}
.IonicTest_top2{
display:flex;margin-top:29px;
.IonicTest_top2_left{
width:36.25rem;
// width:580px;
height:200px;
background:#2c2c2c ;
}
.IonicTest_top2_right{
width:12.5rem;
// width:200px;
height:200px;
.IonicTest_top2_text{
width:12.5rem;
line-height: 1.6rem;
// width:200px;
// line-height:25px;
background:#2c2c2c ;
font-size:13px;
text-align:left;
text-indent:5px;
}
.IonicTest_top2_text_bottom{
display:flex;margin-top:21px;
.IonicTest_radio{
margin-right:32px;font-size:13px;
}
}
}
}
}
}
\ No newline at end of file
@import './common.less';
.flex-box-css{
display: flex;
justify-content: center;
}
.header{
display:flex; line-height:85px;
font-size:1.6rem;
justify-content:
flex-end;color:#cfcdcb;
// margin-right: 4rem;
margin-right: 1.25rem;
.header-body{
font-size:14px;
display: flex;
align-items: center;
.line-css{
width:1px;
height:26px;
// margin-right: 2rem;
margin-right: .625rem;
}
.logout-img{
width:18px;
height:20px;
margin-right: .5rem;
}
.logout-css{
// margin-right: 2rem;
margin-right: .625rem;
}
}
}
.n_header{
display:flex; height:85px;
justify-content: center;color:#cfcdcb;
position: relative;
// margin-right: 4rem;
.header-body{
font-size:14px;
display: flex;
align-items: center;
.line-css{
width:1px;
height:26px;
// margin-right: 2rem;
margin-right: .625rem;
}
.logout-img{
width:18px;
height:20px;
margin-right: .5rem;
}
.logout-css{
// margin-right: 2rem;
margin-right: .625rem;
}
}
}
html,body{
height: 100%;
}
body
{
// min-width: 1000px;
min-height: 768px;
padding: 0px !important;
margin: 0px !important;
overflow: hidden;
*zoom: 1;
}
@width: 10px;
@height: @width + 10px;
@base: #f04615;
#header {
width: @width;
height: @height;
}
.w_100{
width: 100%;
}
@gbcolor:#232423;
@bodyColor:#2b2c2c;
@blue1: #1871b9;
@blue2:#04508c;
@red1:#9e3639;
@red2:#5f3938;
@green1:#226f44;
@green2:#134f31;
@orange1:#cc3d1a;
@orange2:#8f2c22;
@pupler1:#5e609e;
@pupler2:#434471;
@green3:#067e6e;
@green4:#00594e;
// mian
@mainb1:#1971ba;
@maint1:#04508c;
@mainb2:#682e8e;
@maint2:#4b276b;
@mainb3:#317136;
@maint3:#22512a;
@mainb4:#af4629;
@maint4:#7c321e;
@mainb5:#1871b9;
@maint5:#04508b;
@mainb6:#9d3638;
@maint6:#5d3435;
@mainb7:#226f44;
@maint7:#144f31;
@mainb8:#5d609e;
@maint8:#434471;
@mainb9:#1870b9;
@maint9:#04508c;
@mainb10:#cc3e1b;
@maint10:#8f2c22;
@mainb11:#5e609e;
@maint11:#434471;
@mainb12:#077e6f;
@maint12:#00594e;
@mainb13:#335199;
@maint13:#20396e;
@mainb14:#9d3539;
@maint14:#5e3938;
@white:#FFF;
@width: 10px;
@height:100%;
.ub{
display: flex;
}
.ub-ac{
display: flex;
justify-content: center;
}
.ub-pc{
display: flex;
align-items: center;
}
.ub-ec{
display: flex;
justify-content: flex-end;
}
.ub-v{
display: flex;
flex-flow: column;
}
.bg-img{
height: 100%;
background-image: url('../assets/img/1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img2{
height: 100%;
background-image: url('../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-img3{
height: 100%;
background-image: url('../assets/img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bg-color{
height: 100%;
background-color: #232423;
}
.trans{
font-size: 12px !important;
transform: scale(0.8);
-webkit-transform-origin-x: 0;
}
.clear {
clear: both;
}
.cuser{
cursor: pointer;
}
// .el-main::-webkit-scrollbar{
// width:10px;
// height:10px;
// /**/
// }
// .el-main::-webkit-scrollbar-track{
// background: #2b2c2c !important;
// border-radius:2px;
// }
// .el-main::-webkit-scrollbar-thumb{
// background: #2b2c2c !important;
// border-radius:10px;
// }
// .el-main::-webkit-scrollbar-thumb:hover{
// background: #2b2c2c !important;
// }
// .el-main::-webkit-scrollbar-corner{
// background: #2b2c2c !important;
// }
// @media (max-width: 990px){
// html{
// font-size: 16px;
// }
// }
// @media (max-width: 768px){
// font-size: 16px;
// }
// @media (min-width: 889){
// font-size: 16px;
// } /*>=1024的设备*/
// @media (min-width: 1024px){
// font-size: 16px;
// } /*>=1024的设备*/
// @media (min-width: 1100px) {
// font-size: 16px;
// } /*>=1024的设备*/
// @media (min-width: 1280px) {
// font-size: 16px;
// }
// @media (min-width: 1366px) {
// font-size: 16px;
// }
// @media (min-width: 1440px) {
// font-size: 12px;
// }
\ No newline at end of file
@import 'common.less';
.aside-body{
height: 100%;
background-color: #2c2c2c;
.aside{
color: white;
.homeImg{
top:0;
background-color: #2c2c2c;
display: flex;
justify-content: center;
align-items: center;
height: 85PX;
width: 120PX;
.home-size{
width: 38PX;
height: 35PX;
}
}
.aside-menu{
cursor: pointer;
background-color: #2c2c2c;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
height: 105PX;
.aside-img{
width: 66PX;
height: 42PX;
}
.aside-text{
font-size: 13PX;
margin-top: 14PX;
}
}
}
}
@media (max-width: 700px){
.aside-body{
display: none;
}
}
<template lang="">
<div class="bg-img">
<div class="recog-body" v-show ="!boxFlag">
<div class="recog-box" :class="{ampCss:ampFlag}" >
<div class="recog-content" >
<img src="../assets/img/logo.png" class="logo-wh" @click="toRecorder">
<img class="recog-right" src="http://192.168.1.34:81/face_stream" @click="amplifier">
<!-- <div class="recog-right">
</div> -->
</div>
<div class="recog-optin">
<div class="option-text">{{$t('Login.signIn')}}</div>
<router-link to="/Login">
<img class="option-img" style="" src="../assets/img/login_033.png">
</router-link>
</div>
</div>
</div>
<div class="facial-body" v-show ="boxFlag">
<div class="facial-box">
<div class="facial-content">
<img src="../assets/img/logo.png" class="logo-wh">
<img :src="userInfo.imgUrl" class="facial-center">
<div class="facial-right">
<h1 id="nameId" class="staffname">{{userInfo.staffName}}</h1>
<span class="option-css">{{$t('Face.option')}}<span class="option-css" id="staffId">{{userInfo.staffId}}</span></span>
<div class="email-css" >{{userInfo.emil}} </div>
<div class="company-css">{{userInfo.company}} </div>
</div>
</div>
<div class="facial-optin">
<div class="facial-text">Powered by NEO EYE</div>
</div>
</div>
</div>
<!-- <div class="layout" style="height:100%" v-show ="!boxFlag">
<div id="secendId" class="page-lock" >
<div class="page-body" >
<img class="page-lock-logo" src="../assets/img/logo.png" alt="">
<img id="imgId" class="page-lock-img" :src="userInfo.imgUrl" alt="">
<div class="page-lock-info">
<h1 id="nameId" class="name-css">{{$t('Face.userInfo.staffName')}}</h1>
<span class="email">{{$t('Face.option')}}<span id="staffId">{{$t('Face.userInfo.staffId')}}</span></span>
<div class="email" >{{$t('Face.userInfo.emil')}} </div>
<div class="locked">{{$t('Face.userInfo.company')}} </div>
</div>
<div class="clear"></div>
</div>
<div class="page-footer-custom">
Powered by NEO EYE
</div>
</div>
</div> -->
<Toast ref="showToast"></Toast>
</div>
</template>
<script>
import Toast from '@/components/Toast'
// import { setToken } from '@/axios/token'
export default {
name:'Face',
data() {
return {
num:0,//点击次数
timer0:'',//第一次点击的时间
timer3:'',//第四次点击的时间
ampFlag:false,
userInfo:{
imgUrl:require('../assets/img/face1.png') ,
staffName:'沈懿俊',
staffId:'销售总监',
emil:'billy.shen@neotel.tech',
company:'上海挚锦科技有限公司'
},
boxFlag:false,
backgroundDiv: {
backgroundImage:'url(' + require('../assets/img/1.jpg') + ')',
backgroundRepeat:'no-repeat',
backgroundSize:'100% 100%',
    },
facial:'人脸识别',
signIn:'登录选项',
option:'职位 :',
selected_esp:'192.168.1.34',
selected_device:'esp1',
myVar:'',
baseUrl:'http://192.168.1.35:5001'
}
},
components:{
Toast
},
methods: {
amplifier(){
this.ampFlag=!this.ampFlag;
},
toRecorder(){
this.num++
if(this.num==1){
this.timer0=new Date().getTime()/1000
}
if(this.num==3){
this.timer4= new Date().getTime()/1000
if(this.timer4-this.timer0<=2){
this.num=0
this.$router.push('/Recorder')
}else {
this.num=0
}
}
},
clearName(){
this.$axios.get(this.$api.clearName).then(res =>{
console.log('success1');
this.getEsp();
})
},
getEsp(){
let req={
selected_device:this.selected_device
};
this.$axios.post(this.$api.selectDevice,req).then(res =>{
console.log('success2');
this.recognition()
})
},
recognition(){
console.log('recognition')
let req={
get_face_id_url:'http://'+this.selected_esp+':80/get_face_id'
};
this.$axios.post(this.$api.triggerFace,req).then(res =>{
console.log('triggerFace'+JSON.stringify(res));
this.myVar=setInterval(this.loop_get_name,3000);
})
},
loop_get_name(){
console.log('11111')
this.$axios.get(this.$api.recogniteName).then(res =>{
console.log('recg_name--->'+JSON.stringify(res))
let recg_name=res.data.recg_name;
let code = res.data.ID;
if (code == "10000")
{
console.log('res.recg_name=='+recg_name);
}else{
clearInterval(this.myVar);
this.boxFlag = true;
if(code<=4){
this.$set(this.userInfo,'staffName',recg_name);
this.$set(this.userInfo,'imgUrl','http://192.168.1.35:5001/get_img/'+code+'.jpg');
this.$set(this.userInfo,'emil',res.data.member_info.mail);
this.$set(this.userInfo,'company',res.data.member_info.company);
this.$set(this.userInfo,'staffId',res.data.member_info.position);
}else{
this.$set(this.userInfo,'staffName','访客');
this.$set(this.userInfo,'imgUrl','http://192.168.1.35:5001/get_img/访客.jpg');
this.$set(this.userInfo,'emil','guest@neotel.tech');
this.$set(this.userInfo,'company','上海挚锦科技有限公司');
this.$set(this.userInfo,'staffId','小鲜肉');
}
// if(recg_name == '沈懿俊'){
// this.$set(this.userInfo,'staffId','小鲜肉');
// }else if(recg_name == '李毅东'){
// this.$set(this.userInfo,'staffId','小哥哥');
// }else if(recg_name == '郑彩云'){
// this.$set(this.userInfo,'staffId','小仙女');
// }else if(recg_name == '丁雪'){
// this.$set(this.userInfo,'staffId','小姐姐');
// }else if(recg_name == '徐主花'){
// this.$set(this.userInfo,'staffId','it');
// }
this.$refs.showToast.toast();
}
})
},
},
mounted() {
this.clearName();
this.$once('hook:beforeDestroy', () => {
clearInterval(this.myVar)
})
}
}
</script>
<style scoped lang="less">
// @import url('../styles/face.less');
@import url('../styles/IonicRecorder.less');
span{
display: inline-block;
}
.marb{
margin-bottom: 10px;
}
.name-css{
font-size: 24px;
line-height: 26px;
}
.ampCss{
transform: scale(2);
}
</style>
\ No newline at end of file
<template>
<div class="kanban-body">
<el-container>
<el-main>
<div style="margin-top:15px;margin-left:52px; margin-right:51px;">
<div style="height:350px;background:#2c2c2c ;">
</div>
<div style="display:flex; margin-top:20px;" >
<div style="width:275px;height:250px;background:#2c2c2c ;">
</div>
<div style="width:275px;height:250px;background:#2c2c2c ;margin-left:28px;">
</div>
<div style="height: 250px;
width: 220px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;">
<img style="height:30px;width:30px;" src="../assets/img/print.png" alt="">
<div style="margin-top:15px;font-size:13px;">打印</div>
</div>
</div>
</div>
</el-main>
</el-container>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'Kanban',
data() {
return {
tabs:[{name:''},{}],
num:0,
activeIndex: '1',
timer:'',
date:new Date()
}
},
components: {
},
computed:{
},
created(){
this.$store.dispatch('showAside');
},
methods:{
tabChange(i){
this.num=i;
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
getChart(){
let myChart = echarts.init(this.$refs.chart);
var option = {
legend: {
x:'right',
textStyle:{color:'#FFFF',}
},
dataset: {
source: [
['product', '未开机', '正常', '异常'],
['5', 43.3, 85.8, 93.7],
['10', 43.3, 85.8, 93.7],
['15', 83.1, 73.4, 55.1],
['20', 86.4, 65.2, 82.5],
['25', 72.4, 53.9, 39.1],
['30', 72.4, 53.9, 39.1],
['35', 72.4, 53.9, 39.1],
['40', 72.4, 53.9, 39.1],
['45', 72.4, 53.9, 39.1],
['50', 72.4, 53.9, 39.1],
['55', 72.4, 53.9, 39.1],
['60', 72.4, 53.9, 39.1]
]
},
xAxis: {
type: 'category',
axisLine:{
lineStyle:{
color: '#555556',
}
}
},
yAxis: {
axisLine:{
lineStyle:{
color: '#555556',
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#555556'],
width: 1,
type: 'solid',
},
}
},
series: [
{
type: 'bar',
itemStyle: {
color: '#676867',
},
},
{
type: 'bar',
itemStyle: {
color: '#30ab6f',
},
},
{
type: 'bar',
itemStyle: {
color: '#cc3d1a',
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
// this.myChart.setOption(option);
myChart.setOption(option);
window.onresize = function () {
console.log('reset')
myChart.resize();
}
window.addEventListener("load", myChart.resize());
}
},
mounted() {
// this.getChart();
}
}
</script>
<style scoped lang="less">
</style>
\ No newline at end of file
<template>
<div class="IonicHometop1" style="overflow:auto;padding: 0 45px;">
<el-row :gutter="30" style="display: flex;flex-wrap: wrap;">
<el-col :xs="24" :sm="16" :md="16" style="">
<div style="">
<div class="" style="height:350px; background:#2c2c2c; margin-top:15px;" ></div>
<el-row :gutter="10" style="display: flex;align-items: center;flex-wrap: wrap;">
<el-col :xs="24" :sm="12" >
<div class="IonicHomedetail1" style="display:flex;margin:20px 0;">
<img :src="change" alt="" v-show="items.length!=0" :onerror="defaultImg" style="width:100%;height: 250px;background:#2c2c2c;">
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="" style="margin:20px 0;display:flex; flex: 1; flex-flow: column;justify-content:center;align-items:center;">
<img class="" style="width:30px;height:30px;" src="../assets/img/print.png" alt="">
<div class="IonicHomedetail2_text" style="font-size:14px;padding:5px;" >打印</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :xs="24" :sm="8" :md="8" style="display:flex;" >
<div style="width: 100%;background:#2c2c2c;text-align:left; margin:15px 0;">
<div style="line-height:30px;padding:0 10px;" :class="{curActive:i==selectIndex}" v-for="(v,i) in items" :key="v.id" @click="selectItem(v.id,i)">
{{v.name}}
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'Kanban',
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
defaultImg:'',
//defaultImg:'this.src="'+process.env.VUE_APP_IONICURL+'/api/photo/default.jpg"',
// defaultImg:'this.src="http://192.168.1.107:5000/api/photo/default.jpg"',
// defaultImg:'this.src="' + require('../assets/img/face1.png') + '"',
selectIndex:'0',
items:[
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 1,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 2,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 3,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
],
tabs:[{name:''},{}],
num:0,
activeIndex: '1',
timer:'',
date:new Date()
}
},
components: {
},
computed:{
change(){
if (this.items.length==0) return;
let src = process.env.VUE_APP_IONICURL+this.items[this.selectIndex]._links.frame;
console.log('src='+src);
this.imgUrl = src;
return src
}
},
created(){
this.$store.dispatch('showAside');
},
methods:{
selectItem(v,i){
this.selectIndex = i;
},
getProduct(){
this.$axios.get(this.$api.getProducts).then(res =>{
if(res.status== 200){
this.items= res.data.items;
}
console.log('getProducts');
})
},
tabChange(i){
this.num=i;
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
getChart(){
let myChart = echarts.init(this.$refs.chart);
var option = {
legend: {
x:'right',
textStyle:{color:'#FFFF',}
},
dataset: {
source: [
['product', '未开机', '正常', '异常'],
['5', 43.3, 85.8, 93.7],
['10', 43.3, 85.8, 93.7],
['15', 83.1, 73.4, 55.1],
['20', 86.4, 65.2, 82.5],
['25', 72.4, 53.9, 39.1],
['30', 72.4, 53.9, 39.1],
['35', 72.4, 53.9, 39.1],
['40', 72.4, 53.9, 39.1],
['45', 72.4, 53.9, 39.1],
['50', 72.4, 53.9, 39.1],
['55', 72.4, 53.9, 39.1],
['60', 72.4, 53.9, 39.1]
]
},
xAxis: {
type: 'category',
axisLine:{
lineStyle:{
color: '#555556',
}
}
},
yAxis: {
axisLine:{
lineStyle:{
color: '#555556',
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#555556'],
width: 1,
type: 'solid',
},
}
},
series: [
{
type: 'bar',
itemStyle: {
color: '#676867',
},
},
{
type: 'bar',
itemStyle: {
color: '#30ab6f',
},
},
{
type: 'bar',
itemStyle: {
color: '#cc3d1a',
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
// this.myChart.setOption(option);
myChart.setOption(option);
window.onresize = function () {
console.log('reset')
myChart.resize();
}
window.addEventListener("load", myChart.resize());
}
},
mounted() {
this.getProduct();
// this.getChart();
}
}
</script>
<style scoped lang="less">
@import url('../styles/IonicHome.less');
.productList:hover{
background-color: #323333 !important;
}
.curActive{
background-color: #323333 !important;
}
.el-col {
border-radius: 4px;
}
</style>
\ No newline at end of file
<template>
<div class="bg-color" style="height:100%;">
<el-container>
<div class="aside-body">
<el-aside width="120PX">
<div class="aside">
<div class="homeImg" @click="toHome" :class="{curActive: 'home'==isShaw}">
<img class="home-size" src="../assets/img/home.png" alt="">
</div>
<div style="widht:120px;height:15px;background:#242424;"></div>
<div style="margin-top:15px;">
<div class="aside-menu"
:class="{curActive:v.id==isShaw}"
v-for="(v,i) in asideList"
:key ="i"
draggable="true"
@dragstart="start(v,i)"
@dragover="over($event)"
@drop="drop(i)"
@click="toMenu(v,i)">
<img class="aside-img" :src="v.imgURL" alt="">
<div class="aside-text">{{changeMenu(v.id)}}</div>
</div>
</div>
</div>
</el-aside>
</div>
<el-container>
<el-header>
<Header ref="header" @logoOut ="signOut"> </Header>
</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import Header from '@/components/IonicsoilHeader'
export default {
name: 'Index',
data() {
return {
index:false,
htmlHeight:'',
asideList:[
{id:'test',path:'/IonicTest',imgURL:require('../assets/img/test.png'),name:'KANBAN'},
{id:'system',path:'/IonicSystem',imgURL:require('../assets/img/system.png'),name:'KANBAN'},
{id:'help',path:'/IonicHelp',imgURL:require('../assets/img/help.png'),name:'KANBAN'},
// {id:'rinse',path:'/IonicRinse',imgURL:require('../../assets/img/help.png'),name:'KANBAN'},
]
}
},
components: {
Header
},
computed:{
changeMenu(){
return function(id){
return this.$t('IonicHome["'+id+'"]');
}
},
isShaw(){
return this.$store.state.menuPath;
},
isShow(){
return this.$store.state.asideFlag
}
},
created(){
},
methods:{
toHome(){
localStorage.setItem("asideId",'home');
this.$store.dispatch("changePath")
this.$router.push('/IonicHome');
},
start(item,index){
this.currMoveItem = item; // 当前移动元素
this.currMoveIndex = index; // 当前移动数组下标
console.log('开始移动',item,index);
},
over(ev){
ev.preventDefault();
},
drop(index){
console.log('放下',index);
if(index == this.currMoveIndex) return false; // 不是原地移动
console.log('从'+this.currMoveIndex+'移动到'+index);
this.asideList.splice(this.currMoveIndex,1); // 删除元素之前所在位置
this.asideList.splice(index,0,this.currMoveItem); // 在需要放下元素的位置前插入移动元素
// 下面有无都无所谓
this.currMoveIndex = false;
this.currMoveItem = false;
},
toMenu(v,i){
localStorage.setItem("asideId",v.id);
this.$store.dispatch("changePath")
// this.index = i;
if(v.id=='tmviewer'){
location.href="teamviewer8://remotecontrol";
}else{
// this.$router.push('/Kanban');
this.$router.push(v.path);
}
},
signOut(){
// this.$router.push('/Kanban')
this.$infoBox(this.$t('backTips.content'), {
status: 'default',
title: this.$t('backTips.title'),
confirmTitle: this.$t('backTips.confirm'),
cancelTitle: this.$t('backTips.cancel'),
confirm: () => { this.$router.push('/Login') },
cancel: () => { this.asidebox; }
});
}
},
mounted() {
}
}
</script>
<style lang="less">
@import url('../styles/ionicindex.less');
.el-main{
padding: 0 !important;
background-color: #242424;
}
.el-header {
min-width: 450px;
background-color: transparent;
color: #333;
text-align: center;
height: 85px !important;
}
.curActive{
background-color: #323333 !important;
}
.bg-color{
height: 100%;
background-color:#232423 !important;
}
</style>
\ No newline at end of file
<template>
<div class="bg-img">
<div class="login-body" style="">
<div class="login-box">
<div class="login-content">
<img src="../assets/img/logo.png" class="logo-wh" alt="">
<div class="login-right">
<div style="">
<div class="title" for="">{{$t('Login.loginText')}}</div>
<fv-TextBox class="login-user" icon="Contact" maxlength="16" placeholder="userName" v-model="ruleForm.userName"></fv-TextBox>
<div class="user-msg">
<div v-show="userFlag">
{{$t('Login.userErr')}}
</div>
</div>
<fv-TextBox class="login-pwd" placeholder="Enter your password" v-model="ruleForm.password" type="password" icon="Lock" maxlength="16"></fv-TextBox>
<div class="pwd-msg">
<div v-show="pwdFlag">
{{$t('Login.passwordErr')}}
</div>
</div>
<fv-button @click="submitForm" class="login-btn" theme="dark" background="linear-gradient(to right, #04508c, #04508c)">{{$t('Login.btn')}}</fv-button>
</div>
</div>
</div>
<div class="login-optin">
<div class="option-text">{{$t('Login.signIn')}}</div>
<router-link to="/Face">
<img class="option-img" style="" src="../assets/img/login_06.png" alt="" >
</router-link>
</div>
</div>
<div class="footer" style="">
<div class="footer-body">
<div class="ver-css" style="">{{$t('Login.version')}}
<span class="ver-text">1.4.20</span> </div>
<Language />
</div>
</div>
</div>
<Toast ref="showToast"></Toast>
</div>
</template>
<script>
import Toast from '@/components/Toast'
import Language from '@/components/Language'
export default {
name:'Login',
data() {
return {
checked: true,
ruleForm:{
userName:'dongjiejei',
password:'123333',
},
userFlag:false,
pwdFlag:false,
valid:true
}
},
components:{
Toast,
Language
},
methods: {
submitForm() {
let userInfo = this.ruleForm.userName;
let password = this.ruleForm.password;
if(!userInfo){
this.userFlag=true;
this.valid=false;
}
if(!password){
this.pwdFlag=true;
this.valid=false;
}
if (this.valid) {
this.login();
// this.$refs.showToast.toast();
} else {
this.valid=true;
console.log('error submit!!');
}
},
login(){
let req={
username:this.ruleForm.userName,
password:this.ruleForm.password
};
this.$router.push('/IonicHome')
this.$axios.post(this.$api.IonicLogin,req).then(res =>{
console.log('success2');
if(res.data.msg == "登录成功"){
localStorage.setItem("asideId",'home');
this.$store.dispatch("changePath")
this.$router.push('/IonicHome')
}
})
}
},
mounted() {
},
}
</script>
<style scoped lang="less">
@import url('../styles/IonicLogin.less');
</style>
\ No newline at end of file
<template>
<div class="IonicRinseCss">
<el-row :gutter="30">
<el-col :xs="24" :sm="16" >
<div class="charts-margin">
<div ref ="chart" class="chartCss">
</div>
</div>
</el-col>
<el-col :xs="24" :sm="8">
<div class=" charts-margin">
<div class="numCss">
<div class="numText">
{{yAxis}}
</div>
</div>
<div class="process">
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :xs="24" :sm="16" >
<div class="charts-margin">
<el-row>
<el-col :xs="8" :sm="8" :md="8">
<div @click="start" class="status-margin">
<div class="statusText">过滤</div>
<div style="flex:1;">
<img class="statusImg" src="../assets/img/arrow.png" alt="">
</div>
</div>
</el-col>
<el-col :xs="8" :sm="8" :md="8">
<div class="status-margin">
<div class="statusText">清洗</div>
<div style="flex:1;">
<img class="statusImg" src="../assets/img/arrow.png" alt="">
</div>
</div>
</el-col>
<!-- <el-col :xs="12" :sm="12" :md="6">
<div class="status-margin">
<div class="statusText">滴入溶液</div>
<div style="flex:1;">
<img class="statusImg" src="../assets/img/arrow.png" alt="">
</div>
</div>
</el-col> -->
<el-col :xs="8" :sm="8" :md="8">
<div class="status-margin">
<div class="statusText">完成</div>
<div style="flex:1;">
&nbsp;
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :xs="24" :sm="8">
<div class="stopCss">
<div class="stop-margin">
<el-row class="stopRow">
<el-col :xs="12" :sm="12" :md="6">
<div @click="ionstop" class="stopBox">
<div class="stopText">停止</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
import { Message } from 'element-ui';
export default {
name: 'Kanban',
data() {
return {
yAxis:0,
percentage: 70,
timeFlag:true,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
],
type:localStorage.getItem('testType'),
timer:'',
myChart:''
}
},
components: {
},
computed:{
},
created(){
this.$store.dispatch('showAside');
},
methods:{
start(){
if(!this.timeFlag)return
Message({
message: '开始过滤',
type: 'success',
duration:2000
});
let req={
"type":this.type
};
let config = {
headers: {
'Content-Type': 'application/json'
}
}
this.$axios.post(this.$api.ionstart,req,config).then(res =>{
console.log("ionstart=="+JSON.stringify(res))
if(res.status== 200){
this.timeFlag = false;
// this.testvalue();
this.timer = window.setInterval(this.testvalue,1000);
}
})
},
testvalue(){
this.$axios.post(this.$api.testvalue).then(res =>{
console.log("ionstart=="+JSON.stringify(res))
if(res.status== 200){
this.yAxis = res.data.data.current_value.y;
this.showChart(res.data.data.history_value);
}
})
},
ionstop(){
this.$axios.post(this.$api.ionstop).then(res =>{
console.log("ionstart=="+JSON.stringify(res))
if(res.status== 200){
this.timeFlag = true;
window.clearInterval(this.timer);
}
})
},
showChart(data){
let myChart = echarts.init(this.$refs.chart);
var option = option = {
xAxis: {
type: 'category',
data: data.xlabel,
// axisLine:{
// lineStyle:{
// type:'solid',
// color: '#555556',
// }
// },
axisLine:{
lineStyle:{
type:'solid',
color: '#686868',
}
},
},
yAxis: {
axisLine:{
lineStyle:{
type:'solid',
color: '#686868',
}
},
splitLine: {
show: true,
lineStyle:{
type:'solid',
color: '#555556',
}
}
},
series: [{
data: data.ydata,
type: 'line',
itemStyle : {
normal : {
color:'#1870b9',
lineStyle:{
color:'#1870b9'
}
}
},
}]
};
myChart.setOption(option);
window.onresize = function () {
console.log('reset')
myChart.resize();
}
window.addEventListener("load", myChart.resize());
}
},
mounted() {
this.$once('hook:beforeDestroy',() =>{
window.clearInterval(this.timer);
})
}
}
</script>
<style scoped lang="less">
@import url('../styles/IonicRinse.less');
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
\ No newline at end of file
<template>
<div class="stytem">
<el-row :gutter="10">
<el-col :xs="24" :sm="12">
<div class="vcss">
<div class="vcssChild">
电压:{{voltage}}
</div>
<div class="vcssChild">
电导率:{{conductivity}}
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="clearCss" style="">
<div class="clearBox marginr40">
<el-radio v-model="radio" label="filter" style="color:white;">过滤阀体</el-radio>
</div>
<div class="clearBox">
<el-radio v-model="radio" label="clean" style="color:white;">清洗阀体</el-radio>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24">
<div class="stepTable">
<el-table
:header-cell-style="{color: '#FFF', fontSize: '14px',background:'#1871b8',borderColor:'7F7F7F'}"
:data="testStep" height="290" border style="width: 100%">
<el-table-column prop="solution" align="center" label="溶液(ml)"> </el-table-column>
<el-table-column prop="table_conductivity" align="center" label="电导率(μs/cm)"> </el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :xs="24" :sm="16" >
<div class="testProcess">
<el-row>
<el-col :sm="24" :md="12">
<div class="processTiem" >
<div class="" style="color:white;text-indent:10px;">过滤时间: {{times}}</div>
<!-- <input class="timeInput" v-model="times" type="text"> -->
</div>
</el-col>
</el-row>
<el-row>
<el-col :xs="8" :sm="8" :md="8">
<div class="statusCss" >
<div class="stepName" :style="{background:filterFlag}" >过滤</div>
<div style="flex:1;">
<img src="../assets/img/arrow.png" style="width:17px;height:19px;" alt="">
</div>
</div>
<!-- <div class="statusCss" >
<div class="stepName" :class="{notStart:filter.notStart,doingCss:filter.doing,endCss:filter.end}" >过滤</div>
<div style="flex:1;">
<img src="../assets/img/arrow.png" style="width:17px;height:19px;" alt="">
</div>
</div> -->
</el-col>
<el-col :xs="8" :sm="8" :md="8">
<div class="statusCss" >
<div class="stepName" :style="{background:cleanFlag}">清洗</div>
<div style="flex:1;">
<img src="../assets/img/arrow.png" style="width:17px;height:19px;" alt="">
</div>
</div>
</el-col>
<!-- <el-col :xs="12" :sm="12" :md="6">
<div class="statusCss" >
<div class="stepName" :style="{background:dripFlag}" >滴入溶液</div>
<div style="flex:1;">
<img src="../assets/img/arrow.png" style="width:17px;height:19px;" alt="">
</div>
</div>
</el-col> -->
<el-col :xs="8" :sm="8" :md="8">
<div class="statusCss" >
<div class="stepName" :style="{background:doneFlag}" >完成</div>
<div style="flex:1;">
&nbsp;
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :xs="24" :sm="8">
<div class="processing">
<div @click="start" class="filterCss">
过滤
</div>
<!-- <div class="testCss" >
清洗
</div> -->
<div @click="stop" class="testCss">
停止
</div>
</div>
</el-col>
</el-row>
<el-dialog title="选择下一步骤" :visible.sync="dialogFormVisible">
<!-- <div style="margin-bottom:25px;">
<el-radio v-model="stage" label="clean" style="color:white;">清洗</el-radio>
<el-radio v-model="stage" label="drip" style="color:white;">滴入溶液</el-radio>
</div> -->
<el-form>
<el-form-item label="滴入溶液(ml)" :label-width="formLabelWidth">
<el-input v-model="liquid" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">停 止</el-button>
<el-button type="primary" @click="change">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { Message } from 'element-ui';
export default {
name: 'Kanban',
data() {
return {
frist:0,
stage:'clean',
liquid:'',
radio: '',
flag:true,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px',
testStep: [
// {
// solution: '20',
// table_conductivity: '王小虎',
// }
],
filterFlag:'#555',
cleanFlag:'#555',
dripFlag:'#555',
doneFlag:'#555',
voltage:'',
conductivity:'',
times:'',
timer:'',
timeFlag:true
}
},
components: {
},
computed:{
},
created(){
this.$store.dispatch('showAside');
},
methods:{
start(){
if(!this.timeFlag) return
Message({
message: '开始过滤',
type: 'success',
duration:2000
});
this.$axios.post(this.$api.calibrationstart).then(res =>{
console.log("start=="+res)
if(res.status== 200){
this.timeFlag = false;
this.testStep = [];
this.timer = window.setInterval(this.underway,1000);
// this.underway();
}
})
},
underway(){
this.$axios.post(this.$api.calibrationvalue).then(res =>{
// console.log("underway=="+res)
if(res.status== 200){
let value =res.data.data.stage;
let stage_change = res.data.data.stage_change;
if(stage_change){
this.open();
// let info ={};
// info.solution = res.data.data.solution;
// info.table_conductivity = res.data.data.table_conductivity;
// this.testStep.push(info);
// let obj = {};
// this.testStep = this.testStep.reduce(function (item, next) {
// obj[next.solution] ? '' : obj[next.solution] = true && item.push(next);
// return item;
// }, []);
}
this.radio = value;
this.voltage = res.data.data.voltage;
this.conductivity = res.data.data.conductivity;
this.times = res.data.data.times;
if(value == 'filter'){
this.filterFlag = '#1871B9';
this.cleanFlag='#555';
this.dripFlag='#555';
this.doneFlag='#555';
}
if(value == "clean"){
this.filterFlag = '#2b2c2c';
this.cleanFlag='#1871B9';
this.dripFlag='#555';
this.doneFlag='#555';
}
if(value == "drip"){
this.filterFlag = '#2b2c2c';
this.cleanFlag='#2b2c2c';
this.dripFlag='#1871B9';
this.doneFlag='#555';
}
if(value == "done"){
this.filterFlag = '#2b2c2c';
this.cleanFlag='#2b2c2c';
this.dripFlag='#2b2c2c';
this.doneFlag='#1871B9';
}
}
})
},
stop(){
Message({
message: '停止过滤',
type: 'success',
duration:2000
});
this.$axios.post(this.$api.calibrationstop).then(res =>{
console.log("stop=="+res)
if(res.status== 200){
this.timeFlag = true;
console.log(this.timer)
window.clearInterval(this.timer);
this.getrecord();
}
})
},
getrecord(){
this.$axios.post(this.$api.getrecord).then(res =>{
console.log("getrecord=="+JSON.stringify(res))
if(res.status== 200){
if(res.data.data.cols.length !=0){
this.flag = false;
this.testStep = res.data.data.cols;
}
}
})
},
open(){
this.dialogFormVisible = true;
this.getrecord();
},
cancel(){
this.dialogFormVisible = false;
this.stop();
},
change(){
// if(!this.stage){
// alert("请选择下一步操作");
// return
// }
if(!this.liquid){
alert("请滴入溶液");
return
}
let req={
"stage":this.stage,
"solution":this.liquid
};
let config = {
headers: {
'Content-Type': 'application/json'
}
}
this.$axios.post(this.$api.calibrationchange,req,config).then(res =>{
console.log("stop=="+res)
if(res.status== 200){
// this.stage ="";
this.liquid ="";
this.dialogFormVisible = false;
}
})
},
calibrationstatus(){
this.$axios.post(this.$api.calibrationstatus).then(res =>{
if(res.status== 200){
if(res.data.data.calibration_status){
this.timeFlag = false;
this.timer = window.setInterval(this.underway,1000);
this.getrecord();
}
// console.log(this.timer)
// window.clearInterval(this.timer);
// this.getrecord();
}
})
},
},
mounted() {
this.calibrationstatus();
this.$once('hook:beforeDestroy', () => {
window.clearInterval(this.timer)
})
// this.start();
}
}
</script>
<style scoped lang="less">
@import url('../styles/IonicSystem.less');
.el-table tr {
background-color: red;
}
/deep/ .el-table td, /deep/ .el-table th {
padding: 6px 0;
background:#4d4d4d;
color: white;
}
/deep/ .el-table__body-wrapper {
background:#2b2c2c;
}
/deep/.el-table td,/deep/ .el-table th.is-leaf,/deep/.el-table--border,/deep/ .el-table--group{
border-color: #797979;
}
/deep/.el-table--border::after,/deep/ .el-table--group::after,/deep/ .el-table::before{
background-color: #797979;
}
.notStart{
background:#555;
}
.doingCss{
background:#1871B9;
}
.endCss{
background:#2b2c2c;
}
/deep/.el-dialog {
background:#232423;
}
/deep/ .el-dialog__title{
color: white;
}
/deep/ .el-form-item__label {
color: white;
}
/deep/ .el-input__inner {
border: 0;
border-radius: 0;
background:#2b2c2c ;
}
/deep/ .el-button--default {
color: #FFF;
background-color: #555;
border-color: #555;
}
/deep/ .el-button {
border-radius: 0;
}
</style>
\ No newline at end of file
<template>
<div class="IonicTest" style="overflow:auto;padding: 0 45px;">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" >
<div class="grid-content bg-purple" style="width:100%;height:220px;margin-top:20px;">
<img :src="change" alt="" v-show="items.length!=0" :onerror="defaultImg" style="width: 100%;height: 220px;">
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="grid-content bg-purple-light" style="width:100%;height:220px;margin-top:20px;">
<div style="width:220px;height:25px;margin-top:16ox;"></div>
<div style="width:220px;height:25px;margin-top:16ox;"></div>
<div style="width:220px;height:25px;margin-top:16ox;"></div>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24">
<div class="grid-content bg-purple" style="margin-top:20px;width:100%;height:280px;" >
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" style="margin:24px 0;" >
<div class="grid-content bg-purple" style="display:flex;justify-content: flex-end;align-items:center;">
<div style="width:90px;line-height:25px;border:1px solid red;margin-right:15px;font-size:14px;">增加</div>
<div style="width:90px;line-height:25px;border:1px solid red;margin-right:15px;font-size:14px;">增加</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'Kanban',
data() {
return {
status:'0',
defaultImg:'this.src="'+process.env.VUE_APP_IONICURL+'/api/photo/default.jpg"',
// defaultImg:'this.src="' + require('../assets/img/face1.png') + '"',
selectIndex:'0',
selectInfo:{
length:'',
width:'',
time:''
},
items:[
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 9,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
],
value:'',
tabs:[{name:''},{}],
num:0,
activeIndex: '1',
timer:'',
date:new Date()
}
},
components: {
},
computed:{
formData(){
let date = this.items[this.selectIndex]["testtime"].replace(',','');
let d =date.toString()
let t=d.toLocaleString('zh-CN')
let time= new Date().toLocaleString('zh-CN');
let a = new Date();
console.log(a)
console.log('time=='+time);
console.log('ttt=='+t);
return t;
},
change(){
if (this.items.length==0) return;
let src = process.env.VUE_APP_IONICURL+this.items[this.selectIndex]._links.frame;
this.imgUrl = src;
return src
}
},
created(){
this.$store.dispatch('showAside');
},
methods:{
upload(){
},
toNext(){
},
selectItem(v,i){
this.selectIndex = i;
},
getProduct(){
this.$axios.get(this.$api.getProducts).then(res =>{
if(res.status== 200){
this.items= res.data.items;
}
console.log('getProducts');
})
},
getChart(){
let myChart = echarts.init(this.$refs.chart);
var option = {
legend: {
x:'right',
textStyle:{color:'#FFFF',}
},
dataset: {
source: [
['product', '未开机', '正常', '异常'],
['5', 43.3, 85.8, 93.7],
['10', 43.3, 85.8, 93.7],
['15', 83.1, 73.4, 55.1],
['20', 86.4, 65.2, 82.5],
['25', 72.4, 53.9, 39.1],
['30', 72.4, 53.9, 39.1],
['35', 72.4, 53.9, 39.1],
['40', 72.4, 53.9, 39.1],
['45', 72.4, 53.9, 39.1],
['50', 72.4, 53.9, 39.1],
['55', 72.4, 53.9, 39.1],
['60', 72.4, 53.9, 39.1]
]
},
xAxis: {
type: 'category',
axisLine:{
lineStyle:{
color: '#555556',
}
}
},
yAxis: {
axisLine:{
lineStyle:{
color: '#555556',
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#555556'],
width: 1,
type: 'solid',
},
}
},
series: [
{
type: 'bar',
itemStyle: {
color: '#676867',
},
},
{
type: 'bar',
itemStyle: {
color: '#30ab6f',
},
},
{
type: 'bar',
itemStyle: {
color: '#cc3d1a',
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
// this.myChart.setOption(option);
myChart.setOption(option);
window.onresize = function () {
console.log('reset')
myChart.resize();
}
window.addEventListener("load", myChart.resize());
}
},
mounted() {
this.getProduct();
// this.getChart();
}
}
</script>
<style scoped lang="less">
@import url('../styles/IonicTest.less');
.productList:hover{
background-color: #008fe0 !important;
}
.curActive{
background-color: #008fe0 !important;
}
.radio_type {
width: 20px;
height: 20px;
appearance: none;
position: relative;
outline: none;
}
.radio_type:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid white;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid #1871b9;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:after {
content: "";
width: 9px;
height: 9px;
text-align: center;
background: #1871b9;
border-radius: 50%;
display: block;
position: absolute;
top: 4px;
left: 4px;
}
.radio_type:checked + label {
color: #edd19d;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
\ No newline at end of file
<template>
<div>
<a-button class="editable-add-btn" @click="handleAdd">
Add
</a-button>
<a-table bordered :data-source="dataSource" :columns="columns">
<template slot="name" slot-scope="text, record">
<editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
</template>
<template slot="operation" slot-scope="text, record">
<a-popconfirm
v-if="dataSource.length"
title="Sure to delete?"
@confirm="() => onDelete(record.key)"
>
<a href="javascript:;">Delete</a>
</a-popconfirm>
</template>
</a-table>
</div>
</template>
<script>
const EditableCell = {
template: `
<div class="editable-cell">
<div v-if="editable" class="editable-cell-input-wrapper">
<a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
type="check"
class="editable-cell-icon-check"
@click="check"
/>
</div>
<div v-else class="editable-cell-text-wrapper">
{{ value || ' ' }}
<a-icon type="edit" class="editable-cell-icon" @click="edit" />
</div>
</div>
`,
props: {
text: String,
},
data() {
return {
value: this.text,
editable: false,
};
},
methods: {
handleChange(e) {
const value = e.target.value;
this.value = value;
},
check() {
this.editable = false;
this.$emit('change', this.value);
},
edit() {
this.editable = true;
},
},
};
export default {
components: {
EditableCell,
},
data() {
return {
dataSource: [
{
key: '0',
name: 'Edward King 0',
age: '32',
address: 'London, Park Lane no. 0',
},
{
key: '1',
name: 'Edward King 1',
age: '32',
address: 'London, Park Lane no. 1',
},
],
count: 2,
columns: [
{
title: 'name',
dataIndex: 'name',
width: '30%',
scopedSlots: { customRender: 'name' },
},
{
title: 'age',
dataIndex: 'age',
},
{
title: 'address',
dataIndex: 'address',
},
{
title: 'operation',
dataIndex: 'operation',
scopedSlots: { customRender: 'operation' },
},
],
};
},
methods: {
onCellChange(key, dataIndex, value) {
const dataSource = [...this.dataSource];
const target = dataSource.find(item => item.key === key);
if (target) {
target[dataIndex] = value;
this.dataSource = dataSource;
}
},
onDelete(key) {
const dataSource = [...this.dataSource];
this.dataSource = dataSource.filter(item => item.key !== key);
},
handleAdd() {
const { count, dataSource } = this;
const newData = {
key: count,
name: `Edward King ${count}`,
age: 32,
address: `London, Park Lane no. ${count}`,
};
this.dataSource = [...dataSource, newData];
this.count = count + 1;
},
},
};
</script>
<style>
.editable-cell {
position: relative;
}
.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
padding-right: 24px;
}
.editable-cell-text-wrapper {
padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
position: absolute;
right: 0;
width: 20px;
cursor: pointer;
}
.editable-cell-icon {
line-height: 18px;
display: none;
}
.editable-cell-icon-check {
line-height: 28px;
}
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color: #108ee9;
}
.editable-add-btn {
margin-bottom: 8px;
}
</style>
<template>
<div class="IonicTest" style="overflow:auto;padding: 0 45px;">
<el-row :gutter="20" v-show="addFlag">
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;color:white;">
<!-- <el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text"><em>点击上传</em></div>
</el-upload> -->
<el-upload
style="width:100%;"
class="avatar-uploader"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;padding:0 10px;">
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">长度:</div>
<input v-model="length" type="text" style="width:200px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">宽度:</div>
<input v-model="width" type="text" style="width:200px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:80px;line-height:25px;background:#2b2c2c;">测试时间:</div>
<input type="text" style="width:170px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<!-- <div style="display:flex;align-items:center;margin-top:70px;">
<div style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">动态测试</div>
<div style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">静态测试</div>
</div> -->
</div>
</el-col>
</el-row>
<el-row :gutter="20" v-show="!addFlag">
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;">
<img :src="change" alt="" v-show="items.length!=0" :onerror="defaultImg" style="width: 100%;height: 220px;">
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;padding:0 10px;">
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">长度:</div>
<div style="width:200px;height:25px;background:#2b2c2c;"></div>
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">长度:</div>
<div style="width:200px;height:25px;background:#2b2c2c;"></div>
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:80px;line-height:25px;background:#2b2c2c;">测试时间:</div>
<div style="width:170px;height:25px;background:#2b2c2c;"></div>
</div>
<div style="display:flex;align-items:center;margin-top:70px;" >
<div @click="dynamicTest" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">动态测试</div>
<div @click="staticTest" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">静态测试</div>
</div>
</div>
</el-col>
</el-row>
<div style="background:#2B2C2C;margin-top:20px;">
<el-row :gutter="10">
<el-col :xs="24">
<div class="" style="width:100%;height:280px;" >
<div style="padding:10px;color:white;display:flex;" v-show="addFlag">
<div style="display:flex;flex:1;margin-right:10px;" >
<input v-model="value" type="text" placeholder="输入产品名称" style="font-sieze:14px;width:100%;height:30px;background:#2b2c2c;outline: none; border: 0;">
</div>
<div style="display:flex;justify-content: flex-end;align-items:center;">
<div @click="confirm" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">确定</div>
<div @click="cancel" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">取消</div>
</div>
</div>
<div style="width: 100%;background:#2c2c2c;text-align:left; ">
<div style="line-height:30px;padding:0 10px;color:white;" :class="{curActive:i==selectIndex}" v-for="(v,i) in items" :key="v.id" @click="selectItem(v.id,i)">
{{v.name}}
</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" style="margin:24px 0;" >
<div class="" style="display:flex;justify-content: flex-end;align-items:center;">
<div @click ="addProduct" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">增加</div>
<div @click="delProduct" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">删除</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'Kanban',
data() {
return {
imageUrl: '',
addFlag:false,
status:'0',
defaultImg:'this.src="'+process.env.VUE_APP_IONICURL+'/api/photo/default.jpg"',
// defaultImg:'this.src="' + require('../assets/img/face1.png') + '"',
selectIndex:'0',
selectId:'',
selectInfo:{
length:'',
width:'',
time:'',
id:''
},
items:[
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 1,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 2,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 3,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
],
value:'product',
tabs:[{name:''},{}],
num:0,
activeIndex: '1',
timer:'',
date:new Date(),
length:'',
width:'',
note:'',
}
},
components: {
},
computed:{
getArea(){
return this.width*this.length;
},
formData(){
let date = this.items[this.selectIndex]["testtime"].replace(',','');
let d =date.toString()
let t=d.toLocaleString('zh-CN')
let time= new Date().toLocaleString('zh-CN');
let a = new Date();
console.log(a)
console.log('time=='+time);
console.log('ttt=='+t);
return t;
},
change(){
if (this.items.length==0) return;
let src = process.env.VUE_APP_IONICURL+this.items[this.selectIndex]._links.frame;
this.imgUrl = src;
return src
},
},
created(){
this.$store.dispatch('showAside');
},
methods:{
getSelectInfo(){
this.items.forEach(element =>{
})
},
dynamicTest(){
},
staticTest(){
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
// const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!');
// }
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
confirm(){
let req ={
area:'1.1',
ipc:'1',
length:'1.1',
width:'1',
name:this.value,
note:'1',
file:this.imageUrl
}
this.$axios.post(this.$api.getProducts,req).then(res =>{
if(res.status== 200){
this.items= res.data.items;
}
console.log('getProducts');
})
// let t = (new Date()).getTime();
// this.items.unshift({
// "_links": {
// "frame": "/api/photo/20210428142902_32.jpg",
// "self": "/api/products/9"
// },
// "area": 1.0,
// "id": t,
// "img": "20210428142902_32.jpg",
// "ipc": 3.0,
// "length": 99.0,
// "name": this.value,
// "note": "666",
// "testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
// "width": 22.0
// });
this.addFlag=false;
},
cancel(){
this.addFlag=false;
},
addProduct(){
this.addFlag=true;
console.log(this.addFlag);
},
delProduct(){
let req ={
id:this.selectInfo.id
}
this.$axios.put(this.$api.delProduct,req).then(res =>{
if(res.status== 200){
this.items= res.data.items;
}
console.log('getProducts');
})
},
upload(){
},
toNext(){
},
selectItem(v,i){
this.selectIndex = i;
console.log('selectIndex=='+this.selectIndex);
},
getProduct(){
this.$axios.get(this.$api.getProducts).then(res =>{
if(res.status== 200){
this.selectIndex = 0;
this.items= res.data.items;
}
console.log('getProducts');
})
}
},
mounted() {
// document.addEventListener('click',() =>{
// this.addFlag = false;
// })
this.getProduct();
}
}
</script>
<style scoped lang="less">
@import url('../styles/IonicTest.less');
.productList:hover{
background-color: #008fe0 !important;
}
.curActive{
background-color: #008fe0 !important;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
/deep/ .el-upload-dragger{
width: 100%;
background: #2b2c2c;
border: 0;
}
.el-upload__tip{
// color: white;
}
.el-upload__text{
color: white;
}
.avatar-uploader{
display: flex;
flex-flow: column;
color:#FFF;
}
</style>
\ No newline at end of file
<template>
<div class="IonicTest" style="overflow:auto;padding: 0 45px;">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" >
<div class="grid-content bg-purple" style="width:100%;height:220px;margin-top:20px;">
<img :src="change" alt="" v-show="items.length!=0" :onerror="defaultImg" style="width: 100%;height: 220px;">
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="grid-content bg-purple-light" style="width:100%;height:220px;margin-top:20px;">
<div style="width:220px;height:25px;margin-top:16ox;"></div>
<div style="width:220px;height:25px;margin-top:16ox;"></div>
<div style="width:220px;height:25px;margin-top:16ox;"></div>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24">
<div class="grid-content bg-purple" style="margin-top:20px;width:100%;height:280px;" >
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" style="margin:24px 0;" >
<div class="grid-content bg-purple" style="display:flex;justify-content: flex-end;align-items:center;">
<div style="width:90px;line-height:25px;border:1px solid red;margin-right:15px;font-size:14px;">增加</div>
<div style="width:90px;line-height:25px;border:1px solid red;margin-right:15px;font-size:14px;">增加</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'Kanban',
data() {
return {
status:'0',
defaultImg:'this.src="'+process.env.VUE_APP_IONICURL+'/api/photo/default.jpg"',
// defaultImg:'this.src="' + require('../assets/img/face1.png') + '"',
selectIndex:'0',
selectInfo:{
length:'',
width:'',
time:''
},
items:[
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 9,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
],
value:'',
tabs:[{name:''},{}],
num:0,
activeIndex: '1',
timer:'',
date:new Date()
}
},
components: {
},
computed:{
formData(){
let date = this.items[this.selectIndex]["testtime"].replace(',','');
let d =date.toString()
let t=d.toLocaleString('zh-CN')
let time= new Date().toLocaleString('zh-CN');
let a = new Date();
console.log(a)
console.log('time=='+time);
console.log('ttt=='+t);
return t;
},
change(){
if (this.items.length==0) return;
let src = process.env.VUE_APP_IONICURL+this.items[this.selectIndex]._links.frame;
this.imgUrl = src;
return src
}
},
created(){
this.$store.dispatch('showAside');
},
methods:{
upload(){
},
toNext(){
},
selectItem(v,i){
this.selectIndex = i;
},
getProduct(){
this.$axios.get(this.$api.getProducts).then(res =>{
if(res.status== 200){
this.items= res.data.items;
}
console.log('getProducts');
})
},
getChart(){
let myChart = echarts.init(this.$refs.chart);
var option = {
legend: {
x:'right',
textStyle:{color:'#FFFF',}
},
dataset: {
source: [
['product', '未开机', '正常', '异常'],
['5', 43.3, 85.8, 93.7],
['10', 43.3, 85.8, 93.7],
['15', 83.1, 73.4, 55.1],
['20', 86.4, 65.2, 82.5],
['25', 72.4, 53.9, 39.1],
['30', 72.4, 53.9, 39.1],
['35', 72.4, 53.9, 39.1],
['40', 72.4, 53.9, 39.1],
['45', 72.4, 53.9, 39.1],
['50', 72.4, 53.9, 39.1],
['55', 72.4, 53.9, 39.1],
['60', 72.4, 53.9, 39.1]
]
},
xAxis: {
type: 'category',
axisLine:{
lineStyle:{
color: '#555556',
}
}
},
yAxis: {
axisLine:{
lineStyle:{
color: '#555556',
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#555556'],
width: 1,
type: 'solid',
},
}
},
series: [
{
type: 'bar',
itemStyle: {
color: '#676867',
},
},
{
type: 'bar',
itemStyle: {
color: '#30ab6f',
},
},
{
type: 'bar',
itemStyle: {
color: '#cc3d1a',
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
// this.myChart.setOption(option);
myChart.setOption(option);
window.onresize = function () {
console.log('reset')
myChart.resize();
}
window.addEventListener("load", myChart.resize());
}
},
mounted() {
this.getProduct();
// this.getChart();
}
}
</script>
<style scoped lang="less">
@import url('../styles/IonicTest.less');
.productList:hover{
background-color: #008fe0 !important;
}
.curActive{
background-color: #008fe0 !important;
}
.radio_type {
width: 20px;
height: 20px;
appearance: none;
position: relative;
outline: none;
}
.radio_type:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid white;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid #1871b9;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:after {
content: "";
width: 9px;
height: 9px;
text-align: center;
background: #1871b9;
border-radius: 50%;
display: block;
position: absolute;
top: 4px;
left: 4px;
}
.radio_type:checked + label {
color: #edd19d;
}
</style>
\ No newline at end of file
<template>
<div class="IonicTest" style="overflow:auto;padding: 0 45px;">
<el-row :gutter="20" v-show="'add'==statusFlag">
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;color:white;">
<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload"/>
<!-- <el-upload
style="width:100%;"
class="avatar-uploader"
drag
action="http://192.168.1.108:5000/api/upload"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload> -->
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;padding:0 10px;">
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">长度:</div>
<input v-model="length" type="text" style="width:200px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">宽度:</div>
<input v-model="width" type="text" style="width:200px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:80px;line-height:25px;background:#2b2c2c;">测试时间:</div>
<input type="text" style="width:170px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<!-- <div style="display:flex;align-items:center;margin-top:70px;">
<div style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">动态测试</div>
<div style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">静态测试</div>
</div> -->
</div>
</el-col>
</el-row>
<el-row :gutter="20" v-show="'edit'==statusFlag">
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;color:white;">
<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload"/>
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;padding:0 10px;">
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">长度:</div>
<input v-model="selectInfo.length" type="text" style="width:200px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">宽度:</div>
<input v-model="selectInfo.width" type="text" style="width:200px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:80px;line-height:25px;background:#2b2c2c;">测试时间:</div>
<input v-model="selectInfo.testtime" type="text" style="width:170px;height:25px;background:#2b2c2c;outline: none;border: 0;">
</div>
<div style="display:flex;align-items:center;margin-top:70px;" >
<div @click="editConfirm" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">确定</div>
<div @click="editCancel" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">取消</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20" v-show="'show'==statusFlag">
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;background:#2b2c2c;">
<img :src="change" alt="" v-show="items.length!=0" :onerror="defaultImg" style="width: 100%;height: 220px;">
</div>
</el-col>
<el-col :xs="24" :sm="12" >
<div class="" style="width:100%;height:220px;margin-top:20px;padding:0 10px;">
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">长度:</div>
<div style="width:200px;height:25px;background:#2b2c2c;">{{selectInfo.length}}</div>
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:50px;line-height:25px;background:#2b2c2c;">宽度:</div>
<div style="width:200px;height:25px;background:#2b2c2c;">{{selectInfo.width}}</div>
</div>
<div style="height:25px;margin-top:22px;display:flex;font-size:14px;color:white;">
<div style="width:80px;line-height:25px;background:#2b2c2c;">测试时间:</div>
<div style="width:170px;height:25px;background:#2b2c2c;">{{selectInfo.testtime}}</div>
</div>
<div style="display:flex;align-items:center;margin-top:70px;" >
<div @click="toRinse('dynamic')" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">动态测试</div>
<div @click="toRinse('static')" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">静态测试</div>
</div>
</div>
</el-col>
</el-row>
<div style="background:#2B2C2C;margin-top:20px;">
<el-row :gutter="10">
<el-col :xs="24">
<div class="" style="width:100%;height:280px;" >
<div style="padding:10px;color:white;display:flex;" v-show="'add'==statusFlag">
<div style="display:flex;flex:1;margin-right:10px;" >
<input v-model="value" type="text" placeholder="输入产品名称" style="font-sieze:14px;width:100%;height:30px;background:#2b2c2c;outline: none; border: 0;">
</div>
<div style="display:flex;justify-content: flex-end;align-items:center;">
<div @click="confirm" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">确定</div>
<div @click="cancel" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">取消</div>
</div>
</div>
<div style="width: 100%;background:#2c2c2c;text-align:left; ">
<div style="line-height:30px;padding:0 10px;color:white;" :class="{curActive:v.id==selectIndex}" v-for="(v,i) in items" :key="v.id" @click="selectItem(v,i)">
{{v.name}}
</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="10" v-show="'show'==statusFlag">
<el-col :xs="24" style="margin:24px 0;" >
<div class="" style="display:flex;justify-content: flex-end;align-items:center;">
<div @click ="addProduct" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">增加</div>
<div @click ="editProduct" style="width:90px;line-height:25px;border:1px solid #797979;margin-right:15px;font-size:14px;background:#555555;color:white;">修改</div>
<div @click="delProduct" style="width:90px;line-height:25px;border:1px solid #797979;;margin-right:15px;font-size:14px;background:#555555;color:white;">删除</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import { Message } from 'element-ui';
export default {
name: 'Kanban',
data() {
return {
imageUrl: '',
statusFlag:'show',
status:'0',
defaultImg:'this.src="'+process.env.VUE_APP_IONICURL+'/api/photo/default.jpg"',
// defaultImg:'this.src="' + require('../assets/img/face1.png') + '"',
selectIndex:'0',
selectId:'',
selectInfo:{
length:'',
width:'',
testtime:'',
id:'',
area:''
},
items:[
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 1,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 2,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
{
"_links": {
"frame": "/api/photo/20210428142902_32.jpg",
"self": "/api/products/9"
},
"area": 1.0,
"id": 3,
"img": "20210428142902_32.jpg",
"ipc": 3.0,
"length": 99.0,
"name": "12399777777888",
"note": "666",
"testtime": "Wed, 28 Apr 2021 06:29:02 GMT",
"width": 22.0
},
],
value:'product',
tabs:[{name:''},{}],
num:0,
activeIndex: '1',
timer:'',
date:new Date(),
length:'',
width:'',
note:'',
files:''
}
},
components: {
},
computed:{
getArea(){
return this.width*this.length;
},
formData(){
let date = this.items[this.selectIndex]["testtime"].replace(',','');
let d =date.toString()
let t=d.toLocaleString('zh-CN')
let time= new Date().toLocaleString('zh-CN');
let a = new Date();
console.log(a)
console.log('time=='+time);
console.log('ttt=='+t);
return t;
},
change(){
if (this.items.length==0) return;
this.items.map(element =>{
if(element.id == this.selectIndex){
this.imgUrl= process.env.VUE_APP_IONICURL+element._links.frame;
return this.imgUrl
}
})
console.log('this.imgUrl=='+this.imgUrl);
return this.imgUrl
},
},
created(){
this.$store.dispatch('showAside');
},
methods:{
getSelectInfo(){
this.items.forEach(element =>{
})
},
toRinse(type){
localStorage.setItem('testType',type);
this.$router.push('/IonicRinse');
},
// handleAvatarSuccess(res, file) {
// this.files = file[0].raw;
// },
beforeAvatarUpload(file) {
// const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!');
// }
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
this.files = file;
// return isJPG && isLt2M;
return isLt2M;
},
confirm(){
let formData = new FormData();
formData.append('area', 1.1);
formData.append('ipc', '1');
formData.append('width', 1);
formData.append('length', 1.1);
formData.append('name', this.value);
formData.append('note', 1);
formData.append('file', this.files);
let config = {
headers: {
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
}
}
this.$axios.post(this.$api.addProduct,formData,config).then(res =>{
console.log("addProduct=="+res)
if(res.status== 200){
this.items.unshift(res.data);
this.selectIndex = res.data.id;
this.selectInfo = res.data;
this.files="";
}else{
let msg = res.message.name;
Message({
message: msg || '网络错误',
type: 'warning',
duration:2000
});
}
console.log('getProducts');
})
this.statusFlag='show';
},
cancel(){
this.statusFlag='show';
},
editConfirm(){
let formData = new FormData();
if(this.selectInfo.width&&this.selectInfo.length){
this.selectInfo.area = this.selectInfo.width*this.selectInfo.length;
}else{
this.selectInfo.area="";
}
formData.append('area', this.selectInfo.area);
formData.append('ipc', this.selectInfo.ipc);
formData.append('width', this.selectInfo.width);
formData.append('length', this.selectInfo.length);
formData.append('note', this.selectInfo.note);
if(!this.files){
formData.append('file', this.files);
}
let config = {
headers: {
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
}
}
this.$axios.put(this.$api.editProduct+'/'+this.selectIndex,formData,config).then(res =>{
console.log("addProduct=="+res)
if(res.status== 200){
this.items.forEach(element =>{
if(element.id == this.selectIndex){
this.selectInfo = element;
}
})
}else{
let msg = res.message.name;
Message({
message: msg || '网络错误',
type: 'warning',
duration:2000
});
}
console.log('getProducts');
})
this.statusFlag='show';
},
editCancel(){
this.statusFlag='show';
},
addProduct(){
this.statusFlag='add';
console.log(this.statusFlag);
},
editProduct(){
this.statusFlag='edit';
},
delProduct(){
this.$axios.delete(this.$api.delProduct+'/'+this.selectIndex).then(res =>{
console.log("delProduct=="+res)
if(res.status== 200){
this.getProduct();
}
console.log('getProducts');
})
},
upload(e){
let file = e.target.files[0]
this.files = file;
},
toNext(){
},
selectItem(v,i){
this.selectIndex = v.id;
this.selectInfo = v;
console.log('selectIndex=='+this.selectIndex);
},
getProduct(){
this.$axios.get(this.$api.getProducts).then(res =>{
if(res.status== 200){
this.items= res.data.items;
if(this.items.length!=0){
this.selectIndex = this.items[0].id;
this. selectInfo = this.items[0];
}
}
console.log('getProducts');
}).catch(err =>{
console.log('接口或处理逻辑出错');
})
}
},
mounted() {
this.getProduct();
}
}
</script>
<style scoped lang="less">
@import url('../styles/IonicTest.less');
.productList:hover{
background-color: #008fe0 !important;
}
.curActive{
background-color: #008fe0 !important;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
/deep/ .el-upload-dragger{
width: 100%;
background: #2b2c2c;
border: 0;
}
.el-upload__tip{
// color: white;
}
.el-upload__text{
color: white;
}
.avatar-uploader{
display: flex;
flex-flow: column;
color:#FFF;
}
</style>
\ No newline at end of file
const Timestamp = new Date().getTime();
// Vue.config.js 配置选项
console.log()
module.exports = {
runtimeCompiler: true,
// publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',
//基本路径
publicPath: './',//默认的'/'是绝对路径,如果不确定在根路径,改成相对路径'./'
// 输出文件目录
outputDir: process.env.NODE_ENV === 'production'? 'dist':'test',
assetsDir: 'static',
indexPath: 'index.html',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// css相关配置
css: {
loaderOptions: {
postcss: {
plugins: [
// 把px单位换算成rem单位
require("postcss-pxtorem")({
rootValue: 16, // 换算的基数 (为了便于开发,根据设计图来定这个值,如果设计图给的宽度是750,通常就会把remUnit设置为75,这样就可以按照UI图1:1进行开发)
selectorBlackList: [".fv-",".el-"],// 要忽略的选择器并保留为px。
propList: ["*"], //可以从px更改为rem的属性。
minPixelValue: 2 // 设置要替换的最小像素值。
})
]
}
}
},
devServer: { // webpack-dev-server 相关配置
overlay: {
warning: false,
err: false
},
hot: true,
hotOnly: true, // 是否热更新
host: '0.0.0.0',
port: '8080',
open: true,
// proxy: {
// [process.env.VUE_APP_BASE_API]: {
// target: process.env.VUE_APP_REQUEST_URL,
// changeOrigin: true,
// pathRewrite: {
// ['^'+process.env.VUE_APP_BASE_API]: ''
// }
// }
// },
disableHostCheck: true,
},
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
},
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
\ No newline at end of file
支持 Markdown 格式
你添加了 0 到此讨论。请谨慎行事。
Finish editing this message first!