From 3e608b2101526fc90a84f07f1584292095ef2010 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Fri, 20 Dec 2024 17:10:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E6=A1=88=E4=BE=8B=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |   3 +-
 src/assets/icons/svg/video.svg    |   1 +
 src/router/index.js               |   2 +-
 src/views/index.vue               | 212 +++++++++++++++++++++++++++++-
 src/views/jichuang/case/table.vue |   2 +-
 5 files changed, 215 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/svg/video.svg

diff --git a/package.json b/package.json
index 71ccd19..755d1d2 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
     "vue": "3.4.31",
     "vue-cropper": "1.1.1",
     "vue-router": "4.4.0",
-    "vuedraggable": "4.1.0"
+    "vuedraggable": "4.1.0",
+    "xgplayer": "^3.0.14"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.5",
diff --git a/src/assets/icons/svg/video.svg b/src/assets/icons/svg/video.svg
new file mode 100644
index 0000000..27612ad
--- /dev/null
+++ b/src/assets/icons/svg/video.svg
@@ -0,0 +1 @@
+<svg t="1734683220781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2994" width="200" height="200"><path d="M512 0c-282.767101 0-512 229.234225-512 512 0 282.771077 229.232899 512.001325 512 512.001325 282.771077 0 512-229.228923 512-512.001325C1023.998675 229.234225 794.771077 0 512 0L512 0zM512 952.143444c-243.08435 0-440.138142-197.059093-440.138142-440.144769 0-243.08435 197.053791-440.138142 440.138142-440.138142S952.142118 268.91565 952.142118 512C952.142118 755.08435 755.083025 952.143444 512 952.143444L512 952.143444zM512 952.143444" fill="#1296db" p-id="2995"></path><path d="M318.448174 444.382385c5.329826 0 10.550962-2.163212 14.327305-5.936904 3.769715-3.772366 5.928951-8.993502 5.928951-14.325979 0-5.332477-2.159236-10.553613-5.928951-14.325979-3.772366-3.769715-8.996153-5.934253-14.331281-5.934253-5.331152 0-10.552287 2.163212-14.323328 5.934253-3.769715 3.772366-5.934253 8.993502-5.934253 14.325979 0 5.331152 2.164538 10.552287 5.934253 14.325979C307.895886 442.219173 313.115696 444.382385 318.448174 444.382385L318.448174 444.382385zM318.448174 444.382385" fill="#1296db" p-id="2996"></path><path d="M776.9206 362.299614c-6.326601-3.96854-13.563818-5.980646-21.512828-5.980646-7.852248 0-15.907298 1.967039-23.939814 5.852072l-110.391426 53.31682L621.076532 396.705558c0-35.191964-28.634727-63.826691-63.829342-63.826691l-266.223564 0c-35.191964 0-63.826691 28.634727-63.826691 63.826691l0 230.587558c0 35.197266 28.634727 63.826691 63.826691 63.826691l266.228866 0c35.19329 0 63.82404-28.630751 63.82404-63.826691l0-18.674937 110.427214 53.803278c8.070956 3.931426 16.169747 5.928951 24.075015 5.928951 7.903943 0 15.089466-1.993549 21.357745-5.923649 12.62404-7.909245 19.86656-22.801212 19.86656-40.853165L796.803065 403.176638C796.803065 385.13794 789.556569 370.23802 776.9206 362.299614L776.9206 362.299614zM767.358459 403.176638l0 218.400932c0 7.568592-2.258648 13.50152-6.034991 15.868859-1.561436 0.966288-3.513894 1.456722-5.809656 1.456722-3.285909 0-7.131178-1.023284-11.120926-2.966464l-123.317679-60.086137L621.075206 448.171983l123.189106-59.488337c3.983121-1.919321 7.825738-2.932001 11.114298-2.932001 2.334201 0 4.310519 0.499713 5.882559 1.489859C765.136925 389.668491 767.358459 395.476822 767.358459 403.176638L767.358459 403.176638zM256.640215 396.705558c0-18.958594 15.42084-34.383411 34.38076-34.383411l266.228866 0c18.959919 0 34.383411 15.424817 34.383411 34.383411l0 230.587558c0 18.961245-15.424817 34.383411-34.383411 34.383411l-266.228866 0c-18.958594 0-34.38076-15.423491-34.38076-34.383411L256.640215 396.705558 256.640215 396.705558zM256.640215 396.705558" fill="#1296db" p-id="2997"></path></svg>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index ad6ed5d..49030b9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -70,7 +70,7 @@ export const constantRoutes = [
         path: "/index",
         component: () => import("@/views/index"),
         name: "Index",
-        meta: { title: "首页", icon: "dashboard", affix: true },
+        meta: { title: "极创案例", icon: "dashboard", affix: true },
       },
     ],
   },
diff --git a/src/views/index.vue b/src/views/index.vue
index f8c331c..4ef0fc2 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,8 +1,216 @@
 <template>
