科技频道

src/views/channel/index.vue

@@ -2,7 +2,60 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">系统首页</el-col>
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-collapse v-model="activeNames">
+              <el-collapse-item title="科技频道" name="1" disabled>
+                <el-row>
+                  <el-col :span="24" class="course">
+                    <el-col class="list" :span="8" :key="index" v-for="(item, index) in science">
+                      <el-col :span="24"><el-image class="image" :src="src"></el-image></el-col>
+                      <el-col :span="24" class="info">
+                        <el-col :span="24" class="title textOver" :title="item.title">
+                          <span>[{{ item.room_id }}]</span>{{ item.title }}
+                        </el-col>
+                        <el-col :span="24" class="other">
+                          <el-col :span="12" class="textOver">信息来源：{{ item.origin }}</el-col>
+                          <el-col :span="12" class="textOver">更新时间：{{ item.create_date }}</el-col>
+                        </el-col>
+                        <el-col :span="24" class="btn">
+                          <el-button type="warning" size="mini" @click="toLogin(item, '1')">管理进入</el-button>
+                          <el-button type="primary" size="mini" @click="toJump(item)" v-if="item.status == '1'">进入频道</el-button>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-col>
+                </el-row>
+              </el-collapse-item>
+              <el-collapse-item title="培训问诊" name="2" disabled>
+                <el-row>
+                  <el-col :span="24" class="course">
+                    <el-col class="list" :span="8" :key="index" v-for="(item, index) in trainLiat">
+                      <el-col :span="24"><el-image class="image" :src="url"></el-image></el-col>
+                      <el-col :span="24" class="info">
+                        <el-col :span="24" class="title textOver" :title="item.title">
+                          <span>[{{ item.room_id }}]</span>{{ item.title }}
+                        </el-col>
+                        <el-col :span="24" class="other">
+                          <el-col :span="12" class="textOver">
+                            <el-icon><LocationInformation /></el-icon>{{ item.province }}-{{ item.city }}
+                          </el-col>
+                          <el-col :span="12" class="textOver" :title="item.time">
+                            <el-icon><Clock /></el-icon>{{ item.time }}
+                          </el-col>
+                        </el-col>
+                        <el-col :span="24" class="btn">
+                          <el-button type="warning" size="mini" @click="toLogin(item, '2')">管理进入</el-button>
+                          <el-button type="primary" size="mini" @click="toJump1(item)" v-if="item.status == '1'">进入频道</el-button>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-col>
+                </el-row>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -12,27 +65,108 @@
 // 基础
 import type { Ref } from 'vue';
 // reactive,
-import { onMounted, ref, getCurrentInstance } from 'vue';
+import { onMounted, ref } from 'vue';
 // 接口
-//import { TestStore } from '@common/src/stores/test';
-//import type { IQueryResult } from '@/util/types.util';
-//const testAxios = TestStore();
-const { proxy } = getCurrentInstance() as any;
+import { TrainStore } from '@common/src/stores/allAdmin/train';
+import { ChannelStore } from '@common/src/stores/allAdmin/channel';
+import type { IQueryResult } from '@/util/types.util';
+const channel = ChannelStore();
+const train = TrainStore();
 // 加载中
 const loading: Ref<any> = ref(false);
-// 分页数据
-//  const skip = 0;
-//  const limit = proxy.limit;;
+const activeNames: Ref<any> = ref(['1', '2']);
+const science: Ref<any> = ref([]); // 科技频道
+const trainLiat: Ref<any> = ref([]); // 培训问诊
+const src: Ref<any> = ref('/src/assets/channel-1.jpg');
+const url: Ref<any> = ref('/src/assets/channel-3.jpg');
 // 请求
 onMounted(async () => {
   loading.value = true;
-  //  await search({ skip, limit });
+  search();
   loading.value = false;
 });
