algo_manage_back.vue

<template>
  <div class="innnerBox">
    <el-col :span="22">
      <el-form ref="form" label-width="80px" inline>
				 <el-form-item label="算法类型">
          <span class="selectBox">
						 <el-select v-model="algoSet" placeholder="请选择算法类型" @change="refreshAlgo" class="algo-header-left">
							<el-option value="picture" label="图片算法"></el-option>
							<el-option value="video" label="视频算法"></el-option>
						</el-select>
          </span>
        </el-form-item>
      </el-form>
    </el-col>
		 <el-col :span="2">
				<el-button class="" type="primary" @click="addalgomanage">添加</el-button>
        <el-button class="mt10" @click="refreshAlgo">刷新</el-button>
    </el-col>
    <div class="table-box mt10" >
      <el-table :data="tableData" tooltip-effect="dark" ref="multipleTable" height="700" style="width: 100%"  @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="index" width="55">
        </el-table-column>
        <el-table-column prop="refid" align="center" label="算法编号">
        </el-table-column>
        <el-table-column prop="algid" align="center" label="算法名称">
        </el-table-column>
        <el-table-column prop="address" align="center" label="算法包类型">
          <template slot-scope="scope">
            <div>
              {{filterAlgoName(scope.row.cate) ? filterAlgoName(scope.row.cate) : '无'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上传时间">
          <template slot-scope="scope">
            <div>
              {{scope.row.upload_dt ? scope.row.upload_dt : '无'}}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div>
          <!-- <el-pagination class="fr mt10" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="search.currentPage" :page-sizes="[20,100, 200, 300, 400]" :page-size="search.size"
          layout="total, sizes, prev, pager, next, jumper" :total="search.total">
        </el-pagination> -->
				  <div style="margin-top: 28px;">
        <el-pagination
          style="float: right;"
          background
          prev-text="上一页"
          next-text="下一页"
          :page-sizes="[30, 50, 100, 200]"
          layout="total, prev, pager, next,sizes, jumper"
          :current-page="search.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="search.total"
        >
        </el-pagination>
        <div style="clear: both;"></div>
      </div>
      </div>
    </div>
    <div>
    <el-dialog title="添加算法" :visible.sync="isShow" width="30%" class="add-algomanage-box">
        <el-col :span="24" class="search-item">
          <el-col :span="6" class="search-label">算法类型:</el-col>
          <el-col :span="10">
            <el-select v-model="algoType" placeholder="请选择算法类型" @change="refreshAlgo" class="algo-header-left">
              <el-option value="picture_algo" label="图片算法"></el-option>
              <el-option value="video_algo" label="视频算法"></el-option>
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="24" class="search-item">
          <el-col :span="6" class="search-label">算法包:</el-col>
          <el-col :span="10">
            <el-input v-model="filename"></el-input>
            <input type="file" hidden @change="setfile" ref="upload" id="algo_file">
          </el-col>
          <el-col :span="4">
            <el-button @click="searchfile">浏览</el-button>
          </el-col>
        </el-col>
        <el-col :span="24">
          <div class="algo-group algo-progress-bar" v-if="progress_status">
            <span class="progress-text">上传进度</span>
            <div class="graph">
              <strong id="algoBar"></strong>
            </div>
          </div>
        </el-col>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="addAlgo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        algoSet: 'picture',
        addalgoSet:'video',
        progress_status:false,
        algoType:'picture_algo',
        tableData: [],
        filename:'',
        isShow: false,
        details: [],
        fileList:[],
        fileIds:'',
        search:{
          size:20,
          limit:20,
          offset:0,
          currentPage:0,
          total:0
        }
      }
    },
    methods: {
      handlePreview(){},
      submitUpload() {
        this.$refs.upload.submit();
      },
      searchfile(){
        this.$refs.upload.click()
      },
      setfile(e){
        try {
          this.filename = event.target.files[0].name;
          this.fileIds = this.randomChar(32);
        }catch(err){
           this.filename = '';
        }
        if(this.filename !== '') {
          let algoFileExt = this.filename.slice(-7);
					if(algoFileExt !== ".tar.gz") {
						this.filename = "";
						this.$message({
							type: 'warning',
							message: '目前只支持"*.tar.gz"文件'
						})
					}
        }
      },
      randomChar: function (l) {
				var x = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
				var tmp = "";
			 	for(var i=0;i< l;i++) {
			 		tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
			 	}
			 	return tmp;
			},
      addalgomanage(){
        this.isShow = true;
      },
      addAlgo(){
        this.progress_status = true
        var formData = new FormData();
				formData.append('list[0].file', document.getElementById('algo_file').files[0]);
				formData.append('list[0].file_type', this.algoType);
				let formConf = {
					headers: {
						'content-type': 'multipart/form-data',
						'authorization': window.localStorage.getItem('atoken')
					},
					onUploadProgress: progressEvent => {
						var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%';
						$('#algoBar').css({
							width: complete
						}).text(complete)
					}
				};
        let algoUrl = this.$api.baseurl + '/api/v1/devconf_fx/devs/'+ this.dev_unid +'/fx_devs/upfile?file_id=' + this.fileIds;
				this.axios.post(algoUrl, formData, formConf).then(res => {
					if(res.data.ecode != undefined && res.data.ecode != 200) {
						this.$message({
							type: 'error',
							message: '添加算法失败!' + res.data.enote
						})
						this.algoFileName = "";
						document.getElementById('algo_file').value = '';
					} else {
						// setTimeout(() => {
							this.algoFileShow = false;
							this.modalShow = false;
							this.progress_status = false;
							this.httpSending = 0;
							$('#algoBar').css({
								width: '0'
							})
							this.getData(1);
							this.$message({
								type: 'success',
								message: '添加算法成功!'
							})
						// },2000);
					}
				}).catch(err => {
					console.log(err);
				})
      },
      handleSelectionChange(){
        this.refreshAlgo();
      },
      refreshAlgo() {
        this.getData();
        this.search.offset = 0;
        this.search.currentPage = 1;
      },
      getData() {
        this.loading = true
        this.$api.device.algos(this.dev_unid, 
          {
            offset: this.search.offset,
            limit: this.search.limit,
            algo_set: this.algoSet
        }).then(m => {
          this.tableData = m.list_data;
          this.search.total = m.total_num
          this.loading = false
        })
      },
      handleSizeChange(val){
        this.search.limit = val
        this.getData()
      },
      handleCurrentChange(val){
        this.search.currentPage = val;
        this.search.offset = (val-1)*this.search.size
        this.getData()
      },
      filterAlgoName: function (str) {
				var zhType = '';
				switch (str) {
					case 'traffic':
						zhType ='交通';
						break;
					case 'Safety':
						zhType ='安防';
						break;
					case 'FlowCount':
						zhType ='客流';
						break;
					default:
						break;
				}
				return zhType;
			}
    },
    created() {
      this.getData()
    },
  }