-  <div></div>
+  <div class="app-container">
+    <div class="tab-list">
+      <div
+        class="tab-item"
+        v-for="(dict, index) in jc_item_type"
+        :key="dict.value"
+        :style="activeStyle(index)"
+        @click="changeIndex(dict, index)"
+      >
+        {{ dict.label }}
+      </div>
+    </div>
+    <div class="line-item"></div>
+    <div class="list-container" v-loading="loading">
+      <div class="list-item" v-for="item in list" :key="item.id">
+        <div class="item-title-row" :style="{ backgroundColor: theme }">
+          <div class="title">{{ item.title }}</div>
+          <div class="item-tags">
+            <el-tag type="primary" v-for="tags in item.technology" :key="tags">
+              <dict-tag :options="jc_technology" :value="tags" />
+            </el-tag>
+          </div>
+        </div>
+        <div class="item-block">
+          <div
+            class="block-item"
+            v-for="blockItem in item.itemJson"
+            :key="blockItem.id"
+            @click="goLink(blockItem.link)"
+          >
+            <img :src="baseUrl + blockItem.cover" alt="" />
+            <div class="video-icon">
+              <div class="port-type">{{ blockItem.name }}</div>
+              <el-link
+                type="primary"
+                @click.stop="goLink(baseUrl + blockItem.video)"
+                target="_blank"
+                >视频链接</el-link
+              >
+            </div>
+
+            <div class="user-pass" v-for="user in blockItem.userData">
+              <span>用户名:{{ user.userName }}</span>
+              <span>密码:{{ user.passWord }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="list.length == 0" class="no-data">
+        <el-empty description="无数据" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from "vue";
+import useSettingsStore from "@/store/modules/settings";
+import { getList, getInfo } from "@/api/jichuang/model.js";
+const { proxy } = getCurrentInstance();
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const { jc_technology, jc_item_type, sys_yes_no } = proxy.useDict(
+  "jc_item_type",
+  "jc_technology",
+  "sys_yes_no"
+);
+const loading = ref(true);
+let currentIndex = ref(0);
+let list = ref([]);
+let queryParams = ref({
+  itemType: 1,
+});
+const theme = computed(() => useSettingsStore().theme);
+
+onMounted(() => {
+  getListData();
+});
+
+const changeIndex = (item, index) => {
+  if (currentIndex.value == index) return;
+  queryParams.value.itemType = item.value;
+  currentIndex.value = index;
+  getListData();
+};
+
+const goLink = (url) => {
+  window.open(url);
+};
+
+const getListData = async () => {
+  loading.value = true;
+  const response = await getList(queryParams.value);
+  list.value = response.rows.map((item) => {
+    item.technology = item.technology.split(",");
+    item.itemJson = JSON.parse(item.itemJson);
+    return item;
+  });
+  loading.value = false;
+};
+
+const activeStyle = (index) => {
+  if (currentIndex.value == index) {
+    return {
+      "background-color": theme.value,
+      "border-color": theme.value,
+      color: "#fff",
+    };
+  }
+};
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.app-container {
+  height: calc(100vh - 84px);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & > div {
+    height: 100%;
+    overflow-y: auto;
+  }
+  .tab-list {
+    .tab-item {
+      border: 1px solid #d8dce5;
+      font-size: 14px;
+      margin-bottom: 10px;
+      padding: 6px 8px;
+      cursor: pointer;
+    }
+    & > .tab-item:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .line-item {
+    height: 100%;
+    width: 1px;
+    border-left: 1px solid #e6e6e6;
+    margin: 0 10px;
+  }
+  .list-container {
+    position: relative;
+    flex: 1;
+
+    .no-data {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+    }
+    .list-item {
+      margin-bottom: 15px;
+      .item-title-row {
+        padding: 6px 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .title {
+          font-size: 16px;
+          color: #fff;
+        }
+        .item-tags span {
+          margin-left: 6px;
+          border-radius: 0;
+        }
+      }
+      .item-block {
+        margin-top: 20px;
+        display: grid;
+        grid-template-columns: repeat(
+          5,
+          1fr
+        ); /* 定义四列，每列宽度相等，占可用空间的1/4 */
+        grid-gap: 25px; /* 设置网格元素之间的行间距和列间距均为10px */
+        .block-item {
+          cursor: pointer;
+          padding: 10px;
+          background: #ffffff;
+          border: 1px solid #e6e6e6;
+          box-shadow: 0px 5px 10px 0px #dadeeb;
+          & > div {
+            margin-top: 6px;
+          }
+          .video-icon {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          img {
+            display: block;
+            width: 100%;
+            height: 150px;
+            object-fit: contain;
+          }
+          .port-type {
+            font-weight: 550;
+            font-size: 15px;
+          }
+          .user-pass {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 13px;
+            color: #333;
+          }
+        }
+      }
+    }
+    & > .list-item:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/jichuang/case/table.vue b/src/views/jichuang/case/table.vue
index 89586f4..0b21e62 100644
--- a/src/views/jichuang/case/table.vue
+++ b/src/views/jichuang/case/table.vue
@@ -75,7 +75,7 @@
             v-model="form.video"
             :limit="1"
             :fileSize="40"
-            :fileType="['mp4', 'wmv']"
+            :fileType="['mp4']"
           ></FileUpload>
         </el-form-item>
         <el-form-item label="账号">