自定义看板设计

languages/zh-CN.js

@@ -1021,7 +1021,7 @@ module.exports = {
     deviceFrame: '设备空间',
     ledDevice: 'LED点阵屏',
     entraceguardUser: '用户通行设置',
-    customBoardManage: '自定义信息看板屏',
+    customBoardManage: '信息看板设计',
     customBoardDesigner: '看板屏设计',
     staffManageFrames: '空间管理设置'
   },

src/api/ncs_board.js

@@ -13,3 +13,24 @@ export function getBoardTitles(partid) {
     loading: false
   })
 }
+
+
+
+export function getBedInfo(partid) {
+  return request({
+    baseURL:domain.DeviceUrl,
+    url: `/boardinfo/beditems/${partid}`,
+    method: 'get',
+    loading: false
+  })
+}
+
+
+export function getPartStatisticSummary(partid) {
+  return request({
+    baseURL:domain.DeviceUrl,
+    url: `/boardinfo/getpartstatisticsummary/${partid}`,
+    method: 'get',
+    loading: false
+  })
+}

src/api/ncs_board_title.js

@@ -55,29 +55,24 @@ export function get(id, params) {
     })
 }
 
-/**
- * 获取频道的订阅者列表 返回List<ClerkDO> 或null
- * @param id 频道Id
- * @returns {AxiosPromise | * | Promise | Promise<unknown>}
- */
-export function getChannelSubscribers(id) {
+
+/** 保存为默认设计 */
+export function saveAsDefault(id, params) {
     return request({
-        url: `/channelsubscribe/subscribers/${id}`,
-        method: 'get',
-        loading: false
+        url: `/ncs/boardtitle/saveasdefault/${id}`,
+        method: 'put',
+        data: params
     })
 }
 
-/**
- * 批量设置频道订阅者
- * @param params {channel_id:12,member_ids:[]}
- * @returns {*|Promise|Promise<unknown>}
- */
-export function setChannelSubscribers(params) {
+
+
+/** 加载默认设计 */
+export function getDefault(id, params) {
     return request({
-        url: `/channelsubscribe/subscribers`,
-        method: 'post',
+        url: `/ncs/boardtitle/defaultdesign/${id}`,
+        method: 'get',
         loading: false,
-        data: params
+        params
     })
 }

src/api/ncs_nurse_config.js

@@ -46,3 +46,11 @@ export function getConfigSelectionByPartId(part_id) {
   })
 }
 
+
+export function getNurseConfigsByPartId(part_id) {
+  return request({
+    url: `/ncs/nurse_config/all/${part_id}`,
+    method: 'get'
+  })
+}
+

src/main.js

@@ -11,6 +11,7 @@ import zhLang from 'element-ui/lib/locale/lang/zh-CN'
 import 'ag-grid-community/dist/styles/ag-grid.css'
 import 'ag-grid-community/dist/styles/ag-theme-alpine.css'
 import '@/styles/index.scss' // global css
+import '@/styles/iconfont.css'
 
 import App from './App'
 import store from './store'

src/router/index.js

