dashboard.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <style>
  2. * {
  3. -moz-box-sizing: border-box;
  4. -webkit-box-sizing: border-box;
  5. box-sizing: border-box;
  6. }
  7. [ng-drag] {
  8. -moz-user-select: -moz-none;
  9. -khtml-user-select: none;
  10. -webkit-user-select: none;
  11. -ms-user-select: none;
  12. user-select: none;
  13. }
  14. [ng-drag] {
  15. width: 100%;
  16. height: 300px;
  17. /*background: rgba(255, 0, 0, 0.5);*/
  18. /*color: white;*/
  19. /*text-align: center;*/
  20. /*padding-top: 40px;*/
  21. display: block;
  22. cursor: move;
  23. }
  24. /*[ng-drag].one {
  25. background: rgba(255, 0, 0, 0.5);
  26. }
  27. [ng-drag].two {
  28. background: rgba(0, 255, 0, 0.5);
  29. }
  30. [ng-drag].three {
  31. background: rgba(0, 0, 255, 0.5);
  32. }
  33. */
  34. [ng-drag].dragging {
  35. opacity: 0.5;
  36. }
  37. [ng-drop] {
  38. /*background: rgba(0, 0, 0, 0.25);*/
  39. /*text-align: center;*/
  40. display: block;
  41. position: relative;
  42. /*padding: 20px;*/
  43. /*width: 100%;*/
  44. /*height: 320px;*/
  45. float: left;
  46. margin-bottom: 10px;
  47. }
  48. [ng-drop].drag-enter {
  49. border: solid 3px red;
  50. }
  51. [ng-drop] span.title {
  52. display: block;
  53. /*position: absolute;*/
  54. top: 50%;
  55. left: 50%;
  56. width: 200px;
  57. /*height: 20px;*/
  58. margin-left: -100px;
  59. /*margin-top: -10px;*/
  60. }
  61. /* [ng-drop] div {
  62. position: relative;
  63. } */
  64. .draglist {
  65. display: inline-block;
  66. margin: 0 auto;
  67. }
  68. .StepTitle {
  69. padding-bottom: 5px;
  70. }
  71. .slide {
  72. width: 200px;
  73. height: 49px;
  74. margin: 0 auto;
  75. margin-top: -120px;
  76. overflow: hidden;
  77. display: inline;
  78. }
  79. .slide ul {
  80. text-align: left;
  81. margin: 0px;
  82. padding: 0px;
  83. width: 220px;
  84. height: 49px;
  85. }
  86. .slide li {
  87. height: 49px;
  88. line-height: 49px;
  89. text-align: left;
  90. padding: 0 10px;
  91. padding-top: 10px;
  92. font-size: 16px;
  93. list-style: none;
  94. cursor: pointer;
  95. }
  96. .slide li:hover {
  97. background: red;
  98. }
  99. </style>
  100. <div ng-controller="DashboardCtrl">
  101. <section id="page-title">
  102. <div class="row">
  103. <!-- <i class="iconfont icon-bianji pull-left"></i> -->
  104. <div class="col-sm-8">
  105. <h1 class="mainTitle">仪表盘<i tooltip='可打开大屏页面' tooltip-placement="right" class="fa ti-help-alt margin-left-10 fontcolor-five pointfont"></i></h1>
  106. </div>
  107. </div>
  108. </section>
  109. <div>
  110. <div class="container-fluid container-dash bg-white">
  111. <div class="col-sm-12">
  112. <!-- <div class="col-sm-3 borderrou-8">
  113. <div class="margin-right-5">
  114. <div class="panel panel-white row dashhover" ng-click="largedash('lefttop')">
  115. <div class="dashpad-top-bottom-28">
  116. <span class="text-center pull-left" style="width:80px">
  117. <div style="width:100%">
  118. <img src="assets/images/icon_shouye_zongti.png" />
  119. </div>
  120. </span>
  121. <span class="fontsizes-14">
  122. <p class="StepTitle" style="font-weight: bold;padding-top:0px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">运维事件总体视图</p>
  123. <p class="text-small" style="color:black;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
  124. 运维事件总体视图大屏展示
  125. </p>
  126. </span>
  127. </div>
  128. </div>
  129. </div>
  130. </div> -->
  131. <!-- <div class="col-sm-3 borderrou-8">
  132. <div class="margin-right-5 margin-left-5">
  133. <div class="panel panel-white row dashhover" ng-click="largedash('leftbottom')">
  134. <div class=" dashpad-top-bottom-28">
  135. <span class="text-center pull-left" style="width:80px">
  136. <div style="width:100%">
  137. <img src="assets/images/icon_shouye_liebiao.png" />
  138. </div>
  139. </span>
  140. <span class="fontsizes-14">
  141. <p class="StepTitle" style="font-weight: bold;padding-top:0px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">事件列表</p>
  142. <p class="text-small" style="color:black;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
  143. 事件列表大屏展示
  144. </p>
  145. </span>
  146. </div>
  147. </div>
  148. </div>
  149. </div> -->
  150. <!-- <div class="col-sm-3 borderrou-8">
  151. <div class="margin-right-5 margin-left-5">
  152. <div class="panel panel-white row dashhover " ng-click="largedash('righttop')">
  153. <div class=" dashpad-top-bottom-28">
  154. <span class="text-center pull-left" style="width:80px">
  155. <div style="width:100%">
  156. <img src="assets/images/icon_shouye_zhou.png" />
  157. </div>
  158. </span>
  159. <span class="fontsizes-14">
  160. <p class="StepTitle" style="font-weight: bold;padding-top:0px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">事件周统计</p>
  161. <p class="text-small" style="color:black;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
  162. 事件周统计图大屏展示
  163. </p>
  164. </span>
  165. </div>
  166. </div>
  167. </div>
  168. </div> -->
  169. <!-- <div class="col-sm-3 borderrou-8">
  170. <div class="margin-left-5">
  171. <div class="panel panel-white row dashhover" ng-click="largedash('rightbottom')">
  172. <div class="dashpad-top-bottom-28">
  173. <span class="text-center pull-left" style="width:80px">
  174. <div style="width:100%">
  175. <img src="assets/images/icon_shouye_yue.png" />
  176. </div>
  177. </span>
  178. <span class="fontsizes-14">
  179. <p class="StepTitle" style="font-weight: bold;padding-top:0px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">事件月统计</p>
  180. <p class="text-small" style="color:black;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
  181. 事件月统计图大屏展示
  182. </p>
  183. </span>
  184. </div>
  185. </div>
  186. </div>
  187. </div> -->
  188. <!-- <div class="col-sm-3">
  189. <div class="panel panel-white no-radius text-center" ng-click="largedash('leftbottom')">
  190. <a class="panel-body">
  191. <img src="assets/images/list.png" />
  192. <h2 class="StepTitle" style="font-weight: bold;">事件列表</h2>
  193. <p class="text-small" style="color:black">
  194. 事件列表大屏展示
  195. </p>
  196. </a>
  197. </div>
  198. </div>
  199. <div class="col-sm-3">
  200. <div class="panel panel-white no-radius text-center" ng-click="largedash('righttop')">
  201. <a class="panel-body">
  202. <img src="assets/images/week.png" />
  203. <h2 class="StepTitle" style="font-weight: bold;">事件周统计</h2>
  204. <p class="text-small" style="color:black">
  205. 事件周统计图大屏展示
  206. </p>
  207. </a>
  208. </div>
  209. </div>
  210. <div class="col-sm-3">
  211. <div class="panel panel-white no-radius text-center" ng-click="largedash('rightbottom')">
  212. <a class="panel-body">
  213. <img src="assets/images/month.png" />
  214. <h2 class="StepTitle" style="font-weight: bold;">事件月统计</h2>
  215. <p class="text-small" style="color:black">
  216. 事件月统计图大屏展示
  217. </p>
  218. </a>
  219. </div>
  220. </div> -->
  221. </div>
  222. </div>
  223. <form ng-submit="vm.submit(vm.model,'expand-right')">
  224. <div class="margin-top-10 margin-bottom-10">
  225. <!-- <div class="col-sm-3 margin-bottom-10" ng-if="!roleidcode">
  226. <div class="row">
  227. <div class="margin-right-5">
  228. <div class="bg-wechatdash text-center" ng-click="inWechat()">
  229. <div class="fontsizes-18 dashpad-15 fontcolor-six fontweight-600">
  230. <div>微信报障:<span class="fontsizes-28">{{dashboardcount.wechatWarningCount}}</span></div>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. <div class="col-sm-3 margin-bottom-10" ng-if="!roleidcode">
  237. <div class="row">
  238. <div class="margin-right-5 margin-left-5">
  239. <div class="bg-wechatdash text-center" ng-click="inIncident()">
  240. <div class="fontsizes-18 dashpad-15 fontcolor-six fontweight-600">
  241. <div>事件管理:<span class="fontsizes-28">{{dashboardcount.incidentCount}}</span></div>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. <div class="col-sm-3 margin-bottom-10" ng-if="!roleidcode">
  248. <div class="row">
  249. <div class="margin-right-5 margin-left-5">
  250. <div class="bg-wechatdash text-center" ng-click="inInspect()">
  251. <div class="fontsizes-18 dashpad-15 fontcolor-six fontweight-600">
  252. <div>巡检管理:<span class="fontsizes-28">{{dashboardcount.inspectionCount}}</span></div>
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. <div class="col-sm-3 margin-bottom-10" ng-if="!roleidcode">
  259. <div class="row">
  260. <div class="margin-left-5">
  261. <div class="bg-wechatdash text-center" ng-click="inKnowledge()">
  262. <div class="fontsizes-18 dashpad-15 fontcolor-six fontweight-600">
  263. <div>知识库管理:<span class="fontsizes-28">{{dashboardcount.knowledgedata}}</span></div>
  264. </div>
  265. </div>
  266. </div>
  267. </div>
  268. </div> -->
  269. </div>
  270. <div ng-repeat="field in vm.fields" ng-if="!field.hide" ng-drop="true" class={{field.className}} ng-drop-success="onDropComplete($index, $data,$event)">
  271. <div>
  272. <!-- <div class="headfont listheader margin-left-15 margin-right-15" ng-class="{{field.className}}">{{field.templateOptions.label}}
  273. <span class="dropdown pull-right" dropdown on-toggle="toggled(open)">
  274. <a href class="dropdown-toggle" dropdown-toggle ng-click="more(field)">
  275. <i class="ti-settings margin-right-5"></i>更多
  276. </a>
  277. </span>
  278. </div> -->
  279. <div formly-field="" removeClass class="formly-field ng-scope ng-isolate-scope formly-field-ui-ngtable row" options="field" model="field.model || field" original-model="field" fields="field" ng-if="vm.fields.length" form="theFormlyForm" form-id="formly_1"
  280. form-state="options.formState" form-options="options" index="$index">
  281. </div>
  282. </div>
  283. </div>
  284. <!--<div class="col-xs-12 margin-top-30 margin-bottom-30">
  285. <button type="button" ladda="ldloading.sm" class="col-md-offset-10 btn btn-primary ladda-button" translate="form.button.SUBMIT" ng-click="submit(vm)">Submit</button>
  286. </div>-->
  287. <!--<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" ng-if="vm.fields.length">
  288. <div></div>
  289. <div class="col-xs-12 margin-top-30 margin-bottom-30">
  290. </div>
  291. </formly-form>-->
  292. </form>
  293. </div>
  294. </div>
  295. <!-- ng-disabled="disablebton " -->