</script>
<style lang="stylus" scoped>
.algo_manage{
		width:100%
	}

	.algo_manage_header{
		background-color: rgba(23,39,68,.7);
		margin: 0 10px 5px;
		border-radius: 3px;
		font-size: 18px;
		padding: 0 5%;
		height: 46px;
		line-height: 46px;
		position: relative;
		z-index: 50;
		overflow: hidden;
	}

	.algo-header-left {
		float: left;
	}

	.algo-header-right {
		float: right;
		padding-right: 5%;
		box-sizing: border-box;
	}

	.algo-header-right button{
		width: 80px;
		margin-left: 0.5%;
		line-height: 35px;
	}
	#program_path {
		font-size: 14px
	}
	/**
	 * 复选框
	 */
	.algo-table label span{
	    display: inline-block;
	    width: 15px;
	    height: 15px;
	    border: 1px solid #fff;
	    border-radius: 2px;
	}

	.algo-table li label span.active {
		background: #2194ef;
	    border: none;
	}

	/*表格样式*/
	.algo-table {
		position: relative;
		z-index: 50;
	}

	.algo-thead {
		border-left: 4px solid rgba(12,21,48,.8);
	}

	.algo-table li {
		 width: 22%;		/* 18% */
		overflow: hidden;
	}

	.algo-table li:first-child {
		width: 8%;
	}

	.algo-table li:last-child {
		width: 26%;		/* 20% */
	}

	.algo-table li:last-child button {
		width: 31%;
		line-height: 35px;
	}

	/*模态框*/
	.modal-title .title {
		font-size: 18px;
	}

	.modal-body {
		position: relative;
		padding-right: 90px;
		padding-bottom: 20px;
	}

	.algo-group {
		height: 56px;
		line-height: 45px;
		font-size: 18px;
		text-align: left;
		margin-left: 10%
	}
	label {
		font-size: 16px
	}

	.algo-group label:first-child {
		width: 94px;
		padding-right: 5px;
		line-height: 40px;
	}

	.algo-group label:last-child {
		 /* width: 22%;  */
		padding: 0 10px;
	    height: 30px;
	    line-height: 30px;
		margin-left: 10px;
		background: linear-gradient(to bottom, #359CED, #225D8C);
		border: 1px solid #65B4F3;
	    border-radius: 5px;
		position: absolute;
		/* right: 106px;  */
	    margin-bottom: 0px;
	    margin-top: 7px;
		font-size: 15px;
	}

	/* #algo_file {
		position: absolute;
		left: 0;
		top: 0;
	} */

	.algo-type {
		width: 54%;
	}

	.algo-group .program-path {
		width: 54% !important;
	}

	/**
	 * 进度条
	 */
	div.algo-progress-bar {
		/* padding-left: 31.8%; */
		/* position: relative; */
		/* height: 26px; */
		height: 56px;
		line-height: 45px;
		/* line-height: 26px; */
	}

	/* div.algo-progress-bar:before {
		content: "上传进度";
		display: block;
		position: absolute;
		left: 14%;
	} */

	.progress-text {
		font-size: 16px;
		display: inline-block;
		width: 94px;
		padding-right: 5px;
		line-height: 40px;
	}

	.graph {
	    height: 26px;
		width: 54%;
		display: inline-block;
	    border-radius: 4px;
	    overflow: hidden;
		position: relative;
		top: 8px;
	}

	#algoBar {
	    display: block;
	    background: #4cb050;
	    float: left;
	    height: 100%;
	    text-align: center;
		  line-height: 26px;
	}

	.algo-modal-footer button {
		height: 40px;
		line-height: 36px;
		 width: 10%;
	}

	.list_page {
		z-index: 51;
	}

	/*禁用选中文字*/
	*.unselectable {
		-moz-user-select: -moz-none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
</style>