-//const search = async (e: { skip: number; limit: number }) => {
-//  const info = { skip: e.skip, limit: e.limit, ...searchInfo.value  };
-//  const res: IQueryResult = await testAxios.query(info);
-//  console.log(res);
-//};
+const search = async () => {
+  let res: IQueryResult;
+  // 科技频道;
+  res = await channel.query();
+  if (res.errcode == 0) science.value = res.data as [];
+  // 培训问诊
+  res = await train.query();
+  if (res.errcode == 0) {
+    let data: any = res.data;
+    for (const p1 of data) {
+      if (!p1.start_time) p1.start_time = '暂无';
+      if (!p1.end_time) p1.end_time = '暂无';
+      p1.time = p1.start_time + '-' + p1.end_time;
+    }
+    trainLiat.value = data;
+  }
+};
+const toLogin = (e, value) => {
+  console.log(value);
+  console.log(e);
+};
+const toJump = (e) => {
+  console.log(e);
+};
+const toJump1 = (e) => {
+  console.log(e);
+};
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.main {
+  min-height: 500px;
+}
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+::v-deep .el-collapse-item.is-disabled .el-collapse-item__header {
+  color: rgb(0, 0, 0);
+  font-size: 16px;
+  font-weight: 700;
+  padding: 0px 10px;
+}
+.course {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.list {
+  max-width: 32.5%;
+  border: 1px solid #ccc;
+  margin: 0 15px 10px 0;
+  border-radius: 10px;
+  .image {
+    height: 260px;
+    border-radius: 10px 10px 0px 0px;
+  }
+  .info {
+    padding: 5px 10px 10px 10px;
+    .title {
+      font-size: 16px;
+      font-weight: 700;
+      padding: 0 0 5px 0;
+    }
+    .other {
+      display: flex;
+      font-size: 14px;
+      padding: 0 0 5px 0;
+    }
+    .btn {
+      text-align: center;
+    }
+  }
+}
+.list:nth-child(3n) {
+  margin: 0 0 10px 0;
+}
+.list .info .title span:first-child {
+  color: red;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/views/live/index.vue

@@ -12,12 +12,16 @@
                       <el-col class="list" :span="8" :key="index" v-for="(item, index) in science">
                         <el-col :span="24" class="image"><el-image :src="src"></el-image></el-col>
                         <el-col :span="24" class="info">
-                          <el-col :span="24" class="title textOver">
+                          <el-col :span="24" class="title textOver" :title="item.title">
                             <span>[{{ item.room_id }}]</span>{{ item.title }}
                           </el-col>
                           <el-col :span="24" class="other">
-                            <el-col :span="10" class="textOver"><i class="el-icon-location-outline"></i>{{ item.province }}-{{ item.city }}</el-col>
-                            <el-col :span="14" class="textOver"><i class="iconfont iconshijian"></i>{{ item.start_time }}-{{ item.end_time }}</el-col>
+                            <el-col :span="10" class="textOver">
+                              <el-icon><LocationInformation /></el-icon>{{ item.province }}-{{ item.city }}
+                            </el-col>
+                            <el-col :span="14" class="textOver" :title="item.time">
+                              <el-icon><Clock /></el-icon>{{ item.time }}
+                            </el-col>
                           </el-col>
                           <el-col :span="24" class="btn">
                             <el-button type="primary" size="small" @click="toLogin(item)">管理进入</el-button>
@@ -34,12 +38,16 @@
                       <el-col class="list" :span="8" :key="index" v-for="(item, index) in nextList">
                         <el-col :span="24" class="image"><el-image :src="src"></el-image></el-col>
                         <el-col :span="24" class="info">
-                          <el-col :span="24" class="title textOver">
+                          <el-col :span="24" class="title textOver" :title="item.title">
                             <span>[{{ item.room_id }}]</span>{{ item.title }}
                           </el-col>
                           <el-col :span="24" class="other">
-                            <el-col :span="10" class="textOver"><i class="el-icon-location-outline"></i>{{ item.province }}-{{ item.city }}</el-col>
-                            <el-col :span="14" class="textOver"><i class="iconfont iconshijian"></i>{{ item.start_time }}-{{ item.end_time }}</el-col>
+                            <el-col :span="10" class="textOver">
+                              <el-icon><LocationInformation /></el-icon>{{ item.province }}-{{ item.city }}
+                            </el-col>
+                            <el-col :span="14" class="textOver" :title="item.time">
+                              <el-icon><Clock /></el-icon>{{ item.time }}
+                            </el-col>
                           </el-col>
                           <el-col :span="24" class="btn">
                             <el-button type="primary" size="small" @click="toLogin(item)">管理进入</el-button>
@@ -55,12 +63,17 @@
                       <el-col class="list" :span="8" :key="index" v-for="(item, index) in endscience">
                         <el-col :span="24" class="image"><el-image :src="src"></el-image></el-col>
                         <el-col :span="24" class="info">
-                          <el-col :span="24" class="title textOver">
+                          <el-col :span="24" class="title textOver" :title="item.title">
                             <span>[{{ item.room_id }}]</span>{{ item.title }}
                           </el-col>
                           <el-col :span="24" class="other">
-                            <el-col :span="10" class="textOver"><i class="el-icon-location-outline"></i>{{ item.province }}-{{ item.city }}</el-col>
-                            <el-col :span="14" class="textOver"><i class="iconfont iconshijian"></i>{{ item.start_time }}-{{ item.end_time }}</el-col>
+                            <el-col :span="10" class="textOver">
+                              <el-icon><LocationInformation /></el-icon>
+                              {{ item.province }}-{{ item.city }}
+                            </el-col>
+                            <el-col :span="14" class="textOver" :title="item.time">
+                              <el-icon><Clock /></el-icon>{{ item.time }}
+                            </el-col>
                           </el-col>
                           <el-col :span="24" class="btn">
                             <el-button type="primary" size="small" @click="toLogin(item)">管理进入</el-button>
@@ -106,13 +119,38 @@ const search = async () => {
   let res: IQueryResult;
   // 开始
   res = await dock.query({ status: '1' });
-  if (res.errcode == 0) science.value = res.data as [];
+  if (res.errcode == 0) {
+    let data: any = res.data;
+    for (const p1 of data) {
+      if (!p1.start_time) p1.start_time = '暂无';
+      if (!p1.end_time) p1.end_time = '暂无';
+      p1.time = p1.start_time + '-' + p1.end_time;
+    }
+    science.value = data;
+  }
+
   // 准备
   res = await dock.query({ status: '0' });
-  if (res.errcode == 0) nextList.value = res.data as [];
+  if (res.errcode == 0) {
+    let data: any = res.data;
+    for (const p1 of data) {
+      if (!p1.start_time) p1.start_time = '暂无';
+      if (!p1.end_time) p1.end_time = '暂无';
+      p1.time = p1.start_time + '-' + p1.end_time;
+    }
+    nextList.value = data;
+  }
   // 结束
   res = await dock.query({ status: '2' });
-  if (res.errcode == 0) endscience.value = res.data as [];
+  if (res.errcode == 0) {
+    let data: any = res.data;
+    for (const p1 of data) {
+      if (!p1.start_time) p1.start_time = '暂无';
+      if (!p1.end_time) p1.end_time = '暂无';
+      p1.time = p1.start_time + '-' + p1.end_time;
+    }
+    endscience.value = data;
+  }
 };
 const toLogin = (e) => {
   console.log(e);