上屏发布补充

package.json

@@ -45,6 +45,7 @@
     "sass": "1.32.12",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
+    "vcolorpicker": "^1.1.0",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",

src/api/login.js

@@ -13,6 +13,29 @@ export function login(username, password, phone, code, uuid) {
     }
   })
 }
+export function getMsg(phone) {
+  return request({
+    url: 'auth/msg',
+    method: 'post',
+    data: {
+      phone
+    }
+  })
+}
+
+export function setPassword(phone, new_pass, code, uuid) {
+  return request({
+    url: 'auth/password',
+    method: 'post',
+    data: {
+      phone,
+      new_pass,
+      code,
+      uuid
+    }
+  })
+}
+
 export function getInfo() {
   return request({
     url: 'auth/info',

src/assets/styles/adminIndex.scss

@@ -129,8 +129,18 @@
     background-color: #a7acae !important;
   }
 }
-
+.el-dialog{
+    margin-top: 0 !important;
+    top: 50%;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+}
 .el-dialog__body {
+    max-height: 70vh !important;
+    overflow-y: auto;
   .el-form-item {
     margin-bottom: 24px;
   }
@@ -327,4 +337,5 @@
     height: 1px;
   }
 }
+
 // end

src/main.js

@@ -5,7 +5,8 @@ import Cookies from 'js-cookie'
 import 'normalize.css/normalize.css'
 
 import Element from 'element-ui'
-//
+import vcolorpicker from 'vcolorpicker'
+
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
 
@@ -41,6 +42,7 @@ Vue.use(dict)
 Vue.use(Element, {
   size: Cookies.get('size') || 'small' // set element-ui default size
 })
+Vue.use(vcolorpicker)
 
 Vue.config.productionTip = false
 

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, getInfo, logout } from '@/api/login'
+import { login, setPassword, getInfo, logout } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
@@ -42,11 +42,21 @@ const user = {
         })
       })
     },
