123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503 |
- <template>
- <div id="handsonStep1">
- <div class="btns-view">
- <el-button style="float:right;margin-top:4px;margin-left:10px;" @click="saveData">保存</el-button>
- <el-button style="float:right;margin-top:4px;" @click="addRow">新增行</el-button>
- <el-button style="float:right;margin-top:4px;" @click="downData">导出配置点位表</el-button>
- <el-button style="float:right;margin-top:4px;" @click="updateExcel = true">导入Excel</el-button>
- <el-button style="float:right;margin-top:4px;" @click="downloadExcel = true">导出Excel模板</el-button>
- <el-checkbox style="float:right;line-height:40px;" @change="getData" v-model="checked">只显示使用的原始点位</el-checkbox>
- <el-button @click="clickPointVal">获取原始点位当前值</el-button>
- </div>
- <div id="handsontableSteps1" v-loading="isLoading">
- <handsontable-component v-if="!!allData.length" @delete="delePoint" ref="handsontable" @mouseDown="clickTable" @change="changeHand"></handsontable-component>
- <div v-else class="center">
- <i class="iconwushuju iconfont"></i>
- 暂无数据
- </div>
- </div>
- <own-dialog :width="'500px'" :index="true" title="位置标签" :dialogVisible="localtionDialog" @cancel="closeFalg">
- <localtion-falg :renderData="renderData" @changeTag="changeLoc"></localtion-falg>
- </own-dialog>
- <own-dialog :width="'300px'" :index="true" title="导出excel模板" :dialogVisible="downloadExcel" @cancel="close">
- <div class="center">
- <el-button type="text" @click="download">下载模板</el-button>
- </div>
- </own-dialog>
- <own-dialog :width="'500px'" :index="true" :footer="footer" title="导出excel模板" :dialogVisible="updateExcel" @confirm="sureOfUpload" @cancel="close">
- <div class="center" style="height:100px;">
- <upload-file accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="changeFile"></upload-file>
- </div>
- <div>
- <el-radio class="radio-left" v-model="radio" label="1">默认使用导入的全部原始点位</el-radio>
- <el-radio class="radio-left" v-model="radio" label="2">默认不使用导入的全部原始点位</el-radio>
- </div>
- </own-dialog>
- <div class="right">
- <pagination :page="pages" @change="changePage"></pagination>
- </div>
- </div>
- </template>
- <script>
- import handsontableComponent from "@/components/common/handsontable"
- import getHeaderSetting from "@/utils/point_edit/handson_header"
- import ownDialog from "@/components/el_pack/dialog"
- import localtionFalg from "@/components/config_point/location_flag"
- import pagination from "@/components/common/myPagination"
- import "@/assets/js/chosen.jquery.min";
- import "@/assets/js/handsontable-chosen-editor";
- import Handsontable from "handsontable-pro"
- import {
- mapGetters,
- mapActions
- } from "vuex";
- import {
- changeHeader,
- showTypes
- } from "@/utils/handsontable/delType"
- import {
- queryPoint,
- updatePoint,
- createPoint,
- downloadTemplete,
- uploadPointFile,
- deletePoint,
- getPointValue
- } from "@/fetch/point_http"
- import uploadFile from "@/components/common/uploadFile"
- import axios from 'axios'
- export default {
- data() {
- return {
- checked: false,
- settings: {},
- hot: null,
- changeFlag: true, //是否发生修改
- localtionDialog: false,
- renderData: {},
- allData: [],
- pages: {
- size: 10,
- sizes: [10, 30, 50, 100],
- total: 0,
- currentPage: 0
- },
- oldPage: {
- currentPage: 0,
- size: 10
- },
- downloadExcel: false,
- isLoading: false,
- updateExcel: false,
- radio: '1',
- file: "", //上传的文件
- footer: {
- cancel: '取消',
- confirm: '确定'
- }
- }
- },
- computed: {
- ...mapGetters("project", [
- "projectId",
- "datasourceId",
- "protocolType"
- ])
- },
- created() {},
- mounted() {
- if (!this.protocolType) {
- this.$router.push({
- path: "/configPoint"
- })
- } else {
- this.getData()
- }
- },
- methods: {
- //关闭弹窗
- close() {
- this.downloadExcel = false
- this.updateExcel = false
- this.getData()
- },
- closeFalg() {
- this.localtionDialog = false
- },
- clickPointVal(){
- let data = this.hot.getSourceData()
- if(!data || !data.length){
- return false
- }
- console.log(data,'data')
- let param = {
- data: {
- DataSourceId: this.datasourceId,
- PointIds: data.map(item => {
- return item.Id
- })
- },
- type: this.protocolType
- }
- getPointValue(param,res => {
- console.log(res,'res')
- if(!!res.Content && res.Content.length){
- data.map(item => {
- res.Content.map(child => {
- if(item.Id == child.PointId){
- item.pointValue = child.Data.Data
- item.pointDate = child.Data.Time
- }
- })
- return item
- })
- }
- })
- },
- changeLoc(val) {
- this.renderData.LocationFlag = val
- this.changeFlag = false
- },
- downData() {
- let param = {
- method: 'post',
- url: `/pointconfig/point/${this.protocolType}/pointlist-export`,
- data: {
- DataSourceId: this.datasourceId
- },
- responseType: 'blob',
- headers: {
- ProjectId: this.projectId
- }
- }
- console.log(param, 'param')
- axios(param).then(function(res) {
- var blob = new Blob([res.data], {
- type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
- });
- var fileName = res.headers['content-disposition'];
- if (fileName)
- fileName = fileName.substring(fileName.indexOf('=') + 1);
- if ('download' in document.createElement('a')) { // 非IE下载
- const elink = document.createElement('a')
- elink.download = fileName
- elink.style.display = 'none'
- elink.href = URL.createObjectURL(blob)
- document.body.appendChild(elink)
- elink.click()
- URL.revokeObjectURL(elink.href) // 释放URL 对象
- document.body.removeChild(elink)
- } else { // IE10+下载
- navigator.msSaveBlob(blob, fileName)
- }
- }).catch(function(err) {
- console.dirxml(err);
- })
- },
- //删除点位
- delePoint(delData) {
- let param = {
- data: delData.map(item => {
- return item.Id
- }),
- type: this.protocolType
- }
- console.log(param, 'param')
- if (!param.length) {
- return false
- }
- this.$confirm('你确定要删除点位吗?').then(_ => {
- console.log(param, 'param')
- deletePoint(param, res => {
- this.$message.success("删除成功")
- this.getData()
- })
- }).catch(_ => {
- this.$message("取消删除")
- this.getData()
- })
- },
- //下载excel模板
- download() {
- axios({
- method: 'post',
- url: `/pointconfig/point/${this.protocolType}/template-export`,
- data: {
- DataSourceId: this.datasourceId
- },
- headers: {
- ProjectId: this.projectId
- },
- responseType: 'blob'
- }).then(function(res) {
- var blob = new Blob([res.data], {
- type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
- });
- var fileName = res.headers['content-disposition'];
- if (fileName)
- fileName = fileName.substring(fileName.indexOf('=') + 1);
- if ('download' in document.createElement('a')) { // 非IE下载
- const elink = document.createElement('a')
- elink.download = fileName
- elink.style.display = 'none'
- elink.href = URL.createObjectURL(blob)
- document.body.appendChild(elink)
- elink.click()
- URL.revokeObjectURL(elink.href) // 释放URL 对象
- document.body.removeChild(elink)
- } else { // IE10+下载
- navigator.msSaveBlob(blob, fileName)
- }
- }).catch(function(err) {
- console.dirxml(err);
- })
- },
- //点击表格
- clickTable(info, row) {
- let activeCell = this.hot.getActiveEditor()
- console.log(activeCell, 'activeCell')
- if(activeCell.prop == "Used"){
- info.Used = !info.Used
- }
- if (activeCell.prop == "LocationFlag") {
- this.renderData = info
- this.localtionDialog = true
- }
- },
- addRow() {
- if (!!this.allData.length) {
- let data = this.hot.getSourceData()
- data.unshift({})
- this.hot.loadData(data)
- this.hot.updateSettings({
- maxRows: data.length
- })
- } else {
- this.allData = [{}]
- this.createHot()
- }
- },
- //页面发生更改
- changePage() {
- if (!this.changeFlag) {
- //发生更改,提示是否保存
- this.$confirm('存在数据未保存, 是否继续?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- this.getData()
- }).catch(() => {
- this.pages.currentPage = this.oldPage.currentPage
- this.pages.size = this.oldPage.size
- return false
- });
- } else {
- this.getData()
- }
- },
- getData() {
- // width = (document.getElementById("app").clientWidth - 50) / header.length
- this.isLoading = true
- let param = {
- type: this.protocolType,
- data: {
- Filters: {
- DatasourceId: this.datasourceId,
- },
- "PageNumber": this.pages.currentPage || 1,
- "PageSize": this.pages.size,
- }
- }
- if (this.checked) {
- param.data.Filters.Used = true
- }
- this.oldPage = {
- size: this.pages.size,
- currentPage: this.pages.currentPage
- }
- queryPoint(param, res => {
- this.isLoading = false
- this.changeFlag = true
- this.allData = res.Content || []
- this.pages.total = res.Total
- this.createHot()
- })
- },
- //创建实例
- createHot() {
- let header, width, settings
- header = getHeaderSetting(this.protocolType)
- settings = {
- data: this.allData,
- colHeaders: changeHeader(header),
- columns: showTypes(header),
- rowHeights: 30,
- maxRows: this.allData.length,
- contextMenu: {
- items: {
- remove_row: {
- name: "删除点位"
- }
- }
- }
- }
- if (!this.allData.length) {
- return false
- }
- console.log(settings, 'settings')
- this.$nextTick(_ => {
- this.hot = this.$refs.handsontable.init(settings)
- console.log(this.hot)
- })
- },
- //修改提示
- changeHand(changeData, source) {
- if (!!changeData) {
- this.changeFlag = false
- }
- return false
- },
- //保存
- saveData() {
- if (!!this.hot) {
- console.log(this.hot.getSourceData())
- let data = this.hot.getSourceData(),
- updateList = [],
- arr1 = [],
- createList = [];
- data.map(item => {
- if (!!item.Id) {
- console.log(item)
- delete item.CreateTime
- delete item.LastUpdate
- if(item.hasOwnProperty('pointDate')){
- delete item.pointDate
- }
- if(item.hasOwnProperty('pointValue')){
- delete item.pointValue
- }
- arr1.push(item)
- updateList.push(item)
- } else {
- createList.push(item)
- }
- })
- console.log(updateList, arr1, "updateList")
- if (updateList.length) {
- this.update(updateList)
- }
- if (createList.length) {
- this.createList(createList)
- }
- } else {
- this.$message.error("请确保存在数据")
- }
- },
- async createList(createList) {
- console.log(createList)
- let i = 0;
- for (i; i < createList.length; i++) {
- if (createList[i].hasOwnProperty("Description")) {
- await this.create(createList[i])
- }
- }
- this.getData()
- this.changeFlag = true
- },
- async create(obj) {
- for (let key in obj) {
- if (key == "LocationFlag" && obj[key] == "") {
- obj[key] = []
- }
- if (obj[key] === "") {
- obj[key] = null
- }
- }
- obj.DatasourceId = this.datasourceId
- obj.ProjectId = this.projectId
- await createPoint({
- data: obj,
- type: this.protocolType
- }, res => {
- console.log(res)
- obj.Id = res.Id
- })
- },
- /**
- * @param {更新list} updateList
- *
- * 更新点位
- */
- update(updateList) {
- updatePoint({
- data: {
- Content: updateList
- },
- type: this.protocolType
- }, res => {
- console.log(res)
- this.getData()
- })
- },
- //没有保存的时候弹窗
- noSaveData() {
- return this.changeFlag
- },
- //上传文件
- changeFile(file) {
- this.file = file[0] || ''
- console.log(file, 'file')
- },
- //确定上传
- sureOfUpload() {
- if (!!this.file) {
- //有文件进行上传
- let param = {
- data: new FormData(),
- type: this.protocolType
- };
- param.data.set('DataSourceId', this.datasourceId)
- param.data.set('Used', this.radio == 1 ? true : false)
- param.data.set('multipartFile', this.file.raw)
- uploadPointFile(param, res => {
- this.$message.success("上传成功")
- this.getData()
- this.updateExcel = false
- })
- } else {
- this.$message.info("请选择文件")
- }
- }
- },
- components: {
- handsontableComponent,
- ownDialog,
- localtionFalg,
- pagination,
- uploadFile
- },
- }
- </script>
- <style lang="scss" scoped>
- .radio-left {
- display: block;
- line-height: 30px;
- margin-left: 100px;
- }
- #handsonStep1 {
- flex: 1;
- display: flex;
- flex-flow: column;
- .btns-view {
- height: 40px;
- line-height: 40px;
- margin-bottom: 10px;
- }
- #handsontableSteps1 {
- flex: 1;
- overflow: hidden;
- position: relative;
- }
- }
- </style>
|