@@ -482,7 +482,7 @@ export const partRoutes = [
     children: [
       {
         path: 'index/:id?',
-        component: () => import('@/views/custom-infoboard/screen-designer'),
+        component: () => import('@/views/custom-infoboard/infoboard-designer'),
         name: 'BoardDesigner',
         meta: { title: i18n.t('tab.customBoardDesigner'), icon: 'el-icon-data-board', noCache: true }
       }

src/styles/iconfont.css

@@ -0,0 +1,84 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4021128 */
+  src: url('iconfont.woff2?t=1681870741668') format('woff2'),
+       url('iconfont.woff?t=1681870741668') format('woff'),
+       url('iconfont.ttf?t=1681870741668') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  align-self: center;
+}
+
+.icon-Columns:before {
+  content: "\e651";
+}
+
+.icon-Row:before {
+  content: "\e655";
+}
+
+.icon-Text:before {
+  content: "\e673";
+}
+
+.icon-24gl-grid:before {
+  content: "\ea98";
+}
+
+.icon-line-card:before {
+  content: "\e65d";
+}
+
+.icon-yisheng:before {
+  content: "\e649";
+}
+
+.icon-hushi:before {
+  content: "\e661";
+}
+
+.icon-Bed:before {
+  content: "\e6ee";
+}
+
+.icon-Bed1:before {
+  content: "\e64b";
+}
+
+.icon-Bed2:before {
+  content: "\e64d";
+}
+
+.icon-yisheng1:before {
+  content: "\e7ad";
+}
+
+.icon-yisheng2:before {
+  content: "\e69d";
+}
+
+.icon-nvhushi1:before {
+  content: "\e6b2";
+}
+
+.icon-bed:before {
+  content: "\e845";
+}
+
+.icon-user-nurse:before {
+  content: "\ebc3";
+}
+
+.icon-a-pinpaiyisheng2x:before {
+  content: "\e62c";
+}
+
+.icon-hushi-01:before {
+  content: "\e61c";
+}
+

src/views/custom-infoboard/board-title.vue

@@ -53,7 +53,7 @@
                         </el-col>
                         <el-col :span="12">
                             <el-form-item :label="this.$t('boardTitle.showIndex')" prop="board_index">
-                                <el-input-number v-model="formmodel.board_index" :min="3" :max="100" :label="this.$t('boardTitle.showIndex')" />
+                                <el-input-number v-model="formmodel.board_index" :min="1" :max="100" :label="this.$t('boardTitle.showIndex')" />
                             </el-form-item>
                         </el-col>
                     </el-row>

src/views/custom-infoboard/infoboard-designer.vue

@@ -18,90 +18,72 @@
 <!--                            </draggable>-->
 <!--                        </div>-->
 <!--                    </template>-->
-                    <draggable v-model="templateArray"  :options="tplOptions" :clone="clonedata">
-                        <div v-for="item in templateArray" :class="'item-' + item.tpl_id" class="tpl-item">
-                            <el-row>
-                                <el-col :span="24/item.tpl_id" v-for="size in item.tpl_id" :key="size" class="grid-content" :class="'bg-purple-'+size"></el-col>
-                            </el-row>
-                            <span class="text-tpl">{{ templates[item.tpl_id].title }}</span>
-                        </div>
+                    <el-header height="40px" class="_fc-r-tabs">
+                        <div >组件列表</div>
+                        <!--                            <div class="_fc-r-tab" v-if="!config || config.showFormConfig !== false" :class="{active: activeTab==='form' && !!activeRule}"-->
+                        <!--                                 @click="activeTab='form'">表单配置-->
+                        <!--                            </div>-->
+                    </el-header>
+                    <el-row style="margin-top: 10px">
+                    <draggable v-model="templateArray"  :options="tplOptions" :clone="clonedata" >
+
+                            <el-col :span="12" v-for="item in templateArray" class="draggableitem text-center"  :class="'item-' + item.tpl_id" :key="item.tpl_id">
+                                <div >
+                                <div class="iconfont" style="font-size: 26px"  :class="item.moduleIconClass"></div>
+                                <span class="text-tpl">{{ templates[item.tpl_id].title }}</span>
+                                </div>
+                            </el-col>
+
+<!--                        <div v-for="item in templateArray" :class="'item-' + item.tpl_id" class="tpl-item">-->
+<!--                            <el-row>-->
+<!--                                <el-col :span="24/item.tpl_id" v-for="size in item.tpl_id" :key="size" class="grid-content" :class="'bg-purple-'+size"></el-col>-->
+<!--                            </el-row>-->
+<!--                            <span class="text-tpl">{{ templates[item.tpl_id].title }}</span>-->
+<!--                        </div>-->
 
 
                     </draggable>
+                    </el-row>
 
                 </el-aside>
                 <el-container class="_fc-m">
-<!--                    <el-header class="_fc-m-tools" height="45">-->
-<!--                        <slot name="handle"></slot>-->
-<!--                        <el-button type="primary" icon="fc-icon icon-preview" plain round size="mini"-->
-<!--                                   @click="previewFc">预 览-->
-<!--                        </el-button>-->
-<!--                        <el-popconfirm-->
-<!--                                title="清空后将不能恢复，确定要清空吗？"-->
-<!--                                style="margin-left: 10px;"-->
-<!--                                confirm-button-text="清空"-->
-<!--                                cancel-button-text="取消"-->
-<!--                                @confirm="clearDragRule"-->
-<!--                        >-->
-<!--                            <el-button slot="reference" type="danger" icon="fc-icon icon-delete" plain round size="mini">清 空-->
-<!--                            </el-button>-->
-<!--                        </el-popconfirm>-->
-
-<!--                    </el-header>-->
-                    <el-main style="background: #F5F5F5;padding: 20px;">
-                        <div class="_fc-m-drag">
-                            <nest-draggable :tasks="abc" @add="addItem" @delete="deleteData">
+
+                    <el-main style="background: #fff;padding: 0px;">
+                        <el-header class="_fc-m-tools" height="45">
+
+                            <el-button type="primary" icon="fc-icon icon-preview" plain round size="mini"
+                                       @click="getDefaultBoardTitle">载入默认设计
+                            </el-button>
+                            <el-button type="danger" icon="fc-icon icon-preview" plain round size="mini"
+                                       @click="saveAsDefault">保存为默认设计
+                            </el-button>
+
+                            <el-button type="primary" icon="fc-icon icon-preview" plain round size="mini"
+                                       @click="handleSaveFloor">保存设计
+                            </el-button>
+                            <el-button type="success" icon="fc-icon icon-preview" plain round size="mini"
+                                       @click="preview">预 览
+                            </el-button>
+
+                        </el-header>
+                        <div class="_fc-m-drag" style="height: 90%;background: #eeeeee;padding: 10px;display: flex;flex-direction: column;">
+                            <nest-draggable :tasks="floorList" :module-style="{'marginTop':'auto'}" :bind-data="boardBedsInfo" :show="show" :board-customer-items="boardItems" :statistic-data="partStatistic" @add="addItem" is-edit @delete="deleteData" @copy="copyData" @active="activeModule">
 
                             </nest-draggable>
 
-<!--                            <draggable v-model="abc" :options="floorOptions" class="tpl-list" @add="addItem">-->
-<!--                                <div v-for="(item, index) in abc" :class="'item-' + item.tpl_id" class="floor-item">-->
-<!--                                    <nest-component :tpl-id="item.tpl_id"-->
-<!--                                                    :data="JSON.parse(JSON.stringify(item))"-->
-<!--                                    ></nest-component>-->
-<!--&lt;!&ndash;                                <component&ndash;&gt;-->
-<!--&lt;!&ndash;                                        :is="templates[item.tpl_id]"&ndash;&gt;-->
-<!--&lt;!&ndash;                                        :data="JSON.parse(JSON.stringify(item))"&ndash;&gt;-->
-<!--&lt;!&ndash;                                        is-edit&ndash;&gt;-->
-<!--&lt;!&ndash;                                        @edit-block="(...props) => {  handleEditBlock(index, ...props) }"&ndash;&gt;-->
-<!--&lt;!&ndash;                                        @edit-title="(...props) => { handleEditTitle(index, ...props) }"&ndash;&gt;-->
-<!--&lt;!&ndash;                                        @edit-tags="(...props) => { handleEditTags(index, ...props) }"&ndash;&gt;-->
-<!--&lt;!&ndash;                                ></component>&ndash;&gt;-->
-<!--                                </div>-->
-<!--                            </draggable>-->
+
                         </div>
                     </el-main>
                 </el-container>
                 <el-aside class="_fc-r" width="320px" >
                     <el-container style="height: 100%;">
-<!--                        <el-header height="40px" class="_fc-r-tabs">-->
-<!--                            <div class="_fc-r-tab" :class="{active: activeTab==='props'}" v-if="!!activeRule || (config && config.showFormConfig === false)"-->
-<!--                                 @click="activeTab='props'">组件配置-->
-<!--                            </div>-->
-<!--                            <div class="_fc-r-tab" v-if="!config || config.showFormConfig !== false" :class="{active: activeTab==='form' && !!activeRule}"-->
-<!--                                 @click="activeTab='form'">表单配置-->
-<!--                            </div>-->
-<!--                        </el-header>-->
-<!--                        <ElMain v-show="activeTab==='form'" v-if="!config || config.showFormConfig !== false">-->
-<!--                            <component :is="FormCreate" :rule="form.rule" :option="form.option"-->
-<!--                                       :value.sync="form.value.form"></component>-->
-<!--                        </ElMain>-->
-<!--                        <ElMain v-show="activeTab==='props'" style="padding: 0 20px;"-->
-<!--                                :key="activeRule ? activeRule._id: ''">-->
-<!--                            <div>-->
-<!--                                <ElDivider v-if="showBaseRule">基础配置</ElDivider>-->
-<!--                                <component :is="FormCreate" v-show="showBaseRule" v-model="baseForm.api" :rule="baseForm.rule"-->
-<!--                                           :option="baseForm.options"-->
-<!--                                           @change="baseChange"></component>-->
-<!--                                <ElDivider>属性配置</ElDivider>-->
-<!--                                <component :is="FormCreate" v-model="propsForm.api" :rule="propsForm.rule" :option="propsForm.options"-->
-<!--                                           @change="propChange" @removeField="propRemoveField"></component>-->
-<!--                                <ElDivider v-if="showBaseRule">验证规则</ElDivider>-->
-<!--                                <component :is="FormCreate" v-show="showBaseRule" v-model="validateForm.api" :rule="validateForm.rule"-->
-<!--                                           :option="validateForm.options"-->
-<!--                                           @update:value="validateChange"></component>-->
-<!--                            </div>-->
-<!--                        </ElMain>-->
+                        <el-header height="40px" class="_fc-r-tabs">
+                            <div>组件配置</div>
+
+                        </el-header>
+                        <div class="text-center" style="color: #FF2E2E">{{ activeModuleTitle }}</div>
+                        <module-config :module-config="modueConfigModel"></module-config>
+
                     </el-container>
                 </el-aside>
 <!--                <ElDialog :visible.sync="preview.state" width="800px" append-to-body>-->
@@ -109,6 +91,12 @@
 <!--                </ElDialog>-->
             </el-container>
         </el-main>
+
+        <el-dialog title="设计预览" fullscreen :visible.sync="previewVisible">
+
+             <nest-component :tasks="floorList" :bind-data="boardBedsInfo" :show="show" :board-customer-items="boardItems" :statistic-data="partStatistic"></nest-component>
+
+        </el-dialog>
     </el-container>
 
 
@@ -128,10 +116,15 @@
     import NestComponent from "./nest-component";
     import NestDraggable from "./nest-draggable";
     import { nanoid } from 'nanoid'
+    import {deepClone} from '@/utils/Foundation'
+    import ModuleConfig from "./templates/moduleConfig";
+    import * as  API_Board from '@/api/ncs_board'
+    import * as API_BoardItem from '@/api/ncs_board_item'
+    import * as API_BoardTitle from '@/api/ncs_board_title'
     Vue.use(VueLazyload)
     export default {
         name: "infoboard-designer",
-        components:{NestDraggable, NestComponent, TextDisplay, draggable},
+        components:{ModuleConfig, NestDraggable, NestComponent, TextDisplay, draggable},
         provide() {
             return {
                 fcx: {
@@ -139,20 +132,50 @@
                 }
             }
             },
+       async mounted(){
+           this.getBoardTitle()
+           this.getBoardBedItems()
+            this.getPartStatisticSummary()
+            this.boardItems = await API_BoardItem.getPartList(this.$store.getters.partId)
+
+
+           const _this = this
+           let index =0;
+           // setInterval(function () {
+           //     index++
+           //     _this.show=false
+           //     _this.boardBedsInfo = {..._this.boardBedsInfoRaw,items:_this.boardBedsInfoRaw.items.slice((index-1)*5,index*5)}
+           //     setTimeout(function () {
+           //         _this.show=true
+           //     },600)
+           //
+           // },5000)
+        },
         data() {
 
             return {
                 templates,
                 templateArray:[...templateArray],
-                props:{
-                    type:'danger',
-                    size:'small',
-                    text:'sfdf'
-                },
-                abc:[],
+                previewVisible:false,
+                //看板标题
+                titleData:{},
+                //标题id
+                titleId:this.$route.params.id,
+                /** 看板床位数据**/
+                boardBedsInfo:{},
+                /** 看板床位原始数据**/
+                boardBedsInfoRaw:{},
+                 /** 科室统计信息**/
+                partStatistic:{},
+                /** 当前激活的模块名称*/
+                activeModuleTitle:'',
+                /** 设计数据 **/
+                floorList:[],
+                boardItems:[],
                 tplOptions: {
                     group: { name: 'tplGroup', pull: 'clone', put: false },
-                    sort: false
+                    sort: false,
+                    handle: '.draggableitem'
                 },
                 tplOptions2: {
                     group: { name: 'child', pull: 'clone', put: false },
@@ -164,80 +187,24 @@
                     sort: true,
                     handle: '.handle-move'
                 },
-
-                boardInfo: {
-                    header: {
-                        tpl_id: 4, //模板id
-                        tpl_box_style: {},//标题模块样式
-                        visible: true, //是否显示模块
-                        moduleStyle: {
-                            blockHeight: 60,
-                            background:'#0081ff'
-                        },
-                        columnList: [
-                            {
-                                label: '标题',
-                                content: '内容',
-                                labelColor: '#333333',
-                                labelBgColor: '#ffffff',
-                                labelTextSize: 22,
-                                labelAlign: 'right',
-                                labelWidth: 200,
-                                contentColor: '#333333',
-
-                                contentTextSize: 22,
-                                blockWidth: 8,
-                                boardItemHisKeyVal: ''
-                            },
-                            {
-                                label: '标题',
-                                content: '内容',
-                                contentColor: '#fff',
-                                contentTextSize: 22,
-                                contentAlign:'center',
-                                blockWidth: 10
-                            }
-                            ,
-                            {
-                                label: '标题',
-                                content: '内容',
-                                labelColor: '#333333',
-                                labelBgColor: '#ffffff',
-                                labelTextSize: 22,
-                                labelAlign: 'right',
-                                labelWidth: 200,
-                                contentColor: '#fff',
-
-                                contentTextSize: 22,
-                                blockWidth: 6,
-                                boardItemHisKeyVal: ''
-                            }
-                        ]
-                    },
-                    body: {
-                        tpl_id: 5, //模板id
-                    },
-                    footer: {}
-                }
+                show:true,
+                modueConfigModel:{}
             }
         },
+        beforeRouteUpdate(to, from, next) {
+            this.titleId = to.params.id
+            next()
+        },
+        activated() {
+            this.titleId = this.$route.params.id
+        },
         computed: {
-            // 楼层模板盒子样式
-            tplBoxStyle() {
-                const { sidebar } = this.$store.getters
-                let left = (sidebar.opened ? 210 : 60)
-                left = this.tplBoxShow ? left : left - 300
-                return {
-                    left: left + 'px'
-                }
-            },
+
             floorContainerHeight() {
                 return  this.mainAreaHeight
-            },
-            partInfo() {
-                return this.$store.getters.organization
             }
         },
+
         methods: {
             /** 保存发布 */
             handleSaveFloor() {
@@ -245,12 +212,17 @@
                 API_BoardTitle.update(this.titleData.id, this.titleData).then(() => this.$message.success('保存发布成功！'))
             },
 
+            saveAsDefault() {
+                this.titleData.content_config = JSON.stringify(this.floorList)
+                API_BoardTitle.saveAsDefault(this.titleData.id, this.titleData).then(() => this.$message.success('保存成功！'))
+            },
+
+
             clonedata(origin){
                 const data = JSON.parse(JSON.stringify(origin))
                 if(data.unique===''||data.unique===undefined){
                     data.unique=nanoid(10)
                 }
-                console.log('clone',data)
                 return data
             },
             handleBoardItemSet(settingData) {
@@ -267,8 +239,8 @@
                 this.$set(this.floorList, index, blockdata)
             },
             addItem(){
-                console.log('abc',this.abc)
-                console.log('templatearray',this.templateArray)
+
+                // console.log('templatearray',this.templateArray)
             },
             /** 编辑楼层区块 */
             handleEditBlock(index, target, columnIndex) {
@@ -326,23 +298,9 @@
             getBoardTitle() {
                 API_BoardTitle.get(this.titleId, {}).then(
                     res => {
-                        console.log('res', res)
                         this.titleData = {...res}
                         if (res.content_config !== null && res.content_config !== '') {
                             this.floorList = JSON.parse(res.content_config)
-                            this.floorList.forEach(item => {
-                                item.columnList.forEach(col => {
-                                    if (col.boardItemHisKeyVal !== '') {
-                                        console.log('col', this.boardItems)
-                                        const boardItem = this.boardItems.filter(p => p.his_keyval === col.boardItemHisKeyVal)[0]
-                                        console.log('boardItem', boardItem)
-                                        if (boardItem !== null && boardItem !== undefined) {
-                                            col.content = boardItem.area_content
-                                            col.label = boardItem.area_label
-                                        }
-                                    }
-                                })
-                            })
                         } else {
                             this.floorList = []
                         }
@@ -351,23 +309,45 @@
                     this.$message.error(error.message)
                 })
             },
+
+            getDefaultBoardTitle() {
+                API_BoardTitle.getDefault(this.titleId, {}).then(
+                    res => {
+                        this.titleData = {...res,id:this.titleId}
+                        if (res.content_config !== null && res.content_config !== '') {
+                            this.floorList = JSON.parse(res.content_config)
+                        } else {
+                            this.floorList = []
+                        }
+                    }
+                ).catch(error => {
+                    this.$message.error(error.message)
+                })
+            },
+
             deleteData(unique){
-                this.deleteArrayData(this.abc,unique)
+                this.deleteArrayData(this.floorList,unique)
+
 
-                console.log('data delete ')
             },
+            copyData(unique){
+
+            this.copyArrayData(this.floorList,unique)
+
+            },
+
+            copyArrayData(data, id) {
 
-            deleteArrayData(data, id) {
-                let node = null
                 if (data.length > 0) {
                     for (var i = 0; i < data.length; i++) {
                         if (data[i].unique === id) {
-                            node = data[i]
-                            data.splice(i,1)
+                            let copydata = deepClone(data[i])
+                            this.changeDataUnique(copydata)
+                            data.splice(i+1,0,copydata)
                             return
                         }
                         if (data[i].children && data[i].children.length > 0) {
-                              this.deleteArrayData(data[i].children, id)
+                            this.copyArrayData(data[i].children, id)
                             // if (subresult !== null) {
                             //     node = subresult
                             //     break
@@ -377,6 +357,81 @@
                 }
                 // delete node
             },
+            /**
+             * 修改数组元素unique,在复制节点时，需修改unique
+             * @param arr
+             */
+            changeDataUnique(node){
+
+                if (node.unique) {
+                    node.unique=nanoid(10)
+
+                        if (node.children && node.children.length > 0) {
+                            for (let i = 0; i < node.children.length; i++) {
+                                this.changeDataUnique(node.children[i])
+                            }
+                        }
+                }
+
+
+            },
+
+            deleteArrayData(data, id) {
+                if (data.length > 0) {
+                    for (var i = 0; i < data.length; i++) {
+                        if (data[i].unique === id) {
+                            data.splice(i,1)
+                            return
+                        }
+                        if (data[i].children && data[i].children.length > 0) {
+                              this.deleteArrayData(data[i].children, id)
+                        }
+                    }
+                }
+            },
+
+            /** 树形结构中查找指定Id节点 */
+            findNodeById(data, id) {
+                let node = null
+                if (data.length > 0) {
+                    for (var i = 0; i < data.length; i++) {
+                        if (data[i].unique === id) {
+                            node = data[i]
+                            break
+                        }
+                        if (data[i].children && data[i].children.length > 0) {
+                            const subresult = this.findNodeById(data[i].children, id)
+                            if (subresult !== null) {
+                                node = subresult
+                                break
+                            }
+                        }
+                    }
+                }
+                return node
+            },
+            activeModule(unique){
+                let node =this.findNodeById(this.floorList,unique)
+
+                this.modueConfigModel=node.moduleConfig
+                this.activeModuleTitle = this.templates[node.tpl_id].title
+            },
+            preview(){
+              this.previewVisible=true
+            },
+            getBoardBedItems(){
+                API_Board.getBedInfo(this.$store.getters.partId).then(res=>{
+
+                    this.boardBedsInfoRaw={...res}
+                    this.boardBedsInfo = {...res}
+
+                })
+            },
+            getPartStatisticSummary(){
+                API_Board.getPartStatisticSummary(this.$store.getters.partId).then(res=>{
+                    this.partStatistic = {...res}
+                })
+            }
 
         }
     }
@@ -624,5 +679,26 @@
     /deep/ .el-scrollbar {
         width: 100%;
     }
+ ._fc-r-tabs{
+     background: #fff;
+     border-bottom: 1px solid #ececec;
+     text-align: center;
+     line-height: 40px;
+ }
+    /deep/ .el-aside{
+        background: #fff;
+        padding: 0;
+    }
 
+    ._fc-m-tools {
+        align-items: center;
+        border: 1px solid #ececec;
+        border-top: 0;
+        display: flex;
+        height: 40px;
+        justify-content: flex-end;
+    }
+    /deep/ .el-dialog__body{
+        padding:0;
+    }
 </style>

src/views/custom-infoboard/mixinnew.js

@@ -1,7 +1,8 @@
 import dragtool from './templates/DragTool'
+import {unix2Date} from '@/utils/Foundation'
 export default {
     props: {
-        /** 数据 */
+        /** 模块设计数据 */
         data: {
             type: Object,
             default: () => ({})
@@ -10,11 +11,131 @@ export default {
         isEdit: {
             type: Boolean,
             default: false
+        },
+        /** 模块绑定数据  **/
+        bindData:{
+            type:Object,
+            default:()=>({})
+        },
+        /** 床位数据数组索引 */
+        childDataIndex:{
+            type:Number,
+            default:0
+        },
+        /** 科室统计信息*/
+        statisticData:{
+            type:Object,
+            default:()=>({})
+        },
+        /** 自定义看板项目*/
+        boardCustomerItems:{
+            type:Array,
+            default:([])
+        },
+        /** 动画驱动**/
+        show:{
+            type:Boolean,
+            default:true
         }
     },
     components: {
         dragtool
     },
+    computed:{
+        moduleComputedStyle(){
+            let backgroundColorNurse = ''
+            let borderColorNurse = ''
+            let boxShadow =''
+            if(this.data.moduleConfig.styleConfig.borderColorWithNurse&&this.data.moduleConfig.styleConfig.borderColorWithNurse!==''){
+
+                let nurseId = this.data.moduleConfig.styleConfig.borderColorWithNurse.replace('nurse_color_','')
+                let nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p=>p.nurse_config===parseInt(nurseId))[0]
+                if(nurseOption){
+                    borderColorNurse='#'+nurseOption.nurse_color_rbg
+                }
+            }
+            if(this.data.moduleConfig.styleConfig.backgroundColorWithNurse&&this.data.moduleConfig.styleConfig.backgroundColorWithNurse!==''){
+
+                let nurseId = this.data.moduleConfig.styleConfig.backgroundColorWithNurse.replace('nurse_color_','')
+                let nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p=>p.nurse_config===parseInt(nurseId))[0]
+                if(nurseOption){
+                    backgroundColorNurse='#'+nurseOption.nurse_color_rbg
+                }
+            }
+
+            if(this.data.moduleConfig.styleConfig.backgroundColorToday&&this.data.moduleConfig.styleConfig.backgroundColorToday!==''){ //设置日期等于当天的颜色
+                if(this.displayText===unix2Date(new Date().getTime(),this.data.moduleConfig.dataConfig.textFormat)){
+                    backgroundColorNurse=this.data.moduleConfig.styleConfig.backgroundColorToday
+                }
+            }
+            if(this.data.moduleConfig.styleConfig.boxShadowShow){
+                boxShadow='1px 1px 3px 1px #eee'
+                if (this.data.moduleConfig.styleConfig.boxShadowColor&&this.data.moduleConfig.styleConfig.boxShadowColor!==''){
+                    boxShadow='1px 1px 3px 1px '+this.data.moduleConfig.styleConfig.boxShadowColor
+                }
+            }
+
+            return {...this.data.moduleConfig.moduleStyle,
+                borderColor:(borderColorNurse===''?this.data.moduleConfig.moduleStyle.borderColor:borderColorNurse),
+                backgroundColor:(backgroundColorNurse===''?this.data.moduleConfig.moduleStyle.backgroundColor:backgroundColorNurse),
+               boxShadow:boxShadow}
+        },
+        titleComputedStyle(){ //显示单元标题样式计算
+            let titleColor =''
+            if(this.data.moduleConfig.styleConfig.titleColorWithNurse&&this.data.moduleConfig.styleConfig.titleColorWithNurse!==''){
+                let nurseId = this.data.moduleConfig.styleConfig.titleColorWithNurse.replace('nurse_color_','')
+                let nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p=>p.nurse_config===parseInt(nurseId))[0]
+                if(nurseOption){
+                    titleColor='#'+nurseOption.nurse_color_rbg
+                }
+            }
+            return {...this.data.moduleConfig.titleStyle,
+                color:(titleColor===''?this.data.moduleConfig.titleStyle.color:titleColor)}
+        },
+        textComputedStyle(){ //显示单元
+                let textcolor =''
+                if(this.data.moduleConfig.styleConfig.textColorWithNurse&&this.data.moduleConfig.styleConfig.textColorWithNurse!==''){
+                    let nurseId = this.data.moduleConfig.styleConfig.textColorWithNurse.replace('nurse_color_','')
+                    let nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p=>p.nurse_config===parseInt(nurseId))[0]
+                    if(nurseOption){
+                        textcolor='#'+nurseOption.nurse_color_rbg
+                    }
+                }
+                if(this.data.moduleConfig.styleConfig.textColorToday&&this.data.moduleConfig.styleConfig.textColorToday!==''){ //设置日期等于当天的颜色
+                    if(this.displayText===unix2Date(new Date().getTime(),this.data.moduleConfig.dataConfig.textFormat)){
+                        textcolor=this.data.moduleConfig.styleConfig.textColorToday
+                    }
+                }
+                return {
+                    ...this.data.moduleConfig.textStyle,
+                    color: (textcolor === '' ? this.data.moduleConfig.textStyle.color : textcolor)
+                }
+        },
+        containerComputedStyle(){
+
+            if(this.data.moduleConfig.styleConfig.moduleFixed&&!this.isEdit){
+                return {
+                    position:'fixed',
+                    width:'100%',
+                    bottom:0,
+                    left:0
+                }
+            }
+        }
+
+    },
+
+     data(){
+       return{
+           systemDate:new Date()
+       }
+     },
+    mounted(){
+        let _this=this
+      setInterval(function () {
+          _this.systemDate = new Date()
+      },1000)
+    },
     methods: {
         /** 获取颜色相关信息 */
         colors(columnIndex = 0) {
@@ -65,12 +186,19 @@ export default {
         handleEditTags(columnIndex) {
             this.$emit('edit-tags', JSON.parse(JSON.stringify(this.data)), columnIndex)
         },
-        handleActive(aa){
-            console.log('aa',aa)
-        },
-        deleteModel(unique){
+
+        deleteModule(unique){
             console.log('model delete',unique)
             this.$emit('remove',unique)
-        }
+        },
+        copyModule(unique){
+            this.$emit('copy',unique)
+        },
+        activeModule(unique){
+            this.$emit('active',unique)
+        },
+
+
+
     }
 }

src/views/custom-infoboard/nest-component.vue

@@ -1,12 +1,26 @@
 <template>
-<component
-        :is="templates[tplId]"
->
-<!--    <div v-for="(child,index) in data.children" :key="index">{{-->
-<!--        child.dataTpl.tpl_id}}</div>-->
-    <component v-for="(child,index) in data.children" :is="templates[child.dataTpl.tpl_id]" :data="child" :key="index">
-    </component>
-</component>
+    <div >
+    <div v-for="(el,index) in tasks" :key="el.unique"><!--:key="el.unique"-->
+        <template v-if="el.moduleConfig.isCircleChild">
+            <component   :is="templates[el.tpl_id]" :data="el" :bind-data="bindData" :show="show" :board-customer-items="boardCustomerItems" :statistic-data="statisticData" :child-data-index="childDataIndex">
+
+                <grid-item  v-for="i in ((el.moduleConfig.gridCloumns*el.moduleConfig.gridRows)>(bindData.items?bindData.items.length:0)?(bindData.items?bindData.items.length:0):(el.moduleConfig.gridCloumns*el.moduleConfig.gridRows))" style="padding: 5px;">
+
+                    <nest-component :tasks="el.children" :bind-data="bindData" :show="show" :board-customer-items="boardCustomerItems" :statistic-data="statisticData" :child-data-index="i-1" />
+
+                </grid-item>
+
+            </component>
+        </template>
+        <template v-else>
+            <component   :is="templates[el.tpl_id]" :data="el" :bind-data="bindData"  :show="show" :board-customer-items="boardCustomerItems" :statistic-data="statisticData" :child-data-index="childDataIndex">
+                <!--            <p>{{ el.name }}</p>-->
+                <nest-component :tasks="el.children" :bind-data="bindData" :show="show" :board-customer-items="boardCustomerItems" :statistic-data="statisticData" :child-data-index="childDataIndex"/>
+            </component>
+        </template>
+
+    </div>
+    </div>
 </template>
 
 <script>
@@ -14,13 +28,31 @@
     export default {
         name: "nest-component",
         props: {
-            data: {
+            tasks: {
+                type:Array,
+                default:([])
+            },
+            bindData:{
                 type:Object,
-                default:()=>{}
+                default:()=>({})
+            },
+            childDataIndex:{
+                type:Number,
+                default:0
+            },
+            statisticData:{
+                type:Object,
+                default:()=>({})
+            },
+            /** 自定义看板项目*/
+            boardCustomerItems:{
+                type:Array,
+                default:([])
             },
-            tplId:{
-                required: true,
-                type: Number
+            /** 动画驱动**/
+            show:{
+                type:Boolean,
+                default:true
             }
         },
         data(){
@@ -36,7 +68,7 @@
             }
         },
       mounted() {
-            console.log('child',this.data.children)
+            // console.log('child',this.data.children)
       }
     }
 </script>

src/views/custom-infoboard/nest-draggable.vue

@@ -1,10 +1,20 @@
 <template>
-    <draggable class="dragArea" tag="div" :list="tasks" :options="floorOptions" @add="additem"  :clone="clonedata">
-        <div v-for="(el,index) in tasks" :key="el.unique">
-        <component   :is="templates[el.tpl_id]" :data="el" @remove="deleteModel">
+    <draggable class="dragArea" tag="div" :list="tasks"  :options="floorOptions" @add="additem"  :clone="clonedata">
+        <div v-for="(el,index) in tasks" :key="el.unique" ><!---->
+            <template v-if="el.moduleConfig.isCircleChild">
+        <component   :is="templates[el.tpl_id]" :bind-data="bindData" :show="show" :statistic-data="statisticData" :board-customer-items="boardCustomerItems" :child-data-index="childDataIndex" :data="el" :is-edit="el.isEdit"  @remove="deleteModule" @copy="copyModule" @active="activeModule">
 <!--            <p>{{ el.name }}</p>-->
-            <nest-draggable :tasks="el.children" @add="additem" @delete="deleteModel"/>
+            <grid-item  v-for="i in ((el.moduleConfig.gridCloumns*el.moduleConfig.gridRows)>(bindData.items?bindData.items.length:0)?(bindData.items?bindData.items.length:0):(el.moduleConfig.gridCloumns*el.moduleConfig.gridRows))" style="padding: 5px;" :key="el.unique+i">
+            <nest-draggable :tasks="el.children" :bind-data="bindData" :show="show" :statistic-data="statisticData" :board-customer-items="boardCustomerItems" :child-data-index="i-1" :is-edit="i===1" @add="additem" @delete="deleteModule" @copy="copyModule" @active="activeModule"/>
+            </grid-item>
         </component>
+            </template>
+        <template v-else>
+            <component   :is="templates[el.tpl_id]" :data="el"  :child-data-index="childDataIndex" :show="show" :board-customer-items="boardCustomerItems" :bind-data="bindData" :statistic-data="statisticData" :is-edit="el.isEdit&&isEdit" @remove="deleteModule" @copy="copyModule" @active="activeModule">
+                <!--            <p>{{ el.name }}</p>-->
+                <nest-draggable :tasks="el.children" :bind-data="bindData" :show="show"  :statistic-data="statisticData" :board-customer-items="boardCustomerItems" :child-data-index="childDataIndex" :is-edit="el.isEdit&&isEdit" @add="additem" @delete="deleteModule" @copy="copyModule" @active="activeModule"/>
+            </component>
+        </template>
 
         </div>
     </draggable>
@@ -17,7 +27,37 @@
             tasks: {
                 required: true,
                 type: Array
+            },
+            isEdit:{
+                type:Boolean
+            },
+            bindData:{
+                type:Object,
+                default:()=>({})
+            },
+            childDataIndex:{
+                type:Number,
+                default:0
+            },
+            moduleStyle:{
+                type:Object,
+                default:()=>({})
+            },
+            statisticData:{
+                type:Object,
+                default:()=>({})
+            },
+            /** 自定义看板项目*/
+            boardCustomerItems:{
+                type:Array,
+                default:([])
+            },
+            /** 动画驱动**/
+            show:{
+                type:Boolean,
+                default:true
             }
+
         },
         components: {
             draggable
@@ -47,16 +87,22 @@
                 console.log('clone',data)
                 return data
             },
-            deleteModel(unique){
+            deleteModule(unique){
                 console.log('nested delete',unique)
                 this.$emit('delete',unique)
+            },
+            copyModule(unique){
+                this.$emit('copy',unique)
+            },
+            activeModule(unique){
+                this.$emit('active',unique)
             }
         }
     };
 </script>
 <style scoped>
     .dragArea {
-        min-height: 60px;
+        min-height: 20px;
         /*outline: 1px dashed;*/
     }
 </style>

src/views/custom-infoboard/templates/DragTool.vue

@@ -1,16 +1,14 @@
 <template>
-  <div class="drag-tool" @click.stop="active" :class="{active: state.active === id}" :unique="unique">
+
+  <div class="drag-tool" @click.stop="active" :class="{active: state.active === id && isEdit}" :unique="unique" v-if="isEdit">
     <div class="drag-mask" v-if="mask"></div>
-    <div class="drag-l">
+    <div class="drag-l" v-if="isEdit">
       <div class="drag-btn _fc-drag-btn active handle-move"  style="cursor: move;">
         <i class="fc-icon el-icon-rank"></i>
       </div>
     </div>
-    <div class="drag-r">
-      <div class="drag-btn" @click="$emit('add')">
-        <i class="fc-icon el-icon-circle-plus-outline"></i>
-      </div>
-      <div class="drag-btn" @click="$emit('copy')">
+    <div class="drag-r" v-if="isEdit">
+      <div class="drag-btn" @click="$emit('copy',id)">
         <i class="fc-icon el-icon-copy-document"></i>
       </div>
       <div class="drag-btn" v-if="children" @click="$emit('addChild')">
@@ -22,13 +20,16 @@
     </div>
     <slot name="default" :block="block"></slot>
   </div>
+  <div v-else >
+    <slot name="default" ></slot>
+  </div>
 </template>
 
 <script>
 let id = 1;
 export default {
     name: 'DragTool',
-    props: ['dragBtn', 'children', 'unique', 'mask','block'],
+    props: ['dragBtn', 'children', 'unique', 'mask','block','isEdit'],
   inject: ['fcx'],
     data() {
         return {
@@ -41,9 +42,7 @@ export default {
 
             if (this.state.active === this.id) return;
             this.state.active = this.id;
-          console.log('active',this.state)
-          console.log('fcx',this.fcx)
-            this.$emit('active');
+            this.$emit('active',this.id);
         }
     },
   mounted(){

src/views/custom-infoboard/templates/common/cloumn-container.vue

@@ -4,8 +4,8 @@
 
 
 
-            <el-col :span="8">
-                <drag-tool :unique="data.unique">
+            <el-col :span="Number(data.moduleConfig.spans)" :offset="Number(data.moduleConfig.offset)" :push="Number(data.moduleConfig.push)" :pull="Number(data.moduleConfig.pull)" :style="moduleComputedStyle">
+                <drag-tool :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">
                 <slot></slot>
                 </drag-tool>
             </el-col>
@@ -15,14 +15,14 @@
 </template>
 
 <script>
-    import draggable from 'vuedraggable'
-    import mixin from '../../mixin'
+
+    import mixin from '../../mixinnew'
     import DragTool from "../DragTool";
     export default {
         name: "cloumn-container",
-        components: {DragTool,draggable},
+        components: {DragTool},
         mixins: [mixin],
-        title: '列容器',
+        title: '列布局',
         data(){
             return{
             }
@@ -31,98 +31,30 @@
             tpl_id: 10,
             tpl_type: 'BOARD_ITEM',
             unique:'',
-            moduleStyle: {
-                borderBottomShow: true,
-                borderTopShow: true,
-                borderLeftShow: true,
-                borderRightShow: true,
-                borderWidth: 2,
-                borderColor: '#eeeeee',
-                blockHeight: 50
-            },
-            rows:[
-                {
-                    columnList: [
-                        {
-                            span:8,
-                            color:'#555555',
-                            fontSize:'14px',
-                            backgroundColor:'',
-                            fontFamily:'微软雅黑',
-                            field:'',
-                            text:'床位',
-                            textAlign:'',
-                        },
-                        {
-                            span:8,
-                            color:'#555555',
-                            fontSize:'14px',
-                            backgroundColor:'',
-                            fontFamily:'微软雅黑',
-                            field:'',
-                            text:'姓名',
-                            textAlign:'',
-                        },
-                        {
-                            span:8,
-                            color:'#555555',
-                            fontSize:'14px',
-                            backgroundColor:'',
-                            fontFamily:'微软雅黑',
-                            field:'',
-                            text:'病危',
-                            textAlign:'',
-                        }
-                    ]
-                }
-            ],
-
+            isEdit:true,
+            moduleIconClass:'icon-Columns',
+            moduleConfig:{
+                moduleStyle: {
+                    // borderColor: '',
+                    // borderWidth:'0px',
+                    // borderRadius:'0px',
+                    // borderStyle:'solid',
+                    // backgroundColor:''
+                },
+                styleConfig:{
+                    // borderColorWithNurse:'', //边框颜色跟随的护理信息分类
+                    // backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
+                    boxShadowShow:false,
+                    boxShadowColor:''
+                },
+                dataConfig:{
 
-            columnList: [
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
                 },
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
-                }
-                ,
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
-                }
-            ],
+                spans:8,
+                offset:0,
+                push:0,
+                pull:0,
+            },
             children:[]
         }
     }

src/views/custom-infoboard/templates/common/index.js

@@ -10,14 +10,14 @@ import row_container from './row-container'
 import column_container from './cloumn-container'
 
 export default {
-    1: tpl_one_cloum,
-    2: tpl_two_cloum,
-    3: tpl_three_cloum,
-    4:tpl_header,
+    // 1: tpl_one_cloum,
+    // 2: tpl_two_cloum,
+    // 3: tpl_three_cloum,
+    // 4:tpl_header,
     5:tpl_beds_grid,
     6:tpl_bed_unit,
-    7:text_display,
-    8:text_display2,
     9:row_container,
-    10:column_container
+    10:column_container,
+    7:text_display,
+    8:text_display2
 }

src/views/custom-infoboard/templates/common/row-container.vue

@@ -1,8 +1,8 @@
 <template>
 
-    <div style="box-sizing: content-box;">
-        <drag-tool :unique="data.unique">
-        <el-row>
+    <div style="box-sizing: content-box;" :style="containerComputedStyle">
+        <drag-tool :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">
+        <el-row :style="moduleComputedStyle">
             <slot></slot>
         </el-row>
         </drag-tool>
@@ -11,14 +11,14 @@
 </template>
 
 <script>
-    import draggable from 'vuedraggable'
-    import mixin from '../../mixin'
+
+    import mixin from '../../mixinnew'
     import DragTool from "../DragTool";
     export default {
         name: "row-container",
-        components: {DragTool,draggable},
+        components: {DragTool},
         mixins: [mixin],
-        title: '行容器',
+        title: '行布局',
         data(){
             return{
             }
@@ -27,98 +27,32 @@
             tpl_id: 9,
             tpl_type: 'BOARD_ITEM',
             unique:'',
-            moduleStyle: {
-                borderBottomShow: true,
-                borderTopShow: true,
-                borderLeftShow: true,
-                borderRightShow: true,
-                borderWidth: 2,
-                borderColor: '#eeeeee',
-                blockHeight: 50
-            },
-            rows:[
-                {
-                    columnList: [
-                        {
-                            span:8,
-                            color:'#555555',
-                            fontSize:'14px',
-                            backgroundColor:'',
-                            fontFamily:'微软雅黑',
-                            field:'',
-                            text:'床位',
-                            textAlign:'',
-                        },
-                        {
-                            span:8,
-                            color:'#555555',
-                            fontSize:'14px',
-                            backgroundColor:'',
-                            fontFamily:'微软雅黑',
-                            field:'',
-                            text:'姓名',
-                            textAlign:'',
-                        },
-                        {
-                            span:8,
-                            color:'#555555',
-                            fontSize:'14px',
-                            backgroundColor:'',
-                            fontFamily:'微软雅黑',
-                            field:'',
-                            text:'病危',
-                            textAlign:'',
-                        }
-                    ]
-                }
-            ],
-
+            isEdit:true,
+            moduleIconClass:'icon-Row',
+            moduleConfig:{
+                moduleStyle: {
+                    borderColor: '',
+                    borderWidth:'0px',
+                    borderRadius:'0px',
+                    borderStyle:'solid',
+                    backgroundColor:'',
+                    marginLeft:'0px',
+                    marginTop:'0px',
+                    marginRight:'0px',
+                    marginBottom:'0px',
 
-            columnList: [
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
                 },
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
-                }
-                ,
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
+                styleConfig:{
+                    borderColorWithNurse:'', //边框颜色跟随的护理信息分类
+                    backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
+                    moduleFixed:false,
+                    boxShadowShow:false,
+                    boxShadowColor:''
+                },
+                dataConfig:{
+
                 }
-            ],
+            },
             children:[]
         }
     }

src/views/custom-infoboard/templates/common/text-display.vue

@@ -1,12 +1,13 @@
 <template>
 
-    <drag-tool @active="handleActive" :unique="data.unique" @delete="deleteModel">
-        <div style="width:200px;">
-    <span :style="data.labelStyle">
-      标签
+    <drag-tool  :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">
+        <div :style="moduleComputedStyle" class="flex">
+            <span class="iconfont" :class="data.moduleConfig.dataConfig.iconClass" v-if="data.moduleConfig.showIcon" :style="data.moduleConfig.iconStyle"></span>
+    <span :style="titleComputedStyle" v-if="data.moduleConfig.showTitle" class="content_item">
+      {{data.moduleConfig.dataConfig.titleText}}
     </span>
-    <span :style="data.textStyle">
-      文字
+    <span :style="textComputedStyle" class="content_item">
+      {{displayText}}
     </span>
 
     </div>
@@ -17,21 +18,118 @@
     <script>
     import DragTool from "../DragTool";
     import mixin from '../../mixinnew'
+    import {unix2Date} from '@/utils/Foundation'
     export default {
         name: "text-display",
         mixins:[mixin],
         components: {DragTool},
-        title:'显示单元',
+        title:'内容显示单元',
         unique:'',
+        computed:{
+          displayText(){
+
+              // console.log('childDataIndex',this.childDataIndex)
+              if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith==='system.date'){ //系统信息
+
+                  return unix2Date(this.systemDate,this.data.moduleConfig.dataConfig.textFormat)
+              } else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith==='part.name'){ //科室信息
+
+                    let text = this.data.moduleConfig.dataConfig.contentText
+                  if(this.bindData){
+                      text = this.bindData['part_name']
+                  }
+                  return text
+              }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('patient.')>-1) { //患者信息
+                  let text = this.data.moduleConfig.dataConfig.contentText
+                  if(this.bindData){
+                      text = this.bindData.items[this.childDataIndex][this.data.moduleConfig.dataConfig.textWith.replace('patient.','')]
+                      if(this.data.moduleConfig.dataConfig.textType==='日期'){ //格式化日期
+                        text = unix2Date(text*1000,this.data.moduleConfig.dataConfig.textFormat)
+                      }
+                      if(this.data.moduleConfig.dataConfig.textWith==='patient.sex'){ //格式化性别
+                          text=(text===0?'女':text===1?'男':'未知')
+                      }
+                      if(this.data.moduleConfig.dataConfig.textWith==='patient.age'){
+                          text = (text===null?'':text)+this.bindData.items[this.childDataIndex]['age_unit']
+                      }
+                  }
+                  return text
+              }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('nurse_config_')>-1){ //护理参数
+                    let nurseId = this.data.moduleConfig.dataConfig.textWith.replace('nurse_config_','')
+                    let nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p=>p.nurse_config===parseInt(nurseId))[0]
+                  if(nurseOption){
+                      return nurseOption['nurse_option_name']
+                  }
+              }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('statistic_')>-1){
+                  let statisticKey = this.data.moduleConfig.dataConfig.textWith.replace('statistic_','')
+                  let statisticItem = this.statisticData[statisticKey]
+                  if(statisticItem){
+                      return statisticItem
+                  }
+              }else  {
+                  return this.data.moduleConfig.dataConfig.contentText
+              }
+          }
+        },
         dataTpl:{
             tpl_id: 7,
             tpl_type: 'BOARD_ITEM',
             templateName:'text-display',
-            labelStyle:{
-
-            },
-            textStyle:{
+            isEdit:true,
+            moduleIconClass:'icon-Text',
+            moduleConfig:{
+                moduleStyle: {
+                    borderColor: '',
+                    borderWidth:'0px',
+                    borderRadius:'0px',
+                    borderStyle:'solid',
+                    backgroundColor:'',
+                    justifyContent:'flex-start',
+                    margin:'0px',
+                    padding:'0px',
+                    height:'20px'
+                },
+                styleConfig:{
+                    borderColorWithNurse:'', //边框颜色跟随的护理信息分类
+                    backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
+                    titleColorWithNurse:'',
+                    textColorWithNurse:'',
+                    textColorToday:'',
+                    backgroundColorToday:''
+                },
+                dataConfig:{
+                    titleText:'Title',
+                    contentText:'文字',
+                    textWith:'',
+                    textType:'文本',
+                    textFormat:'',
+                    iconClass:'' //图标样式类
+                },
 
+                titleStyle:{ //标题样式
+                    fontSize:'14px',
+                    color:'',
+                    fontWeight:'normal',
+                    marginLeft:'0px',
+                    marginRight:'0px',
+                },
+                textStyle:{ //内容样式
+                   fontSize:'14px',
+                    color:'',
+                    fontWeight:'normal',
+                    marginLeft:'0px',
+                    marginRight:'0px',
+                },
+                iconStyle:{
+                    fontSize:'14px',
+                    color:'',
+                    marginLeft:'0px',
+                    marginTop:'0px',
+                    marginRight:'0px',
+                    marginBottom:'0px'
+                },
+                showTitle:true, //显示标题,
+                showIcon:false
             },
             children:[]
         },
@@ -41,4 +139,8 @@
 
 <style scoped>
 
+    .content_item{
+        align-self: center;
+    }
+
 </style>

src/views/custom-infoboard/templates/common/text-display2.vue

@@ -1,15 +1,13 @@
 <template>
 
-    <drag-tool @active="handleActive" :unique="data.unique">
-        <div style="width:200px;">
-    <span :style="data.labelStyle">
-      标签2
-    </span>
-    <span :style="data.textStyle">
-      文字2
-    </span>
-
-    </div>
+    <drag-tool  :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">
+        <div :style="moduleComputedStyle" class="flex">
+
+            <div :style="titleComputedStyle" v-if="data.moduleConfig.showTitle"   class="titlewrap"> <div class="titleStyle">{{titleText}}</div>
+            </div>
+            <div class="flex-sub"  :style="textComputedStyle"> <div class="contentStyle">{{displayText}}</div>
+            </div>
+        </div>
     </drag-tool>
 
     </template>
@@ -21,17 +19,73 @@
         name: "text-display2",
         mixins:[mixin],
         components: {DragTool},
-        title:'显示单元2',
+        title:'自定义看板项显示',
+        computed:{
+            displayText(){
+                if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.displayCustomerItem!==null){ //看板项内容
+
+                    let customItem = this.boardCustomerItems.filter(p=>p.his_keyval===this.data.moduleConfig.dataConfig.displayCustomerItem)[0]
+                    if(customItem){
+                        return customItem.area_content
+                    }
+                }
+               return '文字'
+            },
+            titleText(){
+                if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.displayCustomerItem!==null){ //看板项内容
+
+                    let customItem = this.boardCustomerItems.filter(p=>p.his_keyval===this.data.moduleConfig.dataConfig.displayCustomerItem)[0]
+                    if(customItem){
+                        return customItem.area_label
+                    }
+                }
+               return '标题'
+            }
+
+        },
+
         dataTpl:{
             tpl_id: 8,
             tpl_type: 'BOARD_ITEM',
             templateName:'text-display2',
+            isEdit:true,
             unique:'',
-            labelStyle:{
-
-            },
-            textStyle:{
+            moduleIconClass:'icon-Text',
+            moduleConfig:{
+                moduleStyle: {
+                    borderColor: '',
+                    borderRadius:'0px',
+                    borderStyle:'solid',
+                    backgroundColor:'',
+                    borderTopWidth:'0px',
+                    borderRightWidth:'0px',
+                    borderBottomWidth:'0px',
+                    borderLeftWidth:'0px',
+                    margin:'0px',
+                    padding:'0px',
+                    height:'40px'
+                },
+                styleConfig:{
 
+                },
+                titleStyle:{ //标题样式
+                    fontSize:'14px',
+                    color:'',
+                    fontWeight:'normal',
+                    marginLeft:'0px',
+                    marginRight:'0px',
+                },
+                textStyle:{ //内容样式
+                    fontSize:'14px',
+                    color:'',
+                    fontWeight:'normal',
+                    marginLeft:'0px',
+                    marginRight:'0px',
+                },
+                dataConfig:{
+                   displayCustomerItem:''
+                },
+                showTitle:true, //显示标题,
             },
             children:([])
         },
@@ -41,4 +95,30 @@
 
 <style scoped>
 
+    .contentStyle{
+        margin-left: 10px;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        overflow: hidden;
+        overflow-wrap: break-word;
+        word-break: break-all;
+    }
+    .titlewrap{
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        overflow-wrap: break-word;
+    }
+    .titleStyle{
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        width: 100%;
+        overflow-wrap: break-word;
+        word-break: break-all;
+    }
+
 </style>

src/views/custom-infoboard/templates/common/tpl-bed-unit.vue

@@ -1,87 +1,53 @@
 <template>
 
-        <div style="box-sizing: content-box;">
-            <drag-tool>
-
+        <div style="box-sizing: content-box;" >
+            <drag-tool @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule" :unique="data.unique">
+           <div class="box-card  radius" :style="moduleComputedStyle" v-if="isEdit?true:(data.moduleConfig.dataConfig.showOnPatientIn?(bindData.items[childDataIndex].member_id!==null):(bindData.items[childDataIndex].member_id===null))">
              <slot></slot>
-
+           </div>
             </drag-tool>
         </div>
 
 </template>
 
 <script>
-    import draggable from 'vuedraggable'
-    import mixin from '../../mixin'
+
+    import mixin from '../../mixinnew'
     import DragTool from "../DragTool";
     export default {
         name: "tpl-bed-unit",
-        components: {DragTool,draggable},
+        components: {DragTool},
         mixins: [mixin],
         title: '床位单元格',
         data(){
             return{
             }
         },
+
         dataTpl: {
             tpl_id: 6,
             tpl_type: 'BOARD_ITEM',
-            templateName:'tpl-bed-unit',
-            moduleStyle: {
-                borderBottomShow: true,
-                borderTopShow: true,
-                borderLeftShow: true,
-                borderRightShow: true,
-                borderWidth: 2,
-                borderColor: '#eeeeee',
-                blockHeight: 50
-            },
-
-            columnList: [
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
+            unique:'',
+            moduleIconClass:'icon-line-card',
+            isEdit:true,
+            moduleConfig:{
+                moduleStyle: {
+                    borderColor: '#dcdfe6',
+                    borderWidth:'1px',
+                    borderRadius:'5px',
+                    borderStyle:'solid',
+                    backgroundColor:''
                 },
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
-                }
-                ,
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
+                styleConfig:{
+                    borderColorWithNurse:'', //边框颜色跟随的护理信息分类
+                    backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
+                    boxShadowShow:false,
+                    boxShadowColor:''
+                },
+                dataConfig:{
+                    showOnPatientIn:true
                 }
-            ],
+            },
             children:([])
         }
     }

