From 5a02d866b84f0339e36d11c8fbf628e7b893d127 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Sun, 20 Jun 2021 13:31:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20panel=E5=B8=83=E5=B1=80=E3=80=81?= =?UTF-8?q?=E5=8D=95=E5=80=BC=E5=9B=BE=E3=80=81line=E5=9B=BE=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/assets/css/font/iconfont.css | 18 +- src/assets/css/font/iconfont.js | 1 - src/assets/css/font/iconfont.ttf | Bin 12040 -> 12056 bytes src/assets/css/font/iconfont.woff | Bin 7920 -> 7924 bytes src/assets/css/font/iconfont.woff2 | Bin 6804 -> 6800 bytes src/assets/css/rightBoxCommon.scss | 3 - src/assets/css/tableCommon.scss | 12 +- src/assets/css/theme.scss | 4 +- src/components/charts/ChartSingleValue.vue | 49 +++++ src/components/charts/ChartTable.vue | 48 +++++ src/components/charts/EchartsFrame.vue | 40 ++++ src/components/charts/chart-options.js | 186 +++++++++++++++++ src/components/charts/panel.scss | 207 ++++++++++++++++++ src/components/common/pagination.vue | 13 +- src/components/layout/Container.vue | 17 +- src/components/layout/Home.vue | 4 +- src/components/layout/LeftMenu.vue | 2 - src/components/table/settings/RoleTable.vue | 2 +- src/components/table/settings/UserTable.vue | 4 +- src/main.js | 3 +- src/utils/api.js | 15 +- src/utils/tools.js | 7 + src/views/charts/Chart.vue | 220 ++++++++++++++++++++ src/views/charts/Panel.vue | 51 ++++- 25 files changed, 856 insertions(+), 52 deletions(-) delete mode 100644 src/assets/css/font/iconfont.js create mode 100644 src/components/charts/ChartSingleValue.vue create mode 100644 src/components/charts/ChartTable.vue create mode 100644 src/components/charts/EchartsFrame.vue create mode 100644 src/components/charts/chart-options.js create mode 100644 src/components/charts/panel.scss create mode 100644 src/views/charts/Chart.vue diff --git a/package.json b/package.json index 5427a3e4..f79134de 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "sass-loader": "^8.0.2", "sass-resources-loader": "^2.2.1", "vue": "^3.0.0", - "vue-grid-layout": "^2.3.12", + "vue-grid-layout": "^3.0.0-beta1", "vue-i18n": "^9.1.6", "vue-router": "^4.0.8", "vuex": "^4.0.1" diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css index 99b2b0f1..9cc486f4 100644 --- a/src/assets/css/font/iconfont.css +++ b/src/assets/css/font/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "cn-icon"; /* Project id 2614877 */ - src: url('iconfont.woff2?t=1624000421294') format('woff2'), - url('iconfont.woff?t=1624000421294') format('woff'), - url('iconfont.ttf?t=1624000421294') format('truetype'); + src: url('iconfont.woff2?t=1624011302849') format('woff2'), + url('iconfont.woff?t=1624011302849') format('woff'), + url('iconfont.ttf?t=1624011302849') format('truetype'); } .cn-icon { @@ -13,11 +13,11 @@ -moz-osx-font-smoothing: grayscale; } -.cn-icon-view1:before { +.cn-icon-view:before { content: "\e702"; } -.cn-icon-more3:before { +.cn-icon-more-arrow-down:before { content: "\e739"; } @@ -29,7 +29,7 @@ content: "\e68f"; } -.cn-icon-more1:before { +.cn-icon-more-dark:before { content: "\e677"; } @@ -41,11 +41,11 @@ content: "\e738"; } -.cn-icon-xiangshang:before { +.cn-icon-arrow-up:before { content: "\e732"; } -.cn-icon-xiangxia:before { +.cn-icon-arrow-down:before { content: "\e737"; } @@ -105,7 +105,7 @@ content: "\e728"; } -.cn-icon-more:before { +.cn-icon-more-light:before { content: "\e729"; } diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js deleted file mode 100644 index 5524137c..00000000 --- a/src/assets/css/font/iconfont.js +++ /dev/null @@ -1 +0,0 @@ -!function(a){var c,l,o,i,h,t,m='',e=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(e&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function n(){h||(h=!0,o())}c=function(){var a,c,l;(l=document.createElement("div")).innerHTML=m,m=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",a=c,(l=document.body).firstChild?(c=l.firstChild).parentNode.insertBefore(a,c):l.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(o=c,i=a.document,h=!1,(t=function(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(t,50)}n()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,n())})}(window); \ No newline at end of file diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf index 1a9d01ee0f779c7a6729b783edef98da4d8781e2..8da4c02d93365cf2abbfb244bb63dceac7da975a 100644 GIT binary patch delta 155 zcmeB(n-Mo5h^fkcTYw}009610018J01E&B001u-kra9YiA#}?ZwXld00IaYDSB_S z2mx&xCWT`ucJcf+Um3Vr7(n38C#7Ww`hPvkZ02SlmxF-`Bnkj6Q412Yn;QZGe|FkH z4D|&A#?Xc~>Ao*%(>DGn;Su&6h8Z78hUV{U0zG+&9(1m*)~jrkovh3rw_A)bMve)l zn4!QNB^FrX37+BtD?GzuRwIm5skTb!Wy zrnQlGMVHi@PjT#`F124*H5oTa?sD|D!PRBvzeQLTn+{%kSG9Yh77y2n;QZGf0Eij z40MAH#*l<0oBO`6^}|-aXz&PI#W3TNWZ3=tm|aqNi5|MTyQGp@*(AHGD*Jz3VuC4h z6qsR-5(`vVVugFSj|W)eAs*o|F7O0T@eI%L0x$6juki+N@ec3t0Uz-RpYa7>@eSYc z13&Q#m#DMiz;wJS_DSe>PM&S%e<_gBt#g&PdA5urK?hY@FiMM_uW#sT*h1Cb`LlbyxmXg$pEBdP%)c$5@^qBc3+6rk` zhH>BETFOs16>2wuW^~=V=$G3egjyRRinF0V&8~Xa?8fFgB-Ok#>vQ8hRZUgHQc|+o zr@iA?`P7~1TBsRB`9Npm!VT6XVRQD+TwChLtOp8bW8s~4o8-io6pbyAE;u&qN2O~g d##`5z)|>G&By%M*j_nw#Phy&7e*mh{jv##d&xHU0 diff --git a/src/assets/css/font/iconfont.woff2 b/src/assets/css/font/iconfont.woff2 index ebb30523362226826c5efba94c7a12869795a3d2..3003be31c432057a6d6fd154cd08f1b50083bf48 100644 GIT binary patch literal 6800 zcmV;B8gJ!yPew8T0RR9102+`03jhEB052E-02)C60RR9100000000000000000000 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 literal 6804 zcmV;F8f)cuPew8T0RR9102-743jhEB051pt02)I80RR9100000000000000000000 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 CSvB(j diff --git a/src/assets/css/rightBoxCommon.scss b/src/assets/css/rightBoxCommon.scss index ea96c467..b5704259 100644 --- a/src/assets/css/rightBoxCommon.scss +++ b/src/assets/css/rightBoxCommon.scss @@ -25,7 +25,6 @@ height: 60px; padding: 0 20px; border-bottom: 1px solid $--right-box-border-color; - box-sizing: border-box; .header__title { font-size: 16px; @@ -231,7 +230,6 @@ border: none; border-radius: 4px; outline: none; - box-sizing: border-box; font-size: 14px; cursor: pointer; transition: background-color linear .2s, color linear .1s; @@ -302,7 +300,6 @@ height: 100%; transform: translateY(-50%); justify-content: space-between; - box-sizing: border-box; } .form-item--end-with-btn { // 末尾留出btn宽度空间的form item diff --git a/src/assets/css/tableCommon.scss b/src/assets/css/tableCommon.scss index 32ee65ec..901d3bd5 100644 --- a/src/assets/css/tableCommon.scss +++ b/src/assets/css/tableCommon.scss @@ -2,7 +2,6 @@ .list-page { height: 100%; width: 100%; - box-sizing: border-box; background-color: #f6f6f6; .main-list { @@ -45,7 +44,7 @@ height: 44px; background-color: white; border: 1px solid #E6EAED; - box-sizing: border-box; + } .top-tool-right { @@ -135,7 +134,7 @@ color: #666666; font-size: 14px; text-align: center; - box-sizing: border-box; + line-height: 40px; &.sub-list-tab--active { @@ -157,7 +156,7 @@ background-color: #e6eaed; position: absolute; z-index: 1; - box-sizing: border-box; + user-select: none; color: #5f6368; cursor: ns-resize; @@ -189,7 +188,7 @@ position: relative; padding: 0 20px; width: 100%; - box-sizing: border-box; + flex: auto; height: calc(100% - 58px); @@ -231,7 +230,6 @@ height: 49px; border-bottom: 1px solid $--right-box-border-color; background-color: white; - box-sizing: content-box; } thead { color: #333; @@ -358,7 +356,7 @@ left: 270px !important; margin-top: -3px !important; box-shadow: none; - box-sizing: border-box; + border-radius: 0; border-color: #c7c7c7; diff --git a/src/assets/css/theme.scss b/src/assets/css/theme.scss index a526384f..8f4a3749 100644 --- a/src/assets/css/theme.scss +++ b/src/assets/css/theme.scss @@ -56,9 +56,9 @@ $--color-warning: $--color-primary; //全局警告橙色 $--color-suspended: #9e9c98; //全局停用色灰色 $--color-monitor: #98AEC5; //全局停用色灰色 -$global-text-color-active: $--color-primary; // 全局文字active字色 +$--chart-single-value-icon-background-color: #E8F6FF; -$content-right-background-color: #f9f9f9; //右侧背景色 +$--content-right-background-color: #EFF2F5; //右侧背景色 /** 改变 icon 字体路径变量，并引入element-ui变量文件 **/ $--font-path: '~element-plus/lib/theme-chalk/fonts'; @import "~element-plus/packages/theme-chalk/src/index"; diff --git a/src/components/charts/ChartSingleValue.vue b/src/components/charts/ChartSingleValue.vue new file mode 100644 index 00000000..8239bec2 --- /dev/null +++ b/src/components/charts/ChartSingleValue.vue @@ -0,0 +1,49 @@ + + + + + \ No newline at end of file diff --git a/src/components/charts/ChartTable.vue b/src/components/charts/ChartTable.vue new file mode 100644 index 00000000..d161ade0 --- /dev/null +++ b/src/components/charts/ChartTable.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/src/components/charts/EchartsFrame.vue b/src/components/charts/EchartsFrame.vue new file mode 100644 index 00000000..3f9f02f0 --- /dev/null +++ b/src/components/charts/EchartsFrame.vue @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js new file mode 100644 index 00000000..a34108ec --- /dev/null +++ b/src/components/charts/chart-options.js @@ -0,0 +1,186 @@ +/** + * @author 陈劲松 + * @date 2021/6/16 + * @description chart option和一些工具 +*/ +import { calculateTextWidth } from '@/utils/tools' +const timeData = [["1988/10/4",89],["1988/10/5",95],["1988/10/6",94],["1988/10/7",86],["1988/10/8",95],["1988/10/9",93],["1988/10/10",88],["1988/10/11",80],["1988/10/12",89],["1988/10/13",83],["1988/10/14",85],["1988/10/15",83],["1988/10/16",73],["1988/10/17",79],["1988/10/18",82],["1988/10/19",77],["1988/10/20",80],["1988/10/21",75],["1988/10/22",79],["1988/10/23",75],["1988/10/24",83],["1988/10/25",85],["1988/10/26",77],["1988/10/27",74],["1988/10/28",70],["1988/10/29",80],["1988/10/30",71],["1988/10/31",73],["1988/11/1",77],["1988/11/2",78],["1988/11/3",81],["1988/11/4",89],["1988/11/5",79],["1988/11/6",76],["1988/11/7",80],["1988/11/8",77],["1988/11/9",72],["1988/11/10",68],["1988/11/11",58],["1988/11/12",54],["1988/11/13",50],["1988/11/14",41],["1988/11/15",36],["1988/11/16",43],["1988/11/17",45],["1988/11/18",54],["1988/11/19",49],["1988/11/20",45],["1988/11/21",42],["1988/11/22",41],["1988/11/23",33],["1988/11/24",23],["1988/11/25",19],["1988/11/26",18],["1988/11/27",13],["1988/11/28",4],["1988/11/29",4],["1988/11/30",-4],["1988/12/1",-4],["1988/12/2",0],["1988/12/3",4],["1988/12/4",-2],["1988/12/5",-11],["1988/12/6",-2],["1988/12/7",-1],["1988/12/8",3],["1988/12/9",6],["1988/12/10",10],["1988/12/11",10],["1988/12/12",14],["1988/12/13",10],["1988/12/14",7],["1988/12/15",1],["1988/12/16",0],["1988/12/17",1],["1988/12/18",2],["1988/12/19",-6],["1988/12/20",3],["1988/12/21",9],["1988/12/22",3],["1988/12/23",4],["1988/12/24",12],["1988/12/25",8],["1988/12/26",0],["1988/12/27",-8],["1988/12/28",-10],["1988/12/29",-13],["1988/12/30",-10],["1988/12/31",-13],["1989/1/1",-3],["1989/1/2",5],["1989/1/3",-5],["1989/1/4",-9],["1989/1/5",1],["1989/1/6",5],["1989/1/7",-1],["1989/1/8",4],["1989/1/9",9],["1989/1/10",-1],["1989/1/11",6],["1989/1/12",1],["1989/1/13",11],["1989/1/14",11],["1989/1/15",7],["1989/1/16",1],["1989/1/17",0],["1989/1/18",-5],["1989/1/19",-9],["1989/1/20",-8],["1989/1/21",-12],["1989/1/22",-6],["1989/1/23",-6],["1989/1/24",-9],["1989/1/25",-13],["1989/1/26",-23],["1989/1/27",-25],["1989/1/28",-21],["1989/1/29",-21],["1989/1/30",-22],["1989/1/31",-31],["1989/2/1",-23],["1989/2/2",-17],["1989/2/3",-19],["1989/2/4",-26],["1989/2/5",-28],["1989/2/6",-24],["1989/2/7",-26],["1989/2/8",-33],["1989/2/9",-30],["1989/2/10",-39],["1989/2/11",-37],["1989/2/12",-36],["1989/2/13",-32],["1989/2/14",-39],["1989/2/15",-30],["1989/2/16",-28],["1989/2/17",-19],["1989/2/18",-19],["1989/2/19",-20],["1989/2/20",-17],["1989/2/21",-26],["1989/2/22",-26],["1989/2/23",-32],["1989/2/24",-35],["1989/2/25",-44],["1989/2/26",-44],["1989/2/27",-48],["1989/2/28",-46],["1989/3/1",-53],["1989/3/2",-57],["1989/3/3",-50],["1989/3/4",-44],["1989/3/5",-43],["1989/3/6",-48],["1989/3/7",-58],["1989/3/8",-67],["1989/3/9",-58],["1989/3/10",-53],["1989/3/11",-52],["1989/3/12",-59],["1989/3/13",-67],["1989/3/14",-59],["1989/3/15",-51],["1989/3/16",-49],["1989/3/17",-40],["1989/3/18",-39],["1989/3/19",-48],["1989/3/20",-48],["1989/3/21",-52],["1989/3/22",-47],["1989/3/23",-53],["1989/3/24",-46],["1989/3/25",-53],["1989/3/26",-57],["1989/3/27",-67],["1989/3/28",-65],["1989/3/29",-68],["1989/3/30",-62],["1989/3/31",-53],["1989/4/1",-46],["1989/4/2",-42],["1989/4/3",-40],["1989/4/4",-45],["1989/4/5",-42],["1989/4/6",-47],["1989/4/7",-46],["1989/4/8",-55],["1989/4/9",-60],["1989/4/10",-55],["1989/4/11",-45],["1989/4/12",-50],["1989/4/13",-40],["1989/4/14",-48],["1989/4/15",-53],["1989/4/16",-51],["1989/4/17",-46],["1989/4/18",-43],["1989/4/19",-38],["1989/4/20",-44]] +const timeData2 = [["1988/10/4",69],["1988/10/5",65],["1988/10/6",64],["1988/10/7",66],["1988/10/8",65],["1988/10/9",63],["1988/10/10",68],["1988/10/11",60],["1988/10/12",69],["1988/10/13",63],["1988/10/14",65],["1988/10/15",63],["1988/10/16",73],["1988/10/17",79],["1988/10/18",62],["1988/10/19",77],["1988/10/20",60],["1988/10/21",75],["1988/10/22",79],["1988/10/23",75],["1988/10/24",63],["1988/10/25",65],["1988/10/26",77],["1988/10/27",74],["1988/10/28",70],["1988/10/29",60],["1988/10/30",71],["1988/10/31",73],["1988/11/1",77],["1988/11/2",78],["1988/11/3",61],["1988/11/4",69],["1988/11/5",79],["1988/11/6",76],["1988/11/7",60],["1988/11/8",77],["1988/11/9",72],["1988/11/10",68],["1988/11/11",58],["1988/11/12",54],["1988/11/13",50],["1988/11/14",41],["1988/11/15",36],["1988/11/16",43],["1988/11/17",45],["1988/11/18",54],["1988/11/19",49],["1988/11/20",45],["1988/11/21",42],["1988/11/22",41],["1988/11/23",33],["1988/11/24",23],["1988/11/25",19],["1988/11/26",18],["1988/11/27",13],["1988/11/28",4],["1988/11/29",4],["1988/11/30",-4],["1988/12/1",-4],["1988/12/2",0],["1988/12/3",4],["1988/12/4",-2],["1988/12/5",-11],["1988/12/6",-2],["1988/12/7",-1],["1988/12/8",3],["1988/12/9",6],["1988/12/10",10],["1988/12/11",10],["1988/12/12",14],["1988/12/13",10],["1988/12/14",7],["1988/12/15",1],["1988/12/16",0],["1988/12/17",1],["1988/12/18",2],["1988/12/19",-6],["1988/12/20",3],["1988/12/21",9],["1988/12/22",3],["1988/12/23",4],["1988/12/24",12],["1988/12/25",6],["1988/12/26",0],["1988/12/27",-8],["1988/12/28",-10],["1988/12/29",-13],["1988/12/30",-10],["1988/12/31",-13],["1989/1/1",-3],["1989/1/2",5],["1989/1/3",-5],["1989/1/4",-9],["1989/1/5",1],["1989/1/6",5],["1989/1/7",-1],["1989/1/8",4],["1989/1/9",9],["1989/1/10",-1],["1989/1/11",6],["1989/1/12",1],["1989/1/13",11],["1989/1/14",11],["1989/1/15",7],["1989/1/16",1],["1989/1/17",0],["1989/1/18",-5],["1989/1/19",-9],["1989/1/20",-8],["1989/1/21",-12],["1989/1/22",-6],["1989/1/23",-6],["1989/1/24",-9],["1989/1/25",-13],["1989/1/26",-23],["1989/1/27",-25],["1989/1/28",-21],["1989/1/29",-21],["1989/1/30",-22],["1989/1/31",-31],["1989/2/1",-23],["1989/2/2",-17],["1989/2/3",-19],["1989/2/4",-26],["1989/2/5",-28],["1989/2/6",-24],["1989/2/7",-26],["1989/2/8",-33],["1989/2/9",-30],["1989/2/10",-39],["1989/2/11",-37],["1989/2/12",-36],["1989/2/13",-32],["1989/2/14",-39],["1989/2/15",-30],["1989/2/16",-28],["1989/2/17",-19],["1989/2/18",-19],["1989/2/19",-20],["1989/2/20",-17],["1989/2/21",-26],["1989/2/22",-26],["1989/2/23",-32],["1989/2/24",-35],["1989/2/25",-44],["1989/2/26",-44],["1989/2/27",-48],["1989/2/28",-46],["1989/3/1",-53],["1989/3/2",-57],["1989/3/3",-50],["1989/3/4",-44],["1989/3/5",-43],["1989/3/6",-48],["1989/3/7",-58],["1989/3/8",-67],["1989/3/9",-58],["1989/3/10",-53],["1989/3/11",-52],["1989/3/12",-59],["1989/3/13",-67],["1989/3/14",-59],["1989/3/15",-51],["1989/3/16",-49],["1989/3/17",-40],["1989/3/18",-39],["1989/3/19",-48],["1989/3/20",-48],["1989/3/21",-52],["1989/3/22",-47],["1989/3/23",-53],["1989/3/24",-46],["1989/3/25",-53],["1989/3/26",-57],["1989/3/27",-67],["1989/3/28",-65],["1989/3/29",-68],["1989/3/30",-62],["1989/3/31",-53],["1989/4/1",-46],["1989/4/2",-42],["1989/4/3",-40],["1989/4/4",-45],["1989/4/5",-42],["1989/4/6",-47],["1989/4/7",-46],["1989/4/8",-55],["1989/4/9",-60],["1989/4/10",-55],["1989/4/11",-45],["1989/4/12",-50],["1989/4/13",-40],["1989/4/14",-48],["1989/4/15",-53],["1989/4/16",-51],["1989/4/17",-46],["1989/4/18",-43],["1989/4/19",-38],["1989/4/20",-44]] +const timeData3 = [["1988/10/4",49],["1988/10/5",45],["1988/10/6",44],["1988/10/7",46],["1988/10/8",45],["1988/10/9",43],["1988/10/10",48],["1988/10/11",40],["1988/10/12",49],["1988/10/13",43],["1988/10/14",45],["1988/10/15",43],["1988/10/16",73],["1988/10/17",79],["1988/10/18",42],["1988/10/19",77],["1988/10/20",40],["1988/10/21",75],["1988/10/22",79],["1988/10/23",75],["1988/10/24",63],["1988/10/25",65],["1988/10/26",77],["1988/10/27",74],["1988/10/28",70],["1988/10/29",60],["1988/10/30",71],["1988/10/31",73],["1988/11/1",77],["1988/11/2",78],["1988/11/3",61],["1988/11/4",69],["1988/11/5",79],["1988/11/6",76],["1988/11/7",60],["1988/11/8",77],["1988/11/9",72],["1988/11/10",68],["1988/11/11",58],["1988/11/12",54],["1988/11/13",50],["1988/11/14",41],["1988/11/15",36],["1988/11/16",43],["1988/11/17",45],["1988/11/18",54],["1988/11/19",49],["1988/11/20",45],["1988/11/21",42],["1988/11/22",41],["1988/11/23",33],["1988/11/24",23],["1988/11/25",19],["1988/11/26",18],["1988/11/27",13],["1988/11/28",4],["1988/11/29",4],["1988/11/30",-4],["1988/12/1",-4],["1988/12/2",0],["1988/12/3",4],["1988/12/4",-2],["1988/12/5",-11],["1988/12/6",-2],["1988/12/7",-1],["1988/12/8",3],["1988/12/9",6],["1988/12/10",10],["1988/12/11",10],["1988/12/12",14],["1988/12/13",10],["1988/12/14",7],["1988/12/15",1],["1988/12/16",0],["1988/12/17",1],["1988/12/18",2],["1988/12/19",-6],["1988/12/20",3],["1988/12/21",9],["1988/12/22",3],["1988/12/23",4],["1988/12/24",12],["1988/12/25",6],["1988/12/26",0],["1988/12/27",-8],["1988/12/28",-10],["1988/12/29",-13],["1988/12/30",-10],["1988/12/31",-13],["1989/1/1",-3],["1989/1/2",5],["1989/1/3",-5],["1989/1/4",-9],["1989/1/5",1],["1989/1/6",5],["1989/1/7",-1],["1989/1/8",4],["1989/1/9",9],["1989/1/10",-1],["1989/1/11",6],["1989/1/12",1],["1989/1/13",11],["1989/1/14",11],["1989/1/15",7],["1989/1/16",1],["1989/1/17",0],["1989/1/18",-5],["1989/1/19",-9],["1989/1/20",-8],["1989/1/21",-12],["1989/1/22",-6],["1989/1/23",-6],["1989/1/24",-9],["1989/1/25",-13],["1989/1/26",-23],["1989/1/27",-25],["1989/1/28",-21],["1989/1/29",-21],["1989/1/30",-22],["1989/1/31",-31],["1989/2/1",-23],["1989/2/2",-17],["1989/2/3",-19],["1989/2/4",-26],["1989/2/5",-28],["1989/2/6",-24],["1989/2/7",-26],["1989/2/8",-33],["1989/2/9",-30],["1989/2/10",-39],["1989/2/11",-37],["1989/2/12",-36],["1989/2/13",-32],["1989/2/14",-39],["1989/2/15",-30],["1989/2/16",-28],["1989/2/17",-19],["1989/2/18",-19],["1989/2/19",-20],["1989/2/20",-17],["1989/2/21",-26],["1989/2/22",-26],["1989/2/23",-32],["1989/2/24",-35],["1989/2/25",-44],["1989/2/26",-44],["1989/2/27",-48],["1989/2/28",-46],["1989/3/1",-53],["1989/3/2",-57],["1989/3/3",-50],["1989/3/4",-44],["1989/3/5",-43],["1989/3/6",-48],["1989/3/7",-58],["1989/3/8",-67],["1989/3/9",-58],["1989/3/10",-53],["1989/3/11",-52],["1989/3/12",-59],["1989/3/13",-67],["1989/3/14",-59],["1989/3/15",-51],["1989/3/16",-49],["1989/3/17",-40],["1989/3/18",-39],["1989/3/19",-48],["1989/3/20",-48],["1989/3/21",-52],["1989/3/22",-47],["1989/3/23",-53],["1989/3/24",-46],["1989/3/25",-53],["1989/3/26",-57],["1989/3/27",-67],["1989/3/28",-65],["1989/3/29",-68],["1989/3/30",-62],["1989/3/31",-53],["1989/4/1",-46],["1989/4/2",-42],["1989/4/3",-40],["1989/4/4",-45],["1989/4/5",-42],["1989/4/6",-47],["1989/4/7",-46],["1989/4/8",-55],["1989/4/9",-60],["1989/4/10",-55],["1989/4/11",-45],["1989/4/12",-50],["1989/4/13",-40],["1989/4/14",-48],["1989/4/15",-53],["1989/4/16",-51],["1989/4/17",-46],["1989/4/18",-43],["1989/4/19",-38],["1989/4/20",-44]] +const line = { + xAxis: { + type: 'time' + }, + yAxis: { + type: 'value' + }, + grid: { + left: 55, + bottom: 45, + top: 30 + }, + legend: { + show: true, + right: 30, + top: 'top', + orient: 'horizontal', + icon: 'circle', + itemGap: 20, + itemWidth: 10, + textStyle: { + padding: [0, 0, 0, 5], + fontSize: 14 + } + }, + axisLabel: { + fontSize: 14 + }, + series: [ + { + name: 'a', + type: 'line', + smooth: true, + symbol: 'none', + data: timeData + }, + { + name: 'b', + type: 'line', + smooth: true, + symbol: 'none', + data: timeData2 + } + ] +} +const lineStack = { + xAxis: { + type: 'time' + }, + yAxis: { + type: 'value' + }, + grid: { + left: 55, + bottom: 45, + top: 10, + right: 180 + }, + legend: { + show: true, + right: 30, + top: 'middle', + orient: 'vertical', + icon: 'circle', + itemGap: 20, + itemWidth: 10, + formatter: function (name) { + const width = calculateTextWidth(name) + if (width <= 110) { + return name + } else { + const index = name.length / (width / 110.0) - 3 + return name.substring(0, index) + '...' + } + }, + textStyle: { + padding: [0, 0, 0, 5], + fontSize: 14 + } + }, + axisLabel: { + fontSize: 14 + }, + series: [ + { + name: 'a', + type: 'line', + stack: 'value', + areaStyle: {}, + symbol: 'none', + data: timeData + }, + { + name: 'bbbbbbbbbbbbbbb aerapo', + type: 'line', + stack: 'value', + areaStyle: {}, + symbol: 'none', + data: timeData2 + }, + { + name: 'c', + type: 'line', + stack: 'value', + areaStyle: {}, + symbol: 'none', + data: timeData3 + } + ] +} +const typeOptionMappings = [ + { value: 11, option: line }, // 常规折线图 + { value: 13, option: lineStack }, // 常规折线图 + { value: 91, option: line }, // tab容器 + { value: 92, option: line }, // tab页 + { value: 93, option: line } // 大标题 +] +const typeCategory = { + TABLE: 'table', + ECHARTS: 'echarts', + TITLE: 'title', + SINGLE: 'singleValue' +} +export function getTypeCategory (type) { + if (isEcharts(type)) { + return typeCategory.ECHARTS + } else if (isTable(type)) { + return typeCategory.TABLE + } else if (isSingleValue(type)) { + return typeCategory.SINGLE + } else if (isTitle(type)) { + return typeCategory.TITLE + } +} +/* 饼图柱状图等 */ +export function isEcharts (type) { + return type <= 50 +} +/* 带统计的折线图 */ +export function isEchartsWithStatistics (type) { + return type === 12 +} +/* 单值 */ +export function isSingleValue (type) { + return type >= 51 && type <= 60 +} +/* 带折线图的单值 */ +export function isSingleValueWithEcharts (type) { + return type === 52 +} +/* table */ +export function isTable (type) { + return type >= 61 && type <= 70 +} +/* title、tab等 */ +export function isTitle (type) { + return type >= 91 +} +export function getOption (type) { + const mapping = typeOptionMappings.find(m => m.value === type) + return mapping && mapping.option ? mapping.option : null +} +export const layoutConstant = { + HEADER: 'header', + FOOTER: 'footer' +} +export function getLayout (type) { + const layout = [] + if (!isSingleValue(type) && !isTitle(type)) { + layout.push(layoutConstant.HEADER) + } + if (type === 12 || type === 31) { + layout.push(layoutConstant.FOOTER) + } + return layout +} +export const heightUnit = 150 diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss new file mode 100644 index 00000000..a3e64483 --- /dev/null +++ b/src/components/charts/panel.scss @@ -0,0 +1,207 @@ +.cn-panel { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(auto-fill, 50px); + grid-gap: 10px; + padding: 20px; + height: 100%; + width: 100%; + + .cn-chart { + background-color: #FFFFFF; + border: 1px solid #E7EAED; + box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02); + border-radius: 2px; + height: 100%; + width: 100%; + } + .cn-chart__echarts, .cn-chart__table { + display: flex; + flex-direction: column; + .cn-chart__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px 10px 18px; + height: 50px; + font-size: 16px; + color: #333333; + font-weight: bold; + + .header__operations { + .cn-icon-more-light { + color: #999; + } + } + } + .cn-chart__body { + flex: auto; + + .chart-drawing { + height: 100%; + width: 100%; + } + } + } + .cn-chart__single-value.cn-chart__single-value--icon-left { + display: flex; + justify-content: center; + align-items: center; + + .single-value__icon { + position: relative; + margin-right: 7.5%; + width: 72px; + height: 72px; + background-color: $--chart-single-value-icon-background-color; + border-radius: 50%; + + i { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + font-size: 28px; + color: $--color-primary; + } + } + + .single-value__content { + display: flex; + flex-direction: column; + + .content__data { + padding-bottom: 7%; + font-size: 24px; + color: #333333; + font-weight: bold; + } + .content__title { + font-size: 16px; + color: #666666; + } + } + } + .cn-chart__single-value.cn-chart__single-value--icon-right { + display: flex; + flex-direction: row-reverse; + justify-content: space-around; + align-items: center; + + .single-value__icon { + background-color: $--chart-single-value-icon-background-color; + border-radius: 50%; + position: relative; + margin-right: 7.5%; + margin-bottom: 6%; + width: 56px; + height: 56px; + + i { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + font-size: 24px; + color: $--color-primary; + } + } + + .single-value__content { + display: flex; + height: 100%; + flex-direction: column; + + .content__title { + display: flex; + align-items: center; + height: 50%; + font-size: 16px; + color: #666666; + } + .content__data { + display: flex; + padding-top: 5%; + height: 50%; + flex: auto; + font-size: 24px; + color: #333333; + font-weight: bold; + } + } + } + .cn-chart__table { + .cn-chart__header { + border-bottom: 1px solid $--content-right-background-color; + .header__operations { + display: grid; + justify-content: end; + align-items: center; + grid-template-rows: 30px; + grid-template-columns: repeat(5, auto); + grid-column-gap: 10px; + + .header__operation.header__operation--table { + display: flex; + align-items: center; + height: 22px; + color: $--color-primary; + border: 1px solid $--color-primary; + border-radius: $--border-radius-primary; + + .option__button { + display: flex; + align-items: center; + height: 100%; + padding: 0 5px; + cursor: pointer; + background-color: white; + transition: all linear .2s; + } + .option__button:hover { + background-color: #EFF2F5; + } + .option__button.icon-group-item:first-of-type:not(:last-of-type) { + padding: 0 5px 0 0; + } + .option__button.icon-group-item:last-of-type:not(:first-of-type) { + padding: 0 0 0 5px; + } + .icon-group-divide { + height: 14px; + width: 1px; + background-color: $--color-primary; + } + i { + font-size: 12px; + } + } + } + } + .cn-chart__body { + flex: auto; + overflow-y: auto; + + .el-table { + padding: 0 10px; + + &:before { + height: 0; + } + thead { + color: #333; + } + th.is-leaf, td { + border-bottom: none; + } + th { + padding-bottom: 5px; + } + td { + padding: 7px 0; + color: #333; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/common/pagination.vue b/src/components/common/pagination.vue index c58abffc..6eb7968a 100644 --- a/src/components/common/pagination.vue +++ b/src/components/common/pagination.vue @@ -26,12 +26,9 @@ min-width: 20px; height: 20px; line-height: 20px; - -webkit-box-sizing: border-box; - box-sizing: border-box; text-align: center; border: 1px solid rgba(154,154,154,0.20); border-radius: 2px; - border-radius: 2px; } :deep(.el-pagination .el-pager li.btn-quicknext), :deep( .el-pager li.btn-quickprev) { line-height: 20px; @@ -40,20 +37,20 @@ line-height: 20px; } :deep( .el-pagination .el-pager .more) { - background-color: $content-right-background-color; + background-color: $--content-right-background-color; } .btn-next, .btn-prev { - background-color: $content-right-background-color !important; + background-color: $--content-right-background-color !important; } .pagination input { - background-color: $content-right-background-color !important; + background-color: $--content-right-background-color !important; } :deep(.el-pager li.number){ font-family: NotoSansSC-Regular; color: #666666; letter-spacing: 0; font-weight:normal; - background-color: $content-right-background-color; + background-color: $--content-right-background-color; } :deep( .el-pager li.number.active){ font-family: NotoSansSC-Regular; @@ -62,7 +59,7 @@ } :deep( .el-pagination .el-pager li.active) { - background-color: $global-text-color-active; + background-color: $--color-primary; border-radius: 2px; border-radius: 2px; } diff --git a/src/components/layout/Container.vue b/src/components/layout/Container.vue index 1a93e684..72f3e026 100644 --- a/src/components/layout/Container.vue +++ b/src/components/layout/Container.vue @@ -1,6 +1,9 @@ @@ -22,10 +25,22 @@ export default { diff --git a/src/components/layout/Home.vue b/src/components/layout/Home.vue index f7bdadfd..9a00e739 100644 --- a/src/components/layout/Home.vue +++ b/src/components/layout/Home.vue @@ -1,10 +1,10 @@ diff --git a/src/components/layout/LeftMenu.vue b/src/components/layout/LeftMenu.vue index a7e52cef..0e108081 100644 --- a/src/components/layout/LeftMenu.vue +++ b/src/components/layout/LeftMenu.vue @@ -205,12 +205,10 @@ export default { padding: 13px 0 0 18px !important; height: 50px; border-right: 1px solid #202F3F; - box-sizing: border-box; background-color: #182534 !important; .logo { display: flex; - box-sizing: border-box; img { box-shadow: 0 0 2px 0 rgba(0,0,0,0.50); diff --git a/src/components/table/settings/RoleTable.vue b/src/components/table/settings/RoleTable.vue index 30668e50..0b45e313 100644 --- a/src/components/table/settings/RoleTable.vue +++ b/src/components/table/settings/RoleTable.vue @@ -59,7 +59,7 @@
- +