添加仪器：上传图片或视频

flossom-ui/package.json

@@ -61,6 +61,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue-video-player": "^4.0.6",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"
   },
@@ -75,6 +76,7 @@
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
+    "less-loader": "^5.0.0",
     "lint-staged": "10.5.3",
     "runjs": "4.4.2",
     "sass": "1.32.13",

flossom-ui/src/api/upload.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+
+// 文件上传
+export function upload(data) {
+  return request({
+    url: "/file/upload",
+    method: 'post',
+    data: data
+  })
+}

flossom-ui/src/components/ImagePreview/index.vue

@@ -21,11 +21,11 @@ export default {
     },
     width: {
       type: [Number, String],
-      default: ""
+      default: "80px"
     },
     height: {
       type: [Number, String],
-      default: ""
+      default: "80px"
     }
   },
   computed: {

flossom-ui/src/components/VideoPreview/index.vue

@@ -0,0 +1,129 @@
+<template>
+	<el-dialog :visible.sync="isDialog" width="70%" center class="videoPlayer">
+		<div v-if="isDialog">
+			<video-player
+				style="width: 100%; height: 500px"
+				class="video-player vjs-custom-skin"
+				ref="videoPlayer"
+				:playsline="false"
+				:options="playerOptions"
+				@play="onPlayerPlay($event)"
+				@pause="onPlayerPause($event)"
+				@ended="onPlayerEnded($event)"
+				@waiting="onPlayerWaiting($event)"
+				@playing="onPlayerPlaying($event)"
+				@loadeddata="onPlayerLoadeddata($event)"
+				@timeupdate="onPlayerTimeupdate($event)"
+				@canplay="onPlayerCanplay($event)"
+				@canplaythrough="onPlayerCanplaythrough($event)"
+				@statechanged="playerStateChanged($event)"
+				@ready="playerReadied"
+			></video-player>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import 'vue-video-player/src/custom-theme.css'
+import 'video.js/dist/video-js.css'
+
+export default {
+	name: 'VideoPreview',
+	props: {
+		src: {
+			type: String,
+			default: '',
+		},
+		isDialog: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			srcList: [],
+			playerOptions: {
+				playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+				autoplay: false, // 如果true,浏览器准备好时开始回放。
+				controls: true, //  控制条
+				muted: false, // 默认情况下将会消除任何音频。
+				loop: false, // 导致视频一结束就重新开始。
+				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+				language: 'zh-CN',
+				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+				sources: [
+					{
+						type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+						src: '', // url地址
+					},
+				],
+				// poster: "../../../../static/full_res.jpg", // 你的封面地址
+				width: document.documentElement.clientWidth, // 播放器宽度
+				notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+				controlBar: {
+					timeDivider: true,
+					durationDisplay: true,
+					remainingTimeDisplay: false,
+					fullscreenToggle: true, // 全屏按钮
+				},
+			},
+		}
+	},
+	methods: {
+		openVideo(row) {
+			this.videoDialog = true
+			this.row = row
+			this.playerOptions.sources[0].src = row.filesLoc
+		},
+		// 播放回调
+		onPlayerPlay(player) {},
+
+		// 暂停回调
+		onPlayerPause(player) {},
+
+		// 视频播完回调
+		onPlayerEnded($event) {},
+
+		// DOM元素上的readyState更改导致播放停止
+		onPlayerWaiting($event) {},
+
+		// 已开始播放回调
+		onPlayerPlaying($event) {},
+
+		// 当播放器在当前播放位置下载数据时触发
+		onPlayerLoadeddata($event) {},
+
+		// 当前播放位置发生变化时触发。
+		onPlayerTimeupdate($event) {},
+
+		//媒体的readyState为HAVE_FUTURE_DATA或更高
+		onPlayerCanplay(player) {},
+
+		//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
+		onPlayerCanplaythrough(player) {},
+
+		//播放状态改变回调
+		playerStateChanged(playerCurrentState) {},
+
+		//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
+		playerReadied(player) {},
+	},
+}
+</script>
+
+<style lang="less" scoped>
+.video-js .vjs-icon-placeholder {
+	width: 80%;
+	height: 80%;
+	display: block;
+}
+.videoPlayer /deep/ .el-dialog,
+.el-pager li {
+	//background: none !important;
+	margin-top: 6vh !important;
+}
+.my-img:hover {
+	cursor: pointer;
+}
+</style>