src/views/custom-infoboard/templates/common/tpl-beds-grid.vue

@@ -1,100 +1,68 @@
 <template>
-    <div class="floor-layout">
-        <div style="box-sizing: content-box;"
-             >
-           <grid :column-num="6" :border="true">
-
-               <grid-item v-for="i in 1"  :key="i">
-                   <component
-                           is="tpl_bed_unit"
-                           :data="bedunidata"
-                           :is-edit="true"
-                           @edit-block="(...props) => {  handleEditBlock(index, ...props) }"
-                           @edit-title="(...props) => { handleEditTitle(index, ...props) }"
-                           @edit-tags="(...props) => { handleEditTags(index, ...props) }"
-                   ></component>
-               </grid-item>
+
+        <div style="box-sizing: content-box;" >
+            <drag-tool :unique="data.unique" @active="activeModule" :isEdit="isEdit" @delete="deleteModule" @copy="copyModule">
+                <transition name="el-fade-in" >
+           <grid :column-num="data.moduleConfig.gridCloumns" :style="moduleComputedStyle" v-if="show" :border="false">
+
+               <slot ></slot>
 
            </grid>
+                </transition>
+            </drag-tool>
         </div>
-    </div>
+
 </template>
 
 <script>
     import Vue from 'vue'
-    import mixin from '../../mixin'
+    import mixin from '../../mixinnew'
     import tpl_bed_unit from './tpl-bed-unit'
     import VueLazyload from 'vue-lazyload'
