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

master
blak-kong 2 years ago
parent 1c7e1b4da9
commit b0cb6631bc

@ -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",

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

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

@ -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, // trueVideo.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) {},
// DOMreadyState
onPlayerWaiting($event) {},
//
onPlayerPlaying($event) {},
//
onPlayerLoadeddata($event) {},
//
onPlayerTimeupdate($event) {},
//readyStateHAVE_FUTURE_DATA
onPlayerCanplay(player) {},
//readyStateHAVE_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>

@ -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 './assets/styles/element-variables.scss'
import Element from "element-ui";
import "./assets/styles/element-variables.scss";
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'
import "@/assets/styles/index.scss"; // global css
import "@/assets/styles/ruoyi.scss"; // ruoyi css
import App from "./App";
import store from "./store";
import router from "./router";
import directive from "./directive"; // directive
import plugins from "./plugins"; // plugins
import { download } from "@/utils/request";
import './assets/icons' // icon
import './permission' // permission control
import "./assets/icons"; // icon
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.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
Vue.prototype.getDicts = getDicts;
Vue.prototype.getConfigKey = getConfigKey;
Vue.prototype.parseTime = parseTime;
Vue.prototype.resetForm = resetForm;
Vue.prototype.addDateRange = addDateRange;
Vue.prototype.selectDictLabel = selectDictLabel;
Vue.prototype.selectDictLabels = selectDictLabels;
Vue.prototype.download = download;
Vue.prototype.handleTree = handleTree;
// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component("DictTag", DictTag);
Vue.component("Pagination", Pagination);
Vue.component("RightToolbar", RightToolbar);
Vue.component("Editor", Editor);
Vue.component("FileUpload", FileUpload);
Vue.component("ImageUpload", ImageUpload);
Vue.component("ImagePreview", ImagePreview);
Vue.component("VideoPreview", VideoPreview);
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()
Vue.use(directive);
Vue.use(plugins);
Vue.use(VueMeta);
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),
});

File diff suppressed because it is too large Load Diff

@ -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://192.168.10.147:8080`,
target: `http://110.41.134.131:8080`,
// target: `http://192.168.10.147:8080`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",

Loading…
Cancel
Save