index.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569
  1. <template>
  2. <div>
  3. <div class='fixed-header'>
  4. <homebar />
  5. </div>
  6. <div class="dashboard-editor-container">
  7. <el-row :gutter="20">
  8. <el-col :span="12">
  9. <el-card class="box-card" style="height: 197px;">
  10. <div class="flow-center-wrapper">
  11. <div class="my-todo">
  12. <div class="todo-wrapper">
  13. <div class="image-wrapper">
  14. <img class="todo-image"
  15. src="data:image/png;base64,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"
  16. alt="">
  17. </div>
  18. <div class="todo-count">
  19. <div class="todo-count-text">我的待办</div>
  20. <div class="todo-count-number">1</div>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="x-divider x-divider-vertical wrapper-divider"></div>
  25. <div class="flow-steps">
  26. <div class="step-wrapper">
  27. <img class="step-image"
  28. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAABGlBMVEUAAAAAAP8AgP8Aqv8AgP8zmf8qgP8ggP8Xi/8qlf8iiP8gj/8cgPEdif8kif8ikP8hjPchjP8ni/cjh/gjjvgmjPkji/kiiPkijv8jjPoiifoki/sjivgjiPgki/gkifgjifwlivkkjPwkifolivwji/oljPolivojivski/skifkki/kjjPkli/kkivokivokifglivolifkli/oki/oki/kkivskivklivkki/kjivoli/ojivojifgji/gji/okivokivkkivkkivkkivkkivkkivkki/okivkkivkkivkkivgkivgkivkjivkkivokivokifkkivojivkkivkkivokivkkivojivkjivkkivkkivkki/okivmdXVYCAAAAXXRSTlMAAQIDBAUGCAsMDxASGhweHx8hJCQoLC0tMzQ5SElNTlBTVF1gZWZvdHmAhomKjI6PkqCgoaKqrK64u8HCw8PDxMjL09TW19vi4+Tq6+3v7/Dz9Pb39/r6/P39/v7dYDghAAACJElEQVRYw+2YWTMDQRSF7zDELrGMMIg1CGaQCCJ2IvYlCYlx///f8KB40Hd6breOKlU5r3Pqq5ma7nMXgJZa+ifqijuu68S7TLB6Un6hHCAiIgblgp/q+Q2tN12s4w/Vi+leTdxotoakatlRDdxwvoGhauSHFXGxTBWlqmZiKrxkCSNVSvJ5ixVkqLLIxFkeMuVZHJ6dQ7ZyNuP9tlFBueh39FBJXuT/QEVF/JlkRRVYkZ6eWAmVVZKd8AxqKCO5v1UdYDX8XudRS/nQvGroARthaZal3I9LE/NnEcRsSD6TeToJAPbykxRYozM8TXmvP58N7EiJaRJ4SFnPv55OXkqARbK+1aVAaYjXqVqYQjkQYGQvlJgigH4kEGDuKgToE8ACAwjd3itpKxDAMgcIMHZE2cpE/xLwgGAt3Ii2QOx7EsgEAvTtir6E4HL4QGi7EHyOYHIVgLAm+NzfAbcYQJVPHn9mfHKcD5x7FH1x/WPTufnOOjbcgz10yjzYvKsHM/fsq8cJhw4/4IdDdHzB4IlKfEUFLMD0nVLAQlEOtNcDtRJAF6lv4MCxcpEiy+gXcOpWvYyShf7BAgBoX33TKPR0KzIPAP37eq0I2Sy9bMyu3Go2S+bbOeMNp/mW2HjTbn6sMD/4gJVT4TFGM7AVhr1txvBofrw1P4A3YUVgfolhfs3ShEXQ56rqQFxVHWivqpqwTPvuexKO6zoJI+u+llr6C30AImnPnDDxrmkAAAAASUVORK5CYII="
  29. alt="">
  30. <div class="step-text">我发起的</div>
  31. </div>
  32. <div class="step-wrapper">
  33. <img class="step-image"
  34. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAACFlBMVEUAAAAAAP8A//8AgP8Aqv+qqv8AgP+Av/8Amf+ZzP8qgP8ggP+fv/+Oxv8agP8Xi/8ui+iL0f8VgOoqlf8niesnif+Stu0gj/8eh/+Oxv+PwvUnif8mhPYkifYiiPciiP8hjP8oh/coj/+Pw/gjjvgiivghifgkjPkji/mRxfmQyP8kh/okjfokivqRw/qQw/okifoki/Yki/sjiPsjjfsjivsijPuQw/sljPuQwfski/cki/sli/sljPuTxPySw/wkifgjifwlivkjiPkmi/mSw/wkifojivojjPojivolivqQxPqQwvokifqRw/qSxPojivokivgki/ski/uQw/uRw/uSxPskivkjifkli/kkifkki/uRwvmRxPuTxPskivsjivkli/kjivgjivokivoki/okivoki/qQw/oki/iRw/okivokivkkivqRxPwli/kki/kkivmRwvskivkkivkkivmSwvskivmRw/skivmRw/skifkkivkkivojivokivgkivoki/oki/oji/okivoki/okivokivokifkki/kki/ojivokivkkivkkivokivkkivkkivkjifkkivkkivkkivkkivkkivkjivkkifokivokivgkivokifgkivoli/ojivokivokivokivkkivoki/ojivojivkkivkkivkkivokivkkivokivkjivkkivkki/okivmSNfP3AAAAsXRSTlMAAQECAwMEBAUFBggICQoLCwsMDA0NDhAREhkaGxweHh8gICIkJScqLCwuMTEyMzc4OTk6Ojs8PD4+QEBERUlNTlBTWFhZXV5fYGBjZWprbG1xcnd4e36BgoSGhoaGhoeJipCQlJWWlpqcnKSlpaWnqaqsr7CxsbKys7O2t7q7vr+/wcPExcbP0NDQ0dLT09fa3t/h4uPk5efo6Onp6urt7u7v8fHx9fb29/f4+Pr8/v7IYf4CAAACFElEQVRYw2NgGAWjYBQMGsCq5xMaG4cXhPlZ8hJtnn5GFTEgz55I81wrqogEIezEmGdXRTzwJ8I8ySISDKzSImygNynmVcUQNjCLJAPLxAiZx1NFGtAkZKAUiQaaEzKQU5k0IDgM8jGXqpkVscBCXYCQcRq5SzaSAtbU2OAzjjF83UaSQT4fbgPTNpIDmrhwmee+kTyQjMM87mlkGrhWBbuBjhvJBRHYDUwh28A27AaWkm3gVOwGNpBt4FLsBjYSqX1KyzxqGrjAgYGBzXct1QxcbQJWG0gtAze4Q9PsMioZGA9TPIE6BpYwM1DVhV1CMLXUCcOZ8jClJqvJM3DhImTeKiOYSoVZZKXDDkMGBoN2RAS7wRQKd5OVsCeLgwSFamH8aJg65lLysl4QtNIqgHCLmWDqEsjMy7YwB6WDeJ38MGUeG8g00BMuEbFx4ww5GMd0NbmlTQvcjwwBKwxgTMU55BdfqQgTZWEMkR5KysMcDnQlzOWUFbDV6HV4IqUldqsEigovyquAPmkkBWarqVCnTFKFyyvNpUolNVsXKi3aS6Vab7E1JIIrqVaNrnQBZelMatbLzVFJE2lY0Q+cgXVkGzgfu4HZZBvYj93AYLINLMBuoNp6cg10xtHILiDXxyw4DJSZTpZ5q41x9lN0yDFxuROerpRMAcnh2KyNv7OnFpxT10gsqC+MNBgdNhsFo2AwAAAtOPG9B304zAAAAABJRU5ErkJggg=="
  35. alt="">
  36. <div class="step-text">我处理的</div>
  37. </div>
  38. <div class="step-wrapper flow-ccuser-my">
  39. <img class="step-image"
  40. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAUKADAAQAAAABAAAAUAAAAAAx4ExPAAAJOklEQVR4Ae2cf2wcRxXH5+3t7iX9KZJUFKkRLdhnV86PWjkB+dFiV5VoU5q2lFRQKkFRRURFQ5OcLaU/IEFEqPbZVKGhqaIq+aNqSakSWgkQCAjqH/x0AYekdXyOmkRNIkgKdSB2bn89vmPlzOW6dze7t+ds7FvptLuzM29mPvvmzZu3YwvROBoEGgQaBBoEGgQaBBoELkkCdEm2OuJGN/dYN0HkzYKEpevG62+vo5OqVcxogK19nHI9exsz3zYJjMglpsdz3UbPZFqFixkJsGMnzzp+ynpCCOpmwaYfHy0hvjC8Ibnb71lxmlZ8MxOuU33OSsA7yEI8WQ6e5OC51K3CQ1fJNB3yNG3l68Q5q99z3dUq/SESTSr5pj3Ajn2snxhw1nLe3gytu0IFykQexpSicExrgK199rLjA/ZzmCQWKbC4MAuJwxcm+N9NS4Ctz/JcZ9z+nuPxw4JZSZNK8TCLQ6VpfvfTCiA0jVJZ+yvumN0rBM/167BqGhEPq+SdNgBb+/MLm7P2c9C45Sodr5YH9nJmAGzbxldYY9a3XIfWQesiUwgtQdMfYKrXudc6a22FtlwHeNWUKtDzy8hQAhjKwAZqSR0yt/TyDR5bzwLZyjqIxwKF/jnSZX5YRXZkKq9SWa152l5h0z7mZFy2n4Ss2bXKK1ceWqWkfbL8JQOwpde+1Tpi/RBa11Ku45Gl8zQC2NbD11rCzrrsfSkyQFUFkZIPKMXENpiwiVlrylqP5IU9hEX/FMKDCdTUZmAJMJaTSEu/lXZdsR0+3RLZyCk/NLNtJENvqdQbKxu45Hm+evQ/9hbXEV+HW3KRRgd5wlRbB0vAsQHY3Jt/YHTU7gc4JfdBRTvC5CHBR3JrKa9a9qIDTGW51eOJsPqtUTvDqhCK8yH0oOzCyHIXDeDSfp592rWeYM/uAjjfsHpxx6bqmoT6BHLRADb3OncC3g8QMroheq2jUXTsXchtCwOdAviAUw5wQR/Pz3vWM8zu58J0rloZhOEPC6btTNwTemlM6j7glAGUYfXjf3Yey3s23DtxeTUQYZ4T0Rua4Ec94l/D/QntnhmmHsgGhq5ItZMIcK7wmGWcboFqmaD54PjumqcZj5xy7Z+hno6g5SfzE43nMsbleBnKoZ26TSKYXedhgnga8B6qRSMmO+d3MdFR2ohOP8299rdrgiflsxgJAk8WiRygDKsjMvxVZrsHS7A5oW2RbF2FAx09S6Q9OJzRf5Lqt2/2XH6qQnalR3gfymvggsBIAbb05hcBnlyCLVUeA4WWBDjD7ryLdcqq3Ab9r/IDkjtmvYTiiQAifLPCPgeyf1JIJABlWD0/Zm/2WKzFOIhEpm8PJxJpQDeMVYUNQO64tRMvCxHp2g8tQBChUFvN683mHuc+fJMYgtatx5CtKzy4Ka9eoxu3FOA1Z61vQmvuKnSm1rPGwZxoWV/oDjf18McFIazO7u31snPFQABvy3DGfKpg5Jv6rHbhCqUdVMVyKl0nEnpgGxjYjcEekyTlnW5MFo9juM6q1KAongFYHpr98EhX8sWCvAmTcdb6C+6bC2m1nrGEey/Xbc4LKieQBqZ67du8vIX9dCIVtKIw+dGpUwmN7hnaYP6uuLw9hu+/EcKTsoMGEQrtUQI4sfB37B3e1IbVDyYM47ND6+hIobHynMpaX/Y8frA4LYprmIjAw1fWqzSJnHKsH2EYTV1YncTPxSxjWSm8lme4Bdq/LQpgpTKwKzWwC6MEsPX7fD0yriqtsF73sHlb2z9q3jWyls4U1yFtr2fbu2F767KWhv8fCmDVIex59tXFHanXNeydg/HwaC5jbs/5VZK3s4C32O9RFGkJ3Q0FsOoQXjzfOICp+kQUjSwrg+h9aN4dEp5fnlTWuQd+5jf8nkWShjXctR8yfd9bNflVAf74fnI5QffJab6asDDPZQxPI2PpcJfxK7/yMobI7L3g9yy6ND7224foXBh5VQFKoSMbzD/M0435QkusRoex9472QWMusFFhKoeMNxKzzU8OZ2jIr/zqVzhxzrNfxtCd4/c8qrSwE4isv6oNLDTy9+tpHNevnv9hRDHd2C+aXc9KowFprEfT+MrcjnSlfciAt/Oqq4w1b64hu1BH6flvR63NWOUsL02P+h6BiVD2T7ZDGWBpowFABlxkxfL3kny+CbsJXuwTrZpnp9GoNFyONJJvAu2ijUDkwRxszHVV/kMWuRfGZd4og3T1PoJ+ByluT+ClXHFhlWs5DPcftdpcjdKaJ5aQ0H55qEt/rVJZuCzXUN4axAv4SKV8UT3TNe32oYzxizDy6g4waKOkaUCU5adQvDuClg2bP0Hmxw510TthyitNImEEhy3T0u8CHHWELR+0HExR/osZcTRouUL+2GmgbJjcSGkdcz6FIdxJzJ2YnHDNyUKjozzDq3gr15UM9Q1ZtiOWAEsByT8OPHnaWYZgRicTdaLRnwBQozRfmHsA3AuAob9Th56FwzRWpcyev+dvJMc8eW87vV/If97J/Q3u5U9gF9dlo6POCkFeB1yoTiTBjQobDdfelDLDHrHTwD2D+S3ozCJs9D7KwtuPVcjglWL2gc8sprPlOtnyAl/J/3ZXIDreiTlIDvl2uE4KH5no3CzTuP7AY/SPcrKrpccR4HfR6AuDBiQ84fFhbB0dJF0MJk3j7ZXN5begTewzPOPeok0MeQGoeCEl+w3l5AF5D+Qy+p5qkCo9jx3Avfvz30GH2ys2muj0/IXG19JUfhVTXL6tn+fYrvtp2NDlsHlYFvIJM2HuOrieRorzhbmOnQ3EuqP60oO8l1XhSSgA9S+c9p7/yaTIjtj5gVhWVQSIoTcyuCDpG7mJjEoAQbEDiLZXBOgKfn4TYR9zTI74ASSsmMsdzPs+vyjpG/oqV6Te6bGzgfh3D/4aSNq4o+u76g0kqPzYaSBmYF+AmEF33982MRkE7WNd88cOIGkfHMLYsnviPdt8va4kQgqPHUB2PziEddJ2rEmr+XwhOYQuFjuApRoIT3/g7oXmQOge1rlg7ABizTbZZawaHC1p7phMiOFF7AAi/vd/goJeu7uV6vtNusaXEjuACUr8CcMWMzGftP9r7K6xfzOz+J4/npm7c987dd97ODPpNnrdINAg0CDQINAg0CDQINAgEAWB/wFby0G6nREcUQAAAABJRU5ErkJggg=="
  41. alt="">
  42. <div class="step-text">抄送我的</div>
  43. </div>
  44. <!-- <div class="step-wrapper flow-new-launch">
  45. <img class="step-image" src="data:image/png;base64,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" alt="">
  46. <div class="step-text">发起流程</div>
  47. </div> -->
  48. </div>
  49. </div>
  50. </el-card>
  51. </el-col>
  52. <el-col :span="12">
  53. <el-card class="box-card" style="height: 197px; font-size: 16px;">
  54. <div class="card-title">
  55. <div class="title-left">
  56. 消息
  57. </div>
  58. <div class="title-right">
  59. <el-button type="text" @click="goMyList">更多</el-button>
  60. </div>
  61. </div>
  62. <div class="card-content">
  63. <div class="step-list">
  64. <div class="step-item" v-for="(item, index) in notifyMessageList" :key="index">
  65. <div class="step-title-left">
  66. {{ item.templateContent }}
  67. </div>
  68. <div class="step-title-right">
  69. {{ item.createTime }}
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </el-card>
  75. </el-col>
  76. </el-row>
  77. <app-list style="margin-top: 18px;" />
  78. </div>
  79. <el-dialog title="联系我们" :visible.sync="dialogVisible" width="30%">
  80. <img width="100%" src="@/assets/images/wx.jpg" alt="">
  81. </el-dialog>
  82. <el-dialog title="新建应用" :visible.sync="dialogVisibleApp" width="50%">
  83. <div class="scene-container">
  84. <div class="scene-wrapper">
  85. <!-- <div class="title-wrapper">
  86. <div class="icon-text">
  87. <i class="el-icon-thumb title-icon"></i>
  88. <span class="title-text">猜你想要</span>
  89. </div>
  90. </div> -->
  91. <div class="grid-row">
  92. <div class="grid-col">
  93. <div class="card-item create-blank-app" @click="innerVisible = true">
  94. <i class="el-icon-plus create-icon"></i>
  95. <div class="create-text">创建空白应用</div>
  96. </div>
  97. </div>
  98. <div class="grid-col">
  99. <div class="card-item scene-item" @click="confirmAdd()">
  100. <img src="https://g.jdycdn.com/app/pc/fc125acb88ce.png">
  101. <div class="item-info">
  102. <div class="item-title">任务</div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <el-dialog
  110. width="30%"
  111. title="创建空白应用"
  112. :visible.sync="innerVisible"
  113. append-to-body>
  114. <el-form :model="form" label-position="top" label-width="80px" size="small">
  115. <el-form-item label="名称">
  116. <el-input v-model="form.name" placeholder='给应用命名,例如‘‘客户管理系统’’'></el-input>
  117. </el-form-item>
  118. <el-form-item label="地址">
  119. <el-input v-model="form.url" placeholder='应用访问地址,例如‘‘https://www.baidu.com/’’'></el-input>
  120. </el-form-item>
  121. </el-form>
  122. <div slot="footer" class="dialog-footer">
  123. <el-button @click="innerVisible = false" size="small">取 消</el-button>
  124. <el-button type="primary" @click="innerVisible = false" size="small">确 定</el-button>
  125. </div>
  126. </el-dialog>
  127. </el-dialog>
  128. <el-dialog
  129. width="30%"
  130. title="编辑"
  131. :visible.sync="editVisible">
  132. <el-form :model="form" label-position="top" label-width="80px" size="small">
  133. <el-form-item label="名称">
  134. <el-input v-model="form.name" placeholder='给应用命名,例如‘‘客户管理系统’’'></el-input>
  135. </el-form-item>
  136. <el-form-item label="地址" v-show="form.type==1">
  137. <el-input v-model="form.url" placeholder='应用访问地址,例如‘‘https://www.baidu.com/’’'></el-input>
  138. </el-form-item>
  139. </el-form>
  140. <div slot="footer" class="dialog-footer">
  141. <el-button type="danger" @click="editVisible = false" size="small" style="float: left;">删 除</el-button>
  142. <el-button @click="editVisible = false" size="small">取 消</el-button>
  143. <el-button type="primary" @click="editVisible = false" size="small">确 定</el-button>
  144. </div>
  145. </el-dialog>
  146. </div>
  147. </template>
  148. <script>
  149. import { getUnreadNotifyMessageList } from "@/api/system/notify/message";
  150. import Homebar from '@/layout/components/Homebar'
  151. import AppList from '@/components/AppList'
  152. import TopNav from '@/components/TopNav'
  153. import PanelGroup from './dashboard/PanelGroup'
  154. import LineChart from './dashboard/LineChart'
  155. import RaddarChart from './dashboard/RaddarChart'
  156. import PieChart from './dashboard/PieChart'
  157. import BarChart from './dashboard/BarChart'
  158. export default {
  159. name: 'Index',
  160. components: {
  161. Homebar,
  162. AppList,
  163. TopNav,
  164. PanelGroup,
  165. LineChart,
  166. RaddarChart,
  167. PieChart,
  168. BarChart
  169. },
  170. data() {
  171. return {
  172. form: {
  173. type:1,
  174. name: '',
  175. url: '',
  176. },
  177. // 遮罩层
  178. loading: false,
  179. // 列表
  180. notifyMessageList: [
  181. {
  182. templateContent: 'Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。',
  183. createTime: '2024-07-02'
  184. },
  185. {
  186. templateContent: 'Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。',
  187. createTime: '2024-07-02'
  188. },
  189. {
  190. templateContent: 'Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。',
  191. createTime: '2024-07-02'
  192. },
  193. // {
  194. // templateContent:'Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。',
  195. // createTime:'2024-07-02'
  196. // },
  197. ],
  198. src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
  199. dialogVisible: false,
  200. dialogVisibleApp: false,
  201. innerVisible:false,
  202. editVisible:false,
  203. }
  204. },
  205. computed: {
  206. topNav: {
  207. get() {
  208. return this.$store.state.settings.topNav
  209. }
  210. }
  211. },
  212. created() {
  213. },
  214. methods: {
  215. confirmAdd(){
  216. this.$confirm('确定添加此应用?', '添加应用', {
  217. confirmButtonText: '确定',
  218. cancelButtonText: '取消',
  219. }).then(() => {
  220. this.$message({
  221. type: 'success',
  222. message: '添加成功!'
  223. });
  224. }).catch(() => {
  225. });
  226. },
  227. editApp(val){
  228. console.log(val);
  229. this.form.type = val.type;
  230. this.form.name = val.title;
  231. this.form.url = val.path;
  232. this.editVisible = true;
  233. },
  234. openAppList() {
  235. this.dialogVisibleApp = true;
  236. },
  237. getList: function () {
  238. this.loading = true;
  239. getUnreadNotifyMessageList().then(response => {
  240. this.notifyMessageList = response.data;
  241. this.loading = false;
  242. });
  243. },
  244. goMyList: function () {
  245. this.$router.push({
  246. name: 'MyNotifyMessage'
  247. });
  248. },
  249. fatherMethod() {
  250. this.dialogVisible = true;
  251. },
  252. }
  253. }
  254. </script>
  255. <style>
  256. .el-badge__content.is-fixed {
  257. top: 10px;
  258. /* 保证徽章的位置 */
  259. }
  260. .el-dialog__header {
  261. border-bottom: 1px solid #D7D9DC;
  262. }
  263. .el-dialog__footer{
  264. border-top: 1px solid #D7D9DC;
  265. }
  266. </style>
  267. <style lang="scss" scoped>
  268. .scene-container {
  269. // max-height: 500px;
  270. height: 500px;
  271. .scene-wrapper {
  272. margin-bottom: -10px;
  273. .title-wrapper {
  274. align-items: center;
  275. display: flex;
  276. height: 20px;
  277. justify-content: space-between;
  278. line-height: 20px;
  279. margin-bottom: 12px;
  280. .icon-text {
  281. align-items: center;
  282. display: flex;
  283. .title-icon {
  284. color: #525967;
  285. font-size: 16px;
  286. margin-right: 4px;
  287. }
  288. .title-text {
  289. color: #141e31;
  290. font-size: 14px;
  291. font-weight: 500;
  292. }
  293. }
  294. }
  295. .grid-row {
  296. margin-left: -10px;
  297. margin-right: -10px;
  298. row-gap: 0px;
  299. display: flex;
  300. flex-flow: row wrap;
  301. .grid-col {
  302. min-height: 1px;
  303. position: relative;
  304. padding-left: 10px;
  305. padding-right: 10px;
  306. margin-bottom: 20px;
  307. display: block;
  308. flex: 0 0 25%;
  309. max-width: 25%;
  310. .card-item {
  311. height: 120px;
  312. border-radius: 8px;
  313. cursor: pointer;
  314. overflow: hidden;
  315. position: relative;
  316. transition: all .2s;
  317. }
  318. .card-item:hover {
  319. box-shadow: 0 6px 18px 2px rgba(0, 0, 0, .06);
  320. transform: translateY(-6px);
  321. }
  322. .scene-item {
  323. img {
  324. height: 100%;
  325. width: 100%;
  326. }
  327. .item-info {
  328. bottom: 0;
  329. color: #fff;
  330. left: 0;
  331. padding: 0 20px;
  332. position: absolute;
  333. right: 0;
  334. top: 0;
  335. .item-title {
  336. font-size: 16px;
  337. font-weight: 500;
  338. line-height: 26px;
  339. margin-top: 20px;
  340. overflow: hidden;
  341. text-overflow: ellipsis;
  342. white-space: nowrap;
  343. }
  344. }
  345. }
  346. .create-blank-app {
  347. background-color: #f5f6f8;
  348. border: 1px solid #ebecee;
  349. text-align: center;
  350. .create-icon {
  351. color: #00b899;
  352. font-size: 32px;
  353. line-height: 32px;
  354. margin-top: 30px;
  355. }
  356. .create-text {
  357. color: #525967;
  358. font-size: 14px;
  359. line-height: 20px;
  360. margin-top: 8px;
  361. }
  362. }
  363. }
  364. }
  365. }
  366. }
  367. .card-title {
  368. display: flex;
  369. justify-content: space-between;
  370. align-items: center;
  371. }
  372. .card-content {
  373. // padding: 10px;
  374. .step-list {
  375. margin: 0 10px;
  376. .step-item {
  377. margin: 10px 0;
  378. display: flex;
  379. justify-content: space-between;
  380. align-items: center;
  381. .step-title-left {
  382. max-width: 70%;
  383. overflow: hidden;
  384. text-overflow: ellipsis;
  385. white-space: nowrap;
  386. }
  387. }
  388. }
  389. }
  390. .fixed-header {
  391. position: fixed;
  392. top: 0;
  393. right: 0;
  394. z-index: 9;
  395. width: 100%;
  396. transition: width 0.28s;
  397. }
  398. .dashboard-editor-container {
  399. //margin-top: 50px;
  400. // padding: 32px;
  401. // background-color: rgb(240, 242, 245);
  402. // position: relative;
  403. // height: 100%;
  404. background: #f5f6f8;
  405. bottom: 0;
  406. left: 0;
  407. overflow: auto;
  408. position: absolute;
  409. right: 0;
  410. top: 60px;
  411. padding: 32px;
  412. }
  413. .flow-center-wrapper {
  414. background: #fff;
  415. border-radius: 6px;
  416. display: -webkit-box;
  417. display: -ms-flexbox;
  418. display: flex;
  419. align-items: center;
  420. height: 100%;
  421. min-height: 160px;
  422. position: relative;
  423. width: 100%;
  424. }
  425. .my-todo {
  426. border-radius: 6px;
  427. height: 100%;
  428. padding: 20px;
  429. width: 32%;
  430. }
  431. .flow-center-wrapper .my-todo .todo-wrapper {
  432. -webkit-box-align: center;
  433. -ms-flex-align: center;
  434. -webkit-box-pack: center;
  435. -ms-flex-pack: center;
  436. align-items: center;
  437. border-radius: 6px;
  438. cursor: pointer;
  439. display: -webkit-box;
  440. display: -ms-flexbox;
  441. display: flex;
  442. height: 100%;
  443. justify-content: center;
  444. }
  445. .flow-center-wrapper .my-todo .todo-wrapper .image-wrapper {
  446. height: 64px;
  447. margin-right: 40px;
  448. width: 64px;
  449. }
  450. .flow-center-wrapper .my-todo .todo-wrapper .image-wrapper .todo-image {
  451. height: 100%;
  452. width: 100%;
  453. }
  454. .flow-center-wrapper .my-todo .todo-wrapper .todo-count {
  455. height: 64px;
  456. }
  457. .flow-center-wrapper .my-todo .todo-wrapper .todo-count .todo-count-text {
  458. font-size: 18px;
  459. font-weight: 500;
  460. height: 24px;
  461. line-height: 24px;
  462. margin-bottom: 5px;
  463. }
  464. .flow-center-wrapper .my-todo .todo-wrapper .todo-count .todo-count-number {
  465. font-size: 36px;
  466. font-weight: 700;
  467. height: 36px;
  468. line-height: 36px;
  469. }
  470. .flow-center-wrapper .wrapper-divider {
  471. height: 120px;
  472. left: 32%;
  473. margin: 0;
  474. position: absolute;
  475. top: 20px;
  476. }
  477. .x-divider-vertical {
  478. border: solid #EBECEE;
  479. border-width: 0 0 0 1px;
  480. display: inline-block;
  481. height: .9em;
  482. margin: 0 15px;
  483. vertical-align: middle;
  484. }
  485. .flow-center-wrapper .flow-steps .step-wrapper {
  486. -webkit-box-orient: vertical;
  487. -webkit-box-direction: normal;
  488. -webkit-box-align: center;
  489. -ms-flex-align: center;
  490. -webkit-box-pack: center;
  491. -ms-flex-pack: center;
  492. align-items: center;
  493. border-radius: 12px;
  494. cursor: pointer;
  495. display: -webkit-box;
  496. display: -ms-flexbox;
  497. display: flex;
  498. -ms-flex-direction: column;
  499. flex-direction: column;
  500. height: 100%;
  501. justify-content: center;
  502. line-height: 0;
  503. width: 23%;
  504. }
  505. .flow-center-wrapper .flow-steps .step-wrapper .step-image {
  506. height: 40px;
  507. margin-bottom: 16px;
  508. width: 40px;
  509. }
  510. .flow-center-wrapper .flow-steps .step-wrapper .step-text {
  511. font-size: 16px;
  512. height: 22px;
  513. line-height: 22px;
  514. white-space: nowrap;
  515. }
  516. .flow-center-wrapper .flow-steps {
  517. -webkit-box-pack: justify;
  518. -ms-flex-pack: justify;
  519. border-radius: 6px;
  520. display: -webkit-box;
  521. display: -ms-flexbox;
  522. display: flex;
  523. height: 100%;
  524. justify-content: space-between;
  525. padding: 20px 20px 20px 16px;
  526. width: 68%;
  527. }
  528. </style>