|
|
@@ -10,7 +10,20 @@
|
|
|
:pagination="false"
|
|
|
:loading="loading"
|
|
|
@change="handleTableChange"
|
|
|
- />
|
|
|
+ >
|
|
|
+
|
|
|
+ <div slot="dxs" class="dx-render" slot-scope="value" style="">
|
|
|
+ <div class="value">
|
|
|
+ {{ value }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="bg"
|
|
|
+ :style="{'width': value+'%'}"
|
|
|
+ />
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </a-table>
|
|
|
<!-- table区域-end -->
|
|
|
<!-- 表单区域 -->
|
|
|
</div>
|
|
|
@@ -43,6 +56,7 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.getData()
|
|
|
+ window['tis'] = this
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
@@ -75,6 +89,47 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style scoped>
|
|
|
-@import '~@/assets/less/common.less'
|
|
|
+<style scoped lang="scss">
|
|
|
+.screen-common-wrap {
|
|
|
+ ::v-deep {
|
|
|
+ tbody {
|
|
|
+ td {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .dx-render {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: linear-gradient(to right, orange 50%, rgb(255, 238, 205) 99.99%);
|
|
|
+ position: absolute;
|
|
|
+ z-index: 0;
|
|
|
+ top: 0;
|
|
|
+ left: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|