From b1c86a80777e8c5d62437232635415cb58daf51a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Fri, 10 Nov 2023 14:58:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=B8=AD=E7=9A=84tablespace=20=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=B8=B2=E6=9F=93=E5=8F=8A=E6=8E=A5=E5=8F=A3=E8=81=94?=
 =?UTF-8?q?=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/abnormalAlarm/green-bg.png  | Bin 0 -> 1003 bytes
 src/assets/images/abnormalAlarm/green.png     | Bin 0 -> 1003 bytes
 src/assets/images/abnormalAlarm/red-bg.png    | Bin 0 -> 1002 bytes
 src/assets/images/abnormalAlarm/red.png       | Bin 0 -> 1002 bytes
 src/assets/images/abnormalAlarm/yellow-bg.png | Bin 0 -> 1004 bytes
 src/assets/images/abnormalAlarm/yellow.png    | Bin 0 -> 1007 bytes
 .../databaseMonitor/instances/tableSpace.vue  | 297 +++++++++++++-----
 7 files changed, 212 insertions(+), 85 deletions(-)
 create mode 100644 src/assets/images/abnormalAlarm/green-bg.png
 create mode 100644 src/assets/images/abnormalAlarm/green.png
 create mode 100644 src/assets/images/abnormalAlarm/red-bg.png
 create mode 100644 src/assets/images/abnormalAlarm/red.png
 create mode 100644 src/assets/images/abnormalAlarm/yellow-bg.png
 create mode 100644 src/assets/images/abnormalAlarm/yellow.png