-
+    import DragTool from "../DragTool";
     Vue.use(VueLazyload)
     export default {
         name: "tpl-beds-grid",
         mixins: [mixin],
-        components:{tpl_bed_unit},
+        components: {DragTool},
         data(){
             return{
                 bedunidata:tpl_bed_unit.dataTpl
             }
 
         },
-        title: '看板床位宫格模板',
+        title: '床位宫格',
         dataTpl: {
             tpl_id: 5,
             tpl_type: 'BOARD_ITEM',
-            moduleStyle: {
-                borderBottomShow: true,
-                borderTopShow: true,
-                borderLeftShow: true,
-                borderRightShow: true,
-                borderWidth: 2,
-                borderColor: '#eeeeee',
-                blockHeight: 50
-            },
-            columnList: [
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
+            isEdit:true,
+            moduleIconClass:'icon-24gl-grid',
+            moduleConfig:{
+                moduleStyle: {
+                    borderColor: '',
+                    borderWidth:'0px',
+                    borderRadius:'0px',
+                    borderStyle:'solid',
+                    backgroundColor:'',
+                    marginLeft:'0px',
+                    marginTop:'0px',
+                    marginRight:'0px',
+                    marginBottom:'0px',
                 },
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
-                }
-                ,
-                {
-                    label: '标题',
-                    content: '内容',
-                    labelColor: '#333333',
-                    labelBgColor: '#ffffff',
-                    labelTextSize:22,
-                    labelAlign: 'right',
-                    labelWidth: 200,
-                    contentColor: '#333333',
-                    contentBgColor: '#ffffff',
-                    contentTextSize:22,
-                    blockWidth: 8,
-                    boardItemHisKeyVal:''
-                }
-            ]
+                styleConfig:{
+                    borderColorWithNurse:'', //边框颜色跟随的护理信息分类
+                    backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
+                    boxShadowShow:false,
+                    boxShadowColor:''
+                },
+                dataConfig:{
+
+                },
+                gridRows:4,
+                gridCloumns:2,
+                isCircleChild:true
+            },
+            children:[]
         }
     }
 </script>
