no message

src/api/operation/channels.js

@@ -0,0 +1,110 @@
+import request from "@/utils/request";
+
+// 列表
+export function list() {
+  return request({
+    url: `/admin/config/channel/list`,
+    method: "post",
+  });
+}
+
+// 设备
+export function dev(type){
+  return request({
+    url: `/admin/config/channel/getIsExistclientTypeList/${type}`,
+    method: 'post'
+  })
+}
+
+// 详情
+export function detail(id) {
+  return request({
+    url: `/admin/config/channel/queryDetailById/${id}`,
+    method: 'get'
+  })
+}
+
+// 12频道
+export function channels(id) {
+  return request({
+    url: `/admin/config/channel/query/channelList/${id}`,
+    method: 'get'
+  })
+}
+
+// 新增
+export function submit(data){
+  return request({
+    url: `/admin/config/channel/addPage`,
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function edit(data){
+  return request({
+    url: `/admin/config/channel/channelEdit`,
+    method: 'post',
+    data
+  })
+}
+
+// 新增分类
+export function classSubmit(name, type, id){
+  return request({
+    url: `/admin/config/channel/addchannelClassification/${name}/${type}/${id}`,
+    method: 'get'
+  })
+}
+
+// 编辑
+export function classEdit(name, id) {
+  return request({
+    url: `/admin/config/channel/editchannelClassification/${name}/${id}`,
+    method: 'get'
+  })
+}
+
+// 删除
+export function classRemove(id) {
+  return request({
+    url: `/admin/config/channel/deleteChannel/${id}`,
+    method: 'delete'
+  })
+}
+
+// 频道详情
+export function channelDetail(data) {
+  return request({
+    url: `/admin/config/channel/view`,
+    method: 'post',
+    data
+  })
+}
+
+// 编辑频道
+export function channeledit(data) {
+  return request({
+    url: `/admin/config/channel/edit`,
+    method: 'post',
+    data
+  })
+}
+
+// 排序
+export function change(data) {
+  return request({
+    url: `/admin/config/channel/channel/sortEdit`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除频道规则
+export function remove(id) {
+  return request({
+    url: `/admin/config/channel/deleteTemplate/${id}`,
+    method: 'delete'
+  })
+}

src/mixin/index.js

@@ -65,15 +65,17 @@ const devCategoryMixin = {
       categoryOptions: []
     }
   },
-  mounted() {
-    categoryList().then(res => {
-      res.data.map(i => {
-        this.categoryOptions.push({
-          value: i.id,
-          label: i.name
+  methods: {
+    getCateGory(status) {
+      categoryList({ status: status}).then(res => {
+        res.data.map(i => {
+          this.categoryOptions.push({
+            value: i.id,
+            label: i.name
+          })
         })
       })
-    })
+    }
   }
 }
 

src/router/index.js

@@ -488,6 +488,23 @@ export const dynamicRoutes = [{
     }
   }]
 },
+// 多频多台
+{
+  path: '/operation',
+  component: Layout,
+  hidden: true,
+  permissions: ['operation:channels:list'],
+  name: 'channels',
+  children: [{
+    path: 'channels/detail',
+    component: () => import('@/views/operation/channels/detail'),
+    name: 'channelsDetail',
+    meta: {
+      title: `频道详情`,
+      activeMenu: '/operation/channels'
+    }
+  }]
+},
 // 标签分类
 {
   path: '/operation',

src/views/device/class/detail.vue

@@ -152,6 +152,7 @@ export default {
     }
   },
   mounted() {
+    this.getCateGory(1)
     this.getDevList()
     if (this.form.id) {
       this.getDetail()

src/views/device/class/index.vue

@@ -88,6 +88,7 @@ export default {
     }
   },
   mounted() {
+    this.getCateGory(1)
     this.getList()
   },
   methods: {

src/views/device/list/detail.vue

@@ -22,6 +22,9 @@
           <el-option v-for="item in manuOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
+      <el-form-item label="多频多台：" prop="isChannelsPlatforms">
+        <el-switch v-model="form.isChannelsPlatforms" :active-value="1" :inactive-value="0" />
+      </el-form-item>
       <el-form-item label="设备分类：" prop="categoryId">
         <el-select v-model="form.categoryId" placeholder="请选择设备分类">
           <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
@@ -178,6 +181,7 @@ export default {
     };
   },
   mounted() {
+    this.getCateGory(1)
     this.getList()
   },
   methods: {

src/views/device/list/index.vue

@@ -109,6 +109,7 @@ export default {
     }
   },
   mounted() {
+    this.getCateGory(1)
     this.getList()
   },
   methods: {

src/views/operation/channels/detail.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="app-container">
+    <!-- 表单 -->
+    <el-form class="form" label-width="100px" :disabled="isRead">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="频道名称：">
+            <el-input v-model="form.aliasName" placeholder="请输入频道名称" />
+          </el-form-item>
+          <el-form-item label="频道属性：">
+            <el-select v-model="form.channelType" placeholder="请选择频道属性" :disabled="disabled" @change="handleChange">
+              <el-option v-for="item in channelTypeOptions" :key="item.value" :value="Number(item.value)"
+                :label="item.label" :disabled="channelDisabled(item.value)" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="频道封面：">
+            <Upload listType="picture-card" :url="form.pic" @upload="getUpload" :disabled="isRead" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="频道简介：">
+            <el-input v-model="form.description" type="textarea" rows="12" placeholder="请输入频道简介" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="频道内容：">
+        <el-button type="primary" icon="el-icon-plus" @click="getDialog">
+          新增内容
+        </el-button>
+        <el-table :data="form.list" v-loading="loading">
+          <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
+          <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
+          <el-table-column label="音频封面" align="center" width="100px">
+            <template slot-scope="scope">
+              <el-image :src="scope.row.audioPic" />
+            </template>
+          </el-table-column>
+          <el-table-column label="音频作者" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>
+                {{ scope.row.singerName ? scope.row.singerName : '-' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="专辑名称" prop="songName" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>
+                {{ scope.row.songName ? scope.row.songName : '-' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
+          <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
+          <el-table-column label="当前状态" align="center" :formatter="statusFormatter" />
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
+    <!-- 按钮 -->
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button v-if="!isRead" type="primary" @click="submit">提交</el-button>
+    </div>
+    <!-- 弹窗 -->
+    <Dialog :visible="dialogVisible" :data="form.list" :channelType="form.channelType" @close="close" />
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import { channelDetail, channeledit } from '@/api/operation/channels'
+import { platformMixin, isFreeMixin, disabledMixin } from '@/mixin/index'
+export default {
+  mixins: [platformMixin, isFreeMixin, disabledMixin],
+  components: {
+    Dialog
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 弹窗
+      dialogVisible: false,
+      // 表单
+      form: {},
+      // 频道1 频道2 的频道属性不可修改
+      disabled: this.$route.query.index == '1' ? true : false,
+      channelTypeOptions: [
+        { value: 2, label: '广播' },
+        { value: 6, label: '节目' },
+        { value: 8, label: '专辑' },
+        { value: 16, label: '猫王音乐台' },
+        { value: 17, label: '猫王精选电台' }
+      ],
+      // 只读
+      isRead: Boolean(this.$route.query.boolean)
+    }
+  },
+  mounted() {
+    this.getDetail()
+    this.getPlatform({})
+  },
+  methods: {
+    // 频道详情
+    getDetail() {
+      channelDetail({
+        channelId: this.$route.query.channelId
+      }).then(res => {
+        if (res.code === 0) {
+          this.form = res.data
+        }
+      })
+    },
+
+    // 修改频道属性
+    handleChange() {
+      this.form.list = this.form.audioList = []
+    },
+
+    // 上传频道封面
+    getUpload(e) {
+      this.form.pic = e.file
+    },
+
+    // 打开弹窗
+    getDialog() {
+      this.dialogVisible = true
+    },
+
+    // 关闭弹窗
+    close() {
+      this.dialogVisible = false
+    },
+
+    // 删除
+    getDelete(row) {
+      this.form.list = this.form.list.filter(i => i.audioId !== row.audioId)
+    },
+
+    // 提交
+    submit() {
+      this.form.audioList = []
+      this.form.list.map(i => {
+        this.form.audioList.push({
+          audioId: i.audioId,
+          audioType: i.audioType
+        })
+      })
+      channeledit(this.form).then(res => {
+        if (res.code === 0) {
+          this.$message.success('修改成功！')
+          this.getDetail()
+        }
+      })
+    },
+
+    // 取消
+    cancel() {
+      this.$tab.closeOpenPage('/operation/channels')
+    },
+
+    // 除了2频道都不可以选猫王精选电台
+    channelDisabled(e){
+      return this.$route.query.index !== '1' ? e == 17 ? true : false : false
+    },
+
+    // 字典翻译
+    platfromFormatter(row) {
+      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
+    },
+    freeFormatter(row) {
+      return this.selectDictLabel(this.freeOptions, row.isFree)
+    },
+    statusFormatter(row) {
+      return this.selectDictLabel(this.disabledOptions, row.status)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  width: 80px;
+  height: 80px;
+}
+
+::v-deep .el-dialog__body {
+  height: 610px;
+  overflow-y: scroll;
+}
+</style>

src/views/operation/channels/index.vue

@@ -0,0 +1,367 @@
+<template>
+  <div class='app-container'>
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog()"
+      v-hasPermi="['operation:channels:add']">新增多频多台</el-button>
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="频道名称" align="center" prop="name" />
+      <el-table-column label="设备" align="center">
+        <template slot-scope="scope">
+          <span v-for="(item, index) in scope.row.deviceList" :key="item.clientTypeId">
+            <span>{{ item.name }}</span>
+            <span v-show="index + 1 !== scope.row.deviceList.length">,</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="getDialog(scope.row, true)">查看</el-button>
+          <el-button type="text" @click="getDialog(scope.row)" v-hasPermi="['operation:channels:edit']">编辑</el-button>
+          <el-button type="delete" @click="getRemove(scope.row)"
+            v-hasPermi="['operation:channels:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" :title="title" width="1000px" :before-close="getClose">
+      <el-form :model="dialogForm" ref="dialogForm" :rules="rules" label-width="auto">
+        <el-form-item label="频道名称：" prop="name" style="width: 300px">
+          <el-input v-model="dialogForm.name" placeholder="请输入规则名称" :disabled="readOnly" />
+        </el-form-item>
+
+        <el-form-item label="关联设备：" prop="deviceIds">
+          <el-select v-model="dialogForm.deviceIds" filterable multiple placeholder="请选择关联设备" :disabled="readOnly">
+            <el-option v-for="item in devOptions" :key="item.clientTypeId" :value="item.clientTypeId"
+              :label="item.name" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="dialogForm.id" label="个人频道分类：">
+          <div class="classList" v-if="readOnly">
+            <el-button v-for="item in dialogForm.personalChannelList" :key="item.channelTypeId"
+              :type="active === item.sort ? 'primary' : ''" size="small" @click="getActive(item)">
+              {{ item.channelTypeName }}
+            </el-button>
+          </div>
+          <div class="classList" v-else>
+            <el-dropdown v-for="item in dialogForm.personalChannelList" :key="item.channelTypeId">
+              <el-button :type="active === item.sort ? 'primary' : ''" size="small" @click="getActive(item)">
+                {{ item.channelTypeName }}<i class="el-icon-arrow-down" style="margin-left: 10px;" />
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <div @click="getInputDialog(item)">编辑</div>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <div @click="getDelete(item)">删除</div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-button v-if="dialogForm.personalChannelList.length < 9" icon="el-icon-plus" size="small"
+              @click="inputVisible = true, type = 0">新增</el-button>
+          </div>
+        </el-form-item>
+
+        <el-form-item v-if="dialogForm.id" label="其他频道分类：">
+          <div class="classList" v-if="readOnly">
+            <el-button v-for="item in dialogForm.otherChannelList" :key="item.channelTypeId"
+              :type="active === item.sort ? 'primary' : ''" size="small" @click="getActive(item)">
+              {{ item.channelTypeName }}
+            </el-button>
+          </div>
+          <div class="classList" v-else>
+            <el-dropdown v-for="item in dialogForm.otherChannelList" :key="item.channelTypeId">
+              <el-button :type="active === item.sort ? 'primary' : ''" size="small" @click="getActive(item)">
+                {{ item.channelTypeName }}<i class="el-icon-arrow-down" style="margin-left: 10px;" />
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <div @click="getInputDialog(item)">编辑</div>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <div @click="getDelete(item)">删除</div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-button icon="el-icon-plus" size="small" @click="inputVisible = true, type = 1">新增</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+
+      <el-table v-show="dialogForm.id" :data="dialogForm.defaultList">
+        <el-table-column label="频道号" align="center" prop="channelId" width="75px" />
+        <el-table-column label="频道名称" align="center" prop="aliasName" show-overflow-tooltip />
+        <el-table-column label="频道封面" align="center" width="100px">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.pic" />
+          </template>
+        </el-table-column>
+        <el-table-column label="频道简介" align="center" prop="description" show-overflow-tooltip />
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" @click="getRouter(scope, true)">查看</el-button>
+            <el-button type="text" @click="getRouter(scope)" :disabled="readOnly">编辑</el-button>
+            <el-button v-if="scope.row.sort > 3" type="text" icon="el-icon-caret-top"
+              @click="getChange(scope.row, scope.row.sort - 1)" :disabled="readOnly" />
+            <el-button v-if="scope.row.sort > 2 && scope.row.sort < 12" type="text" icon="el-icon-caret-bottom"
+              @click="getChange(scope.row, scope.row.sort + 1)" :disabled="readOnly" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="!readOnly" slot="footer">
+        <el-button @click="getClose">取消</el-button>
+        <el-button type="primary" @click="getSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="inputVisible" title="分类名称" width="500px" :before-close="getInputClose">
+      <el-input v-model="classForm.channelTypeName" placeholder="请输入分类名称" />
+      <div slot="footer">
+        <el-button @click="getInputClose">取消</el-button>
+        <el-button type="primary" @click="getInputSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { list, dev, submit, edit, detail, change, remove, channels, classSubmit, classEdit, classRemove } from "@/api/operation/channels"
+export default {
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 列表
+      tableData: [],
+      // 全部设备列表
+      allDevOptions: [],
+      // 剔除已选的设备列表
+      devOptions: [],
+      // 弹窗
+      dialogVisible: false,
+      // 查看
+      readOnly: false,
+      // 弹窗名称
+      title: '新增',
+      // 弹窗表单
+      dialogForm: {
+        deviceIds: []
+      },
+      row: {},
+      // 分类焦点
+      active: 1,
+      // 分类弹窗
+      inputVisible: false,
+      // 分类表单
+      classForm: {},
+      // 分类类型
+      type: null,
+      // 校验
+      rules: {
+        name: [{
+          required: true, message: '请输入规则名称', trigger: 'blur'
+        }],
+        deviceIds: [{
+          required: true, message: '请选择关联设备', trigger: 'change'
+        }]
+      }
+    }
+  },
+  async mounted() {
+    await this.getDev(1)
+    this.getList()
+  },
+  methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      list().then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data
+          this.loading = false
+        }
+      })
+    },
+
+    // 设备列表
+    async getDev(type) {
+      await dev(type).then(res => {
+        if (type === 0) {
+          this.devOptions = res.data
+        } else {
+          this.allDevOptions = res.data
+        }
+      })
+    },
+
+    // 删除频道规则
+    getRemove(row) {
+      this.$confirm(`是否删除${row.name}?`, '提示').then(() => {
+        remove(row.id).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    // 弹窗
+    async getDialog(row, boolean) {
+      this.dialogVisible = true
+      this.readOnly = boolean
+      await this.getDev(0)
+      if (row !== undefined) {
+        this.row = row
+        this.devOptions.unshift.apply(this.devOptions, this.row.deviceList)
+        this.getDetail()
+      }
+    },
+
+    // 详情
+    getDetail() {
+      detail(this.row.id).then(res => {
+        if (res.code === 0) {
+          this.active = 1
+          this.dialogForm = res.data
+          this.dialogForm.deviceIds = res.data.deviceIds.split(',')
+        }
+      })
+    },
+
+    // 获取焦点
+    getActive(item) {
+      this.active = item.sort
+      this.getChannels(item.channelTypeId)
+    },
+
+    // 12频道
+    getChannels(id) {
+      channels(id).then(res => {
+        if (res.code === 0) {
+          this.dialogForm.defaultList = res.data
+        }
+      })
+    },
+
+    // 打开分类弹窗
+    getInputDialog(item) {
+      this.inputVisible = true
+      this.classForm = JSON.parse(JSON.stringify(item))
+    },
+    // 关闭分类表单
+    getInputClose() {
+      this.inputVisible = false
+      this.classForm = {}
+    },
+    // 提交分类表单
+    getInputSubmit() {
+      if (this.classForm.name === "") {
+        this.$message.error('请输入频道分类名称')
+      } else {
+        if (this.type === null) {
+          classEdit(this.classForm.channelTypeName, this.classForm.channelTypeId).then(res => {
+            if (res.code === 0) {
+              this.inputVisible = false
+              this.$message.success('编辑成功！')
+              this.getDetail()
+            }
+          })
+        } else {
+          classSubmit(this.classForm.channelTypeName, this.type, this.dialogForm.id).then(res => {
+            if (res.code === 0) {
+              this.inputVisible = false
+              this.$message.success('新增成功！')
+              this.getDetail()
+            }
+          })
+        }
+      }
+    },
+
+    // 提交
+    getSubmit() {
+      this.$refs.dialogForm.validate((valid) => {
+        if (valid) {
+          this.dialogForm.deviceIds = this.dialogForm.deviceIds.join(',')
+          if (this.dialogForm.id) {
+            if (res !== 0) return false
+            edit(this.dialogForm).then(res => {
+              if (res.code === 0) {
+                this.$message.success('编辑成功！')
+                this.getClose()
+                this.getList()
+              }
+            })
+          } else {
+            submit(this.dialogForm).then(res => {
+              if (res.code === 0) {
+                this.$message.success('提交成功！')
+                this.getClose()
+                this.getList()
+              }
+            })
+          }
+
+        } else {
+          return false
+        }
+      })
+    },
+
+    // 取消
+    getClose() {
+      this.dialogVisible = false
+      this.dialogForm = {}
+      this.$refs.dialogForm.resetFields()
+    },
+
+    // 删除
+    getDelete(item) {
+      this.$confirm(`是否删除${item.channelTypeName}?`, '提示').then(() => {
+        classRemove(item.channelTypeId).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功！')
+            this.getDetail()
+          }
+        })
+      }).catch(() => { })
+    },
+
+    // 12频道详情
+    getRouter(e, boolean) {
+      this.$router.push({
+        path: `/operation/channels/detail`,
+        query: {
+          channelId: e.row.id,
+          audioType: e.row.channelType,
+          index: e.$index,
+          boolean: boolean
+        }
+      })
+    },
+
+    // 排序
+    getChange(row, sort) {
+      change({
+        id: row.id,
+        sort: sort
+      }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('修改成功！')
+          this.getChannels(row.templateCategoryId)
+        }
+      })
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.classList {
+  ::v-deep .el-button {
+    margin: 0 10px 10px 0;
+  }
+}
+</style>

vue.config.js

@@ -38,7 +38,7 @@ module.exports = {
         target: `https://o3tapi.radio1964.com/admin`,
         // target: `http://192.168.0.217:2678/admin`, // 付新保
         // target: `http://192.168.0.174:2027`, // 陈浩
-        // target: `http://10.0.2.9:2027`,
+        // target: `http://10.0.2.17:2027`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''