| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8" /> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|---|
| | | <meta name="viewport" content="width=device-width,initial-scale=1.0" /> |
|---|
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> |
|---|
| | | <link rel="stylesheet" href="/fonts/iconfont.css" /> |
|---|
| | | <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> |
|---|
| | | <title>sass智慧监控管理中心</title> |
|---|
| | | <style></style> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|---|
| | | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|---|
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|---|
| | | <link rel="stylesheet" href="/fonts/iconfont.css"> |
|---|
| | | <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> |
|---|
| | | <title>sass</title> |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | | <strong>We're sorry but system-2.0 doesn't work properly without JavaScript enabled. Please enable it to |
|---|
| | | continue.</strong> |
|---|
| | | </noscript> |
|---|
| | | <div id="app"></div> |
|---|
| | | <!-- built files will be auto injected --> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | | <strong |
|---|
| | | >We're sorry but system-2.0 doesn't work properly without JavaScript enabled. Please enable it to |
|---|
| | | continue.</strong |
|---|
| | | > |
|---|
| | | </noscript> |
|---|
| | | <div id="app"></div> |
|---|
| | | <!-- built files will be auto injected --> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="Footer" :class="{ isBlack: isBlack }"> |
|---|
| | | <div class="Footer"> |
|---|
| | | <!-- <div class="left"> |
|---|
| | | © 2009-2019 smartai.com 版权所有 ICP证：45456566 公网安备 436435455号 |
|---|
| | | </div> |
|---|
| | |
|---|
| | | props: { |
|---|
| | | isBlack: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false, |
|---|
| | | }, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | jump() { |
|---|
| | | window.open("http://www.smartai.com/about"); |
|---|
| | | window.open("http://www.smartai.com/about") |
|---|
| | | }, |
|---|
| | | jump2() { |
|---|
| | | window.open("http://www.smartai.com/consult"); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | window.open("http://www.smartai.com/consult") |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | box-sizing: border-box; |
|---|
| | | padding: 26px 20px; |
|---|
| | | height: 100px; |
|---|
| | | // padding: 26px 20px; |
|---|
| | | height: 10px; |
|---|
| | | min-width: 1280px; |
|---|
| | | background: #f3f5f8; |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <div class="label" @click="$router.push('/')">首页</div> |
|---|
| | | <!-- <div class="label">云服务</div> --> |
|---|
| | | <div class="label" @click="$router.push('/manageCenter')">管理中心</div> |
|---|
| | | <div class="label" @click="$router.push('/dataView')">数据分析</div> |
|---|
| | | <!-- <div class="label" @click="dataView">数据分析</div> --> |
|---|
| | | <div class="label" @click="$router.push('/product')">应用商城</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | |
|---|
| | | > |
|---|
| | | <div class="iconList" slot="suffix"> |
|---|
| | | <i class="search iconfont" v-if="!isShow"></i> |
|---|
| | | <i class="search iconfont" @click="search" v-if="isShow" |
|---|
| | | ></i |
|---|
| | | > |
|---|
| | | <i class="del iconfont" v-if="isShow" @click="showInputBox(false)" |
|---|
| | | ></i |
|---|
| | | > |
|---|
| | | <i class="search iconfont" @click="search" v-if="isShow"></i> |
|---|
| | | <i class="del iconfont" v-if="isShow" @click="showInputBox(false)"></i> |
|---|
| | | </div> |
|---|
| | | </el-input> |
|---|
| | | |
|---|
| | | <!-- 未登录情况 --> |
|---|
| | | <div |
|---|
| | | class="headerLogin" |
|---|
| | | v-if="!userInfo" |
|---|
| | | @click="$router.push('/login')" |
|---|
| | | > |
|---|
| | | <div class="headerLogin" v-if="!userInfo" @click="$router.push('/login')"> |
|---|
| | | 登录 |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | class="register" |
|---|
| | | v-if="!userInfo" |
|---|
| | | @click="$router.push('/register')" |
|---|
| | | > |
|---|
| | | <div class="register" v-if="!userInfo" @click="$router.push('/register')"> |
|---|
| | | 免费注册 |
|---|
| | | </div> |
|---|
| | | |
|---|
| | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 用户下拉框 --> |
|---|
| | | <div |
|---|
| | | class="userBox" |
|---|
| | | v-if="userInfo && isShowUserBox" |
|---|
| | | @mouseenter="showUserBox" |
|---|
| | | @mouseleave="hiddenUserBox" |
|---|
| | | > |
|---|
| | | <div class="userBox" v-if="userInfo && isShowUserBox" @mouseenter="showUserBox" @mouseleave="hiddenUserBox"> |
|---|
| | | <div class="userName">{{ userInfo.username }}</div> |
|---|
| | | <ul> |
|---|
| | | <!-- <li class="money"> |
|---|
| | |
|---|
| | | <router-link to="/personalCenter">个人中心</router-link> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="content"> |
|---|
| | | <span class="iconfont"></span> 已实名认证 |
|---|
| | | </div> |
|---|
| | | <div class="content"><span class="iconfont"></span> 已实名认证</div> |
|---|
| | | </li> |
|---|
| | | |
|---|
| | | <li> |
|---|
| | |
|---|
| | | <div class="hotKey"> |
|---|
| | | <div class="title">热门搜索</div> |
|---|
| | | <ul class="keyCard"> |
|---|
| | | <li |
|---|
| | | class="keyItem" |
|---|
| | | @click="jumpToSearch(item)" |
|---|
| | | v-for="(item, index) in hotKeyArr" |
|---|
| | | :key="index" |
|---|
| | | > |
|---|
| | | <li class="keyItem" @click="jumpToSearch(item)" v-for="(item, index) in hotKeyArr" :key="index"> |
|---|
| | | {{ item }} |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { logout } from "@/api/login"; |
|---|
| | | import { logout } from "@/api/login" |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | opacity: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true, |
|---|
| | | }, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | name: "Header", |
|---|
| | | created() { |
|---|
| | | //尝试从session中拿用户信息 |
|---|
| | | this.userInfo = JSON.parse(sessionStorage.getItem("userInfo")); |
|---|
| | | this.userInfo = JSON.parse(sessionStorage.getItem("userInfo")) |
|---|
| | | /* document.addEventListener("click", () => { |
|---|
| | | this.showUserBox = false; |
|---|
| | | }); */ |
|---|
| | |
|---|
| | | isShowBox: false, //输入下拉框 |
|---|
| | | userInfo: null, //用户信息 |
|---|
| | | isShowUserBox: false, //用户信息弹层 |
|---|
| | | UserTimer: null, // 控制弹层的定时器 |
|---|
| | | }; |
|---|
| | | UserTimer: null // 控制弹层的定时器 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | dataView() { |
|---|
| | | const { href } = this.$router.resolve({ |
|---|
| | | path: "/dataView" |
|---|
| | | }) |
|---|
| | | window.open(href, "_blank") |
|---|
| | | }, |
|---|
| | | // 控制输入框box |
|---|
| | | showInputBox(toggle) { |
|---|
| | | this.isShow = toggle; |
|---|
| | | this.isShowBox = toggle; |
|---|
| | | this.keyWord = ""; |
|---|
| | | this.$emit("showInputBox", toggle); |
|---|
| | | this.isShow = toggle |
|---|
| | | this.isShowBox = toggle |
|---|
| | | this.keyWord = "" |
|---|
| | | this.$emit("showInputBox", toggle) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //控制用户信息box |
|---|
| | | showUserBox() { |
|---|
| | | if (this.UserTimer) { |
|---|
| | | clearTimeout(this.UserTimer); |
|---|
| | | this.UserTimer = null; |
|---|
| | | clearTimeout(this.UserTimer) |
|---|
| | | this.UserTimer = null |
|---|
| | | } |
|---|
| | | this.isShowUserBox = true; |
|---|
| | | this.isShowUserBox = true |
|---|
| | | }, |
|---|
| | | hiddenUserBox() { |
|---|
| | | const _this = this; |
|---|
| | | const _this = this |
|---|
| | | this.UserTimer = setTimeout(() => { |
|---|
| | | _this.isShowUserBox = false; |
|---|
| | | }, 200); |
|---|
| | | _this.isShowUserBox = false |
|---|
| | | }, 200) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | logOut() { |
|---|
| | | logout().then(() => { |
|---|
| | | sessionStorage.removeItem("loginedInfo"); |
|---|
| | | sessionStorage.removeItem("expires_in"); |
|---|
| | | sessionStorage.removeItem("userInfo"); |
|---|
| | | sessionStorage.removeItem("loginedInfo") |
|---|
| | | sessionStorage.removeItem("expires_in") |
|---|
| | | sessionStorage.removeItem("userInfo") |
|---|
| | | this.$router.push({ |
|---|
| | | path: "/login", |
|---|
| | | }); |
|---|
| | | path: "/login" |
|---|
| | | }) |
|---|
| | | this.$notify({ |
|---|
| | | title: "提示", |
|---|
| | | type: "success", |
|---|
| | | message: "退出成功！", |
|---|
| | | duration: 2500, |
|---|
| | | offset: 57, |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | offset: 57 |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | jump(id, type) { |
|---|
| | | if (type) { |
|---|
| | | sessionStorage.setItem("type", type); |
|---|
| | | sessionStorage.setItem("type", type) |
|---|
| | | } |
|---|
| | | this.$router.push({ |
|---|
| | | path: "/personalCenter", |
|---|
| | | query: { |
|---|
| | | id: id, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | id: id |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | search() { |
|---|
| | | this.$router.push({ |
|---|
| | | path: "/product", |
|---|
| | | query: { |
|---|
| | | keyWord: this.keyWord, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | keyWord: this.keyWord |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | jumpToSearch(keyWord) { |
|---|
| | | this.$router.push({ |
|---|
| | | path: "/product", |
|---|
| | | query: { |
|---|
| | | keyWord, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | keyWord |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </style> |
|---|
| | |
|---|
| | | path: "/video", |
|---|
| | | name: "video", |
|---|
| | | component: () => import(/* webpackChunkName: "about" */ "../views/video") |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | // 数据可视化 |
|---|
| | | path: "/dataView", |
|---|
| | | name: "dataView", |
|---|
| | | component: () => import(/* webpackChunkName: "about" */ "../views/dataView") |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="data-view"> |
|---|
| | | <div id="load" v-show="loading"> |
|---|
| | | <div class="load_img"> |
|---|
| | | <!-- 加载动画 --> |
|---|
| | | <img class="jzxz1" src="/images/data-v/jzxz1.png" /> |
|---|
| | | <img class="jzxz2" src="/images/data-v/jzxz2.png" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="head_top"><span>智慧工厂可视化驾驶舱</span></div> |
|---|
| | | <div class="visual"> |
|---|
| | | <div class="left-top10"> |
|---|
| | | <div class="title"> |
|---|
| | | <span>部门告警数量 TOP10</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center"> |
|---|
| | | <div class="center-left"> |
|---|
| | | <div class="center-count"> |
|---|
| | | <b>219</b> |
|---|
| | | <p style="margin-top:2px">当前监测点总量</p> |
|---|
| | | <p style="margin-top:35px">场景总量: 800</p> |
|---|
| | | <p style="margin-top:5px">算法总量: 11</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="right-week"> |
|---|
| | | <div class="title"> |
|---|
| | | <span>近7日整改数量统计</span> |
|---|
| | | </div> |
|---|
| | | <div id="barChart" style="width: 100%;height:100%"></div> |
|---|
| | | </div> |
|---|
| | | <div class="right-device"> |
|---|
| | | <div class="title"> |
|---|
| | | <span>数据监控</span> |
|---|
| | | </div> |
|---|
| | | <div class="device-count"> |
|---|
| | | <img src="/images/data-v/d-total.png" alt="" /> |
|---|
| | | <div |
|---|
| | | style="position: absolute; |
|---|
| | | top: 43%; |
|---|
| | | left: 36%; |
|---|
| | | font-size: 26px; |
|---|
| | | color: #d9d6d6;" |
|---|
| | | > |
|---|
| | | 设备总量 |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | style="position: absolute; |
|---|
| | | top: 59%; |
|---|
| | | left: 45%; |
|---|
| | | font-size: 26px; |
|---|
| | | color: #ffffff;" |
|---|
| | | > |
|---|
| | | 6 |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div |
|---|
| | | class="online" |
|---|
| | | style="position: absolute; |
|---|
| | | right: 23%; |
|---|
| | | top: 17%;" |
|---|
| | | > |
|---|
| | | <img src="/images/data-v/online.png" alt="" /> |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | class="offline" |
|---|
| | | style="position: absolute; |
|---|
| | | right: 23%; |
|---|
| | | top: 58%;" |
|---|
| | | > |
|---|
| | | <img src="/images/data-v/offline.png" alt="" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="right-type"> |
|---|
| | | <div class="title"> |
|---|
| | | <span>告警类型占比</span> |
|---|
| | | </div> |
|---|
| | | <div id="pieChart" style="width: 100%;height:100%"></div> |
|---|
| | | </div> |
|---|
| | | <div class="bottom-line"> |
|---|
| | | <div class="title"> |
|---|
| | | <span>告警数量趋势</span> |
|---|
| | | </div> |
|---|
| | | <div id="lineChart" style="width: 100%;height:100%"></div> |
|---|
| | | </div> |
|---|
| | | <div class="clear"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as echarts from "echarts" |
|---|
| | | export default { |
|---|
| | | components: {}, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | loading: false, |
|---|
| | | lineChart: {}, |
|---|
| | | pieChart: {}, |
|---|
| | | barChart: {}, |
|---|
| | | lineChartOption: { |
|---|
| | | grid: { |
|---|
| | | left: "3%", |
|---|
| | | right: "3%", |
|---|
| | | bottom: "20%", |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | x: "right", |
|---|
| | | y: "top", |
|---|
| | | itemHeight: 2, |
|---|
| | | itemWidth: 2, |
|---|
| | | icon: "circle" |
|---|
| | | }, |
|---|
| | | tooltip: {}, |
|---|
| | | xAxis: { |
|---|
| | | type: "category", |
|---|
| | | boundaryGap: false, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#666" |
|---|
| | | }, |
|---|
| | | data: ["1", "2", "3", "4", "5", "6", "7"] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | //y轴 |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#666" |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | //网格线 |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgb(230, 230, 230)", |
|---|
| | | type: "dashed" //设置网格线类型 dotted：虚线 solid:实线 |
|---|
| | | }, |
|---|
| | | show: false //隐藏或显示 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // Declare several bar series, each will be mapped |
|---|
| | | // to a column of dataset.source by default. |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: "line", |
|---|
| | | data: [55, 33, 22, 33, 55, 43, 11], |
|---|
| | | areaStyle: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "#0066FF" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(0, 102, 255, 0.25)" |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | color: { |
|---|
| | | type: "linear", |
|---|
| | | x: 0.02, |
|---|
| | | y: 0.02, |
|---|
| | | x2: 1, |
|---|
| | | y2: 1, |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "#0066FF" // 0% 处的颜色 |
|---|
| | | // radius: ["50%", "80%"] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(0, 102, 255, 0.25)" // 100% 处的颜色 |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | global: false // 缺省为 false |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多 |
|---|
| | | normal: { |
|---|
| | | //柱形图圆角，初始化效果 |
|---|
| | | barBorderRadius: [15, 15, 0, 0] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | barChartOption: { |
|---|
| | | grid: { |
|---|
| | | left: "10%", |
|---|
| | | right: "20%", |
|---|
| | | bottom: "20%", |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | x: "right", |
|---|
| | | y: "top", |
|---|
| | | itemHeight: 2, |
|---|
| | | itemWidth: 2, |
|---|
| | | icon: "circle" |
|---|
| | | }, |
|---|
| | | tooltip: {}, |
|---|
| | | xAxis: { |
|---|
| | | type: "category", |
|---|
| | | boundaryGap: false, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#666" |
|---|
| | | }, |
|---|
| | | data: ["烟雾", "明火", "离岗", "聚集"] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | //y轴 |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: "#666" |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | //网格线 |
|---|
| | | lineStyle: { |
|---|
| | | color: "rgb(230, 230, 230)", |
|---|
| | | type: "dashed" //设置网格线类型 dotted：虚线 solid:实线 |
|---|
| | | }, |
|---|
| | | show: false //隐藏或显示 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // Declare several bar series, each will be mapped |
|---|
| | | // to a column of dataset.source by default. |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: "bar", |
|---|
| | | data: [55, 33, 22, 33], |
|---|
| | | areaStyle: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "#0066FF" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(0, 102, 255, 0.25)" |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | color: { |
|---|
| | | type: "linear", |
|---|
| | | x: 0.02, |
|---|
| | | y: 0.02, |
|---|
| | | x2: 1, |
|---|
| | | y2: 1, |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "#0066FF" // 0% 处的颜色 |
|---|
| | | // radius: ["50%", "80%"] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(0, 102, 255, 0.25)" // 100% 处的颜色 |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | global: false // 缺省为 false |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多 |
|---|
| | | normal: { |
|---|
| | | //柱形图圆角，初始化效果 |
|---|
| | | barBorderRadius: [15, 15, 0, 0] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | pieChartOption: { |
|---|
| | | legend: { |
|---|
| | | top: "bottom" |
|---|
| | | }, |
|---|
| | | color: [ |
|---|
| | | "rgb(54, 60, 231)", |
|---|
| | | "rgb(54, 178, 74)", |
|---|
| | | "rgb(255, 178, 36)", |
|---|
| | | "rgb(240, 190, 231)", |
|---|
| | | "rgb(255, 124, 31)", |
|---|
| | | "rgb(165, 96, 255)" |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "Nightingale Chart", |
|---|
| | | type: "pie", |
|---|
| | | radius: [20, 160], |
|---|
| | | center: ["50%", "50%"], |
|---|
| | | roseType: "area", |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 8 |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: [23, 55, 11, 33, 22, 66] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.loading = false |
|---|
| | | }, 3000) |
|---|
| | | |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.initLineChart() |
|---|
| | | this.initPieChart() |
|---|
| | | this.initBarChart() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initLineChart() { |
|---|
| | | console.log("lineChart") |
|---|
| | | let chartDom = document.getElementById("lineChart") |
|---|
| | | this.lineChart = echarts.init(chartDom) |
|---|
| | | this.lineChart.setOption(this.lineChartOption) |
|---|
| | | this.lineChart.resize() |
|---|
| | | console.log(this.lineChart) |
|---|
| | | }, |
|---|
| | | initPieChart() { |
|---|
| | | console.log("pieChart") |
|---|
| | | let chartDom = document.getElementById("pieChart") |
|---|
| | | this.pieChart = echarts.init(chartDom) |
|---|
| | | this.pieChart.setOption(this.pieChartOption) |
|---|
| | | this.pieChart.resize() |
|---|
| | | console.log(this.pieChart) |
|---|
| | | }, |
|---|
| | | initBarChart() { |
|---|
| | | console.log("barChart") |
|---|
| | | let chartDom = document.getElementById("barChart") |
|---|
| | | this.barChart = echarts.init(chartDom) |
|---|
| | | this.barChart.setOption(this.barChartOption) |
|---|
| | | this.barChart.resize() |
|---|
| | | console.log(this.barChart) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | @font-face { |
|---|
| | | font-family: yjsz; |
|---|
| | | src: url("./fonts/yjsz.TTF"); /* IE9+,可以是具体的实际链接 */ |
|---|
| | | } |
|---|
| | | ul { |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | a { |
|---|
| | | text-decoration: none !important; |
|---|
| | | } |
|---|
| | | .clear { |
|---|
| | | clear: both; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | margin-top: 27px; |
|---|
| | | margin-left: 25px; |
|---|
| | | font-size: 15px; |
|---|
| | | font-weight: 700; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .data-view { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | /* padding: 15px; */ |
|---|
| | | background: #0c194d; |
|---|
| | | /* background: url(/images/data-v/bg.jpg); */ |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-size: cover; |
|---|
| | | overflow: hidden; |
|---|
| | | position: absolute; |
|---|
| | | z-index: -2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 加载旋转动画 */ |
|---|
| | | #load { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | position: absolute; |
|---|
| | | background: url(/images/data-v/data08.png) no-repeat #061537; |
|---|
| | | background-size: cover; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | z-index: 999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #load .load_img { |
|---|
| | | position: absolute; |
|---|
| | | left: calc(50% - 182px); |
|---|
| | | top: calc(50% - 182px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .load_img img { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .load_img .jzxz1 { |
|---|
| | | animation: xz1 8s infinite linear; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes xz1 { |
|---|
| | | from { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | 50% { |
|---|
| | | transform: rotate(180deg); |
|---|
| | | } |
|---|
| | | to { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .load_img .jzxz2 { |
|---|
| | | animation: xz2 7s infinite linear; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes xz2 { |
|---|
| | | from { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | 50% { |
|---|
| | | transform: rotate(-180deg); |
|---|
| | | } |
|---|
| | | to { |
|---|
| | | transform: rotate(-360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .head_top { |
|---|
| | | position: relative; |
|---|
| | | background: url(/images/data-v/head.png) no-repeat center center; |
|---|
| | | height: 120px; |
|---|
| | | line-height: 120px; |
|---|
| | | font-style: italic; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .head_top span { |
|---|
| | | text-align: center; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 55px; |
|---|
| | | font-weight: 700; |
|---|
| | | background: linear-gradient(0deg, #fff, #fff); |
|---|
| | | background-size: cover; |
|---|
| | | -webkit-background-clip: text; |
|---|
| | | background-clip: text; |
|---|
| | | -webkit-text-fill-color: transparent; |
|---|
| | | /* text-fill-color: transparent; font-weight: bolder; cursor: text; */ |
|---|
| | | } |
|---|
| | | .head_top img { |
|---|
| | | width: 90%; |
|---|
| | | margin: auto; |
|---|
| | | } |
|---|
| | | .head_top p { |
|---|
| | | width: 100%; |
|---|
| | | text-align: center; |
|---|
| | | color: #55bfff; |
|---|
| | | position: absolute; |
|---|
| | | bottom: -18px; |
|---|
| | | left: -10px; |
|---|
| | | } |
|---|
| | | .head_top p span { |
|---|
| | | font-family: "yjsz"; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left-top10 { |
|---|
| | | background: url(/images/data-v/top10.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | height: 53%; |
|---|
| | | width: 20%; |
|---|
| | | position: absolute; |
|---|
| | | top: 12%; |
|---|
| | | left: 2%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .center { |
|---|
| | | /* background: #edeef1; */ |
|---|
| | | width: 46%; |
|---|
| | | height: 52%; |
|---|
| | | position: absolute; |
|---|
| | | left: 23%; |
|---|
| | | top: 11%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .center .center-left { |
|---|
| | | background: url(/images/data-v/center.png) no-repeat center center; |
|---|
| | | width: 75%; |
|---|
| | | height: 100%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .center .center-count { |
|---|
| | | position: relative; |
|---|
| | | top: 60%; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right-week { |
|---|
| | | background: url(/images/data-v/week.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | height: 33%; |
|---|
| | | width: 28%; |
|---|
| | | position: absolute; |
|---|
| | | top: 8%; |
|---|
| | | right: 2%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right-device { |
|---|
| | | background: url(/images/data-v/data-m.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | height: 23%; |
|---|
| | | width: 28%; |
|---|
| | | position: absolute; |
|---|
| | | top: 43%; |
|---|
| | | right: 2%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right-type { |
|---|
| | | background: url(/images/data-v/type.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | height: 30%; |
|---|
| | | width: 28%; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 2%; |
|---|
| | | right: 2%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bottom-line { |
|---|
| | | background: url(/images/data-v/lineup.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | /* height: 31%; |
|---|
| | | width: 66%; */ |
|---|
| | | height: 309px; |
|---|
| | | width: 1268px; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 2%; |
|---|
| | | left: 2%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .device-count { |
|---|
| | | width: 50%; |
|---|
| | | margin-top: 35px; |
|---|
| | | margin-left: 68px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <el-table-column label="序号" width="80" class-name="index"> |
|---|
| | | <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="devId" label="设备ID" min-width="185" show-overflow-tooltip></el-table-column> |
|---|
| | | <el-table-column prop="devId" label="设备ID" min-width="210" show-overflow-tooltip></el-table-column> |
|---|
| | | <el-table-column prop="devName" label="设备名称" min-width="140" show-overflow-tooltip></el-table-column> |
|---|
| | | <el-table-column prop="devIp" label="IP地址" min-width="150"></el-table-column> |
|---|
| | | <el-table-column label="安装时间" min-width="159"> |
|---|
| | |
|---|
| | | Temp = document.createElement("a") |
|---|
| | | |
|---|
| | | Temp.href = window.URL.createObjectURL(blob) |
|---|
| | | |
|---|
| | | console.log(result) |
|---|
| | | console.log(result.fileName) |
|---|
| | | |
|---|
| | | Temp.download = window.decodeURI(result.fileName) |
|---|
| | | |
|---|
| | | Temp.setAttribute("download", result.fileName) |
|---|
| | |
|---|
| | | .search { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding: 60px 0 30px 0; |
|---|
| | | padding: 20px 0 30px 0; |
|---|
| | | font-size: 14px; |
|---|
| | | border-bottom: 1px solid #e9ebee; |
|---|
| | | background-color: #fff; |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-area { |
|---|
| | | min-height: 600px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .btns { |
|---|
| | | display: flex; |
|---|
| | | margin: 30px 0; |
|---|
| | |
|---|
| | | <!-- 页头 --> |
|---|
| | | <IndexHeader :opacity="false"></IndexHeader> |
|---|
| | | <!-- 面包屑 --> |
|---|
| | | <div class="heart"> |
|---|
| | | <el-breadcrumb separator=">"> |
|---|
| | | <el-breadcrumb-item :to="{ path: '/manageCenter' }" |
|---|
| | | >管理中心</el-breadcrumb-item |
|---|
| | | > |
|---|
| | | <div class="breadcrumb"> |
|---|
| | | <!-- <el-breadcrumb separator=">"> |
|---|
| | | <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item> |
|---|
| | | <el-breadcrumb-item>设备管理</el-breadcrumb-item> |
|---|
| | | </el-breadcrumb> |
|---|
| | | </el-breadcrumb> --> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 主要内容 --> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import IndexHeader from "@/components/IndexHeader"; |
|---|
| | | import Content from "@/views/equipmentManagement/equipmentList/components/Content"; |
|---|
| | | import Footer from "@/components/Footer"; |
|---|
| | | import IndexHeader from "@/components/IndexHeader" |
|---|
| | | import Content from "@/views/equipmentManagement/equipmentList/components/Content" |
|---|
| | | import Footer from "@/components/Footer" |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | IndexHeader, |
|---|
| | | Content, |
|---|
| | | Footer, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | Footer |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .equipmentList { |
|---|
| | | background-color: rgb(243, 245, 248); |
|---|
| | | |
|---|
| | | .breadcrumb { |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | .el-breadcrumb { |
|---|
| | | margin-top: 48px; |
|---|
| | | margin-bottom: 24px; |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <!-- 全屏版心 --> |
|---|
| | | <div class="fullScreenheart"> |
|---|
| | | <!-- 面包屑 --> |
|---|
| | | <el-breadcrumb separator=">"> |
|---|
| | | <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item> |
|---|
| | | <el-breadcrumb-item>算力管理</el-breadcrumb-item> |
|---|
| | | </el-breadcrumb> |
|---|
| | | |
|---|
| | | <div class="breadcrumb"> |
|---|
| | | <!-- <el-breadcrumb separator=">"> |
|---|
| | | <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item> |
|---|
| | | <el-breadcrumb-item>算力管理</el-breadcrumb-item> |
|---|
| | | </el-breadcrumb> --> |
|---|
| | | </div> |
|---|
| | | <!-- tab栏 --> |
|---|
| | | <div class="tabs"> |
|---|
| | | <div |
|---|
| | |
|---|
| | | .fullScreenheart { |
|---|
| | | min-height: calc(100vh - 210px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .breadcrumb { |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | .el-breadcrumb { |
|---|
| | | margin-top: 48px; |
|---|
| | | margin-bottom: 24px; |
|---|
| | |
|---|
| | | path: "/search", |
|---|
| | | permission: "statisticMng" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "统计分析", |
|---|
| | | icon: "/images/manageCenter/search.png", |
|---|
| | | openPath: "/dataView", |
|---|
| | | path: "/dataView", |
|---|
| | | permission: "statisticMng" |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | name: "推送管理", |
|---|
| | |
|---|
| | | return item == route.permission |
|---|
| | | }) |
|---|
| | | if (val) { |
|---|
| | | if (route.path === "/search") { |
|---|
| | | if (route.path === "/search" || route.path === "/dataView") { |
|---|
| | | const { href } = this.$router.resolve({ |
|---|
| | | path: "/search" |
|---|
| | | path: route.path |
|---|
| | | }) |
|---|
| | | window.open(href, "_blank") |
|---|
| | | return |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="GB28181"> |
|---|
| | | <div class="data-report"> |
|---|
| | | <!-- 页头 --> |
|---|
| | | <IndexHeader :opacity="false"></IndexHeader> |
|---|
| | | <!-- 面包屑 --> |
|---|
| | | <div class="heart"> |
|---|
| | | <el-breadcrumb separator=">"> |
|---|
| | | <div class="breadcrumb"> |
|---|
| | | <!-- <el-breadcrumb separator=">"> |
|---|
| | | <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item> |
|---|
| | | <el-breadcrumb-item>推送管理</el-breadcrumb-item> |
|---|
| | | </el-breadcrumb> |
|---|
| | | </el-breadcrumb> --> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 主要内容 --> |
|---|
| | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .GB28181 { |
|---|
| | | .data-report { |
|---|
| | | background-color: rgb(243, 245, 248); |
|---|
| | | position: relative; |
|---|
| | | min-height: 200vh; |
|---|
| | | min-height: 50vh; |
|---|
| | | |
|---|
| | | .breadcrumb { |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | .el-breadcrumb { |
|---|
| | | margin-top: 48px; |
|---|
| | | margin-bottom: 24px; |
|---|
| | |
|---|
| | | <IndexHeader :opacity="false"></IndexHeader> |
|---|
| | | <!-- 全屏版心 --> |
|---|
| | | <div class="fullScreenheart"> |
|---|
| | | <!-- 面包屑 --> |
|---|
| | | <el-breadcrumb separator=">"> |
|---|
| | | <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item> |
|---|
| | | <el-breadcrumb-item>实时监控</el-breadcrumb-item> |
|---|
| | | </el-breadcrumb> |
|---|
| | | |
|---|
| | | <div class="breadcrumb"> |
|---|
| | | <!-- 面包屑 --> |
|---|
| | | <!-- <el-breadcrumb separator=">"> |
|---|
| | | <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item> |
|---|
| | | <el-breadcrumb-item>实时监控</el-breadcrumb-item> |
|---|
| | | </el-breadcrumb> --> |
|---|
| | | </div> |
|---|
| | | <!-- tab栏 --> |
|---|
| | | <Video></Video> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | |
|---|
| | | .fullScreenheart { |
|---|
| | | min-height: calc(100vh - 210px); |
|---|
| | | .breadcrumb { |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-breadcrumb { |
|---|