diff --git a/src/assets/images/abnormalAlarm/green-bg.png b/src/assets/images/abnormalAlarm/green-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2af429c6d72a1c03ba5a068036bedb2a9c864b4
GIT binary patch
literal 1003
zcmaJ=&rj1(94`ol5C~p~;OV8iXu|q)bhcR~V{KuH#bu1JlhCyf)<FAe`*4MWK@wu*
zq$dm}{sA7mn0WEP*~A0Ji}7GgyqcKEK@TMJb!@|fv&rlGk<aJz{d~Xg`yQ7T=0=CF
z4O0{~TAbI)WF8>n%Ft!<=ihueCDSC<t9TKu;f57LD(|2g1VztUhh=Cv+xOnV97SD9
zxs@uenzt1jd5o1{nAi&lo1$_vabVdS5Q7?AcYT%q@%ESouA|b+(<WyI1z30IcS5+h
zvrw^jHf-6UXKsO9tPlYYVhhCHrXMM>O1E?svQCa!8nhsIL#5A6Rm~D8pb!Fy;nFt8
z2_P#oyp+jE+!PQvfn&L8mKV~zq;MI9&w}<xlW3u{rj#|K9gFN#x{h(6uxz8zU>YKW
z!gZFHWtrs!RuIwzk&d=~Y{h9mN_7-87}=p4U>EryQM77k3#&A7dY*z8bY=ahT_#d6
zHnswmXSgJ#4$w6J5B0n*I>Kdm;rE}yQDr-TY#ByqE40bQt)-Gsfl>&eg;7{RXtPtr
zQXOFw)lmQho)N(HW!HC5Bf8Ndn5I(nBW(FLENUuEBpBCq6j|4$d{z^(hLq)bUC-YX
zrNXSpXJ>gs6Xkq|t08;KgFfzXoeQqmlbiH{7m&yr4Bh+CF+${lR?dps+Y8rIug!IO
zd*OR>Sz?AwZuYO6?i`W!NtWHdC7W*NL!Y#JNc#G93Oyok;%-sPSK`k#$1I5!wYPGL
zUi5vK8u|V{H!{Dw|MdBO-_q{k_|opf!%=f^>}c3vGUCLiXD0&_lP3cYnsej7o8QKc
u4p6<ndAvGwW_<iPZhme4npt@=NcE3UV+U6Y`pY{;^8AYWg7#{5b?*;M4m&3R

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/green.png b/src/assets/images/abnormalAlarm/green.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cf591be07b6e8956501358718d5011d6fc921de
GIT binary patch
literal 1003
zcmaJ=PiWIn9FDUaW30@}*yibxT@=>*Ti2M_IMyWH3d<;6$Ld9vCU0x#k{6R#o9!S|
z*g;Qvn#`+bk0N;JSrD9fksVYJJPCpx^dQuiuB{%dftUA(@B4n=@ArQ1UU6+XId*Z3
zqNrqHMJtgxLB@sA5%TAsz5h<88LU_EI@-ofGl0~Rjj9k7TyqDOplR>jd<nA@b$-?<
zS8&Bxl`Z5lW{hDX*C%X>$}UE}Y1JVHRk-7L3jOs(iw2IZ(3=YeXZR|tIV<}CT;E?S
zTl;lOvgyTZAREa<z=hZZk-O`Ka-`55U74)oW0nRT2(ByinW>6V1S$$3$S_>W;y3|_
z62oWG=?pgq1Ww>sZh_^66rYi~w9Jd3`_Uv?U~kJME#Hkrb_!j?*q2$h*=#b+c?JbL
zEH6nC%L%L?qzEDv?s?dZQeHUQQ_x^&1&)s$<bhbxtfB^1XyWuN1=sJ(dSSOrq+o1h
z`Yg|IaY{X)Vf-KJx_xwrOYo21e+q}?Js+|q7@|gCk&D}&jYIje8bA}Hpp4LNuZqPQ
z!YHgE9|$}nfJ>W>XQO6#xkE4vx!{G^^ekA=6q-mdj$_L??uw}EYF^A|M4s36oFGa$
zT@VFnDJP^gwa3+v)o`JQdtAHE)wqG&xEEZXMAl&7+=6yKKrZOyEIWg}Xan`STzjAw
zRUgP@i5WJ&*}rbOcSPDJUiSNzZ2FxKJ<{$0>FZ?c`E~LpZWOeoa&%g?jpEhURHF6y
zLpt$hZv4xuk@1y-!-tO#&uttWO>P|AIZ7JC6USqDCOtp>?$JqNdgdf?yS+U5v;Aq}
v_&%x)wOd=Gzw&RtO&TBDKNhDR3{ykn)WYeMT0dNU5<kC!zNS6RZQcD1mS;Q)

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/red-bg.png b/src/assets/images/abnormalAlarm/red-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a11cc46a225fc5381e54630c1ae033fd87f9e97
GIT binary patch
literal 1002
zcmaJ=&rj1(94`n&2_%|$foSs5d60zulyz&f3T*9Q#u74S*o8>fK3D_otL?)TE*cI-
z5)P8+S^om{U_2<vu9|qzs|Vp^IBC#}F(LRmw&B6q<n{f?=kxh~zTfwKTeCA$gZ;z(
z6h#ddrnMrOd&oF{wvYUU*I#~;X$b3OJcpKW%?uzlX`>1R1=n1LMQGaVcizJcMV(1F
zr7|uXHx&!HtQlk2$n^=EqB7%=Z(1u5g9==BJeB_bwoU`bR_Xbq!5e-KR-NgM0M2d9
zl&p;vOSb9p>mU;;M8JjE1d+Syg-WE-4PAw-<718n4G3OQ=@V0BV;1C40D;8vjK%XJ
zNXe`qjg3kCC=hv(=lCQih>Rd9{Fox7K=Y$Xw7_0cidw!Ii|kaoim|V7T&-4PYu8v5
zEOUY^%N#FqqR0>g6RvyMj2JIWv=lTLT7lzZ2YDb?G%IKgt2A+Xl7j2EWxcRjCQ>ji
zGJQ^9`8cH(&@lcFb=@{P#6@`O_n*RHY2Alh5r$|ju*k(NCE`%Nk_(`TQBXo?wN=I0
zD#9qNA|HqXD}t-@j%TA<IMN^(hEniCY<d<fXev!4SjVvyIi2NGS~i=?ODRFn^|Y9h
z^1Pl)3UWG~l+rD(hO9Lgdbq{4Pr12{+_)E9pG4MR;M|3FK0q#L<g7TIy~rK)nq0fH
zm&uM?j+o)%oBiviTSugQ;$^#U$)?@;&?D_0kiI^8=HDQ1Vxgc-mZHy<4`26rliD2F
zt3U1fG@9Ao&J0Z7*B|cebm<e1x6a*~xU@j!dLIn!9(0c$bk~oMr!Fl19=P~x`^vi?
w-}c5!%!`k&UhZo1hr<i|NA-KRAN5k*0~FJ9Ihp8t^CW(K1${<)o?YDh13>~j+yDRo

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/red.png b/src/assets/images/abnormalAlarm/red.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0296d9a08e97f39466baa4ab68df1d308116736
GIT binary patch
literal 1002
zcmaJ=&ui0A9FKJyIyO)cWJBeVc~DrBysT@N(71I?x)sbAZDhR+mL_j&+>#fQH=FJ<
z@gNR%aIn8aJ%|^FyDBK^)r0ONo)q;Wg3On$?L1fmFYgDR&*%I3e&6?P&CksY_7C?n
z3^Q1qRZDd4q2tV{KKh4GKm4H65YZ~6jF(B>3=osEaTS50Yp$RYGVR8#mnh3HCr2Ek
zLMr-o*}^Vo#uzSgeadE->}2Gd)+!>PidGy?VZT1xXMtlY?83M%=zbp6oY{>4l{e-L
zYh%@tY<BV*$VM_1a1k*<<gR(494Ty5SElRum}fx~LRJ;_$W%q22YDPIkmiJ>B?uzO
zNE}S3QfXlnh=M5a!Z;7bBuvXfN`@KG`dAt*u$SeMT4=?hJB6(g;>$c=uh+Ty7>9!u
z9!iqL3nDLyNs35@4Ud>n(hEo03MvY%!10NLJrFCJRlH6VmO4F3!Sy?`Uf3!VEf^n}
zJ`Xt|PN@yl_5VX%w}TEz2_5_Wr*LRAe8iVfh}Q#)Ufl9X9LksT0Wt{=42;*>Rh+M3
zg2Nj2fe1MfTv>2D8`s0DO@gk=MK2_#XQ861uvCI`99z!i)G;ju#Y`ccfl$+?AuJT~
zl9bL1!o-AFXmeF;t-Hu0ZLWRH9qY=Cd%^W-WEBO@ZDbb$?1E;_veVs*&{eO+wYz(P
zUAa6p!^b!K*G;#NX#2#=PT$f^r}L3V+dZIteKXvBP2a>~QOz0A`|7Jt2NQ3Yp7Qg}
zOwYT~?Dlrw!0a9E{?5(`ZEAPx^o^+ti%h=v-q7CX#OUY5{^8-w*`;3t=YDQqe)0Xw
u$4Mjk=<Sood+Nfs;l+dB`<v$<^fHM7rfggsZ(M?j`1KXFIrZW6(%nBdOFOs#

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/yellow-bg.png b/src/assets/images/abnormalAlarm/yellow-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..9077e8f79b76dc9ff9094a56d377e11cb23d4d19
GIT binary patch
literal 1004
zcmaJ=&rj4q7;RLDA(H4p6S+7k{y=0qZFkwF4TUV*u53aHENj@CcH4n%pq<(dwr~If
zBt|{y$$0TX<mScbMHFIU)P(Q{c<|uO6DFKI>2%p$Jh(QQ&X2tJzW06e&4Y>Yo1Gn9
z9Sp;C7Dm+~olntm_H;Y_3va$1(&-}6%47=9kkIfEleKUKfr4Yqq9QV^#k*h7Aj6#O
zwo7GF*2iQMJDd??xXAG+n_&irBhN7B5CIi5Yr6`2@OFm<wxzJs{W`CEIaIYrmwYs}
zG+r{7=1j?AhljvmBvSzg5d%cdyc@`o!q#+Ux{i+_3u+KDr?5w+%K8MzVIP4s$0tml
z7ePkigmfyE=KFxii#+7}p&%xNw9KbuAp`0kOQZSLj9gUn^;mSLuvJ1l8Nx6OxiHCL
ze-;XoBtc$;qL`qFM6l=*BTBeIcSAu%f$7^Gv9SwcMWccjh{95*M=3a7Q`QaYWugUx
zk>Nps<KvVXKwbYo)Nz{VfE3ZO-+u}Rr9}_HA`0+=Z_<mK>5fBra?VEv!F~zj`9>8d
zs+i!Qiaj6-oCtcRZP&tKaJ@#*b-CaM#BfbiP!*O+aJFs916fg1^MaJgr!#_}X;PAx
zvRZN^pOiA$)W|@Ct73D(K`v=<tz&MsB{%K`$D@%|<lFa<mG`j&YB|exYcH9WdUdYV
z+RH#oE~I8)e6xSubmNG&PrPjQE!{LbAGx&MecIP6o9~{`H*ve5W=ql6O5ZEgZ!v58
zxt;y>>IKftFSlRb{c!E`-YN@v9$p0-9O&8G=-s`s`eJSU(K(H|rHp<&c>a5`?fvqv
y`@KJZD9?63g)5V7L)%w2zaMU`TzcHboH)a%ue-*cp5NYz-(Nu+S6`0YS^EPy89rwK

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/yellow.png b/src/assets/images/abnormalAlarm/yellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..33a8bbec0339005516fd31532970fd3cfca103cb
GIT binary patch
literal 1007
zcmaJ=&ui0A9FLgl7z_k2PA`uPVZxf1WLvw2Wm}u1TVWZcE3DwfG<jRYmb{p}*{paN
zG7<lT9R%^_4hjl-5Lp>`@GzJsVF&*NC(J`HI$yfB^I#3UydQi%pYP}Uec$)AxHLaB
zcyo|pn4!XgR-!XY$F+eg^e?{qc1ovVqF2Z=UL|!iKup%gRRjvIxrR!}w72emM$-&)
zdBiDKNX1x`E$s4UjNv2Kr)-9qo{fCdT1Ny_(VF8a+{uT14mh^LtxOt%;j5_TEHnbN
z+*m4Gjdd$ybF(vGI+Ce?i--v#cf$+iNa5PLGF`{VkOOT9Sy#AoQx&5KR2(3X;)SFo
z2ogwVcri6GkrKv$BuD}jCZQ-L#gr^e$YL6FK8{8U>{Yp><vX$HPT^{V_%ej`dY!M2
z^Eg<8VkVP;f&?WgNfF6#%Ohr#^um#@f`&pXaD3um55$UQ6>k!SqfXCLaQ&XF7k0`-
z3kD<8haxY;DRqH{@qei6_Rt|Ip$otN6b{Q<K7u6_;?2OK7q>bRhw^1LKqkRK8RLy^
z6^k`Ya9G1WkVIYrqbrVQ<9c|fO)w0(;DyBWEL6}Gj!N*3W6RmeDK)RAv~)g|7DZjp
zOsRrCp3CZ~Om1AvX<e>{txXqsq|3E0xO!i1+zYNxBWoyd9w0j(U>CG=mYx1ya((qW
zT)V#)wJ#S^Gcdl{zizsFMB67`_WG7?dYz9v+U^1E>*LqbGx{c~1ua{Sj;mvDk#f*%
z{@6b~f_K4T^Wf8A?Qol|wAkI@BFpMu*qx&U`*^pQh!RI--xpsDJm0(evi0k9cCYyr
yo)r@_ALp;PTHoPb^U3?2^26UhPe$J`bK94g#@ww%{_Mu>_z4#DCGA!2-lIQX)<uT^

literal 0
HcmV?d00001

diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue b/src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue
index d8b3ed9..488d337 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue
@@ -1,6 +1,45 @@
 <template>
-  <div style="height: 100%;">
-    <ConditionBox></ConditionBox>
+  <div style="height: 100%">
+    <div class="monitor-search">
+      <a-row type="flex" :gutter="10">
+        <a-col flex="335px">
+          <span class="item-label">Database name</span>
+          <a-select
+            style="width: 180px"
+            v-model="name"
+            placeholder="select..."
+            :filter-option="filterOption"
+            show-arrow
+            allowClear
+            :options="DbOptions"
+            @change="onDbChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </a-col>
+        <a-col flex="335px">
+          <span class="item-label">DB Name</span>
+          <a-select
+            style="width: 180px"
+            v-model="dbName"
+            placeholder="select..."
+            show-arrow
+            allowClear
+            :options="dbNameOptions"
+            @change="ondbNameChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </a-col>
+      </a-row>
+      <div class="monitor-search-btns">
+        <a-button class="monitor-search-btns-ant">
+          <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
+          <span style="margin-left: 10px"> Refresh </span>
+        </a-button>
+      </div>
+    </div>
+
     <div class="tableSpace-main">
       <TableList
         size="middle"
@@ -11,60 +50,58 @@
         :pagination="false"
         :canSelect="false"
       >
-        <template slot="space" slot-scope="{ text,record}">
-          <!-- <a-progress :percent="text" :strokeWidth="16" /> -->
-          {{ text }}%
+        <template slot="space" slot-scope="{ text }">
+          <div class="space">
+            <div :class="['space-bar', `space-bar-${text > 80 ? 'r' : text > 50 ? 'y' : 'g'}`]">
+              <div
+                :class="['space-bar-progress', `space-bar-progress-${text > 80 ? 'r' : text > 50 ? 'y' : 'g'}`]"
+                :style="{ width: `${2.6 * text}px` }"
+              ></div>
+            </div>
+            <div
+              class="space-text"
+              :style="{ color: text > 80 ? 'red' : text > 50 ? 'yellow' : '', 'margin-left': '30px' }"
+            >
+              {{ text.toFixed(3) }}%
+            </div>
+          </div>
         </template>
       </TableList>
-      <a-pagination 
-        size="small"
-        v-model="ipagination.current" 
-        :pageSize="ipagination.pageSize"
-        :page-size-options="ipagination.pageSizeOptions"
-        show-size-changer
-        show-quick-jumper
-        :total="ipagination.total"
-        :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
-        show-less-items 
-        @change="handlePageChange"
-        @showSizeChange="handleSizeChange"
-      />
     </div>
   </div>
 </template>
 
 <script>
-import ConditionBox from './conditionBox.vue';
-import TableList from '../../components/tableList.vue';
-import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
-const columns = [{
-    title: 'DATABASE',
-    align: 'center',
-    dataIndex: 'dataBase',
-    width: 200,
-  },{
+import TableList from '../../components/tableList.vue'
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+const columns = [
+  {
     title: 'TABLE NAME',
     align: 'center',
     dataIndex: 'tableName',
-    width: 200,
-  },{
+    width: 300,
+  },
+  {
     title: 'TABLE ROWS',
     align: 'center',
-    dataIndex: 'tableRows',
+    dataIndex: 'numRow',
     width: 200,
-  },{
+  },
+  {
     title: 'TABLE SPACE',
     align: 'center',
-    dataIndex: 'tableSpace',
+    dataIndex: 'used',
     scopedSlots: {
       customRender: 'space',
-    }
-  },{
+    },
+  },
+  {
     title: 'DATA SIZE(MB)',
     align: 'center',
     dataIndex: 'dataSize',
     width: 200,
-  },{
+  },
+  {
     title: 'INDEX SIZE(MB)',
     align: 'center',
     dataIndex: 'indexSize',
@@ -73,79 +110,169 @@ const columns = [{
 ]
 export default {
   components: {
-    ConditionBox,
-    TableList
+    TableList,
   },
   data() {
     return {
       columns,
-      dataSource: [
-        {
-          dataBase: "Energy spectrum",
-          tableName: "table",
-          tableRows: 8368,
-          tableSpace: 68,
-          dataSize: 321,
-          indexSize: 0.0,
-        },{
-          dataBase: "Energy spectrum",
-          tableName: "table",
-          tableRows: 8368,
-          tableSpace: 68,
-          dataSize: 321,
-          indexSize: 0.0,
-        },{
-          dataBase: "Energy spectrum",
-          tableName: "table",
-          tableRows: 8368,
-          tableSpace: 68,
-          dataSize: 321,
-          indexSize: 0.0,
-        },
-      ],
+      dataSource: [],
       loading: false,
-      ipagination:{
-        current: 1,
-        pageSize: 10,
-        pageSizeOptions: ['10', '20', '30'],
-        showTotal: (total, range) => {
-          const { current, pageSize } = this.ipagination
-          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
-        },
-        showQuickJumper: true,
-        showSizeChanger: true,
-        total: 0
-      },
-      
+      name: undefined,
+      dbName: undefined,
+      DbOptions: [],
+      dbNameOptions: [],
+      currId: '',
     }
   },
-  methods: {
-    handlePageChange(page, pageSize) {
-      this.ipagination.current = page
-      this.ipagination.pageSize = pageSize
-      this.getDbAlarmHistory(this.paramsArg)
+  watch: {
+    name(newValue, oldValue) {
+      this.currId = newValue
     },
-    handleSizeChange(current, size) {
-      this.ipagination.current = current
-      this.ipagination.pageSize = size
-      this.getDbAlarmHistory(this.paramsArg)
+  },
+  mounted() {
+    this.getDbList()
+    this.getDbNameList()
+  },
+  methods: {
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    getDbList() {
+      getAction('/sysDatabase/sourceList').then((res) => {
+        if (res.success) {
+          this.name = this.$route.query.id || res.result[0].sourceId
+          this.DbOptions = res.result.map((item) => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId,
+            }
+          })
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+    getDbNameList() {
+      let params = {
+        dbType: 'ORACLE',
+      }
+      getAction('/sysDatabase/dbNames', params).then((res) => {
+        if (res.success) {
+          console.log(res)
+          this.dbNameOptions = res.result.map((item) => {
+            return {
+              label: item,
+              value: item,
+            }
+          })
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+    onDbChange(val) {
+      this.name = val
+    },
+    ondbNameChange(val) {
+      this.loading = true
+      let params = {
+        dbType: 'ORACLE',
+        dataBase: val,
+      }
+      getAction('/sysDatabase/dbInfo', params).then((res) => {
+        this.loading = false
+        if (res.success) {
+          this.dataSource = res.result
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.tableSpace-main{
+.tableSpace-main {
   width: 100%;
   height: calc(100% - 50px);
   overflow: hidden;
   padding-top: 15px;
   position: relative;
 }
-.ant-pagination{
+.ant-pagination {
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
 }
+.monitor-search {
+  height: 50px;
+  border-top: 1px solid rgba(13, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background: rgba(12, 235, 201, 0.05);
+  .ant-row-flex {
+    flex-flow: nowrap;
+  }
+  /deep/ .ant-calendar-range-picker-separator {
+    color: white;
+  }
+  .item-label {
+    display: inline-block;
+    font-size: 16px;
+    font-family: ArialMT;
+    color: #ade6ee;
+    line-height: 32px;
+    height: 32px;
+    margin-right: 10px;
+  }
+  &-btns {
+    &-ant {
+      background: #1397a3;
+      border: none;
+    }
+  }
+}
+.space {
+  width: 350px;
+  height: 16px;
+  display: inline-block;
+  position: relative;
+  &-bar {
+    width: 260px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    &-progress {
+      height: 100%;
+    }
+    &-progress-g {
+      background: url(~@/assets/images/abnormalAlarm/green.png) repeat;
+    }
+    &-progress-y {
+      background: url(~@/assets/images/abnormalAlarm/yellow.png) repeat;
+    }
+    &-progress-r {
+      background: url(~@/assets/images/abnormalAlarm/red.png) repeat;
+    }
+  }
+  &-bar-g {
+    background: url(~@/assets/images/abnormalAlarm/green-bg.png) repeat;
+  }
+  &-bar-y {
+    background: url(~@/assets/images/abnormalAlarm/yellow-bg.png) repeat;
+  }
+  &-bar-r {
+    background: url(~@/assets/images/abnormalAlarm/red-bg.png) repeat;
+  }
+  &-text {
+    position: absolute;
+    right: 0;
+    top: -3px;
+  }
+}
 </style>
\ No newline at end of file