123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463 |
- <template>
- <div>
- <div
- :key="index"
- v-for="(item,index) in content"
- >
- <p class="slave-relation-title">{{item.GraphTypeName}}</p>
- <section
- :key="child.GraphTypeId"
- class="container"
- v-for="(child,childIndex) in item.ChildGraphicTypeList"
- >
- <p class="relation-text">
- {{child.GraphTypeName}}
- <span class="pic-code">图类型编码:{{child.GraphTypeCode}}</span>
- <el-tooltip
- :content="child.Note"
- placement="top">
- <i
- @click="explain"
- class="icon-shuoming iconfont"
- />
- </el-tooltip>
- </p>
- <el-row :gutter="24">
- <el-col
- :key="relation.Id"
- :span="8"
- v-for="(relation,relIndex) in child.RelationTypeProjectList"
- >
- <el-card
- class="card"
- shadow="hover"
- style="position: relative;"
- >
-
-
- <div style="overflow: hidden">
- <el-tooltip
- :content="relation.RelationTypeName"
- placement="top"
- >
- <p class="relation-title reset-test reset-title">{{relation.RelationTypeName}}</p>
- </el-tooltip>
- <el-tooltip
- :content="relation.RelationTypeCode"
- placement="top"
- >
- <p class="asc reset-title reset-test">边类型编码:{{relation.RelationTypeCode}}</p>
- </el-tooltip>
- <p class="relation-title-icon reset-test fr">
- <el-tooltip
- :content="relation.Note"
- placement="top"
- style="z-index: 3;position:relative;"
- >
- <i class="iconfont icon-warn icon"/>
- </el-tooltip>
- </p>
- </div>
- <article>
- <el-row>
- <el-col :span="13" >
- <div class="grid-content">
- <p class="object">主要连接对象</p>
- <el-tooltip
- :content="relation.ConneObject"
- placement="top"
- >
- <p class="group reset-title">{{relation.ConneObject}}</p>
- </el-tooltip>
- </div>
- </el-col>
- <el-col :span="1">
- <div class="grid-content">
- <p class="thread"></p>
- </div>
- </el-col>
- <el-col :span="10">
- <div class="grid-content ">
- <p class="line-number">连接数量</p>
- <p :class="relation.count > 1? 'line-number-show' :'line-number-hide'">{{relation.count}}</p>
- <p class="last-computed">
- <span v-show="relation.ComputationalState === 3 || relation.ComputationalState === 4">关系计算中...</span>
- <span v-show="relation.ComputationalState === 5">计算失败</span>
- <span v-show="relation.ComputingTime">最后一次计算时间 {{relation.ComputingTime}}</span>
- <el-tooltip
- content="启动计算"
- placement="top"
- >
- <el-badge
- class="item float-right"
- :is-dot="relation.ComputationalState === 2"
- >
- <el-button
- @click="computed(relation)"
- :disabled="!relation.IsSource && !relation.IsAutomatic"
- circle
- type="primary"
- plain
- icon="iconfont icon-changyongtubiao-mianxing-"
- >
-
- </el-button>
- </el-badge>
- </el-tooltip>
- <el-tooltip
- content="手动编辑"
- placement="top"
- >
- <el-button
- :disabled="relation.Manual === 1"
- :style="{'border':(relation.Manual=== 1? '1px solid #DCDFE6' :'')}"
- @click="manual(relation)"
- circle
- class="float-right"
- type="primary"
- plain
- icon="iconfont icon-bianji"
- >
- </el-button>
- </el-tooltip>
- <el-tooltip
- content="设定设备对象源/末端"
- placement="top"
- v-if="relation.IsSource"
- >
- <el-button
- @click="equipment"
- type="primary"
- plain
- circle
- class="float-right"
- icon="iconfont icon-23 "
- style="transform: rotate(90deg);"
- >
- </el-button>
- </el-tooltip>
- </p>
- </div>
- </el-col>
- </el-row>
- </article>
- </el-card>
- </el-col>
- </el-row>
- </section>
- </div>
- <RelationMaintain
- :values="values"
- :source="source"
- ref="maintain"
- :isComputed="isComputed"
- :ManualMaintenance="ManualMaintenance"
- :TableVisibleMoreLoading="TableVisibleMoreLoading"
- @template="templateDown"
- @openComputed="openComputed"
- @RelationType="RelationType"
- />
- </div>
- </template>
- <script>
- import RelationMaintain from './Modal/RelationMaintain'
- export default {
- name: "cardList",
- props: {
- content: Array,
- source: Array,
- TableVisibleMoreLoading: Boolean
- },
- data() {
- return {
- values: {
- title: '关系维护',
- cancel: '取消',
- confirm: '确定',
- back: '返回',
- promptly: '立即计算',
- placeholder: '请选择',
- download: '下载模板(含数据)',
- done: '完成',
- underDesign: '高级配置页面正在设计中。。。',
- autoComputed: '根据现有数据自动计算',
- existComputed: '根据现有数据自动计算',
- existTitle: '计算方向使用的源端和末端如下:',
- originEquipment: '源端设备类:',
- endEquipment: '末端设备类:',
- device: '',
- tips: '',
- optionTips: '',
- currentNum: '当前关系数量:',
- lastTime: '',
- uploadTxt: '将Excel文件拖到此处,或<em>单击上传Excel文件<em>',
- uploadTips: '上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)',
- inHand: '数据文件处理中...',
- dataFailed: '数据文件验证失败',
- allUpdateSuccess: 'xxxx全部更新成功',
- portionUpdateSuccess: ' xxxx关系部分更新成功',
- downloadFile: ' 下载报告文件'
- },
- isComputed: {},
- ManualMaintenance: {},
- }
- },
- computed: {},
- methods: {
- explain() {
-
- },
- RelationType() {
- this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
- },
- computed(relation) {
- this.isComputed = relation
- this.$emit('calcSpecial', relation)
- if (relation.IsSource) {
- this.values.existComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
- this.$refs.maintain.dialogTableVisibleMore = true
- } else {
- this.values.autoComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
- this.$refs.maintain.dialogTableVisible = true
- }
- },
- equipment() {
- this.$refs.maintain.dialogEquipment = true
- },
- manual(relation) {
- let {Manual, Prompting, RelationTypeName, ComputingTime} = relation;
- let device = Prompting && Prompting.split(','),
- tips = `请前往以下功能页面维护 <${RelationTypeName}>`,
- optionTips = `请下载最新最新 <${RelationTypeName}> 数据进行手动维护`,
- lastTime = `最后更新时间为 ${ComputingTime ? ComputingTime : ''}`
- if (Manual === 2) {
- this.values = {...this.values, device, tips}
- this.$refs.maintain.dialogManualTip = true
- }
- if (Manual === 3) {
- this.values = {...this.values, optionTips, lastTime}
- this.$refs.maintain.dialogManualOption = true
- }
- this.ManualMaintenance = relation
- },
- templateDown() {
- this.$emit('template')
- },
- openComputed(result) {
- this.$emit('openComputed', result)
- },
- },
- components: {RelationMaintain}
- }
- </script>
- <style lang="less" scoped>
- @color-text: #333;
- @font-big: 600;
- @font-small: 12px;
- @font-code: #AAAAAA;
- @pos-relative: relative;
- @pos-absolute: absolute;
- @pos-zero: 0;
- @5px: 5px;
- .slave-relation-title {
- color: @font-code;
- font-weight: 600;
- border-bottom: 1px dashed @font-code;
- padding-bottom: @5px;
- }
- .container {
- @media (max-width: 1366px) {
- .relation-title {
- max-width: 160px;
- }
- .group {
- white-space: normal !important;
- }
- .asc {
- max-width: 108px;
- }
- .thread{
- margin-left: 5px !important;
- }
- /deep/.el-card__body {
- padding: 18px !important;
- }
- }
- .el-row {
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- .el-col {
- border-radius: 4px;
- }
- .grid-content {
- border-radius: 4px;
- min-height: 36px;
- .thread {
- border-left: 1px solid @font-code;
- margin-left: 10px;
- min-height: 36px;
- margin-top: 6px;
- }
- }
- .row-bg {
- padding: 10px 0;
- background-color: #f9fafc;
- }
- .reset-title {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .reset-test {
- float: left;
- text-align: center;
- height: 40px;
- line-height: 40px;
- }
- .fr {
- float: right;
- }
- .el-card {
- margin: 10px 0;
- }
- .relation-text {
- overflow: hidden;
- margin-top: 10px;
- color: @color-text;
- border-left: 8px solid @color-text;
- text-indent: 10px;
- font-weight: @font-big;
- .pic-code {
- font-size: @font-small;
- color: @font-code;
- margin-left: @5px;
- font-weight: 400;
- }
- }
- .card {
- position: @pos-relative;
- .mask {
- background: rgba(255, 255, 255, .6);
- position: @pos-absolute;
- top: @pos-zero;
- left: @pos-zero;
- right: @pos-zero;
- bottom: @pos-zero;
- user-select: none;
- z-index: 2
- }
- }
- .relation-title {
- font-size: 20px;
- font-weight: @font-big;
- margin-right: 10px;
- .icon {
- display: block;
- float: right;
- color: #555;
- font-size: 18px;
- }
- }
- .relation-title-icon {
- font-size: 20px;
- font-weight: @font-big;
- overflow: hidden;
- .icon {
- display: block;
- float: right;
- color: #555;
- font-size: 18px;
- }
- }
- .asc {
- font-size: @font-small;
- color: @font-code;
- }
- .object {
- font-size: @font-small;
- color: @font-code;
- font-weight: @font-big;
- }
- .group {
- color: @color-text;
- font-weight: @font-big;
- }
- .line-number {
- font-size: @font-small;
- color: @font-code;
- font-weight: @font-big;
- }
- .line-number-show {
- color: @color-text;
- font-weight: @font-big;
- }
- .line-number-hide {
- color: @font-code;
- font-weight: @font-big;
- }
- article {
- overflow: hidden;
- }
- .last-computed {
- overflow: hidden;
- color: @font-code;
- .float-right {
- float: right;
- margin-left: @5px;
- }
- /deep/ .is-dot {
- margin-top: 7px;
- margin-right: @5px;
- }
- }
- }
- </style>
|