Commit 9ce9cfeace70be5e44db3feb2faaf3ffe1396550
1 parent
9598d2c1
进出场
Showing
3 changed files
with
91 additions
and
3 deletions
src/assets/img/sectionbig.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="utf-8"?> | ||
| 2 | +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | ||
| 3 | +<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| 4 | + viewBox="-340 -89.7 653.5 219.7" style="enable-background:new -340 -89.7 653.5 219.7;" xml:space="preserve"> | ||
| 5 | +<style type="text/css"> | ||
| 6 | + .st0{fill:none;stroke:#2391FA;stroke-miterlimit:10;} | ||
| 7 | + .st1{opacity:0.8;fill:#2391FA;enable-background:new ;} | ||
| 8 | + .st2{fill:#2391FA;} | ||
| 9 | + .st3{display:none;opacity:0.2;fill:url(#XMLID_4_);enable-background:new ;} | ||
| 10 | + .st4{display:none;opacity:0.2;fill:url(#XMLID_5_);enable-background:new ;} | ||
| 11 | +</style> | ||
| 12 | +<path id="XMLID_11_" class="st0" d="M-339.5-89.2H297l16,16V114l-15.8,15.5h-620.7l-16-15.1V-89.2z"/> | ||
| 13 | +<path id="XMLID_2_" class="st1" d="M312.5,117.5v3l-9,9h-3L312.5,117.5z"/> | ||
| 14 | +<path id="XMLID_1_" class="st2" d="M310.5-86.8h-8l8,8"/> | ||
| 15 | +<linearGradient id="XMLID_4_" gradientUnits="userSpaceOnUse" x1="-338.9" y1="114.4" x2="-31.5667" y2="114.4" gradientTransform="matrix(1 0 0 -1 0 40.6)"> | ||
| 16 | + <stop offset="0" style="stop-color:#3E9AF1"/> | ||
| 17 | + <stop offset="0.6139" style="stop-color:#3E9AF1;stop-opacity:0.2862"/> | ||
| 18 | + <stop offset="1" style="stop-color:#3E9AF1;stop-opacity:0"/> | ||
| 19 | +</linearGradient> | ||
| 20 | +<path id="XMLID_7_" class="st3" d="M-338.9-88.8h303v30h-303V-88.8z"/> | ||
| 21 | +<path id="XMLID_9_" class="st2" d="M-338.9-89.2h4v4h-4C-338.9-85.2-338.9-89.2-338.9-89.2z"/> | ||
| 22 | +<linearGradient id="XMLID_5_" gradientUnits="userSpaceOnUse" x1="-13.5" y1="115.3" x2="293.8333" y2="115.3" gradientTransform="matrix(1 0 0 -1 0 40.6)"> | ||
| 23 | + <stop offset="0" style="stop-color:#3E9AF1"/> | ||
| 24 | + <stop offset="0.6139" style="stop-color:#3E9AF1;stop-opacity:0.2862"/> | ||
| 25 | + <stop offset="1" style="stop-color:#3E9AF1;stop-opacity:0"/> | ||
| 26 | +</linearGradient> | ||
| 27 | +<path id="XMLID_39_" class="st4" d="M-13.5-89.7h303v30h-303V-89.7z"/> | ||
| 28 | +</svg> |
src/views/mainContainer.vue
| @@ -8,7 +8,10 @@ | @@ -8,7 +8,10 @@ | ||
| 8 | </li> | 8 | </li> |
| 9 | <li class="margin0-12"> | 9 | <li class="margin0-12"> |
| 10 | <div class="heightper-top"></div> | 10 | <div class="heightper-top"></div> |
| 11 | - <div class="heightper-bottom"></div> | 11 | + <div class="heightper-bottom"> |
| 12 | + <outsection style="width: 50%;float: left"></outsection> | ||
| 13 | + <outsection style="width: 50%;float: left"></outsection> | ||
| 14 | + </div> | ||
| 12 | </li> | 15 | </li> |
| 13 | <li> | 16 | <li> |
| 14 | <sfysection class="sectionsmall"></sfysection> | 17 | <sfysection class="sectionsmall"></sfysection> |
| @@ -28,6 +31,8 @@ import youdaopingsection from '../views/youdaopingsection' | @@ -28,6 +31,8 @@ import youdaopingsection from '../views/youdaopingsection' | ||
| 28 | import sfysection from '../views/sfysection' | 31 | import sfysection from '../views/sfysection' |
| 29 | import berthsection from '../views/berthsection' | 32 | import berthsection from '../views/berthsection' |
| 30 | import newssection from '../views/newssection' | 33 | import newssection from '../views/newssection' |
| 34 | +import outsection from '../views/outsection' | ||
| 35 | + | ||
| 31 | 36 | ||
| 32 | export default { | 37 | export default { |
| 33 | name: 'mainContainer', | 38 | name: 'mainContainer', |
| @@ -38,7 +43,8 @@ export default { | @@ -38,7 +43,8 @@ export default { | ||
| 38 | youdaopingsection, | 43 | youdaopingsection, |
| 39 | sfysection, | 44 | sfysection, |
| 40 | berthsection, | 45 | berthsection, |
| 41 | - newssection | 46 | + newssection, |
| 47 | + outsection | ||
| 42 | }, | 48 | }, |
| 43 | data() { | 49 | data() { |
| 44 | return { | 50 | return { |
| @@ -88,8 +94,9 @@ export default { | @@ -88,8 +94,9 @@ export default { | ||
| 88 | 94 | ||
| 89 | .heightper-bottom { | 95 | .heightper-bottom { |
| 90 | height: calc((100% - 24px) / 3); | 96 | height: calc((100% - 24px) / 3); |
| 91 | - background: #f00; | ||
| 92 | margin-top: 12px; | 97 | margin-top: 12px; |
| 98 | + background: url("../assets/img/sectionsmall.png") no-repeat; | ||
| 99 | + background-size: 100% 100%; | ||
| 93 | } | 100 | } |
| 94 | 101 | ||
| 95 | .containerwrap > li:nth-of-type(3) { | 102 | .containerwrap > li:nth-of-type(3) { |
src/views/outsection.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div> | ||
| 3 | + <titlesection title="周出场统计"></titlesection> | ||
| 4 | + <ul class="flexfm ydp-dz-wrap"> | ||
| 5 | + | ||
| 6 | + </ul> | ||
| 7 | + </div> | ||
| 8 | +</template> | ||
| 9 | + | ||
| 10 | +<script> | ||
| 11 | +import titlesection from '../components/titlesection' | ||
| 12 | +import {fetchList} from '../api/api' | ||
| 13 | + | ||
| 14 | +const lineChartData = { | ||
| 15 | + newVisitis: { | ||
| 16 | + yData: [100, 120, 161], | ||
| 17 | + xData: ['正常', '异常', '故障'] | ||
| 18 | + } | ||
| 19 | +} | ||
| 20 | + | ||
| 21 | + | ||
| 22 | +export default { | ||
| 23 | + name: 'outsection', | ||
| 24 | + components: { | ||
| 25 | + titlesection | ||
| 26 | + }, | ||
| 27 | + data() { | ||
| 28 | + return { | ||
| 29 | + lineChartData: lineChartData.newVisitis, | ||
| 30 | + dzNum: '23454', | ||
| 31 | + ydpNum: '4454' | ||
| 32 | + } | ||
| 33 | + }, | ||
| 34 | + created() { | ||
| 35 | + }, | ||
| 36 | + methods: { | ||
| 37 | + getList() { | ||
| 38 | + fetchList() | ||
| 39 | + .then(res => { | ||
| 40 | + console.log(res); | ||
| 41 | + | ||
| 42 | + }); | ||
| 43 | + }, | ||
| 44 | + } | ||
| 45 | +} | ||
| 46 | +</script> | ||
| 47 | + | ||
| 48 | +<style lang="scss" scoped> | ||
| 49 | + .ydp-dz-wrap{ | ||
| 50 | + display: flex; | ||
| 51 | + | ||
| 52 | + } | ||
| 53 | +</style> |