flossom-ui/src/main.js

@@ -1,67 +1,81 @@
-import Vue from 'vue'
+import Vue from "vue";
 
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-import Element from 'element-ui'
+import Element from "element-ui";
-import './assets/styles/element-variables.scss'
+import "./assets/styles/element-variables.scss";
 
-import '@/assets/styles/index.scss' // global css
+import "@/assets/styles/index.scss"; // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css
-import App from './App'
+import App from "./App";
-import store from './store'
+import store from "./store";
-import router from './router'
+import router from "./router";
-import directive from './directive' // directive
+import directive from "./directive"; // directive
-import plugins from './plugins' // plugins
+import plugins from "./plugins"; // plugins
-import { download } from '@/utils/request'
+import { download } from "@/utils/request";
 
-import './assets/icons' // icon
+import "./assets/icons"; // icon
-import './permission' // permission control
+import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  selectDictLabel,
+  selectDictLabels,
+  handleTree,
+} from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";
 // 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from "@/components/DictData";
+// 视频播放器
+import VideoPlayer from "vue-video-player";
+
+// 视频组件
+import VideoPreview from "@/components/VideoPreview";
 
 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
+Vue.prototype.getDicts = getDicts;
-Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.getConfigKey = getConfigKey;
-Vue.prototype.parseTime = parseTime
+Vue.prototype.parseTime = parseTime;
-Vue.prototype.resetForm = resetForm
+Vue.prototype.resetForm = resetForm;
-Vue.prototype.addDateRange = addDateRange
+Vue.prototype.addDateRange = addDateRange;
-Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabel = selectDictLabel;
-Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.selectDictLabels = selectDictLabels;
-Vue.prototype.download = download
+Vue.prototype.download = download;
-Vue.prototype.handleTree = handleTree
+Vue.prototype.handleTree = handleTree;
 
 // 全局组件挂载
-Vue.component('DictTag', DictTag)
+Vue.component("DictTag", DictTag);
-Vue.component('Pagination', Pagination)
+Vue.component("Pagination", Pagination);
-Vue.component('RightToolbar', RightToolbar)
+Vue.component("RightToolbar", RightToolbar);
-Vue.component('Editor', Editor)
+Vue.component("Editor", Editor);
-Vue.component('FileUpload', FileUpload)
+Vue.component("FileUpload", FileUpload);
-Vue.component('ImageUpload', ImageUpload)
+Vue.component("ImageUpload", ImageUpload);
-Vue.component('ImagePreview', ImagePreview)
+Vue.component("ImagePreview", ImagePreview);
+Vue.component("VideoPreview", VideoPreview);
 
-Vue.use(directive)
+Vue.use(directive);
-Vue.use(plugins)
+Vue.use(plugins);
-Vue.use(VueMeta)
+Vue.use(VueMeta);
-DictData.install()
+Vue.use(VideoPlayer);
+DictData.install();
 
 /**
  * If you don't want to use mock-server
@@ -73,14 +87,14 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
+  size: Cookies.get("size") || "medium", // set element-ui default size
-})
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  render: h => h(App)
+  render: (h) => h(App),
-})
+});

flossom-ui/vue.config.js

@@ -13,7 +13,7 @@ const port = process.env.port || process.env.npm_config_port || 80; // 端口
 
 function getTargetUrl() {
   if (process.env.NODE_ENV === "local") {
-    return "http://110.41.134.131:8080";
+    return "http://110.41.134.131:8080"; // 纯前端代理地址
   } else {
     return `http://localhost:8080`;
   }
@@ -43,9 +43,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://110.41.134.131:8080`,
+        target: `http://110.41.134.131:8080`,
-        target: `http://192.168.10.147:8080`,
+        // target: `http://192.168.10.147:8080`,
-
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",