@@ -469,5 +437,16 @@
         display: block;
         padding: 0;
     }
+    /* 效果过程 */
+    .myfade-enter-active,
+    .myfade-leave-active {
+        transition: all 0.8s linear;
+    }
+    /* 进场的瞬间与离场的效果添加 */
+    .myfade-enter,
+    .myfade-leave-to {
+        opacity: 0;
+        transform: translateX(200px);
+    }
 
 </style>

src/views/custom-infoboard/templates/common/tpl-header.vue

@@ -43,7 +43,7 @@
         mixins: [mixin],
         title: '看板头部模版',
         dataTpl: {
-            tpl_id: 3,
+            tpl_id: 4,
             tpl_type: 'BOARD_ITEM',
             moduleStyle: {
                 borderBottomShow: true,

src/views/custom-infoboard/templates/moduleConfig.vue

@@ -0,0 +1,598 @@
+<template>
+    <el-form :model="moduleConfig" label-width="120px" style="margin-top: 10px">
+        <el-row >
+            <el-col :span="24">
+                <el-form-item label="边框颜色" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.borderColor!==undefined">
+                <el-input placeholder="边框颜色" v-model="moduleConfig.moduleStyle.borderColor">
+                    <el-color-picker slot="append" v-model="moduleConfig.moduleStyle.borderColor" size="mini" @change="colorChange"></el-color-picker>
+                </el-input>
+            </el-form-item>
+                <el-form-item label="边框大小" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.borderWidth!==undefined">
+                    <el-input placeholder="边框大小" v-model="moduleConfig.moduleStyle.borderWidth">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="上边框大小" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.borderTopWidth!==undefined">
+                    <el-input placeholder="边框大小" v-model="moduleConfig.moduleStyle.borderTopWidth">
+
+                    </el-input>
+
+                </el-form-item>
+                <el-form-item label="右边框大小" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.borderRightWidth!==undefined">
+                    <el-input placeholder="边框大小" v-model="moduleConfig.moduleStyle.borderRightWidth">
+
+                    </el-input>
+
+                </el-form-item>
+                <el-form-item label="下边框大小" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.borderBottomWidth!==undefined">
+                    <el-input placeholder="边框大小" v-model="moduleConfig.moduleStyle.borderBottomWidth">
+
+                    </el-input>
+
+                </el-form-item>
+                <el-form-item label="左边框大小" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.borderLeftWidth!==undefined">
+                    <el-input placeholder="边框大小" v-model="moduleConfig.moduleStyle.borderLeftWidth">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="圆角边框" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.borderRadius!==undefined">
+                    <el-input placeholder="圆角边框" v-model="moduleConfig.moduleStyle.borderRadius">
+
+                    </el-input>
+
+                </el-form-item>
+                <el-form-item label="模块背景色" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.backgroundColor!==undefined">
+                    <el-input placeholder="模块背景色" v-model="moduleConfig.moduleStyle.backgroundColor">
+                        <el-color-picker slot="append" v-model="moduleConfig.moduleStyle.backgroundColor" size="mini" @change="colorChange"></el-color-picker>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="模块高度" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.height!==undefined">
+                    <el-input placeholder="模块高度" v-model="moduleConfig.moduleStyle.height">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="显示阴影" v-if="moduleConfig.styleConfig&&moduleConfig.styleConfig.boxShadowShow!==undefined">
+                    <el-switch
+                            v-model="moduleConfig.styleConfig.boxShadowShow"
+                            active-color="#13ce66"
+                    >
+                    </el-switch>
+
+                </el-form-item>
+
+                <el-form-item label="阴影颜色" v-if="moduleConfig.styleConfig&&moduleConfig.styleConfig.boxShadowShow&&moduleConfig.styleConfig.boxShadowColor!==undefined">
+                    <el-input placeholder="阴影颜色" v-model="moduleConfig.styleConfig.boxShadowColor">
+                        <el-color-picker slot="append" v-model="moduleConfig.styleConfig.boxShadowColor" size="mini" @change="colorChange"></el-color-picker>
+                    </el-input>
+                </el-form-item>
+
+
+
+                <el-form-item label="固定在底部" v-if="moduleConfig.styleConfig&&moduleConfig.styleConfig.moduleFixed!==undefined">
+                    <el-switch
+                            v-model="moduleConfig.styleConfig.moduleFixed"
+                            active-color="#13ce66"
+                    >
+                    </el-switch>
+<!--                    <el-input placeholder="模块高度" v-model="moduleConfig.styleConfig.moduleFixed">-->
+
+<!--                    </el-input>-->
+
+                </el-form-item>
+
+                <el-form-item label="有人时显示" v-if="moduleConfig.dataConfig&&moduleConfig.dataConfig.showOnPatientIn!==undefined">
+                    <el-switch
+                            v-model="moduleConfig.dataConfig.showOnPatientIn"
+                            active-color="#13ce66"
+                    >
+                    </el-switch>
+                    <!--                    <el-input placeholder="模块高度" v-model="moduleConfig.styleConfig.moduleFixed">-->
+
+                    <!--                    </el-input>-->
+
+                </el-form-item>
+
+                <el-form-item label="模块左外边距" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.marginLeft!==undefined">
+                    <el-input placeholder="左外边距" v-model="moduleConfig.moduleStyle.marginLeft">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="模块右外边距" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.marginRight!==undefined">
+                    <el-input placeholder="右外边距" v-model="moduleConfig.moduleStyle.marginRight">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="模块上外边距" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.marginTop!==undefined">
+                    <el-input placeholder="上外边距" v-model="moduleConfig.moduleStyle.marginTop">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="模块下外边距" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.marginBottom!==undefined">
+                    <el-input placeholder="下外边距" v-model="moduleConfig.moduleStyle.marginBottom">
+
+                    </el-input>
+
+                </el-form-item>
+
+
+                <el-form-item label="边框色同" v-if="moduleConfig.styleConfig&&moduleConfig.styleConfig.borderColorWithNurse!==undefined">
+
+                    <el-select v-model="moduleConfig.styleConfig.borderColorWithNurse"
+                               placeholder="护理参数"
+                               filterable
+                               clearable
+                    >
+                        <el-option v-for="config in nurseConfigs" :label="config.config_name" :value="'nurse_color_'+config.id"/>
+
+                    </el-select>
+
+
+                </el-form-item>
+                <el-form-item label="背景色同" v-if="moduleConfig.styleConfig&&moduleConfig.styleConfig.backgroundColorWithNurse!==undefined">
+                    <el-select v-model="moduleConfig.styleConfig.backgroundColorWithNurse"
+                               placeholder="护理参数"
+                               filterable
+                               clearable
+                    >
+                        <el-option v-for="config in nurseConfigs" :label="config.config_name" :value="'nurse_color_'+config.id"/>
+
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="列占宽(1-24)" v-if="moduleConfig.spans!==undefined">
+                    <el-input placeholder="列宽" v-model="moduleConfig.spans" type="number">
+
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="左侧间隔" v-if="moduleConfig.offset!==undefined">
+                    <el-input placeholder="左侧间隔" v-model="moduleConfig.offset" type="number">
+
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="右移间隔" v-if="moduleConfig.push!==undefined">
+                    <el-input placeholder="右移间隔" v-model="moduleConfig.push" type="number">
+
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="左移间隔" v-if="moduleConfig.pull!==undefined">
+                    <el-input placeholder="左移间隔" v-model="moduleConfig.pull" type="number">
+
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="宫格行数" v-if="moduleConfig.gridRows!==undefined">
+                <el-input placeholder="宫格行数" v-model="moduleConfig.gridRows" type="number">
+
+                </el-input>
+            </el-form-item>
+                <el-form-item label="每行列数" v-if="moduleConfig.gridCloumns!==undefined">
+                    <el-input placeholder="每行列数" v-model="moduleConfig.gridCloumns" type="number">
+
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="内容对齐" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.justifyContent!==undefined">
+                    <el-select v-model="moduleConfig.moduleStyle.justifyContent"
+                               placeholder="请选择对其方式"
+                               filterable
+                               clearable
+                    >
+                        <el-option label="左对齐" value="flex-start"/>
+                        <el-option label="居中对齐" value="center"/>
+                        <el-option label="右对齐" value="flex-end"/>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="内边距" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.padding!==undefined">
+                    <el-input placeholder="内边距" v-model="moduleConfig.moduleStyle.padding">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="外边距" v-if="moduleConfig.moduleStyle&&moduleConfig.moduleStyle.margin!==undefined">
+                    <el-input placeholder="外边距" v-model="moduleConfig.moduleStyle.margin">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="显示title" v-if="moduleConfig.showTitle!==undefined">
+                    <el-switch
+                            v-model="moduleConfig.showTitle"
+                            active-color="#13ce66"
+                    >
+                    </el-switch>
+                </el-form-item>
+
+                <el-form-item label="显示图标" v-if="moduleConfig.showIcon!==undefined">
+                    <el-switch
+                            v-model="moduleConfig.showIcon"
+                            active-color="#13ce66"
+                    >
+                    </el-switch>
+                </el-form-item>
+
+                <el-form-item label="图标" v-if="moduleConfig.showIcon&&moduleConfig.dataConfig&&moduleConfig.dataConfig.iconClass!==undefined">
+                    <el-select v-model="moduleConfig.dataConfig.iconClass"
+                               placeholder="选择图标"
+                               filterable
+                               clearable
+                    >
+
+                        <el-option-group
+                                v-for="group in icons"
+                                :key="group.label"
+                                :label="group.label">
+                            <el-option
+                                    v-for="item in group.options"
+                                    :key="item.display"
+                                    :label="item.display"
+                                    :value="item.value">
+                                <span style="float: left" class="iconfont " :class="item.value"></span>
+                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.display }}</span>
+                            </el-option>
+                        </el-option-group>
+
+                        <!--                        <el-option v-for="field in dataFields" :label="field.display" :value="field.value"/>-->
+
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="图标大小" v-if="moduleConfig.showIcon&&moduleConfig.iconStyle&&moduleConfig.iconStyle.fontSize!==undefined">
+                    <el-input placeholder="图标大小" v-model="moduleConfig.iconStyle.fontSize">
+
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="图标颜色" v-if="moduleConfig.showIcon&&moduleConfig.iconStyle&&moduleConfig.iconStyle.color!==undefined">
+                    <el-input placeholder="图标颜色" v-model="moduleConfig.iconStyle.color">
+                        <el-color-picker slot="append" v-model="moduleConfig.iconStyle.color" size="mini" @change="colorChange"></el-color-picker>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="图标左外边距" v-if="moduleConfig.showIcon&&moduleConfig.iconStyle&&moduleConfig.iconStyle.marginLeft!==undefined">
+                    <el-input placeholder="左外边距" v-model="moduleConfig.iconStyle.marginLeft">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="图标右外边距" v-if="moduleConfig.showIcon&&moduleConfig.iconStyle&&moduleConfig.iconStyle.marginRight!==undefined">
+                    <el-input placeholder="右外边距" v-model="moduleConfig.iconStyle.marginRight">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="图标上外边距" v-if="moduleConfig.showIcon&&moduleConfig.iconStyle&&moduleConfig.iconStyle.marginTop!==undefined">
+                    <el-input placeholder="上外边距" v-model="moduleConfig.iconStyle.marginTop">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="图标下外边距" v-if="moduleConfig.showIcon&&moduleConfig.iconStyle&&moduleConfig.iconStyle.marginBottom!==undefined">
+                    <el-input placeholder="下外边距" v-model="moduleConfig.iconStyle.marginBottom">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="title文字" v-if="moduleConfig.showTitle&&moduleConfig.dataConfig&&moduleConfig.dataConfig.titleText!==undefined">
+
+                    <el-input placeholder="title文字" v-model="moduleConfig.dataConfig.titleText">
+
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="内容文字" v-if="moduleConfig.dataConfig&&moduleConfig.dataConfig.contentText!==undefined">
+
+                    <el-input placeholder="内容文字" v-model="moduleConfig.dataConfig.contentText">
+
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="显示字段" v-if="moduleConfig.dataConfig&&moduleConfig.dataConfig.textWith!==undefined">
+
+                    <el-select v-model="moduleConfig.dataConfig.textWith"
+                               placeholder="显示字段"
+                               filterable
+                               clearable
+                    >
+
+                        <el-option-group
+                                v-for="group in dataFields"
+                                :key="group.label"
+                                :label="group.label">
+                            <el-option
+                                    v-for="item in group.options"
+                                    :key="item.display"
+                                    :label="item.display"
+                                    :value="item.value">
+                            </el-option>
+                        </el-option-group>
+
+<!--                        <el-option v-for="field in dataFields" :label="field.display" :value="field.value"/>-->
+
+                    </el-select>
+
+                </el-form-item>
+
+                <el-form-item label="自定看板项" v-if="moduleConfig.dataConfig&&moduleConfig.dataConfig.displayCustomerItem!==undefined">
+
+                    <el-select v-model="moduleConfig.dataConfig.displayCustomerItem"
+                               placeholder="自定看板项"
+                               filterable
+                               clearable
+                    >
+
+
+                            <el-option v-for="(item, index) in boardItems" :key="index"
+                                       :label="item.area_label" :value="item.his_keyval"/>
+
+
+                        <!--                        <el-option v-for="field in dataFields" :label="field.display" :value="field.value"/>-->
+
+                    </el-select>
+
+                </el-form-item>
+
+                <el-form-item label="显示类型" v-if="moduleConfig.dataConfig&&moduleConfig.dataConfig.textType!==undefined">
+
+                    <el-select v-model="moduleConfig.dataConfig.textType"
+                               placeholder="显示类型"
+                               filterable
+                               clearable
+                    >
+                        <el-option label="普通文本" value="普通文本"/>
+                        <el-option label="日期" value="日期"/>
+
+                    </el-select>
+
+                </el-form-item>
+
+                <el-form-item label="当天日期颜色" v-if="moduleConfig.dataConfig&&moduleConfig.dataConfig.textType==='日期'&&moduleConfig.styleConfig.textColorToday!==undefined">
+                    <el-input placeholder="文字颜色" v-model="moduleConfig.styleConfig.textColorToday">
+                        <el-color-picker slot="append" v-model="moduleConfig.styleConfig.textColorToday" size="mini" @change="colorChange"></el-color-picker>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="当天日期背景" v-if="moduleConfig.dataConfig&&moduleConfig.dataConfig.textType==='日期'&&moduleConfig.styleConfig.backgroundColorToday!==undefined">
+                    <el-input placeholder="文字颜色" v-model="moduleConfig.styleConfig.backgroundColorToday">
+                        <el-color-picker slot="append" v-model="moduleConfig.styleConfig.backgroundColorToday" size="mini" @change="colorChange"></el-color-picker>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="显示格式" v-if="moduleConfig.dataConfig&&moduleConfig.dataConfig.textFormat!==undefined">
+                    <el-input placeholder="显示格式" v-model="moduleConfig.dataConfig.textFormat">
+
+                    </el-input>
+                </el-form-item>
+
+
+
+
+                <el-form-item label="title文字大小" v-if="moduleConfig.showTitle&&moduleConfig.titleStyle&&moduleConfig.titleStyle.fontSize!==undefined">
+                    <el-input placeholder="标题文字大小" v-model="moduleConfig.titleStyle.fontSize">
+
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="title左外边距" v-if="moduleConfig.showTitle&&moduleConfig.titleStyle&&moduleConfig.titleStyle.marginLeft!==undefined">
+                    <el-input placeholder="左外边距" v-model="moduleConfig.titleStyle.marginLeft">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="title右外边距" v-if="moduleConfig.showTitle&&moduleConfig.titleStyle&&moduleConfig.titleStyle.marginRight!==undefined">
+                    <el-input placeholder="右外边距" v-model="moduleConfig.titleStyle.marginRight">
+
+                    </el-input>
+
+                </el-form-item>
+                <el-form-item label="文字大小" v-if="moduleConfig.textStyle&&moduleConfig.textStyle.fontSize!==undefined">
+                    <el-input placeholder="文字大小" v-model="moduleConfig.textStyle.fontSize">
+
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="文字左外边距" v-if="moduleConfig.textStyle&&moduleConfig.textStyle.marginLeft!==undefined">
+                    <el-input placeholder="文字左外边距" v-model="moduleConfig.textStyle.marginLeft">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="文字右外边距" v-if="moduleConfig.textStyle&&moduleConfig.textStyle.marginRight!==undefined">
+                    <el-input placeholder="右外边距" v-model="moduleConfig.textStyle.marginRight">
+
+                    </el-input>
+
+                </el-form-item>
+
+                <el-form-item label="title文字颜色" v-if="moduleConfig.showTitle&&moduleConfig.titleStyle&&moduleConfig.titleStyle.color!==undefined">
+                    <el-input placeholder="标题文字颜色" v-model="moduleConfig.titleStyle.color">
+                        <el-color-picker slot="append" v-model="moduleConfig.titleStyle.color" size="mini" @change="colorChange"></el-color-picker>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="title文字颜色同" v-if="moduleConfig.showTitle&&moduleConfig.styleConfig&&moduleConfig.styleConfig.titleColorWithNurse!==undefined">
+
+                    <el-select v-model="moduleConfig.styleConfig.titleColorWithNurse"
+                               placeholder="护理参数"
+                               filterable
+                               clearable
+                    >
+                        <el-option v-for="config in nurseConfigs" :label="config.config_name" :value="'nurse_color_'+config.id"/>
+
+                    </el-select>
+<!--                    <el-input placeholder="标题文字颜色" v-model="moduleConfig.styleConfig.titleColorWithNurse">-->
+<!--                        <el-color-picker slot="append" v-model="moduleConfig.titleStyle.color" size="mini" @change="colorChange"></el-color-picker>-->
+<!--                    </el-input>-->
+                </el-form-item>
+
+
+
+                <el-form-item label="文字颜色" v-if="moduleConfig.titleStyle&&moduleConfig.textStyle.color!==undefined">
+                    <el-input placeholder="文字颜色" v-model="moduleConfig.textStyle.color">
+                        <el-color-picker slot="append" v-model="moduleConfig.textStyle.color" size="mini" @change="colorChange"></el-color-picker>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="文字颜色同" v-if="moduleConfig.styleConfig&&moduleConfig.styleConfig.textColorWithNurse!==undefined">
+
+                    <el-select v-model="moduleConfig.styleConfig.textColorWithNurse"
+                               placeholder="护理参数"
+                               filterable
+                               clearable
+                    >
+                        <el-option v-for="config in nurseConfigs" :label="config.config_name" :value="'nurse_color_'+config.id"/>
+
+                    </el-select>
+                    <!--                    <el-input placeholder="标题文字颜色" v-model="moduleConfig.styleConfig.titleColorWithNurse">-->
+                    <!--                        <el-color-picker slot="append" v-model="moduleConfig.titleStyle.color" size="mini" @change="colorChange"></el-color-picker>-->
+                    <!--                    </el-input>-->
+                </el-form-item>
+
+                <el-form-item label="title文字样式" v-if="moduleConfig.showTitle&&moduleConfig.titleStyle&&moduleConfig.titleStyle.fontWeight!==undefined">
+
+                    <el-select v-model="moduleConfig.titleStyle.fontWeight"
+                               placeholder="请选择对其方式"
+                               filterable
+                               clearable
+                    >
+                        <el-option label="正常字体" value="normal"/>
+                        <el-option label="字体加粗" value="bold"/>
+                    </el-select>
+
+                </el-form-item>
+
+                <el-form-item label="文字样式" v-if="moduleConfig.textStyle&&moduleConfig.textStyle.fontWeight!==undefined">
+
+                    <el-select v-model="moduleConfig.textStyle.fontWeight"
+                               placeholder="请选择对其方式"
+                               filterable
+                               clearable
+                    >
+                        <el-option label="正常字体" value="normal"/>
+                        <el-option label="字体加粗" value="bold"/>
+                    </el-select>
+
+                </el-form-item>
+
+            </el-col>
+        </el-row>
+    </el-form>
+</template>
+
+<script>
+    import * as API_NurseConfig from '@/api/ncs_nurse_config'
+    import * as API_Board from '@/api/ncs_board'
+    import * as API_BoardItem from '@/api/ncs_board_item'
+    export default {
+        props:['moduleConfig'],
+        name: "moduleConfig",
+        data(){
+            return {
+                formmodel:{...this.moduleConfig},
+                dataFields:[{
+                    label: '科室信息',
+                    options: [{display: '科室名称', value: 'part.name'}]
+                }, {
+                    label: '患者信息',
+                    options: [{display:'床位号',value:'patient.frame_bed_name'},
+                        {display:'床位号全称',value:'patient.frame_bed_full_name'},
+                        {display:'患者姓名',value:'patient.named'},
+                        {display:'患者性别',value:'patient.sex'},
+                        {display:'患者年龄',value:'patient.age'},
+                        {display:'责任医生',value:'patient.doctor_name'},
+                        {display:'责任护士',value:'patient.nurse_name'},
+                        {display:'入院日期',value:'patient.in_date'},
+                        {display:'住院号',value:'patient.card_no'}]
+                },
+                    {
+                        label: '系统信息',
+                        options:[{display:'系统时间',value:'system.date'}]
+                    }
+
+
+
+                ],
+                nurseConfigs:[],
+                icons:[{
+                    label: '床位图标',
+                    options: [{display: '床位图标1', value: 'icon-Bed'},{display: '床位图标2', value: 'icon-Bed1'},{display: '床位图标3', value: 'icon-Bed2'},{display: '床位图标4', value: 'icon-bed'}]
+                },{
+                    label: '医生图标',
+                    options: [{display: '医生图标1', value: 'icon-yisheng'},{display: '医生图标2', value: 'icon-yisheng1'},{display: '医生图标3', value: 'icon-yisheng2'},{display: '医生图标4', value: 'icon-a-pinpaiyisheng2x'}]
+                },{
+                    label: '护士图标',
+                    options: [{display: '护士图标1', value: 'icon-hushi'},{display: '护士图标2', value: 'icon-nvhushi1'},{display: '护士图标3', value: 'icon-user-nurse'},{display: '护士图标4', value: 'icon-hushi-01'}]
+                }],
+                //自定义看板项
+                boardItems:[]
+
+            }
+        },
+        watch: {
+            moduleStyle(val, oldvalue) {
+                console.log('val',val)
+            }
+        },
+       async mounted() {
+            console.log('moduleConfig',this.moduleConfig)
+            this.getNurseConfigsByPartId()
+            this.getPartStatisticSummary()
+            this.boardItems = await API_BoardItem.getPartList(this.$store.getters.partId)
+        },
+        methods:{
+            colorChange(val){
+                console.log(this.moduleConfig)
+            },
+            getNurseConfigsByPartId(){
+                API_NurseConfig.getNurseConfigsByPartId(this.$store.getters.partId).then(res=>{
+                    this.nurseConfigs=[...res]
+                    let nurseSelect ={
+                        label:'护理参数',
+                        options:this.nurseConfigs.map(item=>{
+                            return {display:item.config_name,value:'nurse_config_'+item.id}
+                        })
+                    }
+                    console.log('nurseSelect',nurseSelect)
+                    this.dataFields.push(nurseSelect)
+                })
+            },
+            getPartStatisticSummary(){
+                API_Board.getPartStatisticSummary(this.$store.getters.partId).then(res=>{
+                    let summary = {...res}
+                    let statistic ={
+                        label:'统计信息',
+                        options:Object.keys(summary).map(item=>{
+                            return {display:item,value:'statistic_'+item}
+                        })
+                    }
+                    this.dataFields.push(statistic)
+                })
+            }
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>