-
+    // 忘记密码
+    SetPassword({ commit }, userInfo) {
+      return new Promise((resolve, reject) => {
+        setPassword(userInfo.phone, userInfo.new_pass, userInfo.code, userInfo.uuid).then(res => {
+          setUserInfo(res, commit)
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
     // 获取用户信息
-    GetInfo({ commit }) {
+    GetInfo({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
-        getInfo().then(res => {
+        getInfo(userInfo.phone,).then(res => {
           setUserInfo(res, commit)
           resolve(res)
         }).catch(error => {

src/views/forgetPassword/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login">
-    <div class="login_bg" />
+    <div class="login_bg"></div>
     <div class="login_cont">
       <el-form
         ref="modifyForm"
@@ -68,9 +68,9 @@
 </template>
 
 <script>
-// import { encrypt } from '@/utils/rsaEncrypt'
+import { encrypt } from '@/utils/rsaEncrypt'
 import { isvalidPhone } from '@/utils/validate'
-// import { getCodeImg } from '@/api/login'
+import { getMsg } from '@/api/login'
 import Background from '@/assets/images/background.jpg'
 export default {
   name: 'ForgetPassword',
@@ -127,7 +127,7 @@ export default {
   },
   watch: {
     $route: {
-      handler: function (route) {
+      handler: function(route) {
         this.redirect = route.query && route.query.redirect
       },
       immediate: true
@@ -135,7 +135,15 @@ export default {
   },
   created() { },
   methods: {
-    getAuthCode() { },
+    getAuthCode() {
+      const user = {
+        phone: this.modifyForm.phone
+      }
+      getMsg(user.phone).then(res => {
+        console.log(res)
+        this.modifyForm.uuid = res.uuid
+      })
+    },
     countdown() {
       if (this.disabledSendCode) {
         return
@@ -163,27 +171,25 @@ export default {
     },
     handleModify() {
       this.$refs.modifyForm.validate(valid => {
-        const params = {
+        const user = {
           phone: this.modifyForm.phone,
-          password: this.modifyForm.password,
-          confirmPassword: this.modifyForm.confirmPassword,
+          new_pass: this.modifyForm.password,
           code: this.modifyForm.code,
           uuid: this.modifyForm.uuid
         }
-        // if (user.password !== this.cookiePass) {
-        //   user.password = encrypt(user.password)
-        // }
+        if (user.new_pass !== this.cookiePass) {
+          user.new_pass = encrypt(user.new_pass)
+        }
         if (valid) {
           this.loading = true
           this.$store
-            .dispatch('Login', params)
+            .dispatch('SetPassword', user)
             .then(() => {
               this.loading = false
               this.$router.push({ path: this.redirect || '/' })
             })
             .catch(() => {
               this.loading = false
-              this.getCode()
             })
         } else {
           console.log('error submit!!')

src/views/publishContent/publishList/index.vue

@@ -7,6 +7,7 @@
           v-loading="crud.loading"
           :data="tableData"
           :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
+          class="publish_table"
           @selection-change="handleSelectionChange"
         >
           <el-table-column type="selection" width="55" />
@@ -30,7 +31,20 @@
               <div :class="{ 'stop_txt': scope.row.enabled }">{{ scope.row.enabled ? '发布中' : '停止' }}</div>
             </template>
           </el-table-column>
-          <el-table-column prop="device" align="center" label="发布设备" />
+          <el-table-column prop="device" align="center" label="发布设备" width="300px">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.device ? '' : '全部设备' }}
+                <div class="tag_list">
+                  <el-tag
+                    v-for="tag in scope.row.deviceData"
+                    :key="tag"
+                    type="primary"
+                  >{{ tag }}</el-tag>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column label="操作" width="220px" align="center" fixed="right">
             <template slot-scope="scope">
               <el-button
@@ -41,7 +55,7 @@
               <el-button
                 type="primary"
                 class="edit_btn"
-                @click="editFormData(scope.$index, scope.row)"
+                @click="editForm(scope.$index, scope.row)"
               >编辑</el-button>
               <el-button
                 type="primary"
@@ -56,6 +70,141 @@
         <pagination />
       </el-col>
     </el-row>
+
+    <div class="publish_layer">
+      <el-dialog
+        title="编辑"
+        :close-on-click-modal="false"
+        :visible.sync="publishVisible"
+        width="872px"
+        height="384px"
+      >
+        <el-form ref="form" :model="form" size="small" label-width="100px">
+          <el-form-item
+            label="发布名称"
+            prop="name"
+            :rules="[
+              { required: true, message: '请输入发布名称', trigger: '' }
+            ]"
+          >
+            <el-input v-model="form.name" style="width: 674px;" />
+          </el-form-item>
+          <el-form-item
+            label="发布时间"
+            prop="date"
+            :rules="[
+              { required: true, message: '请选择发布时间', trigger: 'change' }
+            ]"
+          >
+            <el-date-picker
+              v-if="isTypeDate===0"
+              v-model="form.date"
+              type="date"
+              placeholder="选择日期"
+            />
+            <el-date-picker
+              v-else
+              v-model="form.date"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+          </el-form-item>
+          <el-form-item label="上传内容" prop="file">
+            <el-upload action="#" list-type="picture-card" :auto-upload="false">
+              <!-- <i slot="default" class="el-icon-plus"></i> -->
+              <img src="@/assets/images/t-sc.png" alt />
+              <div slot="file" slot-scope="{file}">
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
+                <!-- <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-preview"
+                    @click="handlePictureCardPreview(file)"
+                  >
+                    <i class="el-icon-zoom-in"></i>
+                  </span>
+                  <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleDownload(file)"
+                  >
+                    <i class="el-icon-download"></i>
+                  </span>
+                  <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleRemove(file)"
+                  >
+                    <i class="el-icon-delete"></i>
+                  </span>
+                </span>-->
+              </div>
+            </el-upload>
+            <!-- <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="dialogImageUrl" alt />
+            </el-dialog>-->
+          </el-form-item>
+          <el-form-item
+            label="选择设备"
+            prop="deviceSelect"
+            :rules="[
+              { required: true, message: '请选择设备', trigger: 'change' },
+            ]"
+          >
+            <el-radio-group v-model="form.deviceSelect">
+              <el-radio label="all" value="all">所有设备</el-radio>
+              <el-radio label="other" value="other">部分设备<i v-if="form.deviceSelect === 'other'" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <div v-if="form.deviceSelect === 'all'" class="select_all_tip">所有设备都将被发送</div>
+          <div v-if="deviceTags.length > 0 && form.deviceSelect === 'other'" class="select_other">
+            <el-row>
+              <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
+              <el-col :span="4">
+                <el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
+              </el-col>
+            </el-row>
+            <el-tag
+              v-for="tag in deviceTags"
+              :key="tag"
+              closable
+              :disable-transitions="true"
+              :hit="false"
+              color="#cbe3ff"
+              @close="handleClose(tag)"
+            >
+              {{ tag }}
+            </el-tag>
+          </div>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
+          <el-button round @click="crud.cancelCU">关闭</el-button>
+        </div>
+      </el-dialog>
+    </div>
+    <!-- 添加发布的设备 -->
+    <div class="add_device_layer">
+      <el-dialog
+        title="请选择设备"
+        :close-on-click-modal="false"
+        :visible.sync="selectDeviceVisible"
+        width="400px"
+      >
+        <el-tag
+          v-for="tag in deviceAllTags"
+          :key="tag"
+          :disable-transitions="true"
+          :hit="false"
+          color="#cbe3ff"
+          class="all_tags"
+          @click="tagHandle(tag)"
+        >
+          {{ tag }}
+        </el-tag>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -64,41 +213,53 @@ import crudDept from '@/api/system/dept'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import pagination from '@crud/Pagination'
 const defaultForm = {
+  name: '',
+  date: null,
+  deviceSelect: '',
+  file: ''
 }
 export default {
   name: 'PublishList',
   components: { pagination },
   cruds() {
-    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept } })
+    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
       selectedList: [],
+      publishVisible: false,
+      messageVisible: false,
+      selectDeviceVisible: false,
+      isTypeDate: 0,
       tableData: [
         {
           id: 1,
-          name: '图片1',
+          name: '及时发布 2022-1-1',
           cover: require('@/assets/images/background.jpg'),
           type: 0,
           user: '某某某',
-          device: '所有设备',
+          device: 0,
+          deviceData: [],
           enabled: true,
           isTop: true,
-          date: '2021-2-2 至 2022-4-6'
+          date: '2021-2-2'
         },
         {
           id: 2,
-          name: '图片2',
+          name: '定时发布 2022-1-1',
           cover: require('@/assets/images/background.jpg'),
           type: 1,
           user: '某某某2',
-          device: '所有设备',
+          device: 1,
+          deviceData: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
           enabled: false,
           isTop: false,
           date: '2021-2-2 至 2022-4-6'
         }
-      ]
+      ],
+      deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
+      deviceTags: []
     }
   },
   methods: {
@@ -108,6 +269,23 @@ export default {
     isStopHandle(index, row) {
       row.enabled = !row.enabled
     },
+    editForm(index, row) {
+      this.publishVisible = true
+      this.form.name = row.name
+      this.isTypeDate = row.type
+      if (this.isTypeDate === 0) {
+        this.form.date = row.date
+      } else {
+        const dateSplice = row.date.split('至')
+        this.form.date = dateSplice
+      }
+      if (row.device === 0) {
+        this.form.deviceSelect = 'all'
+      } else {
+        this.form.deviceSelect = 'other'
+      }
+      this.deviceTags = row.deviceData
+    },
     handleSelectionChange(val) {
       this.selectedList = val
       if (val.length > 0) {
@@ -116,6 +294,20 @@ export default {
         this.clearBtnDisabled = true
       }
       console.log(val)
+    },
+    addDeviceTag() {
+      this.selectDeviceVisible = true
+    },
+    tagHandle(tag) {
+      console.log(tag)
+      this.deviceTags.push(tag)
+    },
+    handleClose(tag) {
+      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
+      console.log(this.deviceTags)
+    },
+    clearDevice() {
+      this.deviceTags = []
     }
   }
 }
@@ -128,4 +320,95 @@ export default {
     color: #3a8aeb;
   }
 }
+::v-deep .el-range-separator{
+    width: 24px;
+}
+::v-deep .el-radio-group{
+  display: block;
+  .el-radio{
+    position: relative;
+    line-height: 40px;
+    .radio_tip{
+      position: absolute;
+      right: -45px;
+      top: 0;
+      display: block;
+      width: 42px;
+      height: 21px;
+      line-height: 21px;
+      font-size: 12px;
+      text-align: center;
+      color: #fff;
+      background: url(~@/assets/images/an-tj.png) no-repeat;
+      background-size: 42px 21px;
+    }
+  }
+}
+.select_all_tip{
+  width: 336px;
+  height: 32px;
+  line-height: 32px;
+  margin: -20px 0 0 100px;
+  padding: 0 14px;
+  font-size: 12px;
+  color: #999;
+  background: #fff;
+  box-shadow: 0 0 5px rgba(0,0,0,.14);
+}
+.select_other{
+  width: 600px;
+  margin: -20px 0 0 100px;
+  padding: 18px 23px;
+  background: #f8f8f8;
+  border: 1px solid #dcdde3;
+  border-radius: 4px;
+  .other_tip{
+    line-height: 24px;
+    span{
+      display: inline-block;
+      margin-left: 20px;
+    }
+  }
+  .el-button {
+    padding: 5px 8px;
+    border: none !important;
+  }
+  .delt_btn {
+    color: #fff;
+    background-color: #ee5747 !important;
+  }
+}
+.publish_layer,
+.add_device_layer{
+    .el-tag--small{
+        height: 28px;
+        line-height: 26px;
+        padding: 0 24px;
+        margin: 18px 16px 0 0;
+        font-size: 14px;
+        // color: #3a8aeb;
+        ::v-deep .el-icon-close{
+            font-size: 16px;
+        }
+    }
+}
+.add_device_layer{
+    ::v-deep .el-dialog__body{
+        padding: 0 20px 30px 20px;
+    }
+}
+.publish_table{
+    .tag_list{
+        text-align: left;
+        .el-tag {
+            height: 26px;
+            line-height: 26px;
+            margin: 5px 10px 5px 0;
+            background: #cbe3ff;
+            color: #3a8aeb;
+            border: none;
+        }
+    }
+}
+
 </style>

src/views/publishContent/urgentMessage/index.vue

@@ -45,16 +45,18 @@
         :close-on-click-modal="false"
         :visible.sync="messageVisible"
         width="872px"
-        height="384px"
       >
         <el-form ref="form" :model="form" size="small" label-width="100px">
           <el-form-item
             label="文本颜色"
-            prop="content"
+            prop="color"
             :rules="[
               { required: true, message: '请选择文本内容', trigger: '' }
             ]"
-          >111</el-form-item>
+          >
+            <colorPicker v-model="form.color" class="txt_color" @change="headleChangeColor" />
+            <el-input v-show="false" v-model="form.color" />
+          </el-form-item>
           <el-form-item
             label="文本内容"
             prop="content"
@@ -66,7 +68,7 @@
           </el-form-item>
           <el-form-item
             label="文本大小"
-            prop="orientation"
+            prop="txtSize"
             :rules="[
               { required: true, message: '请选择文本大小', trigger: 'change' },
             ]"
@@ -121,24 +123,19 @@
           >
             <el-radio-group v-model="form.deviceSelect">
               <el-radio label="all" value="all">所有设备</el-radio>
-              <el-radio label="other" value="other">部分设备<i class="radio_tip">添加</i></el-radio>
+              <el-radio label="other" value="other">部分设备<i v-if="form.deviceSelect === 'other'" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
             </el-radio-group>
           </el-form-item>
           <div v-if="form.deviceSelect === 'all'" class="select_all_tip">所有设备都将被发送</div>
-          <div v-if="form.deviceSelect === 'other'" class="select_other">
+          <div v-if="deviceTags.length>0 && form.deviceSelect === 'other'" class="select_other">
             <el-row>
-              <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计2个设备</span></el-col>
+              <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
               <el-col :span="4">
-                <el-button
-                  type="primary"
-                  round
-                  class="edit_btn"
-                >编辑</el-button>
-                <el-button round class="delt_btn">清空</el-button>
+                <el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
               </el-col>
             </el-row>
             <el-tag
-              v-for="tag in dynamicTags"
+              v-for="tag in deviceTags"
               :key="tag"
               closable
               :disable-transitions="true"
@@ -156,6 +153,27 @@
         </div>
       </el-dialog>
     </div>
+    <!-- 添加发布的设备 -->
+    <div class="add_device_layer">
+      <el-dialog
+        title="请选择设备"
+        :close-on-click-modal="false"
+        :visible.sync="selectDeviceVisible"
+        width="400px"
+      >
+        <el-tag
+          v-for="tag in deviceAllTags"
+          :key="tag"
+          :disable-transitions="true"
+          :hit="false"
+          color="#cbe3ff"
+          class="all_tags"
+          @click="tagHandle(tag)"
+        >
+          {{ tag }}
+        </el-tag>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -164,6 +182,7 @@ import crudDept from '@/api/system/dept'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import pagination from '@crud/Pagination'
 const defaultForm = {
+  color: '#ff0000',
   content: '',
   txtSize: '',
   position: '',
@@ -180,6 +199,7 @@ export default {
   data() {
     return {
       messageVisible: false,
+      selectDeviceVisible: false,
       sizeData: [{ key: '0', name: '16' }, { key: '1', name: '22' }, { key: '2', name: '24' }, { key: '3', name: '30' }],
       positionData: [{ key: '0', name: '顶部' }, { key: '1', name: '中间' }, { key: '2', name: '底部' }],
       speedData: [{ key: '0', name: '1s' }, { key: '1', name: '2s' }, { key: '2', name: '3s' }],
@@ -202,7 +222,8 @@ export default {
           date: '2021-2-2 16:00'
         }
       ],
-      dynamicTags: ['GCXR1', 'GCXR2', 'GCXR3']
+      deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
+      deviceTags: []
     }
   },
   methods: {
@@ -221,8 +242,22 @@ export default {
       }
       console.log(val)
     },
+    headleChangeColor() {
+      console.log(this.form.color)
+    },
+    addDeviceTag() {
+      this.selectDeviceVisible = true
+    },
+    tagHandle(tag) {
+      console.log(tag)
+      this.deviceTags.push(tag)
+    },
     handleClose(tag) {
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
+      console.log(this.deviceTags)
+    },
+    clearDevice() {
+      this.deviceTags = []
     }
   }
 }
@@ -235,6 +270,9 @@ export default {
     color: #3a8aeb;
   }
 }
+.txt_color{
+    margin-top: 12px;
+}
 ::v-deep .el-radio-group{
   display: block;
   .el-radio{
@@ -289,7 +327,8 @@ export default {
     color: #fff;
     background-color: #ee5747 !important;
   }
-  .el-tag--small{
+}
+.el-tag--small{
     height: 28px;
     line-height: 26px;
     padding: 0 24px;
@@ -297,9 +336,12 @@ export default {
     font-size: 14px;
     // color: #3a8aeb;
     ::v-deep .el-icon-close{
-      font-size: 16px;
+        font-size: 16px;
+    }
+}
+.add_device_layer{
+    ::v-deep .el-dialog__body{
+        padding: 0 20px 30px 20px;
     }
-  }
 }
-
 </style>